zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Boxmodell mit Safari

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.08.2004, 11:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.08.2004
Beiträge: 1
stephanv befindet sich auf einem aufstrebenden Ast
Standard Boxmodell mit Safari

Hallo,

meine Seite wird in zwei Bereiche unterteilt: links und rechts, jeweils 50% breit, mit weisser bzw. blauer Hintergrundfarbe und einem Abstand rechts und links von jeweils 30 Pixeln.

In allen bisher getesten Browsern auf Mac und PC funktioniert alles, bis auf Safari.

Wer kann mir da weiterhelfen?


body{
margin-top:0px;
margin-bottom:0px;
margin-left:30px;
margin-right:30px;
background-color:#CCCDCA;
}
.box_blue{
width:50%;
height:100%;
background-color: #01009A;
float:left;
}
.box_white{
width:50%;
height:100%;
background-color: #FFFFFF;
float:right;
}
#positionmenue{
position: absolute;
top: 150px;
left: 50px;
width:90px;
text-align: right;
}



<body>
<div class="box_blue">
<div id="positionmenue">
menue
</div>
</div>
<div class="box_white">
<div class="positioncontent">
content
</div>
</div>
</body>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.08.2004, 16:15
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard Re: Boxmodell mit Safari

Zitat:
Zitat von stephanv
Wer kann mir da weiterhelfen?
Niemand, denn du verrätst nicht, was genau falsch läuft.

Ein paar Anmerkungen zu deinem Stylesheet:
Code:
body{
margin-top:0px;
margin-bottom:0px;
margin-left:30px;
margin-right:30px;
Kürzer und übersichtlicher:
Code:
margin: 0 30px;
Außerdem solltest du noch das Defaultpadding überschreiben, z.B. mit:
Code:
padding:0;
Code:
background-color:#CCCDCA;
}
Hier fehlt die Textfarbe. Manche Leute haben als Standardfarben hellen Text auf dunklem Hintergrund; denen läßt du jetzt nur noch ihren hellen Text. Dieser Fehler zieht sich durch all deine Regeln.

Code:
.box_blue{
Unterstriche sind in CSS erst seit den Errata zu CSS 2 erlaubt und werden nur mäßig unterstützt. Nimm Bindestriche.

Code:
width:50%;
height:100%;
»height« bezieht sich immer auf die Höhe des Elternelements; deins hat eine Höhe von 0 (null), die du jetzt auch dem Kindelement gibst. Das sieht nicht sehr sinnvoll aus. Sicher hast du dir da was anderes vorgestellt?

Code:
.box_white{
float:right;
}
Wozu das zweite »float«? Die Box rutscht doch von ganz alleine an die passende Stelle.

Code:
#positionmenue{
position: absolute;
}
»float« und »position:absolute« nehmen das angesprochene Element aus dem Elementfluß. Damit ist <body> bei dir leer und hat eine Höhe von 0 (null).

Gruß
Thomas
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.08.2004, 17:23
Neuer Benutzer
neuer user
 
Registriert seit: 19.08.2004
Beiträge: 1
mainframne.ai befindet sich auf einem aufstrebenden Ast
Standard

http://www.quirksmode.org/css/100percheight.html
Super-interessanter Artikel.

Da steht nochmal, warum height:100% nicht funktioniert.
(Zu meiner Entlastung. Den Link habe ich selber aus dem Forum.
Womit ich quasi auch meinen Einstand geben möchte und mich hiermit offiziell anmelde.)

Cheers,
MArtin
__________________
--
And on the monitor, these words appear: My name is VAXymandius, thing of pings. Look on my logic, ye coders, and despair! (Dave Weinfart)
Mit Zitat antworten
  #4 (permalink)  
Alt 19.08.2004, 17:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard Re: Boxmodell mit Safari

Hier muß ich Dir mal widersprechen, Thomas!

Zitat:
Zitat von toscho
Code:
.box_white{
float:right;
}
Wozu das zweite »float«? Die Box rutscht doch von ganz alleine an die passende Stelle.
Das tut sie nur im IE und im Opera, solange der im Quirks-Mode ist. Korrekterweise befindet sich die zweite Box nämlich unterhalb der ersten -lediglich der Text würde noch beiseite geschoben, was aber nicht geht, wenn diese genauso breit ist wie die erste.

Man könnte natürlich auch einfach ein margin-left mitgeben und keine width-Angabe machen, hat dann im IE aber wieder den 3px-gap-Bug.

Ich würde jedenfalls auch beide floaten lassen.
Mit Zitat antworten
  #5 (permalink)  
Alt 19.08.2004, 22:00
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard Re: Boxmodell mit Safari

Zitat:
Zitat von terrikay
Zitat:
Zitat von toscho
Wozu das zweite »float«? Die Box rutscht doch von ganz alleine an die passende Stelle.
Das tut sie nur im IE und im Opera, solange der im Quirks-Mode ist. Korrekterweise befindet sich die zweite Box nämlich unterhalb der ersten.
Moment: Wenn ich zwei Boxen mit »width:50%« habe und die erste nach links fließt, dann steht die zweite rechts neben der ersten, solange kein »border«, »padding« oder »margin« im Spiel ist. Was hat das mit dem Quirksmode zu tun?
Natürlich entstehen bei Prozentangaben schnell Rundungsfehler; Mozilla ist dafür besonders anfällig. Aber im Prinzip funktioniert das. :)

Gruß
Thomas
Mit Zitat antworten
  #6 (permalink)  
Alt 19.08.2004, 22:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard Re: Boxmodell mit Safari

Probier es bitte selber aus - die zweite Box erscheint im Mozilla (jedenfalls im aktuellen) nicht, weil sie unter der ersten liegt - erst wenn dieser auch ein float zugewiesen wird (ob left oder right ist egal), dann wird sie sichtbar.

Im Standard-Modus passiert das gleiche dann auch mit Opera - glaub mir, ich hab's getestet!

Und hier mal hochgeladen:
Test im Standard-Modus
Test im Quirks-Modus

Bitte einfach mal mit verschiedenen Browsern angucken - ist interessant.....
Mit Zitat antworten
  #7 (permalink)  
Alt 19.08.2004, 22:43
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

Stimmt, da habe ich mich vertan. Man braucht noch das »margin-left«. Asche auf mein Quirks-Haupt. :)

Schöner ist es natürlich, beide Boxen auf »display:inline-block;« zu setzen; dann paßt sich das Ganze besser ans Browserfenster an, falls eine Box mal ein sehr langes Wort enthält.

Gruß
Thomas
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS Befehl für alle Browser ausser Safari sofian CSS 8 17.12.2010 15:02
Safari kann ständig aktualisierte Images nicht anzeigen jthom Javascript & Ajax 0 04.03.2009 14:11
Safari 3.1 Windows mit Develop Menu laborix Offtopic 3 31.05.2008 20:46
Safari vs Firefox/IE/Opera Electrohunter (X)HTML 9 10.11.2007 13:27
3 Column Float IE,FF,Opera hui, Safari, Konq. Pfui.... dablake CSS 5 29.05.2005 19:43


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:37 Uhr.