Sette opp en CSS side

[Torjus]

Jeg har lest bittelitt på CSS og HTML, men har ikke funnet noen plass hvor det står hvordan man sett opp en side som ser slik ut feks:

 

header

4 vertikale meny bilde knapper

tekst

footer

 

Hvordan koder man det liksom?

[Steinmann]

<h1>Header</h1>
<ul>
<li>Meny1
<li>Meny2
<li>Meny3
<li>Meny4
</ul>
<p>Lorem ipsum</p>
<p id="footer">Laget av ostore Orsus</p>

 

Det er html'n hvertfall.

Mulig du vil ha noen wraps osv.

Alt du trenger å gjøre er style dette med css.

[Torjus]

Er vel helst CSS delen jeg lurte på

[Cucum(r)]

body {
width: 600px;
margin: 0 auto;
border: 1px solid #ccc;
}
h1 {
display: block;
padding: 70px 0;
text-align: center;
background: green;
}
ul li {
display: block;
float: left;
}
ul li a {
padding: 5px;
border: 1px solid #ccc;
margin: 0 2px;
}
p {
clear: both;
display: block;
}
#footer {
padding: 50px 10px;
background: black;
color: white;
}

 

No er det svært lenge sidan eg har gjort noko som helst webutviklingsrelatert, men eg trur det der skal fungere på ein eller annan måte.

[mikk-]

Henrik: Man trenger vel strengt tatt ikke "display: block;" på H1, LI og P. Ville også ha brukt en DIV i stedet for P. Det kan jo hende man skal ha flere avsnitt.

[Steinmann]

P var det jeg som slang inn, og man kan fint ha flere p etter hverandre uten noen div rundt

[Haraldson]

P var det jeg som slang inn, og man kan fint ha flere p etter hverandre uten noen div rundt

Men det er ekstremt tungvint i forhold til å ha en div rundt som du kan stille marginer i forhold til osv.

[Jesper Karsrud]

Var det ikke Anne sin weblogg som ikke hadde en eneste div for en stund siden?

 

Litt off topic, men...

[Cucum(r)]

Var det ikke Anne sin weblogg som ikke hadde en eneste div for en stund siden?

 

Litt off topic, men...

Den "CSS-SUCKS!"-versjonen hadde ikkje eit einaste DIV-element. I den neste versjonen (den raude og kvite) var det èitt, og i den noværande er det heller ingen DIV-element.

[Jesper Karsrud]

Åja, stemmer det! Han har det i sin nåværende også, ja... Kanskje jeg skulle prøvd på det samme en gang... En liten utfordring, liksom

[Torjus]

body {
width: 600px;
margin: 0 auto;
border: 1px solid #ccc;
}
h1 {
display: block;
padding: 70px 0;
text-align: center;
background: green;
}
ul li {
display: block;
float: left;
}
ul li a {
padding: 5px;
border: 1px solid #ccc;
margin: 0 2px;
}
p {
clear: both;
display: block;
}
#footer {
padding: 50px 10px;
background: black;
color: white;
}

 

No er det svært lenge sidan eg har gjort noko som helst webutviklingsrelatert, men eg trur det der skal fungere på ein eller annan måte.

Blir menyen vertikal med det oppsettet?

[Jesper Karsrud]

En meny blir automatisk vertikal, det er når du skal ha den horisontal at du må inn med en del ekstra kode.

 

Edit: Kan jo nevne grunnen også da, selv om den er ganske så åpenbar. Menyen er en liste, og lister blir jo satt opp vertikalt, med mindre noe annet er spesifisert med CSS.

Endret 6. oktober 2005 av Jibril2k

[Torjus]

En meny blir automatisk vertikal, det er når du skal ha den horisontal at du må inn med en del ekstra kode.

Okey, lærer noe nytt hver dag

[Cucum(r)]

Åja, stemmer det! Han har det i sin nåværende også, ja... Kanskje jeg skulle prøvd på det samme en gang... En liten utfordring, liksom

http://dev.misinterpreted.org/exprimental/no-divs/v3/

http://dev.misinterpreted.org/exprimental/no-divs/v4/

 

[Dustwave]

http://css.maxdesign.com.au/listamatic/

[aeinstein]

http://css.maxdesign.com.au/listamatic/

Den var bare konge da! Selv om jeg kommer til å gjøre ting manuelt selv

[Pilot_]

http://css.maxdesign.com.au/listamatic/

Den var bare konge da! Selv om jeg kommer til å gjøre ting manuelt selv

Konge ja!

[Magnus Holm]

EDIT: Feil tråd

Endret 6. oktober 2005 av Judofyr

[Dustwave]

hehe.. den er utrolig kjekk for å lære om menyer i CSS, mange teknikker er forklart der + ferdige produkter for de som ikke tørr å begi seg ut på et kode-eventyr