Div - Container

davidos_no.1

Habe mir jetzt vorgenommen die Tabellen durch Div's zu ersetzen. Wie ich das alles mache, ist mir soweit auch klar, jedoch stellt sich mir eine Frage:

So sieht meine Tabelle aus...

Code

<table width="720px" height="520px" align="center" cellpadding="0" cellspacing="0" style="border:1px solid #000000">
  <tr>
    <td colspan="2" width="720px" height="300px">BLA</td>
  </tr>
  <tr>
    <td colspan="2" width="720px" height="20px">BLA</td>
  </tr>
  <tr>
    <td width="360px" height="180px" style="border-right:1px solid #000000">BLA</td>
    <td width="360px" height="180px">BLA</td>
  </tr>
  <tr>
    <td colspan="2" width="720px" height="20px">BLA</td>
  </tr>
</table>

Alles anzeigen

Wenn ich diese Tabelle nun mit Div's machen will, würde ich jetzt erstmal vier Div's untereinander positionieren. Wie sieht das dann mit dem Rahmen aus? Der ist dann ja nicht mehr durchgehend, weil die Div's ja nicht durchgehend miteinander verbunden sind. Habe ich da einen Denkfehler oder wie schaut's da aus?

MfG

Dodo

solang du keine abstände rein gibst, sind sie miteinander verbunden

sejuma

Für den Rahmen verwendest du einen allumfassenden Div als "Hülle".
Darein packst du dann die einzelnen Elemente:

Code

<div style="width: 720px; height: 520px; margin: 0 auto; border: 1px solid #000; background: yellow;">
<div style="width: 720px; height: 300px; background: red;">Header</div>
<div style="width: 720px; height: 20px; background: gray;">Navi</div>
<div style="width: 359px; height: 180px; float: left; border-right: 1px solid #000; background: green;">Linksbox</div>
<div style="width: 360px; height: 180px;margin-left: 360px; background: blue;">Rechtsbox</div>
<div style="clear: both;"></div>
<div style="width: 720px; height: 20px; background: magenta">Footer</div>
</div>

Selbstverständlich solltest du die Style-Angaben in den Headbereich deiner Datei, noch besser in eine ausgelagerte CSS-Datei packen.

davidos_no.1

Zitat von Dodo

solang du keine abstände rein gibst, sind sie miteinander verbunden

Ok...
Eine frage habe ich da noch! Ich möchte meine CSS-Anweisung in eine externe Datei verlagern. Grundsätzlich kein Problem, nur will ich die DIV-Anweisungen in verschiedene Klassen unterteilen. Habe mir schon etwas überlegt, aber irgendwas mache ich wohl falsch...
Das steht in meiner CSS-Datei:

Code

div { width: 720px; height:280px; }
     #a { background:#CCCCCC; float: left }
     #b { background:#999999; float:left }

Das ist ein Teil meiner Seite:

Code

<head>
<link rel="stylesheet" type="text/css" href="CSS-Datei">
</head>
<body>
<div id="a">
</div>
</body>

MfG

Elvis

Code

div#inhalt {
width: 720px; height:280px;
background-color: #CCCCCC;
float: left;}

Vor allem solltest Du nie das Semikolon vergessen.

davidos_no.1

Ohauaha! Ich bin so blöd
Ich habe nicht nur die Semikolons vergessen, sondern die href-Anweisung falsch gehabt

Danke!

davidos_no.1

Da ich jetzt ja keine Tabellen mehr benutze, weiß ich nicht genau, wie ich den DIV-Container zentrieren kann... "margin: center;" geht ja nicht - wie mache ich das?

MfG

synaptic

du musst dem div-container eine breite mitgeben 8zB 300px oder 60% oder sowas, auf jeden fall ne breite, die kleiner ist als der viewport..
und dann wendest du über den style ein margin: 0 auto; an..
und schwupps haste dann das ding zentriert

davidos_no.1

Zitat von synaptic

du musst dem div-container eine breite mitgeben 8zB 300px oder 60% oder sowas, auf jeden fall ne breite, die kleiner ist als der viewport..
und dann wendest du über den style ein margin: 0 auto; an..
und schwupps haste dann das ding zentriert

Das habe ich auch schon probiert, aber es klappt nicht!
Meine CSS-Datei...

Code

div#a { width: 720px; height:280px; margin: 0 auto; background:#000000; float:left; }

Mein Code...

Code

...
<head>
<link rel="stylesheet" type="text/css" href="Div_Layout.css">
</head>
<body>
<div id="a">
</div>
</body>
...

Der DIV-Container ist dadurch nicht zentriert - komischer Weise!

MfG

synaptic

du kannst ja auch nichts zentrieren, wenn du ein emelent floaten lässt :o)

davidos_no.1

Zitat von synaptic

