• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Problem mit div-Layout

Felidae

Felidae

New member
Hi, ich bin grade dabei, eine Seite zu überarbeiten, da sie nicht wirklich schön anzusehen ist.
Jetzt habe ich aber ein Problem mit meinem neuen Layout. Hätte nie gedacht, dass ich dieses Problem auchmal habe. Also es geht darum, dass die Navigation und der Inhalt nicht komplett die ganze Fenstergröße einnehmen. Wäre doch viel schöner wenn es so wäre wie bei Tabellen oder Frames. Damit will ich natürlich nicht sagen dass ich diese Methoden nehmen möchte, nur grade kriege ich es nicht mit CSS hin. :( ^^
Hier mal der Screenshot:
http://img441.imageshack.us/img441/5458/unbenanntfo7.png

Das hier ist der Code meiner index.html
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

<head>
<title>Website gegen ICQ Kettenbriefe</title>
<meta name="robots" content="index, nofollow" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="banner">
<img src="banner.png" alt="Website gegen ICQ Kettenbriefe" />
</div>
<div id="navigation">
<a href="index.html">Willkommen</a><br />
<br />
<a href="kostenpflichtig.html">ICQ wird kostenpflichtig</a><br />
<br />
<a href="bunnyhanf.html">Playboy-Bunnis und Hanfblätter</a><br />
<br />
<a href="virenwarnung.html">Virus beim Adden</a><br />
<br />
<a href="board.html">Diskusionsboard</a>
</div>
<div id="inhalt">
Herzlich Willkommen
</div>
</body>

</html>

Und hier ist die style.css:
Code: 
a:link { color:#000000;
         text-decoration:none; }

a:visited { color:#000000;
            text-decoration:none; }

a:focus { color:#000000;
          text-decoration:underline; }

a:hover { color:#000000;
          text-decoration:underline; }

a:active { color:#000000;
           text-decoration:none; }

body { color:#000000;
       font-family:Arial, serif;
       margin:0px; }

div { padding:5px; }

#banner { background-color:#990000;
          text-align:center; }

#navigation { background-color:#990000;
              float:left;
              padding-top:50px; }

#inhalt { border-left:3px #000000 dashed;
          border-top:3px #000000 dashed;
          float:left; }

Ich hoffe ihr könnt mir irgendwie helfen, damit die Seite ein wenig schöner aussieht. Und nicht so abgehackt wie jetzt.


^^
mfg.
 
Wenn du mit CSS unter Verzicht von Tabellen gestalten möchtest, verabschiede dich von dem Tabellendenken. Es gibt in CSS keine voneinander abhängigen Elemente, alles fliesst und ist in Kästchen (Boxen) eingeteilt. Falls du das nicht kannst, vergiss den Versuch einfach und benutze Tabellen, du wirst sonst nicht Glücklich mit den Möglichkeiten von CSS.

float nimmt das Element aus dem Textfluss, d.h. es fließt und paßt sich in der Größe seinem Inhalt an, fertig. Du wirst nie 100% eine Möglichkeit finden, dass sich alle Elemente an das Browserfenster und an den Inhalt anpassen, immer nur entweder oder. Voneinander abhängige Elemente kriegst du nur sauber mit Tabellen hin.

Deiner Vorstellung kommt dieses CSS entgegen:
PHP: 
#banner 
{ 
    background-color:#990000;
    text-align:center; 
}
#navigation 
{ 
    background-color:#990000;
    float:left;
    height:100%;
    width:14em;
}

#inhalt 
{ 
    border-top:3px #000000 dashed;
    border-left:3px #000000 dashed;
    height:100%;
    margin-left:14em;
}

#page
{
    height:100%;
}
html, body
{
    height:100%;
}
body 
{ 
    color:#000000;
    font-family:Arial, serif;
    margin:0px; 
    padding:0;
}

Wobei du dann noch ein DIV mit der ID page um das ganze bauen musst. Es ist aber nicht perfekt, einmal läßt der IE einen Abstand zwischen den Border links und dem navigation Element und das ganze ist immer höher als 100%, da die Höhe des Banners dazu addiert wird. Man kann da noch rumprobieren, mit diversen margin, padding Werten und evtl. den Banner positionieren, das ganze würde aber immer komplizierter.

Wie gesagt, ich würde mich eher von dem Tabellenlayout Vorstellungen verabschieden und möglichst wenig (am besten gar keine) voneinander Abhängige Elemente einbauen. Das schöne an HTML/CSS ist, dass es sich an den Darstellungsbereich anpasst und nur wenn man das verinnerlicht hat gelingt ein CSS Layout.
 
Ok, vielen Dank. Das kommt mir schon entgegen, vileicht kann ich ja noch bisschen dran verändern. ^^ Danke, klappt schon irgendwie.

mfg.
 
@ein schlauer

ziemlich gefährliches halbwissen mit dem du um dich wirfst ;)
warum? grundsätzlich: css ist eine formatierungssprache - es gibt keine elemente in css! alle elemente die du beschreibst (div, ul, li, etc.) sind reines html bzw. xhtml.
...Du wirst nie 100% eine Möglichkeit finden, dass sich alle Elemente an das Browserfenster und an den Inhalt anpassen, immer nur entweder oder.
Zum Vergrößern anklicken....
thema: css-hacks/ browserweichen
Voneinander abhängige Elemente kriegst du nur sauber mit Tabellen hin... Das ul ist aber nicht nötig...
Zum Vergrößern anklicken....
thema: listen --> ul, ol, dt,

wird das tag li eingesetzt, so ist das einleitende tag ul oder ol bzw. dt unbedingt nötig um eine fehlerfreie auslieferung (validität) zu erzeugen.
 
dulin schrieb:
wird das tag li eingesetzt, so ist das einleitende tag ul oder ol bzw. dt unbedingt nötig um eine fehlerfreie auslieferung (validität) zu erzeugen.
Zum Vergrößern anklicken....
Wo hast Du denn mal ein li in einem dt-tag validiert bekommen?

Edit: Hab mich gerade mal zu Deinem "Zitat" geklickt. Hat es bei Dir nicht in der Richtung geklingelt, daß man hier:

ul#menu -> 1. Ebene
...

das ul weglassen kann und ein schlauer das mit Sicherheit nicht auf's HTML bezogen hat?
 
Zuletzt bearbeitet:
dulin schrieb:
@ein schlauer

ziemlich gefährliches halbwissen mit dem du um dich wirfst ;)
warum? grundsätzlich: css ist eine formatierungssprache - es gibt keine elemente in css! alle elemente die du beschreibst (div, ul, li, etc.) sind reines html bzw. xhtml.
Zum Vergrößern anklicken....
Danke für die Blumen. Mir ist das wohl bewußt und ich habe es auch bewußt weggelassen. Einmal ist dies ein Forum und kein Ort für eine fundierte Wissenschaftliche Abhandlung, ich hau da mal eben zwei Sätze rein und muss die noch erklären, dass es dabei zu unvollständigen Formulierungen kommt ist klar.
Aber in dem Falle ging es in erster Linie um den Unterschied zwischen einem Tabellenlayout und einem das auf Tabellen verzichtet. Der Unterschied liegt nicht im HTML/CSS an sich, sondern wie du die HTML Elemente mit Hilfe des CSS anordnest und gruppierst. Alles was ich oben gesagt habe bezieht sich auf das CSS.

Das CSS nur die HTML Elemente versucht zu beschreiben ist mir bewußt, aber was soll ich das hier lange ausführen? Der oder die OP sollte sich sowieso mit dem Thema ausführlicher beschäftigen, da der momentane Wissenstands nicht mit Hilfe einiger Antworten in einem Forum verbessert werden kann, sondern nur durch viel probieren und lesen von entsprechenden Artikeln oder Dokumentationen.

dulin schrieb:
thema: css-hacks/ browserweichen

thema: listen --> ul, ol, dt,

wird das tag li eingesetzt, so ist das einleitende tag ul oder ol bzw. dt unbedingt nötig um eine fehlerfreie auslieferung (validität) zu erzeugen.
Zum Vergrößern anklicken....
Zum Thema Browserweichen habe noch nie was dazu gesagt, ich benutze sowas nicht.

Aber hier kommt ein gefährliches Halbwissen zum Vorschein. Einmal, wie Pit schon sagte, ist ein LI element kein Bestandteil einer DL Liste und schon gar nicht von DT und wenn du den CSS Code von mir verstanden hättest, würdest du sehen dass im CSS Code das UL nicht nötig ist. Wie du schon weiter oben gesagt hast, in CSS gibt es keine Elemente und dort kannst du die entsprechenden Elemente z.b. das LI durchaus ohne ein vorheriges UL ansprechen. Das CSS ist trotzdem valide. Das UL ist also nicht nötig.

Aber vielleicht war die dortige Antwort von mir, auch nicht deutlich genug:
ul#menu -> 1. Ebene
ul#menu li
ul#menu li a:link
...
ul#menu li ul -> 2. Ebene
ul#menu li ul li
ul#menu li ul li a:link

Hier sind die ULs nicht nötig, es geht auch:
#menu -> 1. Ebene
#menu li
#menu li a:link
...
#menu li ul -> 2. Ebene
#menu li li
#menu li li a:link
 
Hallo Felidae,

das ist eigentlich keine Frage von Tabellen oder nicht Tabellen. Fürs Layout sollte man heutzutage einfach keine Tabellen mehr verwenden. Es ist manches per CSS anders zu realisieren aber es geht.

Byteandi hat eigentlich schon das Wichtigste gesagt.

Eine Hintergrundgrafik ist das Zauberwort.

Wenn Du noch Hilfe brauchst melde Dich.
 
