01.11.2004, 09:28
|
|||
|
|||
2 bilder floaten rechts + links
heya!
warum stellt mir der IE diesen einfachen float falsch dar? die hintergrundfarbe bildet unterhalb einen balken. http://cardservice.ch/redesign/verlauf.htm Code:
<html> <head> </head> <body> <div style="width:50%; background-image:url(pics/bg_balken2.jpg); background-repeat:no-repeat; background-color:#003E79; height:7px; float:left"></div> <div style="width:50%; background-image:url(pics/bg_balken.jpg); background-repeat:no-repeat; background-color:#003E79; height:7px; background-position:top right; float:right"></div> </body> </html> -rotsch
__________________
WTF? 
|
| Sponsored Links |
|
01.11.2004, 10:35
|
|||
|
|||
|
Ich denke es liegt daran das der Div Container kein Inline Tag ist und eine eigene Zeile eröffnet. Die Zeilenhöhe ist höher als 7 Pixel. Ich würd sagen das der IE das einfach nicht schluckt. Aber was kommt als Alternative in Betracht?
Gruß, Philippp
|
| Sponsored Links |
|
01.11.2004, 10:44
|
|||
|
|||
|
jep, darum floate ich die 2 div-container ja nebeneinander.
ich glaub, das ist schon richtig so, weil mir der firefox das richtig anzeigt. weiss halt nicht wieso mir der IE hier einen streich spielt... alternative hab ich eigentlich noch keine, ich will einfach zwischen den 2 verläufen eine variable breite haben und meine lösung erscheint mir durchaus nicht schlecht  vielleicht hat ja jemand eine andere lösung, die auch der IE schluckt?
__________________
WTF?
|
|
01.11.2004, 12:20
|
||||
|
||||
|
Du kannst doch ganz simpel zwei DIVs übereinander legen (Zwiebelscheibenprinzip). Dann brauchst Du nichts zu floaten, keine 50% Angaben und Du kannst auch Inhalt reinschreiben - denn bei Deinem Code kannst Du das nicht.
__________________
“My software never has bugs. It just develops random features ...”  » DevShack - die Website des freien Webentwicklers Boris Bojic
|
|
01.11.2004, 12:24
|
||||
|
||||
|
hi,
habs gerade mal bei mir probiert, bei mir funktionierts so: CSS Code:
body {
margin: 0;
padding: 0;
}
#hgr1 {
width: 50%;
height: 7px;
float: left;
background: rgb(0, 62, 121) url(bg_balken2.jpg) no-repeat;
/* für den IE !!!! - Kommentare s.u. */
margin-right: -5px;
font: 2px/7px sans-serif;
}
#hgr2 {
/*width: 50%; ------ unnötig */
/*float: right; ------ unnötig */
height: 7px;
background: rgb(0, 62, 121) url(bg_balken.jpg) no-repeat right top;
/* für den IE !!!! */
margin-left: -5px; /* sonst gibst ne Lücke zwischen den divs - nur IE */
font: 2px/7px sans-serif; /* damit verschwindet der "Hintergrund-Farben-Balken" im IE */
}
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Unbenanntes Dokument</title></head>
<link rel="stylesheet" href="test.css" type="text/css">
<body>
<div id="hgr1"></div>
<div id="hgr2"></div>
<br clear="all">
</body>
</html>
cu
|
|
01.11.2004, 13:40
|
|||
|
|||
|
@Adagio: ja, aber dann müsste ich die div's absolut positionieren und das möchte ich nicht...
@kadees: yeah! danke vielmals  die font-angabe hat mir gefehlt, jetzt gehts auch mit dem IE gut.
__________________
WTF?
|
|
01.11.2004, 15:01
|
||||
|
||||
|
Wie bitte? Warum müsstest Du das tun?
<div id="eins"><div id="zwei"></div></div> Wenn Du für beide padding und margin auf 0 setzt, liegen sie komplett übereinander. Und pro Container kannst Du dann ein Hintergrundbild setzen. Fertig! Was hat das mit der Art der Positionierung zu tun? Kadees Variante funktioniert nur, wenn Du nichts reinschreiben willst - wobei mir ein Rätsel ist, wie Du das überhaupt realisieren willst. Oder soll da nichts rein?
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic
|
|
02.11.2004, 08:36
|
|||
|
|||
|
aja, an das verschachteln hatte ich nicht gedacht
 und nein, ich will nichts reinschreiben. dient nur dem design. hier im einsatz: http://www.cardservice.ch/redesign/
__________________
WTF?
|
|
02.11.2004, 17:03
|
|||
|
|||
|
Hallo rotsch
Vielleicht gefällt dir ja auch diese Lösung, bei der nicht so viel schreibkram anfällt und den Quelltext nicht so aufbläht Code:
<div style="width:600px; background-color:#003E79; height:7px;"> [img]bg_balken2.jpg[/img][img]bg_balken.jpg[/img]</div> [/quote]
|
| Sponsored Links |
 |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| 4 Grafiken - oben links, oben rechts, unten link, unten rechts - mittig text - wie? | flobox | CSS | 1 | 03.09.2008 21:58 |
| "Grafiken" links und rechts vom content | michimunk | CSS | 3 | 23.01.2008 15:13 |
| div mit border - Text links ausrichten , Img rechts ausrichten | Camelrider | CSS | 1 | 10.12.2007 17:31 |
| 3-Spalten-Layout, links und rechts variabel | DocO | CSS | 6 | 25.11.2005 14:17 |
| container links rechts problem | sn4ke | CSS | 3 | 16.11.2005 09:19 |
Linear-Darstellung