du kannst ja auch nichts zentrieren, wenn du ein emelent floaten lässt :o)

Ok ...
Positionieren die sich denn dann automatisch untereinander oder wie mache ich das dann?

MfG

synaptic

was genau hast du denn vor?
das was du oeben hast? also das divs wie eine tabelle angeordnet sind?
denn dafür haste die nötigen infos schon im thread..
nen wrapper bauen der alles umschliesst, den dann zentrieren, dann die inneren elemente floaten lassen, margin bestimmen und schwups passt des ganze

davidos_no.1

Jetzt habe ich es! Super, danke! Bin ganz beeindruckt, was alles geht...

MfG

davidos_no.1

so...habe das jetzt mal gemacht, aber wenn ich die seite teste, ist alles verschoben. ich habe keine ahnung wieso! ich möchte gerne oben einen header, darunter die navi, darunter den main-bereich, der in links und rechts aufgeteilt ist und darunter einen footer. alles soll einen rand haben. irgendwie ist alles verschoben.

mfg

Mein Code...

HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS-Div.css" />
</head>


<body>


<div id="Wrapper">


<div id="Header">
</div>


<div id="Navi">
</div>


<div id="Main_Left">
</div>


<div id="Main_Right">
</div>


<div id="Footer">
</div>


</div>


</body>
</html>

Alles anzeigen

CSS-Datei

Code

div#Wrapper
{     width: 720px; 
    height:340px; 
    margin:0 auto; 
    border:1px solid #000000; }


    div#Header 
    {     width: 720px;
        height:280px; 
        background:#FFFFFF; 
        float:left; }


    div#Navi
    {     width: 720px;
        height:20px; 
        background:#FFFFFF; 
        float:left;
        border-top:1px solid #000000; }


    div#Main_Left
    {     width: 360px; 
        height:20px; 
        background:#FFFFFF; 
        float:left; 
        border-top:1px solid #000000;
        border-right:1px solid #000000; }

    div#Main_Right
    {     width: 360px;
        height:20px; 
        background:#FFFFFF; 
        float:left; 
        border-top:1px solid #000000 }


    div#Footer
    {     width: 720px;
        height:20px;
        background:#FFFFFF; 
        border-top:1px solid #000000; }

Alles anzeigen

sejuma

Bei #Wrapper lass den height-Wert weg. Der passt sich automatisch dem Inhalt an.

#Header benötigt kein float.

#Navi benötigt auch kein float.

#Main_Right mach so:

Code

div#Main_Right
    {           height:20px; 
        background:#FFFFFF; 
      margin-left: 361px;
        border-top:1px solid #000000; }

dem #Footer füge noch ein

Code

clear: both;

hinzu, dann sollte es hinkommen.

davidos_no.1

klappt leider immer noch nicht

Bandit

Zitat von davidos_no.1

klappt leider immer noch nicht

Sehr schöne Problembeschreibung.

Wie wäre es denn mit einem Link zu der Seite?!

sejuma

Für den IE musst du einen qualifizierten Doctype verwenden, siehe http://www.ohne-css.gehts-gar.net/0006.php

Ansonsten wäre ein Link oder der komplette Quelltext im Zusammenhang sehr hilfreich.

davidos_no.1

hier mal ein link: http://home.arcor.de/stylix/TEST/

der vollständige quelltext der seite sieht folgender maßen aus:

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Seitentitel</title>


<link rel="stylesheet" type="text/css" href="CSS-Div.css" />


</head>


<body>


<div id="Wrapper">


<div id="Header">
</div>


<div id="Navi">
</div>


<div id="Main_Left">
</div>


<div id="Main_Right">
</div>


<div id="Footer">
</div>


</div>


</body>
</html>

Alles anzeigen

das ist die css-datei für die div's:

Code

/* CSS Document */


div#Wrapper
{     width: 720px; 
    height:auto; 
    margin:0 auto; 
    border:1px solid #000000; }


    div#Header 
    {     width: 720px;
        height:280px;

        background:#FFFFFF;  }


    div#Navi
    {     width: 720px;
        height:20px;

        background:#FFFFFF; 
        border-top:1px solid #000000; }


    div#Main_Left
    {     width: 360px; 
        height:20px; 
        background:#FFFFFF; 
        float:left; 
        border-top:1px solid #000000;  }

    div#Main_Right
    {     height:20px; 
        background:#FFFFFF; 
        float:left; 
        margin-left:361px;
        border:1px solid #000000 }


    div#Footer
    {     width: 720px;
        height:20px;
        background:#FFFFFF; 
        border-top:1px solid #000000;
        clear:both; }

Alles anzeigen

es fehlt halt der rand zwischen dem div "main_left" und "main_right" sowie der rand oben und unten von "main_right"...

sejuma

Nimm mal das float: left; bei #Main_right raus.

Tags