Vererben von Breite (width) funktioniert nicht bei automatischer Breite.

Advento · #1 (**permalink**) 07.02.2010, 19:29

Schönen Guten Abend,

ich schlage mich seit Tagen mit CSS rum und möchte erstmal diesem Forum hier danken. Durch die vielen Themen kam ich ziemlich weit, ohne fragen zu müssen. Jetzt brauche ich aber doch irgendwie Hilfe.

Ich habe eine Box. In der soll eine zweite Box mit gleicher Breite einen Art Kopf-Bereich bilden. Das ist auch kein großes Problem:

HTML-Code:

<style type=text/css>
  #center
  {
    position:absolute;
    top:50px;
    left:50px;
    right: 50px;
    min-width: 410px;
    max-width: 900px;
    /*width: 410px;*/
    height:500px;
    background:#FFF;  
    border: 1px solid #000;
  }
  
  #boxtop_red
  {
    position:relative;
    left:-1px;
    top:-1px;
    width: inherit;
    /*min-width: 410px;*/
    /*max-width: 900px;*/
    height:5px;
    border:1px solid #000;
    background:#D60028;
  }
</style>
<body>
   <div id="center">
    <div id="boxtop_red"></div>
    TEXT
    <div id="boxbottom_white"></div></div>  
</body>

Mit "top:-1px" und "left:-1px" lege ich die Ränder der Boxen direkt aufeinander. Das sieht auch ganz schick aus. Allerdings funktioniert das nicht ganz perfekt. Wenn ich (bei anderen Boxen) die Breite manuell einstelle, wird sie korrekt vererbt und die Rahmen der Boxen liegen oben, rechts und links perfekt aufeinander.

Wenn ich der Breite ein Min/Max vorgebe, wird die beerbte Box einen Pixel zu klein. Wenn ich dieser auch eine Min/Max Breite vorgeben ändert das auch nichts am Ergebnis. Hat jemand eine Idee wodran das liegt?

Schönen Gruß

Chris

fricca · #2 (**permalink**) 07.02.2010, 19:35

Ich weiß ja nicht, was das werden soll, aber ich würde sagen: Gib überhaupt keine Breite für das innere Element an. Mach deine Überlappung mit neg. margins, nicht mit relativer Verschiebung.
Insgesamt bezweifle ich aber, dass du wirklich ein 5px-hohes leeres Element brauchst. Und was die Überlappung soll verstehe ich erst recht nicht. Wenn du nur unten einen border willst, dann gib auch nur unten einen an.

Advento · #3 (**permalink**) 07.02.2010, 19:50

Oh. Tja, manchmal macht man's komplizierter als es ist.
Ich habe halt erst vor ein paar Tagen mit css angefangen

Das ist nur ein optischer Rahmen, klar, dass man in 5px nicht viel reinschreiben kann ;o)

fricca · #4 (**permalink**) 07.02.2010, 19:55

Ja, das sieht man, dass du Anfänger bist. Du machst gleich zwei typische Anfängerfehler:

Du willst gestalten, obwohl noch gar nichts da ist, was man gestalten kann. Deswegen wirfst du gleich mal mit leeren Divs um dich.
Du glaubst, positionieren zu müssen, um Elemente anordnen zu können. Ist mit Sicherheit überflüssig für das was du willst.

Leg bitte beiseite, was du da hast.
Dann schreib zuerst deinen Inhalt auf.
Dann zeichne den Inhalt sinnvoll mit HTML aus (Google: "semantisches Markup").
Dann -- ja, erst dann -- hat es Sinn, überhaupt an Gestaltung per CSS zu denken.
Ich empfehle dir, Little Boxes durchzuarbeiten. Mit Raten wirst du nicht weiterkommen.

Advento · #5 (**permalink**) 07.02.2010, 20:22

Danke für die Hinweise.
Ich habe schon Inhalte, ich habe nur versucht durch herauslösen des Problemcodes aus dem großen Ganzen das Problem zu verdeutlichen. Das hat ja scheinbar auch geklappt.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten	mazzo	CSS	10	05.04.2012 17:32
Dynamische Größen	Killhunter	CSS	0	14.05.2011 16:56
joomla template entschlüsseln	nieselfriem	CSS	2	18.03.2008 13:12
width + padding (left+right) = Breite imm FF?	haSta	CSS	1	17.07.2006 13:51
Divs mit Float:left und automatischer Breite	xm22	CSS	5	02.04.2006 16:43