2 text blöcke (divs) nebeneinander?

K

Klegs

Angesehenes Mitglied
Hallo

ich möchte 2 textblöcke nebeneinander plazieren. ich habe mir gedacht ich mache das mit div's.
leider erscheinen die blöcke untereinander und nicht nebeneinnander. was mache ich falsch. mit dem float befehl erreiche ich auch nichts.

gruess
 
CODE <h1 style="width:400px; float:left; color:red">Überschrift mal anders</h1>
<p style="font-size:120%">Eine Überschrift
muss nicht immer einen langweiligen, über die ganze
Breite des Anzeigefensters gehenden Block erzeugen. Sie kann auch mal
seitlich vom Text stehen, und der Text fließt um die
Überschrift. Auch so kann man lange Texte mal anders gestalten als
sonst üblich.</p>



Am besipiel von einem h1. float:left; lässt die nachfolgenden Element links umschliessen.



(code aus Selfhtml)

Driver
 
danke dir

aber das habe ich nicht gemeint. sorry

es ist auch schwer zu beschreiben.

hmmmmm, mal überlegen
blink.gif
blink.gif
blink.gif


Also:

oben habe ich ein div mit dem titel bild das ist 800 px breit und hat einen 1px rahmen
unter dem titel bild kommt ein div wo die navigation ist. auch 800px breit aber nur 20 px hoch, dieses div hat aber auch einen 1px rahmen.
unter der navigation möchte ich 2 blöcke ( oder spalten) eine 600 px und die andre 200 px breit mit rahmen.
jetzt ist es aber leider so das die zwei spalten nicht neben einnander sind sondern untereinnander.
ohmy.gif


das ganze sollte auf der seite zentriert sein.

bis zur navigation habe ichs aber weiter leider nicht.
sad.gif


gruess
 
Das sollte aber mit dem float:left für die linke Spalte funktionieren, eventuell zusätzlich noch mit einem float:right für die rechte Spalte. Falls diese auch dann noch untereinander angeordnet werden, sollten die Breitenangaben der Spalten vielleicht etwas verringert werden. Der IE rechnet u.U. den Rahmen hinzu, so dass die 800px zu eng werden für beide Spalten
 
schon besser, jetzt erscheinen die zwei spalten nebeneinnander.
was jetzt noch nicht passt, ist das die linke spalte in der rechten enthalten ist. also der rahmen der rechten spalte um schliesst die linke spalte!
huh.gif


gruess
 
Hast du die Tags richtig verschachtelt? Vielleicht hilft auch noch ein abschließendes div mit clear:both. Ansonsten mal einen Link oder den Code hier posten, dass man sich ein Bild von dem Problem machen kann
 
CODE <body>
<div id="title">
<img src="bilderallgemein/zone_kopf.jpg" /></div>
<div id="platzhalter5px"></div>
<div id="navigation">
<div align="center">menue | menue | menue | menue | menue </div>
</div>
<div id="platzhalter5px"></div>
<div id="main">
<div id="linkesplalte">testtesttesttest</div>
<div id="rechtespalte">testtesttesttest</div>
</div>


</body>


aber nicht lachen ab meinem code, bin ein blutiger anfänger.....
rolleyes.gif
 
Die Verschachtelung schaut korrekt aus; der Rahmen gehört eigentlich nur zu #rechtespalte? ich würde dann nochmal abschließend clearen:

QUOTE ("Quelltext")
<body>
<div id="title">
<img src="bilderallgemein/zone_kopf.jpg" /></div>
<div id="platzhalter5px"></div>
<div id="navigation">
<div align="center">menue | menue | menue | menue | menue  </div>
</div>
<div id="platzhalter5px"></div>
<div id="main">
<div id="linkesplalte">testtesttesttest</div>
<div id="rechtespalte">testtesttesttest</div>
<div id="clear"></div>
</div>


</body>



und in der css-Datei:


CODE
#clear {
clear:both;
height:0;
}

 
danke für die prompte hilfe bis jetzt.
leider hat dein tip nichts gebracht.
sad.gif


gruess
 
Gerne

CODE <style type="text/css"><!--
body
{
font-family:Verdana;
font-size:12px;
background-color:#FFFFFF;
text-align:center;
margin:0px;
margin-top: 5px;
}
h1 {font-size:18px;color:#000000;margin-bottom:0px;}
h2 {font-size:16px;color:#000000;}
h3 {font-size:14px;color:#000000;}

code {font-size:14px;color:#0000ff;}
pre
{
font-size:14px;
color:#0000ff;
padding:5px;
}

#title {
width:790px;
padding:5px;
background-color:#ffffff;
border:dashed 1px #666666;
}
#navigation {
width:790px;
padding:5px;
background-color:#ffffff;
border:dashed 1px #666666;
}
#platzhalter5px {
width:790px;
background-color:#999999;
}
#welcome {
width:600px;
padding:1px;
background-color:#ffffff;
border:dashed 1px #666666;
float:left
}
#main {
width:800px;
padding:1px;
background-color:#ffffff;
border:dashed 1px #666666;
}
#welcom1 {
border:dashed 1px #666666;
background-color:#ffffff;
width:150px;
padding:0px 0px;
float:right
}
#clear {
clear:both;
height:0;
}
//--></style>
<title>Test</title>
</head>
<body>
<div id="title">
<img src="bilderallgemein/kopf.jpg" /></div>
<div id="platzhalter5px"></div>
<div id="navigation">
<div align="center">menue | menue | menue | menue </div>
</div>
<div id="platzhalter5px"></div>
<div id="main">
<div id="welcome">testtesttesttest</div>
<div id="welcome1">testtesttesttet</div>
<div id="clear"></div>
</div>
</body>
</html>



