Benedikt Winckler: Zwei DIVs richtig ineinander positionieren???

Hallo,

ich habe auf meiner Homepage loodo.de/test eine Kurzbeschreibung in einem DIV platziert. Das passt auch super, jedoch habe ich zwei DiVS für das Aussehen verwendet, das innere DIV ist aber falsch positioniert.
Das DiV heißt description_wrapper_a (außen) bzw. description_wrapper_i (innen).
Das innere DIV soll 11px von rechten Rand des äußeren linken und 11px vom äußeren oberen Rand entfernt sein, margin-Top hat nicht funktioniert.

Danke für eure Hilfe!

Benedikt Winckler

  1. Hi,

    ich habe auf meiner Homepage loodo.de/test ...

    ah, hier wenigstens der korrekte Link - der über dem Posting angegebene ergibt nämlich ein "404 Not Found".

    ... eine Kurzbeschreibung in einem DIV platziert. Das passt auch super, jedoch habe ich zwei DiVS für das Aussehen verwendet, das innere DIV ist aber falsch positioniert.

    Warum zwei div-Elemente? So wie es aussieht, willst du einfach nur einen dicken grauen Rahmen mit runden Ecken. Dann mach das doch einfach. Es ist nicht nötig, dafür zwei Elemente zu verschachteln. Davon abgesehen sind noch etliche andere Elemente in deinem Markup überflüssig.

    Das innere DIV soll 11px von rechten Rand des äußeren linken und 11px vom äußeren oberen Rand entfernt sein, margin-Top hat nicht funktioniert.

    Collapsing Margins. Margins von verschachtelten oder direkt aufeinanderfolgenden Elementen verschmelzen miteinander, und nur noch der größere der beiden Werte zählt dann.

    Und außerdem ...

    <style type="text/css">  
    .big {  
    	font-weight: bold;  
    }  
    .big {  
    	font-weight: bold;  
    }  
    .big {  
    	font-weight: bold;  
    }  
    .big {  
    	font-weight: bold;  
    }  
    .big {  
    	font-weight: bold;  
    }  
    .big {  
    	font-weight: bold;  
    }  
    .big {  
    	font-weight: bold;  
    }  
    .big {  
    	font-weight: bold;  
    }  
    .big {  
    	font-weight: bold;  
    }  
    .big {  
    	font-weight: bold;  
    }  
    </style>
    

    In CSS gilt nicht: Wer's oft genug wiederholt, gewinnt. Was soll der Unsinn?!

    <body>  
    <div id="wrapper">
    

    Das div#wrapper ist überflüssig, da es in der Dokumentstruktur mit dem body-Element zusammenfällt.

    <table width="100%" border="0" cellspacing="0" cellpadding="1">  
     <tr>  
      <td width="170"><img src="images/logo.png" width="96" height="26" alt="Loodo" /></td>  
       <form>
    

    Autsch. Ein form-Element kann nicht Kind von tr sein. Entweder ein Formular ist vollständig *innerhalb* eines td- oder th-Elements, oder es umschließt die gesamte Tabelle. Dazwischen gibt's nichts.
    Und welchen Sinn hat ein Formular ohne action-Attribut?

    <td width="511"><div id="nav">Home&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Sitemap&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&Uuml;ber uns&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;Kontakt&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;Impressum</div></td>

    WTF? Den Schlagworten nach zu urteilen könnte das mal die Navigation werden. Eine Navigation ist eine Liste von Links. Ich sehe hier aber weder Links noch eine Liste, nur unzählige geschützte Leerzeichen. Wozu das? Für Abstände ist CSS da. Das Verst&uuml;mmeln der Umlaute ist auch nicht sinnvoll; weiter unten kannst du sie doch auch ordentlich schreiben.

    <div id="block1" class="inline1"><br />  
     - besserer Arbeitsplatz?<br />  
     - ein besserer Vorgesetzter sein?<br />  
    ...
    

    Das sieht auch schwer danach aus, als ob das eine Liste sein möchte. Warum darf es nicht?

    Und der Beschreibung in div#description_wrapper_i stünde es auch gut, wenn du sie als Abfolge von Zwischenüberschriften und Absätzen auszeichnen würdest, anstatt nur einen Block mit br-Elementen und nichtssagenden spans.

    Allgemein: Bediene dich der Vielfalt an sinntragenden Elementen, die HTML bietet! Es gibt mehr als nur div und br.

    So long,
     Martin

    --
    The other line moves faster. (from Murphy's Law)
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
  2. ich habe auf meiner Homepage loodo.de/test eine Kurzbeschreibung in einem DIV platziert. Das passt auch super, jedoch habe ich zwei DiVS für das Aussehen verwendet, das innere DIV ist aber falsch positioniert.
    Das DiV heißt description_wrapper_a (außen) bzw. description_wrapper_i (innen).
    Das innere DIV soll 11px von rechten Rand des äußeren linken und 11px vom äußeren oberen Rand entfernt sein, margin-Top hat nicht funktioniert.

    Willst du einfach nur einen 11px breiten, 'runden' Rahmen in der Farbe #D7D7D7 haben? Wenn ja, das geht mit einem Container-Element.
    Ich sehe auch keinen Sinn in deinem überdimensonalem p-Element, statt mehrere zu verwenden prügelst du ein haufen br-Elemente rein.

    Desweiteren:

    <link rel="stylesheet" type="text/css" href="css/style.css"/>  
    <style type="text/css">  
    .big {  
    	font-weight: bold;  
    }  
    .big {  
    	font-weight: bold;  
    }  
    .big {  
    	font-weight: bold;  
    }  
    /* ...... */  
    .big {  
    	font-weight: bold;  
    }  
    </style>
    

    Ich glaub der Browser hat schon beim ersten mal begriffen, das font-weight bold sein soll. Desweiteren, lagere es doch auch in deine style.css aus.

     <tr>  
     		      <td width="170"><img src="images/logo.png" width="96" height="26" alt="Loodo" /></td>  
                  <form>  
    ...  
                  </form>  
    	        </tr>
    

    Invalides HTML und zusätzlich noch der Missbrauch einer Tabelle zum layouten.

    Dein riesiges Bild das die Navigation darstellt, ließe sich auch leichter gestallten durch HTML-Elemente & CSS. Und das ganze wird dann sogar noch leichter wartbar.

    <span class="description_wrapper_u"><br>  
      
    Die Anziehungskraft</span><br><br>
    

    Du missbrauchst ein span-Element und 3 br-Elemente um ein hX-Element nachzuahmen ein. Nimm doch gleich ein solches und formatiere es mit CSS.

    MfG
    bubble

    --
    If "god" had intended us to drink beer, he would have given us stomachs. - David Daye