Fra skisse til side

[harrir]

Holder på å lage en webside som del av et prosjekt i mediefaget på skolen og nå sitter jeg litt fast.

Jeg skal få dette pene og nette skissa av sida om til html og css. Har vist jeg mye lettere sagt en gjort.

 

Nå har jeg prøvd en stund med forskjellige teknikker og prøvd en del forskjellig, men finner ikke en bra måte å gjøre det på. Med en sematisk riktig markup, hvor designet ligger i cssen(som vi alltid streber etter). Det er jo ikke sikkert det er fullstendig mulig, men det er nok noen her som kan komme litt nærmere enn meg....en del nærmere:P

 

Det er vel hovedsakelig selve boksen, som har en gradient i bakgrunnen, og menyen, som egentlig må være picture only grunnet fonten, som er hodebryet her.

 

(har en versjon med mindre skygge på viss det var for mye)

 

Noen som har forslag og ideer, eller rett og slett fasiten?

Jeg er veldig åpen for alt;)

 

Edit: link

Endret 29. november 2007 av harrir

[hjahre]

Vel det er ikke så fryktelig vanskelig å gjøre noe med det. Hvis du bruker photoshop så slicer du opp designet som du vil ha det. Deretter velger du "save for web" eller hva det er i fil-menyen. Lagre bare bildene, resten fikser du med css.

Koden til sida kan se sånn her ut:

 

<div id="#wrap">
 <div id="#top"></div>
 <ul id="#menu">
   <li><a href="#"><img src="..." alt="Hjem"/></a></li>
   <li><a href="#"><img src="..." alt="Lorem"/></a></li>
   <li><a href="#"><img src="..." alt="Ipsum"/></a></li>
   <li>
<a href="#"><img src="..." alt="Dolor"/></a></li>
 </ul>
 <div id="#content">
   <!--innholdet ditt er her-->
 </div>
 <div id="#bottom"></div>
</div>

 

 

Cssen er ikke så vanskelig bare sette bredden på #wrap til bredden sida skal ha. Også ha display:block på #top, #menu, #content og #bottom. Men bare husk at du må sette riktig høyde på #top, #bottom og #content. Du kan også sette overflow: auto på #content. De bildene du skal ha i #top, #bottom og #content setter du som bakgrunn.

 

Håper dette hjalp litt

[harrir]

Vel det er ikke så fryktelig vanskelig å gjøre noe med det. Hvis du bruker photoshop så slicer du opp designet som du vil ha det. Deretter velger du "save for web" eller hva det er i fil-menyen. Lagre bare bildene, resten fikser du med css.

Koden til sida kan se sånn her ut:

 

<div id="#wrap">
 <div id="#top"></div>
 <ul id="#menu">
   <li><a href="#"><img src="..." alt="Hjem"/></a></li>
   <li><a href="#"><img src="..." alt="Lorem"/></a></li>
   <li><a href="#"><img src="..." alt="Ipsum"/></a></li>
   <li>
<a href="#"><img src="..." alt="Dolor"/></a></li>
 </ul>
 <div id="#content">
   <!--innholdet ditt er her-->
 </div>
 <div id="#bottom"></div>
</div>

 

 

Cssen er ikke så vanskelig bare sette bredden på #wrap til bredden sida skal ha. Også ha display:block på #top, #menu, #content og #bottom. Men bare husk at du må sette riktig høyde på #top, #bottom og #content. Du kan også sette overflow: auto på #content. De bildene du skal ha i #top, #bottom og #content setter du som bakgrunn.

 

Håper dette hjalp litt

 

etter å ha lest forslaget igjennom et par ganger gikk en pære på over hodet mitt...men så ble det til et spørsmålstegn. det du beskriver var egentlig noe av det jeg prøvde meg på, MEN.....hvordan det er best å slice?(lurer litt på om det er det jeg egentlig har lurt på hele tiden)

 

EDIT: det jeg finner vanskelig er bakgrunnen i boksen og skyggen. bakgrunnen bruker en gradient så en kan ikke bare ta en liten stripe av den som en ellers ville har gjort.

Endret 28. november 2007 av harrir

[arex1337]

Tips: Lag XHTML-en først, og kutt bilder etterpå

[harrir]

Update:

Da har jeg mekket litt fått det meste til [det er betryggende å vite at en ikke er helt retard:P], men det er mellomrom mellom menybildene og mellom rom mellom #meny og #content. vet ikke hvordan jeg får de vekk. og i tillegg vil ikke bildet som skal være i #top, altså headeren, til høyre uansett hvor mye jeg prøver.

 

(X)HTML

 

<div id="wrap">
<div id="top"></div>
<ul id="menu">
<li><a href="#"><img src="images/webdill_05.gif" alt="Hjem"/></a></li>
<li><a href="#"><img src="images/webdill_07.gif" alt="Lorem"/></a></li>
<li><a href="#"><img src="images/webdill_09.gif" alt="Ipsum"/></a></li>
<li><a href="#"><img src="images/webdill_11.gif" alt="Dolor"/></a></li>
</ul>
<div id="content">
Innhold her
</div>
<div id="bottom"></div>
</div>

 

 

CSS

 

@charset "utf-8";
/* CSS Document */

* {
margin: 0;
padding: 0;
}
html, body {height:100%;}

body {
text-align:center;
padding: 0;
margin:0;
}

#wrap {
width:1017px;
}

#top {
width:493px;
height:112px;
background-image: url(images/webdill_02.gif);
background-repeat: no-repeat;
background-position: right;
}

#menu li {
display:inline;
list-style:none;
padding:0;
margin:0;
}

#menu ul {
border-bottom:solid thin #204097;
padding:0;
margin:0;
}

#content {
background: url(images/webdill_12.gif) no-repeat;
height:520px;
}

#bottom {
background: url(images/webdill_13.gif) no-repeat;
height:42px;
}

#top, #menu, #content, #bottom {
display:block;
}

#menu img {
padding:0;
margin:0;
border:0;
}

 

[Anders Moen]

Harrir: når du ikke kutter ut bildene selv, men skriver koden, så vil jeg tro at det blir vanskelig for trådstarter og gjøre det selv...

Men er det ikke en sånn ting i..ikke Photoshop, men den andre som er med, som har den slice-funksjonen så får du det ferdig koda? (selv om det ikke er den beste koden)

 

(har en versjon med mindre skygge på viss det var for mye)

Det var kanskje litt mye ja

 

Edit: typo

Endret 29. november 2007 av Anders Moen

[arex1337]

Hvis du poster en link til nettsiden, får du nok fortere/mer hjelp.

[harrir]

link

[Demantios]

Skal vel funke om du bruker float på linkene for å samle dem og relative position på content

[Torjus]

Halla Harald

 

Sleng på:

 

margin: 0 auto;

 

hvis du vil midtstille sida.

[arex1337]

Presisering: på #wrap. Altså:

#wrap {
text-align:left;
width:1007px;
margin: 0 auto;
}

Endret 29. november 2007 av arex1337

[harrir]

thnx, arex1337 & fuzzy.