✔ div nebeinander, vertical align & mouse over

Status
Nicht offen für weitere Antworten.
Hi,

mit den folgenden Regeländerungen und -erweiterungen werden die Darstellungsfehler im IE gefixt:

Code: 
#topNews_1 {
height:177px;
width:114px;
text-align:left;
/*margin-left:auto;*/ /* auskommentiert = deaktiviert */
/*margin-right:auto;*/ /* auskommentiert = deaktiviert */
margin-right:0 !important; /* Für moderne Browser */
margin-right:-3px; /* 3px-Gap-Bug im IE */
float:left;
background-image:url('http://news.technobase.eu/topnews/ontop_2.png');
display:block
}

#topNews_2 {
height:177px;
width:114px;
text-align:left;
/*margin-left:auto;*/ /* auskommentiert = deaktiviert */
/*margin-right:auto;*/ /* auskommentiert = deaktiviert */
margin-right:0 !important; /* Für moderne Browser */
margin-right:-3px; /* 3px-Gap-Bug im IE */
float:left;
background-image:url('http://news.technobase.eu/topnews/ontop_4.png');
display:block
}

#topNews_3 {
height:177px;
width:113px;
text-align:left;
/*margin-left:auto;*/ /* auskommentiert = deaktiviert */
/*margin-right:auto;*/ /* auskommentiert = deaktiviert */
margin-right:0 !important; /* Für moderne Browser */
margin-right:-3px; /* 3px-Gap-Bug im IE */
float:left;
background-image:url('http://news.technobase.eu/topnews/ontop_6.png');
display:block
}


#LoginHead {
height:8px;
text-align:center;
margin-left:auto;
margin-right:auto;
width:157px;
background-image:url('http://wsm.technobase.eu/login_head.gif');
overflow:hidden;
}

#LoginFoot {
height:7px;
text-align:center;
margin-left:auto;
margin-right:auto;
width:157px;
background-image:url('http://wsm.technobase.eu/login_foot.gif');
overflow:hidden;
}


#CounterHead {
height:10px;
width:153px;
text-align:center;
margin-left:auto;
margin-right:auto;
background-image:url('http://wsm.technobase.eu/ct_head.jpg');
overflow:hidden;
}

#CounterFoot {
height:11px;
width:153px;
text-align:center;
margin-left:auto;
margin-right:auto;
background-image:url('http://wsm.technobase.eu/ct_foot.jpg');
overflow:hidden;
}
 
Hallo,eine kleine Frage hätte ich doch noch. Wie kann ich auf der rechten Seite noch einen Banner (150x600) nebem dem Design platzieren?
 
Hi,

beispielsweise so:

Code: 
#banner {
        float:right;
        width:150px;
        height:600px;
}

Code: 
<body>

<div id="banner"> ... </div>

<div id="Design_BannerTop"> ... </div>

</body>
Ansonsten müsste das Layout verbreitert, und darin eine rechte Spalte eingerichtet werden, die den Banner aufnimmt.
 
Hi,

das ist die Folge des eingebundenen rechten "Banners", der die links umfliessenden Elemente verschiebt, wenn das Browserfenster in der Horizontalen verkleinert wird.

Daher solltest du die einzelnen Seitenbereiche (Banner, Header, Content, usw.) in ein übergeordnetes Element einbetten, damit dies komplett, und nicht blos die einzelnen Segmente, nach links verschoben werden, wenn das Fenster verkleinert wird.
 
Alternativ zur float:right-Deklaration könntest du das Element auch am rechten Fensterrand absolut positionieren:

Code: 
#banner_right {
    /*float:right;*/ /* auskommentiert = deaktiviert */
    position:absolute;
    right:0;
    top:0;
    width:160px;
    height:600px;
}
Somit würde sich die Box über das Layout legen, wenn das Fenster verkleinert wird, und die Seitenbereiche nicht nach links verschieben.
 
Hallo Maik,

kannst du mir zufällig sagen, warum auf www.TechnoBase.FM, wenn man über die TuneIn Player geht, im IE das aufklappende Menü schön linksbündig angezeigt wird, jedoch im FF mittig, wenn nicht sogar leicht auf zur rechten Seite geneigt?
 
Hi,

du hast die Polsterungseigenschaften des Listenelements nicht vollständig auf null zurückgesetzt:

Code: 
.tunein_link UL { width: 127px; margin: 0; padding:0; text-align:left; }
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück