CSS Absolute DIV "kansellerer"

[Parallax312]

Hei,

 

Har nettopp satt opp en enkel header layout i CSS med absolutt posisjonering. Men den siste div'en, som strekker seg fra høyrekanten av divene og 100% ut til høyrekanten i browseren gjør slik at alle andre div'ene blir usynlig (bildene lastes i browseren men vises ikke). Dette skjer kun i IE. Lurer på om noen vet hvorfor?

 

Her er kodene (det er header-bkg-repeat-grad som forårsaker dette):

 

 

EDIT: Ny kode under...

Endret 22. februar 2008 av Parallax312

[Kim T]

Bare av å se på koden din så skjønner jeg at du har problemer. Dette må da være den største DIV-MANIA jeg har sett. En normal side har kanskje mellom 5-15 div tag. Du har 26 bare i header. Jeg skjønner at det skaper problemer for deg. Ved å se på koden din så mener jeg det er rett og slett meningsløst.

 

Kim...

Endret 22. februar 2008 av Kim T

[Parallax312]

Jeg tenkte ærlig talt ikke for mye over inndeling når jeg satte dette opp, men jeg ser når at jeg kan kutte ned mange av divene. Jeg gjør dette, så kommer jeg tilbake med mer info hvordan ting utvikler seg

[Parallax312]

Her kommer en forhåpentligvis mer roligere kode. Ser ut som jeg får forskjellige resultater siden sist nå, div'en strekker seg langt lengre enn 100% denne gangen.

 

.header-logo {
 position: absolute;
 left: 0px;
 top: 0px;
 width: 227px;
 height: 117px;
}
.header-top-left {
 position: absolute;
 left: 227px;
 top: 0px;
 width: 305px;
 height: 24px;
 background-image: url(header/hdr41.jpg);
}
.header-top-btn {
 position: absolute;
 left: 532px;
 top: 0px;
 width: 488px;
 height: 24px;
}
.header-mid-btn1 {
 position: absolute;
 background-image: url(header/hdr47.jpg);
 left: 227px;
 top: 24px;
 width: 122px;
 height: 42px;
}
.header-mid-btn2 {
 position: absolute;
 background-image: url(header/hdr48.jpg);
 left: 349px;
 top: 24px;
 width: 488px;
 height: 42px;
}
.header-mid-btn3 {
 position: absolute;
 background-image: url(header/hdr63.jpg);
 left: 837px;
 top: 24px;
 width: 122px;
 height: 42px;
}
.header-mid-btn4 {
 position: absolute;
 background-image: url(header/hdr48.jpg);
 left: 959px;
 top: 24px;
 width: 61px;
 height: 42px;
}
.header-btn {
 position: absolute;
 left: 227px;
 top: 66px;
 width: 793px;
 height: 36px;
}
.header-bkg-grad {
 position: absolute;
 background-image: url(header/hdr46.jpg);
 top: 0px;
 left: 1020px;
 width: 121px;
 height: 117px;
}
.header-bkg-repeat-grad {
 position: absolute;
 background-image: url(header/hdr49.jpg);
 background-repeat: repeat-x;
 top: 0px;
 left: 1141px;
 height: 117px;
 width: 100%;
}
.header-btm {
 position: absolute;
 background-color: #FFAA00;
 left: 227px;
 top: 102px;
 width: 793px;
 height: 15px;
 line-height: 0.7;
 text-align: center;
}

 

<div class="header-logo"><a href="index.php"><img src="header\hdr40.jpg"></a></div>
<div class="header-top-left"></div>
<div class="header-top-btn"><a href="index.php"><img src="header\hdr42.jpg"></a><a href="index.php"><img src="header\hdr43.jpg"></a><a href="index.php"><img src="header\hdr44.jpg"></a><a href="index.php"><img src="header\hdr45.jpg"></a></div>
<div class="header-mid-btn1"></div>
<div class="header-mid-btn2"></div>
<div class="header-mid-btn3"></div>
<div class="header-mid-btn4"></div>
<div class="header-btn"><a href="index.php"><img src="header\hdr50.jpg"></a><a href="index.php"><img src="header\hdr51.jpg"></a><a href="index.php"><img src="header\hdr52.jpg"></a><a href="index.php"><img src="header\hdr53.jpg"></a><a href="index.php"><img src="header\hdr54.jpg"></a><a href="index.php"><img src="header\hdr55.jpg"></a><a href="index.php"><img src="header\hdr56.jpg"></a><a href="index.php"><img src="header\hdr57.jpg"></a><a href="index.php"><img src="header\hdr58.jpg"></a><a href="index.php"><img src="header\hdr59.jpg"></a><a href="index.php"><img src="header\hdr60.jpg"></a><a href="index.php"><img src="header\hdr61.jpg"></a><a href="index.php"><img src="header\hdr62.jpg"></a></div>
<div class="header-bkg-grad"></div>
<div class="header-bkg-repeat-grad"></div>
<div class="header-btm">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</div>

[Kim T]

Det er mye lettere å se "feilen" live. Har du en link som vi kan se på?  

[Parallax312]

Hei, her er linken: http://72.167.141.129/testsite/header.php

 

Ser ut til å fungere fint i Opera, men i IE blir første delen av div'ene "usynlig" som beskrevet i første posten, og jeg får en lang scrollbar. Firefox gir visst også uventede resultater?