Die aber wiederum Möglichkeiten von CSS unterbindet und damit nur ein workaround ist, um ein Tabellenähnliches Layout umzusetzen. Eine Hintergrundgrafik läßt sich nicht mehr skalieren und damit sind wir bei fixen Layouts, die meiner Meinung der Vorstellung von HTML und CSS widersprechen. Dann schon lieber Tabellen, denn damit kann man das gewünschte erreichen, ohne die Bereiche fixieren zu müssen.
 
Ok, ich danke euch allen. ^^ Aber ihr seid mir bisschen zu schnell. :grin: Ich bin grad dabei einiges auszuprobieren. Teilweise klappt es. Das einzige was ich noch nicht hinbekomme ist, dass die beiden unteren Spalten zu tief nach unten gehen. Da muss man scrollen. Vileicht schaff ich das ja noch mit irgendwelchen margin werten!? Wenn nicht melde ich mich nochmal bei dir bine. THX
Mal gugen, jetzt erstmal pause. ^^

mfg.
 
Wie gesagt du darfst dich nicht so sehr sich darauf versteifen, dass Elemente irgendwo genau im Fenster positioniert sind.

HTML/CSS ist dafür entwickelt worden möglichst unabhängig von den Anzeigemöglichkeiten Inhalte darzustellen. Du musst dich also loslösen davon, dass dein Browserfenster wichtig wäre für die Anzeige, du schafftst nur Rahmenbedigungen wie sich der Inhalt anordnet.

Da die Höhe des Browerfensters dir völlig unbekannt solltest du dieses auch einfach ignorieren.
 
........Eine Hintergrundgrafik läßt sich nicht mehr skalieren und damit sind wir bei fixen Layouts, die meiner Meinung der Vorstellung von HTML und CSS widersprechen..............
Zum Vergrößern anklicken....

was so nicht ganz richtig ist, meine Anmerkung das mit einer hintergrundgrafik zu machen bezog sich auf das gezeigte layout, in dem es den Anschein hat, dass die linke seite eh einen festen breiten wert hat.

soll das ganze in der breite variable gestaltet werden, gibt es da auch möglichkeiten ohne browserweichen zu benutzen.

was ist eigentlich an einem fixen laoyut auszusetzen, dass hat unter anderem den Vorteil, dass man auf der sicheren Seite ist, sprich man weiss genau wie es in den Browsern aussehen wird, egal welche Auflösung die user haben.
 
Ja, also da mach ich mir nochmal Gedanken.. Im Moment muss ich das alles zurückstellen, aber danke für die Hilfe. Ich frage nochmal nach wenn wieder Probleme auftauchen. Noch funktioniert ja nicht alles komplett..

mfg.
 
ein schlauer schrieb:
...ich hau da mal eben zwei Sätze rein und muss die noch erklären, dass es dabei zu unvollständigen Formulierungen kommt ist klar...
Zum Vergrößern anklicken....

ok, dann bezieh' ich mich darauf und gestehe die vergessene formulierung. richtige reihenfolge ul, li, ol, li, dl, dt, dd ;)

ich will hier nicht rumflamen - freu mich aber, dass der fred noch einmal an schwung gewonnen hat und hoffe Felidae bekommt's gelöst :D
 
Sieh einfach zu, daß Du Dir nicht den Ochsenfrosch des Monats einhandelst. :p
 
Der Ochsenfrosch ist schlimmer. Aber ich hab ihn auch erst einmal vergeben. :)
 
Ich hab hier mal jemandem der sich "über Gebühr" aufgebläht hat einen häßlichen Ochsenfrosch als Avatar verpaßt. :evil: :D
 
Byteandi schrieb:
was so nicht ganz richtig ist, meine Anmerkung das mit einer hintergrundgrafik zu machen bezog sich auf das gezeigte layout, in dem es den Anschein hat, dass die linke seite eh einen festen breiten wert hat.
Zum Vergrößern anklicken....
Das ist genau das was ich meine, dass es ein Tabellenlayout ist. Das läßt sich Prima und zuverlässig, mit einer Tabelle umsetzen. Mit CSS muss man zu Tricks greifen, die aber meiner Meinung oft mehr Nachteile als Tabellen haben.

Byteandi schrieb:
was ist eigentlich an einem fixen laoyut auszusetzen, dass hat unter anderem den Vorteil, dass man auf der sicheren Seite ist, sprich man weiss genau wie es in den Browsern aussehen wird, egal welche Auflösung die user haben.
Zum Vergrößern anklicken....
Es ist genau das Gegenteil der Fall. Du weißt nie genau was du der User benutzt und mit einem flexiblen Layout bist du auf der sicheren Seite, dass es eher passen kann als ein fixes Layout. Ich weiß nicht ob du manchmal die Schriftgröße in deinem Browser änderst, ich schon und da Verhalten sich fixe Seiten in der Regel sehr seltsam bis zur Unbenutzbarkeit.

HTML/CSS ist eine Kombination die gerade dafür entwickelt wurde sich den verschiedenen gegebenheiten anzupassen. Man kann diese Vorteile nutzen oder man kann es sein lassen, ich finde dass man sich mit fixen Layouts aber das Leben schwerer macht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben