CSS Frage, HTML Grundgerüst und DIV

Domi83 · 1. Oktober 2013

Hallo Leute, ich habe heute bei einem Bekannten ein Modul in sein Joomla System eingebunden, und dann hat sich der Inhalt von diesem Modul das im Frontend ausgegeben wird, nicht so dargestellt wie gewollt. Ich vermute mal, dass Problem liegt an meiner CSS und dem DIV aufbau.

Ich versuche mal das Grundgerüst aufzubauen und zu erklären

HTML:

<body>
 <div id="newsflashbox"></div>
 <div id="wrapper">
  <div id="header" class="clearfix"></div>
  <div id="headmenu" class="clearfix"></div>
  <div id="main" class="clearfix">
   <div id="rightbox"></div>
   <div id="content"></div>
  </div>
  <div id="footer"></div>
 </div>
</body>

So, die "rightbox" hat einen float Right und eine fixe Breite!
Der "content" hat nur ein margin-right, der den Wert der Breite der rechten Box beträgt. Hoffe bis hierhin ist alles verständlich

Jetzt kommt der Spaßfaktor bei dieser Geschichte, ich beziehe mich jetzt nur mal auf den Main Bereich...

HTML:

<div id="main" class="clearfix">
 <div id="rightbox">
  <div class="werbung"></div>
  <div class="werbung"></div>
 </div>
 <div id="content">
  <div class="inhalt">
   <div>Ich bin eine Überschrift</div>
   <div>Ich bin ein Inhalt</div>
   <div>Ich bin ein Inhalt</div>
  </div>
 </div>
</div>

Das Problem ist jetzt, im Content, oder in seinem Inhalt... das die Überschrift genau richtig positioniert ist, aber ab dem zweiten DIV mit dem Inhalt, rückt alles so weit runter wie die rechte Box hoch ist...

Wie bekomme ich es denn hin, dass die Inhalte im "content" sich nicht danach orientieren, was im "rightbox" passiert?!

Gruß, Domi

sounds · 1. Oktober 2013

Wurde die rightbox denn mit float:right; versehen?

smallthings · 1. Oktober 2013

Du musst das CSS dazu posten, sonst bringts nichts. Wahrscheinlich sind die divs falsch verschachtelt oder sowas.

Daaron · 1. Oktober 2013

Poste den relevanten CSS-Part, alles andere ist nur Kristallkugel.
Meine sagt: irgendwo hast du ein Padding, ein Margin oder eine Border am Content oder der rechten Box, irgend etwas das im Box-Model auffällt.

Ansonsten heißt die Devise: Chrome verwenden -> hat die mit Abstand besten Webdeveloper-Werkzeuge.

Domi83 · 1. Oktober 2013

Oh man.. schande über mein Haupt.. An den CSS Teil habe ich gar nicht gedacht..

HTML:

div#wrapper {
 margin: 0 auto;
 padding: 0;
 width: 1000px;
}
div#container {
 min-height: 300px;
}

div#newsflashbox {
 background-color: #000000;
 border: 1px solid #d4d4d4;
 height: 15px;
 margin: 4px 0;
 overflow: hidden;
 padding: 3px 0;
 width: auto;
}

div#header {
 height: 83px;
}
div#headblock1 {
 float: left;
 height: 100%;
 width: 49.5%;
}
div#headblock2 {
 float: right;
 height: 100%;
 width: 49.5%;
}

div#headmenu {
 background-color: #ffffff;
 border: 0px solid #d4d4d4;
 border-width: 1px 1px 0 1px;
 padding: 4px;
}

div#main {
 background-color: #ffffff;
 border: 1px solid #000000;
 padding: 4px;
 z-index: 1;
}
div#leftbox {
 display: none;
 float: left;
 width: 158px;
}
div#rightbox {
 float: right;
 width: 165px;
}
div#content {
 margin-right: 170px;
}

div#footer {
 font-size: 12px;
 margin-top: 3px;
}

.clearfix:after{
 clear: both;
 content: '.';
 display: block;
 height: 0;
 visibility: hidden;
}

/* =========== */
div#rightbox > .werbung {
 text-align: center;
}
div#content > .inhalt {
 padding-left: 0px;
 padding-right: 0px;
}
div#footer > .inhalt {
 text-align: center;
}

Jetzt hoffe ich mal, dass ich nichts vergessen habe...

Suche

CSS Frage, HTML Grundgerüst und DIV

Domi83

Rear Admiral

sounds

Cadet 4th Year

smallthings

Cadet 3rd Year

Daaron

Fleet Admiral

Domi83

Rear Admiral

Ähnliche Themen