Fra design til webside - Hjelp i CSS

OscarWoHA · 15. juli 2004

### Ettersom denne tråden endret seg var dette urelevant info (slettet) ###

Endret 15. juli 2004 av CobraM

Haraldson · 15. juli 2004

Du får prøve, da vettu. Learning by doing, og alt det der.

Trenger vel strengt tatt ikke slice headeren i to, men det kan du gjøre som du vil med

OscarWoHA · 15. juli 2004

### Ettersom denne tråden endret seg var dette urelevant info (slettet) ###

Endret 15. juli 2004 av CobraM

johanf · 15. juli 2004

alle table-hatere, unite!

Jeg er ikke noen ekspert, men jeg er nesten 100% sikker på at du vil få beskjed om å bruke div'er. www.w3schools.org kan lære deg litt om HTML og CSS. Andre på forumet kan gi deg inspirasjon og du kan lese brukt kode for å se hvordan det funker.

Sjekk www.absentvoid.com og www.demoted.org - disse brukte jeg til min side. Den er veldig enkel, men du jan sjekke koden til den - www.delusory.net

_

johanf

OscarWoHA · 15. juli 2004

### Ettersom denne tråden endret seg var dette urelevant info (slettet) ###

Endret 15. juli 2004 av CobraM

OscarWoHA · 15. juli 2004

Tittet litt på CSS. Ser ikke så vankelig ut faktisk. Er godt i gang nå. Kommer med oppdateringer etterhvert.

Haraldson · 15. juli 2004

Tittet litt på CSS. Ser ikke så vankelig ut faktisk. Er godt i gang nå. Kommer med oppdateringer etterhvert.

That's the spirit! :w00t:

..og nei, det er ikke så veldig vanskelig egentlig. Enkelt når man kan det

*Markere av CobraM på konverteringslista.

OscarWoHA · 15. juli 2004

*juble*

Klart å få til en header. Driver med menyen nå.

EDIT: Deilig å slippe den rotete table-koden.

Endret 15. juli 2004 av CobraM

johanf · 15. juli 2004

hehe - skal bli morsomt å se koden ... jeg ble selv imponert over hvor ren koden blir, når man går over fra tables til div.

_

johanf

OscarWoHA · 15. juli 2004

Lagt opp siden på nettet.

index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Finn fem feil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">
 	<div id="header"></div>
 	<div id="menu"></div>
 	<div id="content" class="main">
 	<p>asdfasdfasdfasdfasfd</p>
 	<p>asdfasdfasdfasdfaso2u3745928345+98234750982374509283475092834750293847502938475029384750293487509238475fd</p>
 	<p>asdfasdfasdfasdfasfd</p>
 	<p>asdfasdfasdfasdfasfd</p>
 	<p>asdfasdfasdfasdfasfd</p>
 	<p>asdfasdfasdfasdfasfd</p>
 	<p>asdfasdfasdfasdfasfd</p>
 	<p>asdfasdfasdfasdfasfd</p>
 	<p>asdfasdfasdfasdfasfd</p>
 	<p>asdfasdfasdfasdfasfd</p>
 	<p>asdfasdfaaw245223452345fasfd</p>
 	<p>asdfasdfasdfasdfasfd</p>
 	<p>asdfasdfasdfasdfasfd</p>
 	<p>asdfasdfasdfasdfasfd</p>
 	<p>asdfasdfasdfasdfasfd</p>
 	</div>
</div>

</body>
</html>

style.css

/* CSS Document */
html, body, table {
background-color:4F4F4F;
color:#8BB17A;
font-family:Tahoma, Verdana, Arial, sans-serif;
font-size:small;
}

#container {
margin:1em auto;
width:500px;
}

#header {
background-image: url(../images/design_01.gif);
background-repeat:no-repeat;
height:118px;
width:500px;
margin:0 auto;
}

#content {
background-color:#4F4F4F;
border:0px;
float:right
width:425px;
}

#menu {
background-image: url(../images/design_02.gif);
background-repeat:no-repeat;
height:369px;
width:75px;
float:left
}

Det begynner å ligne på noe, men som dere ser er det noen åpenbare feil. Hva er galt?

halvardm · 15. juli 2004

Hvis jeg ikke er på villspor nå må du ha position: absolute;

F.eks:

#header {
background-image: url(../images/design_01.gif);
background-repeat:no-repeat;
height:118px;
width:500px;
margin:0 auto;
position:absolute;
}

OscarWoHA · 15. juli 2004

Det hjalp ikke. Nå kom alt inn i hverandre.

Arve Systad · 15. juli 2004

position: absolute er absolutt ikkje nødvendig her.

#header trenger ikkje margin i det heile tatt. Sjøl om den er satt til 0 auto

Og så vil eg berre minne deg på en ting, sjøl om du er i opplæringsfasen (tidlig krøkast som god krok skal bli), headeren din trenger ikkje å vere en div - den bør aller helst vere et h1-element for at det skal vere semantisk

Berre bytt ut element-typen du - du kan style overskrifter på lik linje med div, men da må du huske å sette margin og padding til 0 (null).

OscarWoHA · 15. juli 2004

Takk for hjelp, Arve.

Dessverre ser det fortsatt likt ut.

style.css

h1 {
background-image: url(../images/design_01.gif);
background-repeat:no-repeat;
height:118px;
width:500px;
margin:0;
padding:0;
}

EDIT:

index.php

body>
<div id="container">
<h1></h1>
 	<div id="menu"></div>
 	<div id="content" class="main">
 	<p>asdfasdfasdfasdfasfd</p>
 	</div>
</div>

</body>

Blir det riktig med <h1>-taggen som jeg satt den?

Endret 15. juli 2004 av CobraM

OscarWoHA · 15. juli 2004

Fant feilen

#content {

background-color:#4F4F4F;

border:0px;

float:right <-- Her mangler det noe, ja

width:425px;

}

Men teksten går langt utenfor om jeg skriver lange linjer. Det vil jeg helst slippe

Noen som har noe lure knep for å få den venstre menyen til å fortsette å bli grå etterhvert som jeg skriver?

halvardm · 15. juli 2004

Tipper det er fordi du har kanskje 200 f'er etter hverandre.. Prøv med litt www.lipsum.com du...

OscarWoHA · 15. juli 2004

Hehe. Ja, der sa du noe.

Prøver å lage en meny nå. Gøy med nye utfordringer.

Endret 16. juli 2004 av CobraM

OscarWoHA · 16. juli 2004

Sjekk siden nå. Menyen vil jeg ha noen pixler lenger til høyre. Hva må jeg gjøre?

halvardm · 16. juli 2004

Mener du slik:

margin-left: 10px;

?

OscarWoHA · 16. juli 2004

Jepp. Takk! *gi en klem*

Se så fin og oversiktlig koden ble nå med CSS. Takk johanf som fikk meg på bedre tanker.

Fra design til webside - Hjelp i 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

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer