Hjelp til påbegynning av CSS

Garreth · 17. desember 2004

Jeg har holdt på med webdesign en god stund, og har egentlig bare brukt flash og dreamweaver til å lage sider. Så nå vil jeg lære meg å bruke <div> og CSS.

Jeg har lest rundt på forskjellige tutorials om hvordan jeg skal bruke det, men jeg vet ikke helt hva som er den beste metoden for å posisjonere elementer på. Så før jeg lærer meg å bruke det feil så hadde det vært fint om noen kunne forklart meg litt.

Jeg har et eksempel her (skisse i photoshop ) på hvordan jeg vil at siden min skal se ut. (begynner enkelt til jeg har lært meg css skikkelig)

Hvordan skal posisjoneringen se ut? Siden blir jo i 3 deler:

<div id="bilde">
<div id="meny">
<div id="tekst">

Håper noen gidder å ta seg tid til å svare meg.

PoleCat · 17. desember 2004

<div id="wrap">
 <div id="header"></div>
 <div id="left"></div>
 <div id="right"></div>
</div>

body {
 text-align: center;
 background: url("faux.gif") top center repeat-y;
}

body, html {
 height: 100%;
}

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

#header {
 height: 100px;
 background: url("headerbilde.jpg");
}

#left {
 float: left;
 width: 150px;
}

#right {
 float: left;
 width: 250px;
}

Dette burde gi deg noe å begynne på.

Du pakker alle "boksene" inn i en container-div som midtsilles (text-align greiene er IE5-hack for å midtstille siden.)

For å få det til å se ut som de to kolonnene fyller hele skjermen benyttes Faux-columns for å simulere denne effekten. Du lager altså et 1px høyt bilde av de to kolonnene i sammen, som du sentrerer som bakgrunn på siden.

Garreth · 17. desember 2004

ah, tusen takk, skal prøve med en gang!

PoleCat · 17. desember 2004

Husk at det ikke er nødvendig å bruke div'er til alt, selv om mange gjør det. Ekstra markup er bare unødvendig kode.

Dersom bildet i toppen der skal være f.eks en logo, kan du enkelt gjøre dette om til h1-elementet av siden. Les om bilde-erstatning.

Dersom venstre kolonne bare skal inneholde en meny, kan du omgjøre denne div'en til en uordnet liste (ul), fordi menyer bør settes opp i lister.

Lykke til! :thumbup:

Garreth · 17. desember 2004

Har holdt på litt nå, og tror jeg er sånn halveis på rett vei ihvertfall, men nå står jeg litt fast.

Ta en titt på testen min.

Jeg har prøvd mange måter, men jeg klarer ikke å flytte #tekst containeren opp dit den skal. Jeg gjør det sikkert på feil måte. Hvis dere ser andre ting jeg gjør feil er det bare å rope ut :thumbup:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>
<link href="test.css" rel="stylesheet" type="text/css">

<div id="wrap">
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>

<div id="menu">
 <ul>
 <p><a href="#">MENY1</a></p>
 <p><a href="#">MENY2</a></p>
 <p><a href="#">MENY3</a></p>
 </ul>
</div>
<div id="tekst">
 <br></br>
 <p><h1>Lorem ipsum dolor sit amet.</h1> 
 	Pellentesque risus ligula, rhoncus at, dapibus ac, 
 	Aenean porta iaculis mauris. In est. In nisl. 
 	Vivamus vel nulla vitae elit venenatis blandit. 
 	Vestibulum sit amet urna. Sed faucibus sem.</p>
 </div>
</body>
</html>

CSS

/* CSS Document */
body {
text-align: center;
background: url("faux.gif") top center repeat-y;
}

body, html {
height: 100%;
}

