zwei verschachtelte DIV boxen und ein Problem
0 
Felix Riesterer
0 0 0 0 0 Felix Riesterer
0 Take
zwei verschachtelte DIV boxen und ein Problem
Gunnar BittersmannHallo,
mein Problem ist, ich möchte zwei Div Boxen verschachteln. Dabei soll die äußere Div Box transparent sein, und die innere eine Farbe haben und einen Rand (solid). Ich hab das mir so gedacht wie im folgenden Code.
Allerdings verschiebt sich der untere Rand von der inneren Div Box - je nachdem mit welchem Zoom Level ich von Chrome, Firefox oder IE die Seite betrachte - wie im Bild zu sehen ist:
Wenn ich die Seite mit Zoom 100% angucke, dann ist alles richtig, aber sobald ich raus oder rein zoome, verschiebt sich die bottom line.
Kann man das irgendwie verhindern?
Hier der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bloede Linie</title>
<style type="text/css">
.draussen{
background:#73adf1;
margin-top:16px;
height:26px;
}
.drinnen{
background-color:transparent;
float:left;
width:200px;
border-top-width:1px;
border-bottom-width:1px;
border-left-width:0px;
border-right-width:0px;
border-color:#d6d6d6;
border-style:solid;
height:24px;
}
</style>
</head>
<body >
<div class='draussen' >
<div class='drinnen'>
</div>
</div>
</body>
</html>
Vielen Dank für jede Hilfe!
Viele Grüße,
Adam
-
Lieber iwasherefirst,
was genau ist denn Dein wirkliches Ziel? Du stellst eine relativ konkrete technische Frage, ich bin mir aber nicht sicher, ob die dazu direkte Antwort Dein eigentliches Problem löst...
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo Felix,
mein Ziel ist, dass ich gerne eine abgerundete Div Box hätte, die ihre Farbe ändert wenn man mit der Maus rüberfährt.
Deswegen wollte ich eine äußere Div Box machen, in die ich mehrere z.T. transparente Div-Boxen reinmache, so dass ich bei onMouseOver nur die Farbe einer Div Box (nämlich dieser äußeren) ändern muss.
Dazu mache ich im Grunde das selbe wie Stu Nicholls hier beschrieben hat: http://www.webreference.com/programming/css_borders/index.html
leider konnte ich die Lösung von Nicholls aber nicht einfach so übernehmen, weil ich mit der Schrift die ich in die Box reinmache keinen großen Abstand nach oben haben wollte und bei der Lösung hat man ein Mindestabstand nach oben und unten von 5 Pixel.
Anstatt die Box von Oben nach Unten zu erzeugen, erstelle ich mir diese Box von links nach rechts.
Meine Lösung sieht also so aus, erst ein Div Block der 5 Pixel Breit ist (der linke Rand), dann ein Div Container mit Rand oben und unten, dann der rechte Rand.
Ich hab das auch alles schon gemacht, und es sieht gut aus, aber jetzt hab ich festgestellt, dass beim Rein und Rauszommen die untere Linie sich verschiebt.
Falls es da eine gute kurze Lösung gibt, wäre ich super glücklich.
Ansonsten hätte ich auch noch andere Ideen wie ich das hinkriegen könnte, da müsste ich bei MouseOver allerdings zwei Bilder ändern und eine Hintergrundfrage von einem Div-Container. Das würde ich gerne vermeiden.
-
Hi,
mein Ziel ist, dass ich gerne eine abgerundete Div Box hätte, die ihre Farbe ändert wenn man mit der Maus rüberfährt.
Dann nutze *ein* Element, und verwende border-radius für die "runden Ecken".
Dazu mache ich im Grunde das selbe wie Stu Nicholls hier beschrieben hat: http://www.webreference.com/programming/css_borders/index.html
Das ist doch Technik aus dem letzten Jahrtausend ...
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
Das ist doch Technik aus dem letzten Jahrtausend ...
Created: March 27, 2003
Revised: May 25, 2005Dieses Jahrtausend :-P
-
Danke für den Hinweis, das hab ich noch nicht gesehen und es hätte mir auch viel Zeit erspart.
Aber es hat ja auch einen Haken, und zwar funktioniert es im IE erst ab Version 9.
Ich fände es auch gut für ältere Versionen vom IE Runde Ecken zu kriegen, und bis auf diesen einen Fehler klappt es ja.
-
Lieber iwasherefirst,
Ich fände es auch gut für ältere Versionen vom IE Runde Ecken zu kriegen, und bis auf diesen einen Fehler klappt es ja.
es ist mittlerweile üblich[1] damit zu leben, dass gewisse Versionen gewisser Browser gewisse Darstellungsmöglichkeiten nicht bieten. In diesen Browsern sieht die Seite dann eben nicht 100%ig so aus, wie sie das sollte, aber immerhin lässt sich die Seite - wenn sie sauber gearbeitet wurde - problemlos nutzen.
[1] Das gilt natürlich nur dann, wenn Du kein beruflicher Web"designer" bist, der Kundenwünsche entsprechend umzusetzen hat.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
@@Felix Riesterer:
nuqneH
[1] Das gilt natürlich nur dann, wenn Du kein beruflicher Web"designer" bist, der Kundenwünsche entsprechend umzusetzen hat.
Ja, dann kommt noch hinzu, die Wünsche des Kunden den technischen Unzulänglichkeiten alter Browser anzupassen.
Mit Geld sollte das gehen. Das Auftragsvolumen beträgt bspw. 1500 Euro mit runden Ecken für moderne Browser, IE < 8 zeigen halt eckige Ecken*. Für runde Ecken in IE 6 und 7 kämen dem erhöhten Aufwand entsprechend nochmal 500 Euro hinzu.
Das sollte die meisten Kunden davon abhalten, runde Ecken in IE 6 und 7 zu wollen.
Qapla'
* no pun intended
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hi,
[...] runden Ecken für moderne Browser, IE < 8 zeigen halt eckige Ecken*.
Wie machst du im IE8 dann runde Ecken?
~dave
-
@@dave:
nuqneH
Wie machst du im IE8 dann runde Ecken?
Nicht. ;-)
Alles eine Version hochzählen.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Okay danke, ich wusste nicht das mein Wunsch so utopisch ist. Btw ich bin gar kein Webdesginer.
Viele Grüße,
Adam
-
-
-
-
-
Moin,
Ich fände es auch gut für ältere Versionen vom IE Runde Ecken zu kriegen, und bis auf diesen einen Fehler klappt es ja.
Nimm border-radius und dann kriegt der IE<9 halt ein .htc: http://code.google.com/p/curved-corner/
Gruß,
Take
-
-
-
-
-