• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme mit 2 divs nebeneinander

C

computerfreak

Neues Mitglied
Hallo

ich hoffe ihr könnt mir helfen. Ich versuche gerade das erste Mal mit DIV Containern zu arbeiten. Ich habe 2 DIVs die nebeneinander dargestellt werden sollen. Leider werden sie aber vertikal versetzt nebeneinander dargestellt und ich weiß nicht wieso.
im Index.php steht:
HTML: 
<center>
<div id="hintergrund">
<?php 
include 'menue.php';
?>
<div id="text">
TEST
</div>
<div id="footer"></div>
</div>
</center>

und im menue.php steht:
PHP: 
<?php
echo "<div id=\"navigationcontainer\" align=\"left\"><BR><BR><BR><BR><BR><BR><BR><BR>&nbsp;<p><BR><BR><BR>";
echo "</p>";
echo "<table border='0' cellpadding='0' cellspacing='0'>\n";
echo "<tr><td style='border-top:1px solid #fff;'><a class='navigation_aktiv' href='home.php'>Home </a></td></tr>\n";
echo "<tr><td><a class='navigation' href='news.php'>News </a></td></tr>\n";
echo "<tr><td><a class='navigation' href='uns.php'>Über Uns </a></td></tr>\n";
echo "</table>\n";
echo "</div>";
?>

im Style steht:
Code: 
div#hintergrund 
{ 
width: 1024px; 
height: 640px; 
BACKGROUND: url('images/background.jpg') ; 
text-align: center;
} 
 
div#footer 
{ 
 clear: left; 
}
div#navigationcontainer 
{ 
 float: left;
 width: 200px;
 
}
div#text
{ 
 float: left;
 
 overflow: auto; 
 width: 800px; 
 height: 420px; 
 border: inset 3px #000000; 
padding: 7px;
}


Ich versteh nicht wieso die beiden DIVs nicht auf der gleichen Horizontalen Ebene liegen
 
Zuletzt bearbeitet:
hey,

Dein Code ist "extrem" kaotisch. Und du verwendest Tabellen zum Layout. Wozu? . Nimm doch CSS :) ist einfacher und vorallem richtig im Bezug auf Trennung von Struktur und Layout. Dir fehlen auch notwendige Auszeichungen wie z.B. der DOCTYPE, was im Enddefekt dazu führen kann, dass dein CSS auch wenn es "richtig" verwendet wird nicht so ankommt wie du willst.

Hier einmal ein Beispielcode für die Variante XHTML 1.0, der die nötigen Basic - Auszeichnungen enthält.

Code: 
?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Dein Titel</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
</head>
<body>
</body>
</html>
 
ist mein erster css Versuch. Die DOC Type infos sind in der org Datei drin, ich hatte nur den body-Part kopiert

geht das denn generell nicht mit den Tabellen in einem DIV? Ich würde das Menü erstmal ungern umstellen, da ich erstmal die einfachen Sachen zum laufen bringen mag.

welcher Teil ist denn so extrem chaotisch? Weil ich php mit eingebunden habe? ich möchte halt das Menü nur einmal irgendwo gespeichert haben um nicht später an x Stellen ändern zu müssen
 
Jetzt zu deinem Code,

(vom PHP abgesehen)

Alle <center> und CO Tags kannst du dir sparen auch die Tabelle. Die Linknavi zeichnest du mit einer ungeordneten Liste aus. Der Hintergrundcontainer ist überflüssig, weil du den Hintergrund auch eleganter für die ganze Seite definieren kannst etc...

Hier mal ein Code für dich, mit der Variante float:

Html
Code: 
<div id="nav">
<!-- Links in einer Liste, die du dann mit CSS stylen und auch ausrichten kannst. -->
<ul>
<li><a href="ziel1.html">Link1</a></li>
<li><a href="ziel2.html">Link2</a></li>
<li><a href="ziel3.html">Link3</a></li>
</ul>
</div>
<div id="content">
</div>
<div id="footer">
</div>
Styles

Code: 
* {
padding: 0;
margin: 0;
}
body {
background-image: url(datei.format); /* wobei du es dann mit background-position ausrichten kannst... */
}
#nav {
float: left;
}
ul li { /* hier kommen dann die Styles für die Liste rein , um die Anstriche zu entfernen , sie auszurichten etc... */
}
Wie du die Navi zuende baust, kannst du hier: http://de.selfhtml.org/css/eigenschaften/listen.htm lesen

gruß
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben