2 divs nebeinander

fate87 · 20.01.2009

Hallo,
ich habe folgendes Probelm.

Ich habe mir mein Layout wie gewohnt in PS erstellt, es gesliced und nun mit dreamweaver und css die Bilder wieder zusammengesetzt.

Beim Zusammensetzen, bemerkte ich, dass meine DIV´s nebeneinader platziert werden müssen, also habe ich den float befehl zur hilfe gezogen.

Hat bei dem ganz Linken DIV auch wunderbar geklappt, bei dem Div daneben jedoch nicht, er verschiebt und verzerrt mir die Bilder andauernd.

Hat jemand eine idee wie ich das ganze Angehen könnte ?

Quelltext:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>
<body>
<div class="Container">Raum für den Inhalt von class "Container"
<div class="container" id="header">Raum für den Inhalt von class "container" id "header"
<div class="container" id="navigation">Raum für den Inhalt von class "container" id "navigation"
<div class="container" id="contentlinks">die box soll links
<div class="container" id="rechte box">diese rechts daneben</div>
</div>
</div>
</div>
</div>
</body>
</html>
Ich bin für jede Hilfe dankbar

sokie · 20.01.2009

AW: 2 divs nebeinander

ein bisschen wenig info.
am einfachsten wäre es, wenn du das mal so wie du es jetzt hast hochlädst und uns den Link schickst...
oder einen Screen und den kompletten code.
eine Frage schon an dieser Stelle: warum braucht jeder container eine klasse UND eine ID?

sub_hero92 · 20.01.2009

AW: 2 divs nebeinander

den divs mit css eine breite zuweisen und floaten

Code:

#header {
  float: left;

fate87 · 20.01.2009

AW: 2 divs nebeinander

sokie schrieb:
ein bisschen wenig info.
am einfachsten wäre es, wenn du das mal so wie du es jetzt hast hochlädst und uns den Link schickst...
oder einen Screen und den kompletten code.
eine Frage schon an dieser Stelle: warum braucht jeder container eine klasse UND eine ID?

ok, hab es mal hochgeladen , neben dem linken grauen strich, soll das untere div. wenn ich aber nun mit float=left arbeite, setze ich das div trotzdem drunter

sub_hero92 · 20.01.2009

AW: 2 divs nebeinander

den divs mit css eine breite zuweisen und floaten

Code:

#header {
   float: left;
   width: 25%; //25% der Browserbreite falls Nachkomme von <BODY>
}

das machst du mit allen Container und 4 divs sind neben einander:hmpf:

fate87 · 20.01.2009

AW: 2 divs nebeinander

sub_hero92 schrieb:
den divs mit css eine breite zuweisen und floaten

Code:

#header { float: left; width: 25%; //25% der Browserbreite falls Nachkomme von <BODY> }

das machst du mit allen Container und 4 divs sind neben einander:hmpf:

gut, dankeschön das probiere ich gleich einmal aus.

puur · 20.01.2009

AW: 2 divs nebeinander

hmm ich weiß jetzt nicht obs das ist, aber du musst aufpassen wenn du floaten lässt verschiebt er die divs immer dahin wo er platz dafür findet: z.B.:
1. Div ist 500px hoch 2. Div soll links daneben 250px hoch macht er.. 3. Div soll neben das 2. Div und ist auch 250px hoch.. das wird nun aber darunter gesetzt weil dort ja noch "platz ist" also versuch ne box mit der höhe drum rum zu setzen:

HTML:

<html><head><title>Test</title></head>
<body>
<div style="float: left; width: 1000px;" id="index">
    <div style="float: left; background: #000; height: 500px; width: 200px;" id="inhalt1"><span style="color: #fff">Inhalt</span></div>
    <div style="float: left; height: 500px;">
        <div style="float: left; background: #c90000; height: 250px; width: 200px;" id="inhalt daneben"></div>
        <div style="float: left; background: #bbbbbb; height: 250px; width: 200px;" id="inhalt daneben 2"></div>
    </div>
</div>
</body>
</html>

dummwiebrot · 20.01.2009

AW: 2 divs nebeinander

So wird das nix.
Erst mal - wieso verschachtelst du die ganzen divs ineinander? Und wozu gibst du jedem div noch mal die Klasse container?

Wenn du den div mit der ID con neben dem div mit der ID grauerstrich haben willst, dann solltest du den div con nicht IN den div grauerstrich setzen, sondern danach. Dem div grauerstrich gibst du ein float: left, und dem div con ein margin mit der Breite des div grauerstrich.

In Kurzform sollte das etwa so aussehen:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>

<style type="text/css">
  #container {width : 1024px;}
  #grauerstrich {width : 57px; float: left;}
  #content {margin-left : 57px; width : }
</style>

</head>

<body>
<div id="container"><!--Umschließt die gesamte Seite -->

  <div id="grauoben">
   <img src="Bilder/grauoben.gif" width="1024" height="81" alt="grau" />
  </div>

  <div id="navigation"><!--Container für die Navigation -->
   <a href="index.htm"><img src="Bilder/home.gif" name="Home" width="112" height="45" border="0" id="Home" />
   </a>
  </div><!--Container-ENDE für die Navigation -->

  <div id="banner"><!-- Beginn Container für Banner -->
   <img src="Bilder/banner.gif" width="1024" height="111" alt="banner" />
  </div><!-- Ende Container für Banner -->

  <div id="inhalt">

   <div id="grauerstrich"> <img src="Bilder/grauunterweiss-18.gif" width="57" height="369" /> </div>

   <div id="content">
    Raum für den Inhalt von  class "container" id "con"
   </div>

  </div> <!-- Ende Inhalt -->

</div> <!-- Ende Container -->
</body>
</html>

Unter Umständen ist es notwendig mit den Werten für margin etwas zu experimentieren.