PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Zwei Divs nebeneinander packen in css



Moe777
21.02.2009, 12:09
Hi, ich hab (wie ihr euch anhand der frage vl. denken könnt) nicht allzuviel ahnung von css. Ich bin gerade dabei zum "trainieren" ein layout zu coden und häng gerade an einem eigentlich einfachen teil fest. Ich will einen container neben einen anderen packen, leider stapeln die sich immer untereinander an. Wie bekomm ich das Problem gelöst, so das es in allen Browsern richtig angezeigt wird?


#navigation{
margin-top:78px;
color:#040b1f;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
float:right;
text-align:left;
padding-left:10px;
background-color:#086916;
height: 100%;
width:114px;


#text{
background-color:#020612;
color:#086916;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-left:43px;
margin-right:23px;
padding-left:57px;
padding-right:66px;
padding-top:132px;
margin-top:82px;
width:640px;
height:100%;

}

TruckerB
21.02.2009, 12:17
Ich bin leider nicht so in CSS bewandert. Benutze lieber Tabellen^^
Aber soweit ich weis macht ein div-Tag automatisch einen Zeilenumbruch. Versuch es mal mit einem span-Tag (http://de.selfhtml.org/css/formate/zentrale.htm#div_span)

Vertaler
21.02.2009, 12:39
Da du absolute Größen angibst, hast du vermutlich schon im Sinn, wo genau die Sachen stehen sollen. In dem Fall ist es am einfachsten, du gibst den Containern absolute Positionen auf der Seite. (Dann mußt du auch nicht mit so „krummen“ margin-Werten arbeiten.)
Am besten, du liest dir das SelfHTML-Kapitel zur Positionierung (http://de.selfhtml.org/css/eigenschaften/positionierung.htm) durch, da erfährst du alles, was du benötigst.

Moe777
21.02.2009, 12:46
bekomm ich da keine Probleme mit dem IE?
War das letzte mal nämlich irgendwie so

Moe777
21.02.2009, 13:12
Ok, ich bin jetzt soweit, dass die zwei container nebeneinander sind. Allerdings ist der eine komplett rechts ausgerichtet. Ich könnte diesen zwar mit absoluten werten nach links verschieben, allerdings waäre das ja dann nur für eine bestimmte auflösung der richtige wert...


html-datei:

<?xml version="1.0" ?>
<!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>
<title>Random Page</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<img src="header.jpg">
<div id="text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<br>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<br>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
<br>
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
</div>
</div>
<div id="navigation">
<img src="navioben.jpg"><br>
<img src="news.jpg"><br>
<img src="gallery.jpg"><br>
<img src="links.jpg"><br>
<img src="impressum.jpg"><br>
</div>
</body>
</html>
css-datei

body{
background-image:url(bg.jpg);
background-repeat:no-repeat;
background-color:#040b1f;
}
#navigation{
margin-top:132px;
margin-right:100px;
color:#040b1f;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
text-align:left;
padding-left:10px;
background-color:#086916;
height: 100%;
width:114px;
float:right;
}
#main{
background-color:#020612;
color:#086916;
margin-left:49px;
margin-right:23px;
margin-top:123px;
width:640px;
height:100%;
float:left;
}
#text{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
padding-left:57px;
padding-right:66px;
padding-top:33px;
}wies aussieht:
http://upload.worldofplayers.de/files3/ist.PNG


soll:
http://upload.worldofplayers.de/files3/soll.jpg

Chris
21.02.2009, 14:22
Es gibt Codetags, die zerstören einem auch nicht den Quelltext durch Smileys. :p
[edit] Linksausgerichtet floaten lassen dann gehts.

Moe777
21.02.2009, 14:46
O.o
Ich war mir 100% sicher ich hätte das schon probiert... naja, jetzt klappts auf alle Fälle, danke ;)

Kp, warum ich quotes benutzt hab ;)

Moe777
21.02.2009, 17:53
Ok, nächstes Problem;)
Wie ihr oben sehen könnt, reichen leider die boxen nicht bis ganz unten. Ich habs mit height:100% probiert, aber das klappt nicht. Irgendwelche Tips?

Vertaler
21.02.2009, 18:08
Wenn du dem body- und am besten auch noch dem html-Tag auch die Höhe 100% zuweist, müßte es eigentlich funktionieren.