Endret 22. februar 2008 av Parallax312

[Kim T]

Nå skal jeg være litt snill og sørge for å få deg på rett spor når det gjelder html og css.

 

Meny er en liste. En liste over forskjellige linker. Dermed bør og skal de ordnes i en eller annen form for liste. Jeg bruker unordered list.

 

<ul>
<li><a>Link nr 1</a></li>
<li><a>Link nr 2</a></li>
<li><a>Link nr 3</a></li>
<li><a>Link nr 4</a></li>
<li><a>Link nr 5</a></li>
<li><a>Link nr 6</a></li>
</ul>

 

Foreløpig vil du se at listen ikke er horisontal, men dette fikser du lett ved å floate list elementet til left

 

/*CSS for meny*/
ul li {
float: left;
}
ul#hovedmeny {
display: block;
list-style-type: none;	
height: 55px;
}
ul li, ul li a {
float: left;
}
a {
background-image: url(bildesomdubrukersombakgrunn);
background-repeat: no-repeat;
height: høyden;
width: bredden;
}

 

Med andre ord det du har brukt flere sider på kan erstattes med en enkel liste. Og den vil gå raskere å loade og du minsker antall feil betraktelig(til null).

 

Håper dette gjelder deg på rett vei.

 

Kim...

[Parallax312]

Hvorfor/Hvordan mener du jeg skal stykke opp den headeren som en liste?

 

Mener du jeg skal bruke et helt bakgrunnsbilde i stedet for små? Går ikke det tregere å laste da? Hvordan skulle jeg i såfall presisere hvor lenke skal være... på pixelen?

 

Jeg ser ikke helt sammenhengen mellom de to...

[blackbrrd]

Parallax312: du kan jo prøve det Kim T foreslår? Det er faktisk ganske logisk og hvis du skal redigere siden senere så er det utrolig mye enklere med oppsettet han har foreslått.

 

Ett lite hint er vel at absolutt posisjonering er noe man vanligvis burde holde seg borte fra...

 

Kim T sier vel strengt talt ikke noe om hvordan du skal lage bakgrunnsbilde, bare noe om hvordan du kan bygge opp menyen din uten 100 absolutt posisjonerte div-er.

Endret 22. februar 2008 av blackbrrd

[Kim T]

Slik jeg ser det så må du lage en id for hvert a element. altså f.eks.

 

<ul>
<li><a id="movielink"></a></li>
<li><a id="bildelink"></a></li>
</ul>

/* Eksempel på CSS */
a#movielink {
background-image: url(bildesomdubrukersombakgrunn);
background-repeat: no-repeat;
height: høyden;
width: bredden;
}

/* Det ser ut som alle a elementene dine har lik bredde og høyde. Dermed trenger du bare en CSS som definerer dette. Eneste du må skrive for hver id er hvilket bakgrunnsbilde det skal ha. */

 

Når du floater elementene til left vil elementene legge seg inntil hverandre. Hvis du har satt margin og padding til 0.

[lassejl]

Uhm, litt offtopic, men er det bedre å floate en liste som skal vises horisontalt enn display:inline; ?

[Parallax312]

Hei dere,

 

Tusen takk for tipsene. Jeg skal prøve å få til dette med listene

 

@blackbrrd: Visste ikke at absolutt posisjonering var noe man burde holde seg borte fra. Så hvilken posisjonering er egentlig best å bruke, static, fixed eller relative? Hvis noen i det hele tatt...

[Avean]

Bare det er gjort riktig så fungerer absolute position Jeg bruker det i kombinasjon med en såkalt "wrapper" som har position:relative så alle divene innenfor forholder seg til layouten når de plasserer seg. Hvis man bare bruker position:absolute så holder de seg ved sine koordinater uansett, men hvis den er innenfor en relative en så flytter de seg i forhold til layouten Så man må ikke holde seg bort fra dette, man må pent bruke det hvis man skal lage avanserte layouts og trenger elementer på sære plasser.

 

Er mange fine artikler om dette på css skillshare.

Endret 23. februar 2008 av Avean

[Parallax312]

@Avean: Takk for tipset, det fungerte faktisk. Nå fungerer faktisk siden i Opera og IE. Firefox gir meg dog en horisontal scrollbar av en eller annen rar grunn. Vet noen hvorfor?

 

/bookmark css skillshare

 

Tenker jeg også skal prøve Kim sin metode for å se hvilke resultater det gir. Og muligens også oppkuttede bilder vs. et helt. Er det noen som vet om det er noen forskjell på loading tid på disse måtene å bruke bilder på?

[blackbrrd]

Bare det er gjort riktig så fungerer absolute position Jeg bruker det i kombinasjon med en såkalt "wrapper" som har position:relative så alle divene innenfor forholder seg til layouten når de plasserer seg. Hvis man bare bruker position:absolute så holder de seg ved sine koordinater uansett, men hvis den er innenfor en relative en så flytter de seg i forhold til layouten Så man må ikke holde seg bort fra dette, man må pent bruke det hvis man skal lage avanserte layouts og trenger elementer på sære plasser.

 

Er mange fine artikler om dette på css skillshare.

Hørtes ut som en grei måte å blande absolute/relative tagger, men i dette tilfellet, hvor det skulle lages en enkel meny, så var det rimelig overkill å bruke absolute...