#wrap {
width: 250px;
margin: 0 auto;
text-align: left;
}
#header {
height: 252px;
width: 630px;
background: url("bilde.jpg");
}
/*
------------------------------------------
menyen
------------------------------------------
*/
#menu {
padding-top:2px;
margin: 50;
padding: 60;
background-color: #00426c;
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #666666;
line-height: 14px;
text-decoration: none;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
line-height: 14px;
text-decoration: none;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
line-height: 14px;
text-decoration: underline;	
}
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
line-height: 14px;
text-decoration: underline;
}
/*
------------------------------------------
selve innholdet på siden
------------------------------------------
*/
h1 {
font-family:  Arial, Verdana, sans-serif;
font-size: 15px;
color: #666666;
font-weight: bold;
padding-top:5px;
padding-bottom:8px;
}

#tekst {
margin: 0;
padding: 0;
background-color: #D1E0E9;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #000000;
line-height: 14px;
text-decoration: none;
}
/*
------------------------------------------
sentrere?
------------------------------------------
*/
#left {
float: left;
width: 150px;
}
#right {
float: left;
width: 250px;
}

EDIT: Fant ut at

#right {
float: left;
width: 250px;
}

lagde et mellomrom mellom bildet og menyboksen. Dette ble borte ved å sette width 0px;

Edit2:

Sorry SirIce

Endret 18. desember 2004 av Garreth

Cucum(r) · 17. desember 2004

ta en titt på testen min her test

Må bare få ut litt aggresjon ang. mange av forumbrukerenes fattige evne til å angi en god linktekst.

I stedet for å skrive «ta en titt på testen min her test», kunne du skrevet «Ta en titt på testen min»

http://www.w3.org/QA/Tips/noClickHere

dan1el · 17. desember 2004

I stedet for å skrive «ta en titt på testen min her test», kunne du skrevet «Ta en titt på testen min

:fun:

Garreth · 17. desember 2004

slettet

Endret 18. desember 2004 av Garreth

Garreth · 21. desember 2004

Nå har jeg funnet en måte å få tekst boksen min dit jeg vil ha den, problemet er bare at resten av innholdet (menyboksen og bildet) alltid er sentrert uansett om du skalerer på vinduet. Tekst boksen står alltid på samme plass.

Jeg har brukt

#tekst {
position: absolute;
left: 475px;
top: 177px;
}

Jeg tror det er position: absolute; som gjør dette, men jeg klarer ikke å finne noen annen måte for å få den dit jeg vil.

Hvis du ser på siden min, og prøver å skalere litt på vinduet, så ser du sikkert hva jeg mener.

Edit:

Hvis du ser på screenshot-et mitt, så har jeg prøvd å forklare med litt tegning og tekst på hvordan jeg prøver å få det til å se ut.

link til css-fil

Endret 21. desember 2004 av Garreth

Arve Systad · 21. desember 2004

Ang. koden din:

Du skal ikkje la <ul> inneholde <p>.

<ul>

<li>innhold</li>

</ul>

er riktig.

Dessuten har du brukt <br> for å skape mellomrom - bruk marger (i CSS) til dette.

<p> kan heller ikkje inneholde <h1>

Endret 21. desember 2004 av arve87

Garreth · 21. desember 2004

Huff, ser det nå. Har lagt opp en ny oppdatert fil på serveren. Har også lagt til