merci
 
Naja, es wird halt der Rahmen von #main angezeigt, welches ja beide Spalten umschließt:

QUOTE ("Quelltext")
#main {
width:800px;
padding:1px;
background-color:#ffffff;
border:dashed 1px #666666;
}



wenn du die Angabe rausnimmst, dann verschwindet dieser äußere Rahmen

die rechte Spalte dagegen hat keinen Rahmen, weil die ids nicht übereinstimmen, im ersten Fall fehlt ein e:


QUOTE ("Quelltext")
#welcome1 {
border:dashed 1px #666666;
background-color:#ffffff;
width:150px;
padding:0px 0px;
float:right
}



wenn du das berichtigst, hat die rechte Spalte ihren eigenen Rahmen
 
Hi Jörg

ich habs jetzt auch geschafft.
ich habe von grund auf den code neu geschrieben. ( bin ich jetzt ein coder undnicht mehr nur ein wysiwyg bastler
tongue.gif
)
Danke für deine hilfe.
biggrin.gif
biggrin.gif
biggrin.gif


wie heisst der befehl im css um das div zu zentrieren?

Gruess

P.S. der rahmen im css, macht eich nur sichtbar damit ich die strucktur sehe.
 
Schön, dass es jetz funktioniert
smile.gif


Zentrieren kannst du mit margin:auto - für den Internet Explorer braucht es je nach Doctype zusätzlich noch ein text-align:center im übergeordneten div

CODE
<div style="text-align:center">
<div style="margin:auto; text-align:left"></div>
</div>

 
kann ich das zentrieren auch im css schon definieren?
der code den du angegeben hast, kommt doch zum div ins body, odrr?

gruess
 
hallo, ich hab ein ähnliches problem, würde auch gern 2 divs in gleicher höhe nebeinander darstellen:
das hauptmenü sollte mit dem sprachwechsel menü auf einer höhe liegen.

die seite: http://www.pulk.net/ressler/

die css datei: CODE body {

font-family: verdana, arial, helvetica, sans-serif;

background-color: #d3d3d3;

font-size: 12px;

}





a:link {

color: #CC6600;

font-weight: normal;

text-decoration: none;

}

a:visited {

color: #CC6600;

font-weight: normal;

text-decoration: none;

}

a:hover {

color: #333333;

text-decoration: underline;

}

a:active {

color: #ffffff;

}



#top, #navbar, #middle {



border: 1px solid black;

font-weight: normal;

text-align: left;

width: 710px;

}



#top {

background: #E85400;

margin-top: 5%;

padding: 10px;



}



#top td{

font-family: arial, helvetica, sans-serif;

font-weight: bold;

font-size: 22px;

color: #ffffff;



}



#navbar {

background: #E85400;

position: relative;

top: 10px;

padding: 10px;

padding-top: 5px;

padding-bottom: 5px;


}





#navbar td {

font-family: verdana, arial, helvetica, sans-serif;

font-size: 12px;


}



#middle {

position: relative;

margin-top: 20px;

padding: 10px;

background: #d3d3d3;



}



#middle td {

font-size: 12px;

color: #000000;

line-height: 120%;

}



und der quelltext (gekürzt):

CODE </div>

<div id="navbar" class="navbar" >

<?php mosLoadModules ( 'navbar',-3); ?><div id="mambelfish"><?php mosLoadComponent( 'mambelfish',-3); ?></div>

</div>

<div id="middle">

<?php mosMainBody(); ?>

<div id="footer">

<?php mosLoadModules ( 'footer' ); ?>

</div>

</div>

</div>




hab schon einiges rumprobiert, auch mit float,...aber komm auf keinen grünen zweig. vielleicht kann mir da jemand weiterhelfen.
 
Mit float und einer festen Breitenangabe sollte es funktionieren:

CODE
#navbar .module {
width:560px;
float:left;
}

 
QUOTE (Jörg Kruse @ Mo 24.10.2005, 20:35) Mit float und einer festen Breitenangabe sollte es funktionieren:


CODE
#navbar .module {
width:560px;
float:left;
}



ja, funktioniert
biggrin.gif


zumindest mit firefox und safari, hab keinen ie hier zum testen.

vielen dank!!!
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben