Ich würde Dir dringend empfehlen, das Standard-template von CMSMS zu verwenden und an Dein Design anzupassen, und dieses Tabellengedöns auf den Müllhaufen der Geschichte zu werfen.
Für den Anfang wäre überhaupt erst einmal eine fehlerfreie Seite nötig, um etwas zu Deinem Problem sagen zu können, Du hast grobe Fehler im HTML, im CSS, wie auch im Javascript (Fehlerkonsole...)
Float Problem
Re: Float Problem
Tipp 1: der IE6 braucht bei gefloateten Divs noch ein display:inline; , weil er sonst den doppelten Abstand berechnet.
Tipp 2: Floats müssen immer gecleart werden .
Lass deine Seite und deine css am besten zunächst mal hier
www.w3.org/
validieren (Wahlweise geht auch das Valdator-Plugin für den FF)
Dort bekommst bereits einige Fehler angezeigt. Wenn DU die bereinigt hast und die Fehler immer noch auftauchen, können wir noch mal gucken.
Und am besten wirklich gleich alles in css. Dieser Tabellen-MischMAsch ist nichts.
Tipp 2: Floats müssen immer gecleart werden .
Lass deine Seite und deine css am besten zunächst mal hier
www.w3.org/
validieren (Wahlweise geht auch das Valdator-Plugin für den FF)
Dort bekommst bereits einige Fehler angezeigt. Wenn DU die bereinigt hast und die Fehler immer noch auftauchen, können wir noch mal gucken.
Und am besten wirklich gleich alles in css. Dieser Tabellen-MischMAsch ist nichts.
Re: Float Problem
Nicht die Menü-Liste selbst, sondern die übergeordneten Divs die nebeneinander gefloatet werden sollen, brauchen das display: inline.. Also Menü-div, Content-Div uswChris_3 wrote: Das Problem ist, dass wenn ich es inline mache (hab das schon probiert) dass dann alle Menuepunkte in einer Reihe anzeigt werden (Ist ja eh klar, wenn der Befehl inline heißt)
ZB mit clear:both; in den css des nächsten Div, das nicht mehr gefloatet werden soll - zB Footer.Chris_3 wrote: Sry, dass ich frage, aber wie cleart man die Elemente?
Oder innerhalb des letzten gefloateten Divs im Html-Template mit zB
Last edited by antibart on Thu Aug 13, 2009 10:07 am, edited 1 time in total.
Re: Float Problem
Wie oben auch von mike_r schon gesagt, sind Tabellenlayouts passé und in diesem Fall auch noch total überflüssig. Schmeiß die Tabelle weg - die bewirkt praktisch nichts. Und wenn doch, dann nichts Gutes. Da ist doch schon ein Div drumrum. Wozu die Menü-Liste in eine zusätzliche Tabelle zwingen?
Was im Einzlenen Du alles falsch machst, kann ich dir jetzt nicht genau sagen.
Aber auf den ersten Blick erstmal soviel:
.postion (wäre nun das eigentliche Menü-Div, wenn du die Tabelle entfernst) {
position : absolute; (wozu genau?)
left : 0;
top : 0;
display : inline;
float:left; fehlt
width: xxxpx;?
}
.menue (entfällt : ist die Tabellenzelle, in der die Menu-Liste platziert ist)
{...}
.content {
background-color : #ffffff;
vertical-align : top; (brauchts nicht)
border : none; (nicht nötig, da übergeordnet kein border vergeben wurde)
height : 500px; (dann darf dein Inhalt aber auch nie höher sein)
width : 790px;(Das ist deine einzige Breitenangabe)
font-size : 11pt; (schon im Body festgelegt)
clear : both; (das ist ganz falsch - hier wird noch nichts gecleart)
float:left; (fehlt)
display:inline; (für ie6 fehlt)
}
.menue ul (müsste jetzt .postion ul heissen, da die Tabelenklasse ja weg ist. Oder eben .postion umbenennen) {
...
...
width : 100%; (ja - aber wovon? Bei dir von "gesamtes Browserfenster" minus 790px content. Das haut nicht hin.)
...
}
usw usf
Außerdem würde ich bei nur einmal auftauchenden Boxen im Haupttemplate keine Klassen, sondern Div-IDs vergeben.
Das ist nur, was mir auf den ersten Blick ins Auge fällt. Da ist einiges mehr im Argen. Ich würd an deiner Stelle wirklich ein vorgefertigtes Mustertemplate benutzen.
...
Was im Einzlenen Du alles falsch machst, kann ich dir jetzt nicht genau sagen.
Aber auf den ersten Blick erstmal soviel:
.postion (wäre nun das eigentliche Menü-Div, wenn du die Tabelle entfernst) {
position : absolute; (wozu genau?)
left : 0;
top : 0;
display : inline;
float:left; fehlt
width: xxxpx;?
}
.menue (entfällt : ist die Tabellenzelle, in der die Menu-Liste platziert ist)
{...}
.content {
background-color : #ffffff;
vertical-align : top; (brauchts nicht)
border : none; (nicht nötig, da übergeordnet kein border vergeben wurde)
height : 500px; (dann darf dein Inhalt aber auch nie höher sein)
width : 790px;(Das ist deine einzige Breitenangabe)
font-size : 11pt; (schon im Body festgelegt)
clear : both; (das ist ganz falsch - hier wird noch nichts gecleart)
float:left; (fehlt)
display:inline; (für ie6 fehlt)
}
.menue ul (müsste jetzt .postion ul heissen, da die Tabelenklasse ja weg ist. Oder eben .postion umbenennen) {
...
...
width : 100%; (ja - aber wovon? Bei dir von "gesamtes Browserfenster" minus 790px content. Das haut nicht hin.)
...
}
usw usf
Außerdem würde ich bei nur einmal auftauchenden Boxen im Haupttemplate keine Klassen, sondern Div-IDs vergeben.
Das ist nur, was mir auf den ersten Blick ins Auge fällt. Da ist einiges mehr im Argen. Ich würd an deiner Stelle wirklich ein vorgefertigtes Mustertemplate benutzen.
...
Last edited by antibart on Thu Aug 13, 2009 1:24 pm, edited 1 time in total.
Re: Float Problem
Noch nebenbei:
Hier ein Sreenshot, wie die Seite in Opera und Safari aussieht (aussah)
Du siehst, dass dir hier mit ein, zwei kleinen Tipps noch längst nicht geholfen ist.
Was ich nicht verstehe: Du hast da doch einen Link zu deiner eigenen Site, in der du dich als Webcodierer beschreibst. Da kriegt du es doch auch ganz gut hin (bis auf die nicht-validen Meta-tags)...
Hier ein Sreenshot, wie die Seite in Opera und Safari aussieht (aussah)
Du siehst, dass dir hier mit ein, zwei kleinen Tipps noch längst nicht geholfen ist.
Was ich nicht verstehe: Du hast da doch einen Link zu deiner eigenen Site, in der du dich als Webcodierer beschreibst. Da kriegt du es doch auch ganz gut hin (bis auf die nicht-validen Meta-tags)...
- Attachments
-
Last edited by antibart on Thu Aug 13, 2009 1:39 pm, edited 1 time in total.
Re: Float Problem
Clear & Float:
http://forum.cmsmadesimple.org/index.ph ... 812.0.html
http://www.css4you.de
http://de.selfhtml.org/css/eigenschafte ... ierung.htm
http://www.css-technik.de/css-examples/219_9/
Es gibt unterschiedliche Wege, zu floaten und clearen. Hier ein ganz einfaches Beispiel für eine ganz simple Standard-Website mit header und footer und zwei gefloateten boxen für menü und inhalt.
Bei mehrspaltigen Seiten mit verschiedenfarbigen Hntergrundfarben für jede Spalte gib es manchmal Probleme mit der dynamischen Höhe. Ein guter Trick ist, um die geloateten Divs noch ein weiteres Div zu bauen und diesem einfach ein Hintergrundbild zu verpassen. In diesem Fall hätte das Hintergrundbild einfach zwei verschiedenfarbige Flächen: die eine 220px breit, die andere 630px. Insgesamt wäre es 850 px breit und und wenige Pixel hoch (background: url(bild.jpg) repeat-x;)
Mir fällt auf, dass bei dir immer noch alle gefloateten Boxen gleichzeitig gecleart werden. Erstaunlicherweise wird im Header nicht gefloatet, obwohl dort ja auch mehrere Divs nebeneinander stehen.
Float bedeutet nichts anderes fließen oder "umfließen". Wenn du einem Element ein float:left zuweist, dann findet die Ausrichtung nach links statt. Das clear dient dazu, ein folgendes Element, dass nicht mehr links an dem vorigen fließen soll, von diesem "Fluss" zu befreien.
http://forum.cmsmadesimple.org/index.ph ... 812.0.html
http://www.css4you.de
http://de.selfhtml.org/css/eigenschafte ... ierung.htm
http://www.css-technik.de/css-examples/219_9/
Es gibt unterschiedliche Wege, zu floaten und clearen. Hier ein ganz einfaches Beispiel für eine ganz simple Standard-Website mit header und footer und zwei gefloateten boxen für menü und inhalt.
Code: Select all
<div id="wrapper">
<div id="header"></div>
<div id="menu"></div>
<div id="content"></div>
<div id="footer"></div>
</div>Code: Select all
body {
font-size: ;
color:
... usw}
#wrapper {
width: 850px;
... usw
}
#header {
width: 850px;
height: 120px;
background: url(header.jpg) no-repeat;
}
#menu {
width: 220px;
float:left;
display:inline;
}
#menu ul {
was auch immer...
}
#menu li {
was auch immer...
}
#menu a {
was auch immer...
}
#menu a:hover {
was auch immer...
}
#content {
width: 630px;
float:left;
display:inline;
}
#footer {
clear:both;
width: 850px;
height: 80px;
}
Bei mehrspaltigen Seiten mit verschiedenfarbigen Hntergrundfarben für jede Spalte gib es manchmal Probleme mit der dynamischen Höhe. Ein guter Trick ist, um die geloateten Divs noch ein weiteres Div zu bauen und diesem einfach ein Hintergrundbild zu verpassen. In diesem Fall hätte das Hintergrundbild einfach zwei verschiedenfarbige Flächen: die eine 220px breit, die andere 630px. Insgesamt wäre es 850 px breit und und wenige Pixel hoch (background: url(bild.jpg) repeat-x;)
"Der Rahmen abgeschnitten" kann ich jetzt so nicht nachvollziehen. Im Moment sieht die Seite im IE und FF ungefähr gleich aus (bis auf die Farben von hover und currentpage). Von welchem Rahmen sprichst Du?Chris_3 wrote: dass der Rahmen abgeschnitten ist.
Mir fällt auf, dass bei dir immer noch alle gefloateten Boxen gleichzeitig gecleart werden. Erstaunlicherweise wird im Header nicht gefloatet, obwohl dort ja auch mehrere Divs nebeneinander stehen.
Float bedeutet nichts anderes fließen oder "umfließen". Wenn du einem Element ein float:left zuweist, dann findet die Ausrichtung nach links statt. Das clear dient dazu, ein folgendes Element, dass nicht mehr links an dem vorigen fließen soll, von diesem "Fluss" zu befreien.
Last edited by antibart on Mon Aug 17, 2009 3:46 pm, edited 1 time in total.
Re: Float Problem
Mich interessiert, warum Du bei diesem einfachen Layout überhaupt mit position arbeitest. Das brauchts überhaupt nicht. Außer bei Layern, mitscrollbaren Elementen und bei verschachtelten Menuebenen hab ich noch nie position einsetzen müssen.
Wenn Du nicht willst, dass der Content bei viel Text wächst und dadurch den footer nach unten verschiebt, sondern dass der Content eine feste Höhe wie 500px behalten soll, kommst Du um overflow:auto für den Content nicht rum. Das hat aber nichts mit Javascript zu tun. Es erscheint dann lediglich ein Scrollbar und ein Frame wird simuliert .
Wenn Du einen dynamisch wachsenden Inhalt willst, der den Footer nach unten verschiebt, gehe vor wie oben beschrieben. Mach für das zweispaltige Hintergrundbild hg.jpg einen zusätzlichen Wrapper um menu, content und footer. Verzichte auf position und positioniere einzelne Elemente mit margin und padding.
Wenn Du nicht willst, dass der Content bei viel Text wächst und dadurch den footer nach unten verschiebt, sondern dass der Content eine feste Höhe wie 500px behalten soll, kommst Du um overflow:auto für den Content nicht rum. Das hat aber nichts mit Javascript zu tun. Es erscheint dann lediglich ein Scrollbar und ein Frame wird simuliert .
Wenn Du einen dynamisch wachsenden Inhalt willst, der den Footer nach unten verschiebt, gehe vor wie oben beschrieben. Mach für das zweispaltige Hintergrundbild hg.jpg einen zusätzlichen Wrapper um menu, content und footer. Verzichte auf position und positioniere einzelne Elemente mit margin und padding.
Last edited by antibart on Wed Aug 19, 2009 9:27 am, edited 1 time in total.
Re: Float Problem
Naja - in IE 6 vielleicht. In FF, Safari, Opera sieht das leider noch nicht gelöst aus..Chris_3 wrote: Mittlerweie hab ich das Problem gelöst,
Das hg.jpg im body ist in deinem Fall aber ok. Wusste erst nicht, dass das Image bildschirmfüllend erscheinen soll.
Das kommt drauf, auf welche Art du positionieren willst / musst und wie dein Layout konzipiert ist. Das Positionieren mit position und top left usw bietet sehr viele unterschiedliche Möglichkeiten. Es ist aber auch etwas komplizierter als das Positionieren mit floats und margin ... und eben auch nicht für jede Überlegung geeignet.Chris_3 wrote: Ist es nicht egal ob ich mit padding und margin arbeite oder mit left und top?!
Ich sag es mal ganz generell ohne konreten Bezug auf diese Frage: Solange man weiß, was man tut und warum man es tut und es funktioniert, ist alles egal. Was andernfalls passieren kann - sei mir nicht böse - siehst Du ja selbst an den Problemen mit deiner Seite. Ich würd deswegen eben keine css-Eigenschaften einsetzen, deren Verhalten mir nicht ganz genau bewusst ist.
Was genau und im Einzelnen die Probleme an deinem Layout verursachen, kann ich dir leider auch nicht genau sagen, weil ich einiges auf die Schnelle so nicht nachvollziehen kann. Ganz allgemein gesehen ist es aber ein - wie schon gesagt - sehr einfaches, dreiteiliges Standard-Layout, was mit einigen css-Grundkenntnissen,einigen wenigen Div-Boxen (nimm bei einmaligen Elementen besser IDs als Klassen) einem bewussten Einsatz von width und margin, float und clear sehr schnell crossbrowserfähig realisierbar sein sollte. Da braucht es keine explizit definierten Positionierungsarten und auch keine negativen Positionswerte.
Ansonsten:
Margin. Padding ist der Außen- bzw Innenabstand zum anliegenden bzw innerhalb eines Elementes.
Position bestimmt die Positionsart vom Elternelement aus gesehen.
Bei gefloateten, nebeneinanderliegenden Boxen mit festen Dimensionen ist daher margin m.M.n günstiger als postition:relative...zumal das einzige existierende Elternelement bei dir der body ist.
Last edited by antibart on Wed Aug 19, 2009 3:27 pm, edited 1 time in total.
Re: Float Problem
Es sieht überall OK aus, solange du deinen Browser Bildschirm-füllend benutzt bzw der Bildschirm groß genug ist. Sobald der Browser "kleiner" wird, weil man zB seine Favoriten aktiviert (was ich zB immer mache), zerschießt es das Layout nach unten. Deine Positionen und Dimensionen sind nicht fix, sondern eben relativ. Siehe Screenshot unten...Chris_3 wrote:
Sry, aber bei mir sieht es ordentlich aus.
Kannst du mir schnell nen Screen von deiner Version senden?
Danke!
Möglich, dass du das so haben willst oder deinen Kunden das nicht stört (oder er es zufällig nicht merkt) ... aber ich finde schon, dass ein Layout mit fester Breite fix bleiben sollte. Auch wenn der Browser mal ein paar Pixel schmaler ist und ein paar Millimeter verdeckt. Denn nicht jeder User hat 22'' widescreen und surft im Vollbild - Modus.
Naja - Sorry, aber ich habe da ernste Zweifel dran. Du sitzt jetzt schon mehrere Tage an einem Layout, was eigentlich nach ne Stunde im Kasten sein sollte ...Chris_3 wrote: Genau das war der Grund, warum ich mit position gearbeitet habe, da ich mich da fix aus kenne.
Was eigentlich nicht nötig ist, wenn man "richtig" positioniert.Chris_3 wrote: Ich habe für jede IE Version eigene Werte nehmen müssen, da jede Browserversion die Positionierung anders interpretiert hat...
Ich meine es echt nicht böse und weiß mit Sicherheit auch nicht alles: aber es geht hier ja nicht um ein paar kleine Tipps für eine private Website eines Hobby-Webdesigners, sondern um grundsätzliches Basis-Knowhow. Du sprichts ja auch von einem Kunden und bekommst dafür vermutlich sogar Geld.
Deswegen kann ich ab hier nur noch den ehrlich gut gemeinten Rat geben, die Werkzeuge in deinem Werkzeugkasten einfach noch ein bißchen besser kennenzulernen. Denn am Ende musst Deine Arbeit schon selbst erledigen können. Oder eben selbst jemanden dafür bezahlen.
...
- Attachments
-
Last edited by antibart on Thu Aug 20, 2009 8:59 am, edited 1 time in total.
Re: Float Problem
Wie wärs mal mit einem Pagewrapper, der die Seite an sich dimensioniert und positionert?Chris_3 wrote: wenn mich nicht alles täuscht, liegt das aber am float, oder?
Wie gesagt: Du bist selbst Webcodierer, es ist dein Kunde - dann solltest du es auch allein hinkriegen. css-foren und Tutorials gibt es ja wie Sand am Meer.
Ansonsten übernehme ich das gern zu äußerst günstigen Konditionen.
... dann ist es in ein-zwei Stunden erledigt
Last edited by antibart on Fri Aug 21, 2009 8:28 am, edited 1 time in total.
