Div Nebeneinander

JustChill · 23. Mai 2011

Hallo Leute,
ich hab nun alles probiert die 2 Divs nebeneinander zu setzen. Bin natürlich gescheitert, und meine CSS ist nun verwüstet
Kann mir jemand helfen?
Ich poste hier auch die CSS nur mit Daten von Width etc da ich ab da nurnoch gewütet hab.

Code

<div id="content1">
<?
include 'bla1.html';
?>
</div>
<div id="content2">
<?
include 'bla2.html';
?>
</div>

Alles anzeigen

Code

#content1 {
background-color:white;
width:503px;
min-height:400px;
}
#content22 {
background-color:white;
width:206px;
min-height:400px;
}

Alles anzeigen

Esamu · 23. Mai 2011

Code

#content1{
[...]position:absolute;
right:0px;
[...]
}
#content2{
[...]float:right;
[...]
}

content1 ist rechts, content 2 ist direkt links daneben.

iBurn · 23. Mai 2011

Esamu schrieb:

Code

#content1{

[...]float:right; (oder left)

[...]

}

#content2{

[...]float:right; (oder left)

[...]

}

content1 ist rechts, content 2 ist direkt links daneben.

danch dann aber einen leeren
div tag machen mit dem style clear:both damit unterbrichst du den float befehl und der nächte div wird ganz normal dadrunter angezeigt

Code

<div id="conten1t"></div>
<div id="content2"></div>
<div style="clear:both"></div>

mfg

JustChill · 23. Mai 2011

danke schomnmal, hat sich zwar was bewegt jedoch falsch.
Über den 2 Divs sind nochmal 2 Divs nebeneinander und ganz unten auch einer der als footer hinhält.
Komischerweiße is der ganze inhalt von Content 2 immer direkt unter Content 1 (Content 1 Links Content 2 Rechts)

Edit: @ eraz3r: das funktioniert auch nicht richtig

trigg3r · 23. Mai 2011

andere methode wäre es beiden divs die Style Eigenschaft:

Code

display: inline-block;

zu geben.

iBurn · 23. Mai 2011

meine lösung währe jez einfach so

Code

<div id="wrapper">
<div id="teil1"></div>
<div id="teil2"></div>
<div style="clear:both;"></div>
<div id="content1"></div>
<div id="content2"></div>
<div style="clear:both;"></div>
<div id="footer"></div>
</div>

Alles anzeigen

die css dazu

Code

#wrapper {
width:500px;
height:auto;
margin:auto;
}
#teil1 {
width:500px;
height:20px;
float:left;
}
#teil2 {
width:500px;
height:20px;
float:left;
}
#content1 {
width:250px;
height:20px;
float:left;
}
#content2 {
width:250px;
height:20px;
float:left;
}
#footer {
width:500px;
height:20px;
}

Alles anzeigen

müsste jez deiner beschreibung her gleich sein!

mfg

JustChill · 23. Mai 2011

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="all">
<div id="head"><img src="Bilder/header.png" alt="Head"></div>
<div id="navi">
<div id="Uhr">
<?
$uhrzeit = date("H:i");
echo $uhrzeit," Uhr";
?>
</div>
<img src="Bilder/navi.png" alt="Head">
<ul id="navigation" >
<li><a href="home.html" >home</a></li>
<li><a href="news.html" >news</a></li>
<li><a href="gallerie.html" >gallerie</a></li>
<li><a href="">tutorials</a></li>
<li><a href="">kontakt</a></li>
</ul> </div>
<div id="banner"><img src="Bilder/banner.png" alt="Head"></div>
<div id="login"><br />
Benutzername:
<input type="text" class="ttext"/><br /><br />
Passwort:<br />
<input type="password" class="ttext" /><br /><br />
<input type="submit" value="Login" class="Login" />
<br /><br /><br />
<br />
<br />
</div>
<div style="clear:both"></div>
<div id="content1">
<?
include 'home.html';
?>
</div>
<div id="content2">
<?
include 'zusatz.html';
?>
</div>
<div style="clear:both"></div>
<div id="footer"> </div>
</div>
</body>
</html>

Alles anzeigen

Code

body {
margin: 0px;
padding: 0px;
background-color:#666666;
font-family:calibri;
}
#all {
width:709px;
height:auto;
margin: 0 auto;
}
#Uhr {
color:white;
margin-left:620px;
padding-top:8px;
position: absolute;
}
#head {
width:709px;
height:151px;
}
#navi {
width:709px;
height:37px;
}
#banner {
float:left;
width:503px;
height:219px;
}
#login {
float:left;
width:206px;
height:219px;
color:#FFFFFF;
background-color:black;
text-align:center;
background-image:url(../Bilder/login.png);
}
#content1 {
background-color:white;
width:503px;
min-height:400px;
float:left;
}
#content2 {
background-color:white;
width:206px;
height:400px;
float:left;
}
#footer {
width:709px;
height:20px;
background-color:#efefef;
text-color:#000000;
text-align:right;
}
#navigation {
word-spacing:2em;
padding-top:-5px;
margin-top:-35px;
position: absolute;
}
#navigation a {
color: #FFFFFF;
text-align: left;
text-decoration:none;s
}
#navigation ul {
margin: 0px;
padding: 0px;
}
#navigation li {
display:inline;
}
input.ttext{
border:1px solid #BCF1AD;
color:#FFFFFF;
background-color:#000000;
}
input.Login{
background-color:#000000;
padding:0;
margin:0;
border:1px solid #BCF1AD;
font-size:12px;
background-position: 2px 2px;
width:100px;
color:#FFFFFF;
}

Alles anzeigen

Hab nun einfach alles reingetan funktioniert wieder nicht komischer weiße vlt wird daraus jemand schlau

iBurn · 23. Mai 2011

es geht doch?

JustChill · 23. Mai 2011

komischer weiße aber nicht im Browser

Edit: lag warscheinlich an meinem XAMPP
nun aber noch eine Frage, unzwar wieso werden meine include's nicht angezeigt? also auf meinen Ftp?
weder auf Funpic noch auf bplaced? hat jemand eine ahnung?

Dipointed · 23. Mai 2011

Afaik kannst du nur .php Files mittels include einbinden.

berndorin · 24. Mai 2011

man kann auch html datein includen
meines wissen ist auf funpic usw. kein php short tag oder wie das heißt nicht aktiviert
dann muss man anstatt "<?" "<?php" schreiben

FragSalat · 24. Mai 2011

hastes es schonma versucht die 2 divisions die nebeneinander seien sollen mit float:left oder right nebeneinander zu packen? das klappt immer

Teilen