kan noen peke ut alle mine feil? (css)

[phax]

Heihå, har snekret sammen et forsøk på en side med css! Er veldig nybegynner så bryr meg ikke så veldig om kommentarer på designet egentlig, gjør dette mest for å lære meg og bruke css. Og som den nybegynnern jeg er så er det sikkert endel alternativeløsninger ute å går her, så bare si ifra visst det er noe jeg burde gjort anderledes!

 

følgende problmer har jeg selv oppdaget;

- dobbel scrollbar med IE

- bakgrunn eller noe funker ikke som den skal i firefox.

- opera har jeg ikke testet, men tipper den ser fucked ut der også!

 

og ja også lurer jeg på hvordan jeg får linkene til og ha hoover effekt i hele firkanten, og ikke bare akkurat over skrifta (noen som skjønnte den?) det funker i firefox, men i IE sluttet det å funke av en eller annen grunn..

 

tja.. det var vel det, sleng ut alt dere måtte ha og komme med!

også må man ikke glemme det viktigste..

 

LINK

 

 

Edit: kan jo liksågreit slenge ut koden med engang!

/* CSS Document */

* {
margin : 0; 
padding : 0; 
} 
body {
font-family : tahoma, arial, sans-serif; 
font-size : 0.8em; 
color : #000; 
background: #D3CBBB;
height: 100%;
overflow: auto;
} 

html,body {
min-height : 100%; 
height: auto !important;
height: 100%;
}

#container {
width : 800px;  
margin : 0 auto; 
min-height : 100%; 
height: auto !important;
height: 100%;
background: url(images/bg.jpg) top center repeat-y;
} 

#header {
width : 800px; 
float : top; 
height : 159px; 
background: url(images/dx-header.jpg) top center no-repeat #D3CBBB;
margin-left: 0px;
} 

#content-container {
float : right; 
width : 585px;
}

#content-wrap {
width : 522px;
margin-left: 12px;
margin-right: 26px; 
margin-bottom: 20px;
background : url(images/content-bg.jpg) #fff;
} 
#content-bg {
width : 522px;
background: url(images/top-c-bg.jpg) top center no-repeat;
} 
#content-bg2 {
width : 522px;
background: url(images/bott-c-bg.jpg) bottom center no-repeat;
} 

#content {
margin-top: 15px;
margin-left: 40px;
margin-right: 40px; 
margin-bottom: 50px;
} 
#left-container {
margin-top: 0px;
margin-bottom: 0px;
float : left; 
width : 209px; 
}

#left-menu {
margin-top: 0px;
margin-bottom: 0px;
height : 226px;
width : 194px;
margin-left: 15px; 
background: url(images/bg-menu.jpg) no-repeat;
}

h2 {
font-size : 1.5em; 
color : #000; 
display : block; 
overflow : hidden; 
padding : 20px 0 0; 
height : 0 !important; 
height : 33px; 

} 

#menu {
list-style: none;
font-size: 0.8em;
}

#menu a {
line-height : 1.2em; 
font-size : 1.2em; 
padding : 8px 5px 8px 13px; 
list-style : none; 
margin-top : 0px; 
margin-right : 7px; 
margin-left : 7px; 
display : block; 
color : #B4A787; 
letter-spacing : 0.11em; 
text-decoration : none; 
} 
#menu a:hover {
background : #EFEFEF; 
text-decoration : none; 
color : #B4A787;
} 

Endret 21. oktober 2004 av phax

[FuLu]

Tror jeg fikk fikset problemene dine: http://home.chello.no/alexholm/hw.no/deks/

 

Endret en del av #content greiene om til klasser, siden du skal bruke dem flere ganger. Id'er skal bare brukes engang siden en ID er unik.

 

Ting jeg mener å ha fikset:

- :hover på meny skal fungere riktig i IE

- 100% opplegget i html, body, nå strekker det seg helt ned uansett nettleser

- ikke noe dobbelscrollbars, du brukte overflow: auto; som jeg ikke helt skjønte vitsen med

- måtte ha med en dummy <div style="clear: both"> </div> i bunnen av #container så bakgrunnen skulle strekke seg ned hele veien i FF

- diverse puss på CSS så content "vinduene" viste header og tekst riktig

 

Sikkert mange andre ting jeg ikke kom på nå

 

Edit: Glemte å nevne, den fungerer i Opera 7.54, IE6 og FF1.

Endret 21. oktober 2004 av FuLu

[phax]

tusen hjertelig!

 

kan du sende meg css'n så jeg ser hva du har endret på og forhåpentligvis lærer en lekse!

 

edit: nevermind, laster jo selvsagt bare ned css'n selv.. (for sent for hjernen idag!)

Endret 21. oktober 2004 av phax

[Marvil]

Den ligger på nettet da.. Link..

 

 

Edit: Oi, det hadde du funnet ut selv da.. Hadde ikke refreshet siden du edita, og ikke brukt det vindueet på en stund..

Endret 21. oktober 2004 av Marvil

