Divs nebeneinander bzw. übereinander
0 0 
berlinsurfer
0
Divs nebeneinander bzw. übereinander
Guten Abend,
ich versuche gerade ein Template für Joomla zu erstellen, allerdings habe ich noch zwei kleine Probleme:
Zwei Divs ("Suchen" und "Social Networks") sollen übereinander sein. Außerdem User4, User5 und User6 nebeneinander. Doch bei mir sieht es so aus:
http://s7.directupload.net/images/110810/ii7dq7fe.png
HTML:
<!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>
<link href="template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
Header
<div id="search">
Suche
</div>
<div id="social_networks">
Social Network
</div>
</div>
<div id="navi">
</div>
<div id="user_top">
<div id="user1">
User1
</div>
<div id="user2">
User2
</div>
<div id="user3">
User3
</div>
</div>
<div id="center">
<div id="content">
content
</div>
<div id="right">
Right
</div>
</div>
<div id="user_bottom">
<div id="user4">
User4
</div>
<div id="user5">
User5
</div>
<div id="user6">
Use6
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
html{
width: 101%;
}
body{
background: url(../background.png);
color: #000;
font: Arial, Helvetica, sans-serif;
font-size:12px;
}
#container{
background: #0F0 ;
width:1000px;
margin: 0 auto;
padding: 0px;
}
#header{
background: #03F;
width: 1000px;
height: 200px;
}
#search{
background:#333;
width: 150px;
height: 20px;
float: right;
}
#social_networks{
background: #FFF;
width: 50px;
height: 50px;
float: right;
}
#navi{
background: #300;
width: 1000px;
height: 50px;
}
#user_top{
background: #F00;
width: 1000px;
height: 150px;
}
#user1{
background: #066;
width: 333px;
height: 150px;
float: left;
}
#user2{
background: #096;
width: 333px;
height: 150px;
float: left;
}
#user3{
background: #0C6;
width: 333px;
height: 150px;
float: right;
}
#content{
background: #60F;
width: 800px;
float:left;
}
#right{
background: #FF0;
width: 200px;
float: right;
}
#user_bottom{
background: #0FF;
width: 1000px;
height: 150px;
}
#user4{
background: #066;
width: 333px;
height: 150px;
float: left;
}
#user5{
background: #096;
width: 333px;
height: 150px;
float: left;
}
#user6{
background: #0C6;
width: 333px;
height: 150px;
float: right;
}
#footer{
background: #F0F;
width: 1000px;
}
Was mache ich falsch?
Mfg Didi
-
sorry das ich mir ncith den ganzen code durchlese, aber ich machs immer mit tabellen. klingt plump und weiß net obs so mit deinen templates funktioniert aber klappt immer und sieht auch gut aus. Man kann ja auch die divs in die zellen packen oder so.
-
sorry das ich mir ncith den ganzen code durchlese, aber ich machs immer mit tabellen. klingt plump und weiß net obs so mit deinen templates funktioniert aber klappt immer und sieht auch gut aus. Man kann ja auch die divs in die zellen packen oder so.
Ich suggeriere mir jetzt mal selbst, das nicht gelsen zu haben. Vielleicht klappts ja.
--
Signaturen sind blöd!
-
-
Hallo, Didi,
Was mache ich falsch?
unglaublich falsch ist es schon mal, den _kompletten_ Code zu posten und zu erwarten, dass der durchgelesen wird. Kannst du das Problem nicht schon mal eigenmächtig eingrenzen ? Z. B. das Problem liegt vermutlich bei div1sowieso, das zugehörige CSS sieht so und so aus ?
Gruß,
berlinsurfer--
Science flies you to the moon.
Religion flies you into buildings.
selfcode: ie:{ fl:| br:^ va:? ls:< fo:{ rl:( n4:{ ss:} de:[ js:} ch:{ sh:) mo:? zu:) -
-
Hi!
Es wurde ja schon gesagt, dass Du nicht unbedingt den Kompletten Code posten musst. Du hast dort 2 kleinere Teilprobleme, die man mit enig Code schon erklaeren konnte.
Dein Search und Social Networksproblem:
Du moechtest 2 Container untereinander haben. Du gibst ihnen aber CSS mit auf den Weg, das sie rechts nebeneinander floaten lassen soll. Musst dich also nicht wundern. Wenn Du sie unterenander haben willst dann habe ich eine frohe Nachricht: Das ist genau das Standardverhalten von DIV-Containern. Warum hast du es ihnen mit float genommen, wenn sie es explizit haben sollen?
Dein anders Problem:
Kann ich nicht nachvollziehen. Dein Code produziert bei mir (IE8) das gewuenschte Ergebnis.
Hast Du schonmal versucht die Boxen inline-block zu stylen und auf das floaten zu verzichten?--
Signaturen sind blöd!