HTML & CSSur HTML, XHTML & CSS
39 svar · 2 036 visningar · startad av mackanz
Jag har gett mig i kast med att fixa en hemsida med css efter konstens alla regler
Dock undrar jag lite över marginaler. Har testat fram och tillbaka men får det inte att se ut som jag vill.
Det jag vill är att topbilden och knapparna under håller ihop.
Jag har testat det mesta med marginaler och padding på den topboxen.
vad ska jag göra???
display:block på bilden
en sak du kan tänkta på att div:en inte behöver ha en bredd på 100%, det har den redan (tänker på din #header)
om du skall koda xhtml så skall du inte heller ha stora bokstäver på några av dina element + alla element skall avslutas (tänker på din <br> element).
Okej rättar den sig efter den som jag satt till 780px??
Tackar voigtann1 då vet jag. Jag har ju mest använt färdiga templates förut men tänkte att man måste ju försöka få lite förståelse för hur det funkar och kunna skapa något eget.
Om du har en wrapper som är 780px så alla block element som är barn till det element kommer bli 780px (100% av ens förälder)
Fuel: Hur menar du med display:block jag testade göra en class för bilderna i menyn som jag satte display block på men det hjälpte inte. Då blev dom staplade på varandra.
Jag vill ju sammanfoga hela toppen så det som ser ut som en hel bild.
Antar att det finns fler element till diplaytaggen.
Sedan kan du även passa på att validera din sida!
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.hogtryck.ax%2F2010%2F&charset=(detect+automatically)&doctype=Inline&group=0
(Vid skrivande stund har du 99 fel så du har lite att göra)
Jo jag vet där med valideringen men alla är vi barn i början eller???
Just nu koncentrerar jag mig på att få sidan att se ut som den ska.
Eller i alla fall på en grundmall som jag kan använda mig utav.
Sen får jag beta av valideringen.
Edit: Validation Output: 38 Errors
Fuel: Hur menar du med display:block jag testade göra en class för bilderna i menyn som jag satte display block på men det hjälpte inte. Då blev dom staplade på varandra.
Jag vill ju sammanfoga hela toppen så det som ser ut som en hel bild.
Antar att det finns fler element till diplaytaggen.
display:block fipplar bort mellanrummet mellan header-bilden och menyn :)
För att hålla ihop bilderna i menyn kan du sätta:
#header a {
display:block;
float:left;
}
nidron: Tackar tackar. Nu ser det ju nästan ut så som jag vill ha det
Nu håller jag med valideringen av sidan.
Det är ju skitkul detta :)
Jo jag vet där med valideringen men alla är vi barn i början eller???
Just nu koncentrerar jag mig på att få sidan att se ut som den ska.
Eller i alla fall på en grundmall som jag kan använda mig utav.
Sen får jag beta av valideringen.Edit: Validation Output: 38 Errors
Absolut, tänkte mest det kunde vara bra som hjälpmedel då du skrev att du skulle göra det enligt konstens alla regler.
compusa: Ja jag tänkte vara ordentlig av mig. Och nu förstår jag mer och mer hur allt hänger ihop, och hur man bör göra och inte göra.
nidron: Tackar tackar. Nu ser det ju nästan ut så som jag vill ha det
np :)
Nu håller jag med valideringen av sidan.
Håller med Compusa, att kontrollera att sidan validerar med jämna mellanrum kan minimera antalet utseende-fel, åtminstone i IE :)
Det är ju skitkul detta
Oh, I know :birp
Nu validerar den rätt hos mig i alla fall :)
This document was successfully checked as XHTML 1.0 Strict!
Lite funderingar för att du ska komma en bit till i css-tänket...
En sak är att försöka få bort så mycket som möjligt av "design" i koden.
Och jag tycker att din logga hör dit.
Dessutom tror jag att du kommer få lite svårt med att utveckla din meny om du har den i header-diven.
Så mitt förslag blir att du delar upp det i en header-div och en meny-div. Och då kan din header bli så här:
#header{
position:relative;
height:131px;
background:url(bilder/top.gif) no-repeat ;
width:100%;
margin: 0px;
padding: 0px;
}
För att sedan få din meny där du vill ha den utan mellanrum ska det räcka med att lägga till
#menu img {
float:left;
}
Jag gissar att du väldigt sällan kommer vilja ha border på dina bilder så i stället för att ha en class på varje bild så kan du lägga till
img {
border: 0px;
}
<div id="header">
</div>
<div id="menu">
<a href="index.asp"><img src="knapp_start.gif" alt="Startsidan" /></a>
osv...
</div>
Om du sedan börjar fundera på att ha menyn i en lista och ha hover-effekter så kan du fortsätta med att plocka bort bilder i html-koden och ha dem som bakgrundsbilder i css-filen... och då som classer.
Hejsan!
Tack för dina åsikter och förslag.
Ang bilder så kommer jag att vilja ha olika klasser för bilder eftersom jag kommer att ha ramar på en del bilder. Därför kommer jag ha lite olika klasser för bilder.
Ang menyn måste den se ut så där eftersom det är ett speciellt typsnitt i menyn. Därför måste den bestå av bilder.
Men skall fundera på att splitta upp headern och lägga menyn för sig som du skriver.
Att använda classer på bilder är ofta onödigt...
Låt oss säga att du har ett galleri på dansbandsbilder...
och du vill ha en border på dem.
Det enklaste då är att lägga alla bilderna i en div... vi kallar den gallery
och då skapar vi ramen runt varje bild där med
#gallery img{border 1px solid #000;}
Här kan man då också lägga in marginaler och padding och float m.m. utan att behöva lägga till något i html-koden.
För att få bort border bara i menyn så kan du lägga till #header eller #menu framför den jag skrev som img så kan du radera classen i html-filen.
Aha nu förstår jag nog.
Man gör en class som t,ex ofattar något i en viss div.
Ja fast
#gallery img{border 1px solid #000;}
är ingen class.
Aha nu förstår jag nog.
Man gör en class som t,ex ofattar något i en viss div.
ID är ett unikt id till ett element & kan bara användas på 1 element på samma sida
CLASS kan du använda på flera element på samma sida