[realfingolfin]

Noe jeg ikke skjønner: hvorfor har du repeat på background color?

[Arve Systad]

- måtte ha med en dummy <div style="clear: both"> </div> i bunnen av #container så bakgrunnen skulle strekke seg ned hele veien i FF

Bytt ut denne med <hr> da

[PoleCat]

- måtte ha med en dummy <div style="clear: both"> </div> i bunnen av #container så bakgrunnen skulle strekke seg ned  hele veien i FF

Bytt ut denne med <hr> da

Hvorfor maser dere alltid om dette egentlig? Dersom den eneste funksjonen den har (som ikke er en logisk funksjon en gang) er å cleare, ser jeg ikke poenget med å bruke en hr.

[FuLu]

Hadde det vært en footer, hadde jeg brukt en <hr>, for da ville det sett logisk ut når siden ble sett uten stylesheets.

 

Tok og restrukturerte HTML og måtte endre litt på CSS, dunno om phax er interessert men jeg syntes HTML'en kunne løses på en annen måte

 

Men slet litt med IE og #menu, hadde float left, men siden menu hadde margin-left: 15px; og width satt og den var float, så ble det double-margin bug. Prøvde å sette til 7 eller 8px for IE, men da ble det heletiden 1px feil, fikk ikke alignet riktig. Så det endte opp med en position: relative; i #container og position: absolute; i #menu

 

Ny versjon

[JohnRichard]

Men slet litt med IE og #menu, hadde float left, men siden menu hadde margin-left: 15px; og width satt og den var float, så ble det double-margin bug. Prøvde å sette til 7 eller 8px for IE, men da ble det heletiden 1px feil, fikk ikke alignet riktig. Så det endte opp med en position: relative; i #container og position: absolute; i #menu

Du kan sette display: inline; på div/class så blir marginene riktig.

 

Referanse: The IE Doubled Float-Margin Bug - Takk til PoleCat som påpekte dette overfor meg

[FuLu]

Opps takker John, mener å ha lest om det, men totalt glemt hehe

 

Edit: fixed, da trengte jeg ikke noe position greier

Endret 22. oktober 2004 av FuLu

[Haraldson]

Hvorfor maser dere alltid om dette egentlig? Dersom den eneste funksjonen den har (som ikke er en logisk funksjon en gang) er å cleare, ser jeg ikke poenget med å bruke en hr.

Vel, det er da vitterlig mer logisk å bruke en <hr /> (horizontal rule) til nettopp en horisontal skillelinje, er det ikke? For det ER jo en skillelinje som legger seg på bunn, og som får elementene til å legge seg over, vha. clear:both;.

 

Ser ikke helt ditt problem med å bruke <hr /. Færre bytes er det også.

[phax]

oioi, her var det mye respons! tusen takk til alle sammen og spesiellt FuLu som har tatt seg tid til alt dette!

 

ser jeg har endel og lære her, så nå har jeg noe å gjøre i helgen!

 

takk igjen!

[Arve Systad]

- måtte ha med en dummy <div style="clear: both"> </div> i bunnen av #container så bakgrunnen skulle strekke seg ned  hele veien i FF

Bytt ut denne med <hr> da

Hvorfor maser dere alltid om dette egentlig? Dersom den eneste funksjonen den har (som ikke er en logisk funksjon en gang) er å cleare, ser jeg ikke poenget med å bruke en hr.

Fordi det gir mindre kode, og fordi det er like logisk og ha en hr der, som en div.

 

Ingen av dei gir et særlig utslag i semantikken. HR skal berre "regjere" horisontalt, og det er vel nettopp det den gjør ved å ligge der og passe på at alle strekker seg så langt som dei skal - right?

[phax]

bare for å få ting litt klart her, hva er en <hr/> og hvordan bruke den?

 

har skjønnt såpass som at det er en horisontal skillelinje som gjør verden en fin plass å leve på, men sånn litt mer nøyaktig, hvilken hensikt har den? gjerne et lite kode eksempel! (jeg er så treig.. )

[FuLu]

Tja, hvis du ser på siden jeg mekka for deg uten stylesheet (er vel bare å laste ned html og ikke css'en, eventuelt i FireFox/Opera skru av stylesheet), så ser du en <hr> kommer under menyen. Eneste fordel med det jeg kan se, er så kunne skille forskjellige "seksjoner" i "flowen"

[realfingolfin]

bare for å få ting litt klart her, hva er en <hr/> og hvordan bruke den?

 

har skjønnt såpass som at det er en horisontal skillelinje som gjør verden en fin plass å leve på, men sånn litt mer nøyaktig, hvilken hensikt har den? gjerne et lite kode eksempel! (jeg er så treig.. )

Eh..<hr> er en horisontal linje som du kan redigere i .css slik at den blir akuratt slik du vil ha den, den "normale" uten noe form for redigering når hele skjermen (i bredden) og er kanskje 2-3px bred..Den brukes til f.eks: skille noe fra noe annet.