body {
text-align: center;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

i css koden.

Dette gjorde at jeg fikk bildet helt opp i toppen ihvertfall. Men har fremdeles problemer med å få både meny boksen og tekst boksen til å gå helt ned (100%)

Endret 21. desember 2004 av Garreth

Cucum(r) · 21. desember 2004

Du skal ikkje la <ul> inneholde <p>.
<ul>
<li>innhold</li>
<li>innhold</li>
<li>innhold</li>
</ul>

Men så må det påpekes at det ikke er fyfy å ha p inni li, så en liste kan godt inneholde andre elementer enn li.

Arve Systad · 21. desember 2004

Du skal ikkje la <ul> inneholde <p>.
<ul>
<li>innhold</li>
<li>innhold</li>
<li>innhold</li>
</ul>
Men så må det påpekes at det ikke er fyfy å ha p inni li, så en liste kan godt inneholde andre elementer enn li.

Det stemmer jo, men fortsatt så kan ikkje du la <p> vere child rett i <ul>

Litt meir info

Endret 21. desember 2004 av arve87

Garreth · 21. desember 2004

foreløpig ( ) trenger ikke html koden min å være helt perfekt, jeg vil heller få til css kodingen helt, før jeg begynner å se mer på html og innholdet.

Jeg setter stor pris på om noen orker å ta seg bryet med å se på posisjoneringen jeg har gjort av de 3 elementene jeg har på siden min. (Bildet, meny boks, og tekst boks) og se hvordan jeg best mulig kan løse dette slik at det ser mest mulig likt ut i de fleste browsere (IE6, FF og Opera osv)

Garreth · 22. desember 2004

Nå har jeg endelig skjønnt at jeg måtte ha et bakgrunnsbilde med de to boksene (#tekst og #menu) for å få siden til å virke 100% i høyden. :w00t:

Problemet nå, er at resten av innholdet ikke ser ut som det er sentrert + at siden ser helt annerledes ut i FireFox.

Link til html-fil.

Link til css-fil.

Er det noen som ser hva jeg har gjort galt?

Edit:

Jeg prøvde å gjøre alt på nytt, og det ser egentlig bedre ut, men selve #tekst boksen kommer under meny boksen. (nå heter de #left og #right for å følge PoleCat sitt eksempel bedre)

Link til ny html-fil.

Link til ny css-fil.

Edit3:

Oh man, jeg vet ikke helt hvorfor, men jeg hadde satt #right width til 480px, men når jeg satte den til 430px så spratt den opp dit jeg ville ha den.

(for de som ikke skjønnte helt, siden min er 630px bred, meny boksen er 200px og derfor må tekst boksen min være 430px)

Problemet mitt nå er å få til å bruke padding på teksten. Hvis jeg setter padding: 5px; i #right, så hopper tekst boksen under menyen igjen. Må jeg bruke en annen <div> til selve tekst innholdet?

Endret 22. desember 2004 av Garreth

PoleCat · 22. desember 2004

Padding legges til på bredden (ikke IE5), derfor blir det slik. Dersom tekst-boksen din til sammen skal være 430px, kan du gjøre slik:

#right {
 width: 420px !important;
 width /**/ : 430px; /* leses kun av IE5 */
 padding: 5px;

420px bredde + 10px padding (5px på hver side) = 430px :thumbup:

Garreth · 22. desember 2004

Yes! nå fikk jeg det til! Tusen takk PoleCat.

Jeg har tenkt å ha muligheten til å skifte #header bildet til hver side. Jeg har sett litt på bildeerstatning ved bruk av h1 tag.

PoleCat sin artikkel om bildeerstating.

Er dette rett bruk til mitt formål? Jeg må selv kunne bestemme hvilket header bilde som skal vises på hver enkelt html side. Eller er det en annen måte å gjøre dette på? (Header bildet kommer alltid til å være 630px bredt og 252px høyt)

(Hvis jeg har forstått det riktig, så viser css-en alltid det samme bildet, helt til jeg forandrer selve css-en)

PoleCat · 22. desember 2004

Du kan alltids bruke klasser for de forskjellige headerene:

h1 {
 ...
}

h1.ku {
 background-image: url("ku.png");
}

h1.elg {
 background-image: url("elg.png");
}

<h1 class="ku">Sidetittel</h1>

Jeg vil påstå at h1 er riktig å bruke her i ditt tilfelle ja.

Garreth · 22. desember 2004

Flott, da prøver jeg å gjøre som forklart i artikkelen din

Hjelp til påbegynning av CSS

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Hvem er aktive 0 medlemmer