zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3 Column Float IE,FF,Opera hui, Safari, Konq. Pfui....

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.05.2005, 12:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2005
Beiträge: 16
dablake befindet sich auf einem aufstrebenden Ast
Standard 3 Column Float IE,FF,Opera hui, Safari, Konq. Pfui....

Hallo zusammen, hatte folgendes Problem schonmal in nem anderen forum geposted, deshalb ist es in englisch....

Prinzipiell geht es um folgendes:

3 Column CSS Design, welches unter Internet Explorer, Mozilla, Firefox, Opera so aussieht wie es beabsichtigt war und leider unter Safari und Konqueror total rumzickt.

So isses ok[ in IE, FF und OP....

und das macht leider der safari draus....



//_______________________________ Original Post_____________________________


Hi there, i have quit some troubles getting a 3 columns css layout working properly under Safari and Konqueror.

In IE, Firefox and Opera it works fine,

in Safari an Konq the Middle and right are moved below the left one.

Here is how the site should look right.

Hereis how safari mess it up.

Here is the basic layout of the site:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<link rel="stylesheet" href="layout_all.css" media="screen">
<link rel="stylesheet" href="layout_01.css" media="screen">
</head>

<body>
<div class="wrapper">

<div class="top">/// HOLDS THE LOGO PIC ///</div>

<div class="outer">
     <div class="inner">
          <div class="menu">/// MENU ///</div>
          <div class="center">/// USUALLY JUST HOLDS ANOTHER PIC ///</div>
          <div class="right">/// HOLDS TEXT ///</div>
          <div class="clear">/// JUST GETS RID OF FLOAT ///</div>
     </div>

</div>

<div class="bottom">/// WELL, BOTTOM ///</div>
<div id="language">/// POSITIONED ABSOLUTLY; FUX UP AS WELL ///</div>
</body>

</html>
And here the CSS:

CSS-FILE: LAYOUT_ALL (sometimes i differ the look (just 2 cols, thats why the CSS is seperated in 2 files...))
Code:
.wrapper
{
min-width: 400px;
border: 1px solid white; margin: 0 -1px;
width: 760px;
  margin-right : auto;
  margin-left : auto;
  margin-top : 25px;

}
.top {
height: 145px;
width:  760px;


}

.bottom {

background-color: #000;
width: 760px;
height: 50px;
}

.menu {
        width: 150px;              /* left column width */
        margin-left: -150px;       /* _negative_ left column width */
        height: 300px;
        float: left; position: relative; z-index: 4;
        font-weight: 900;
        font-size: 175%;
        line-height: 25px;
        text-indent: -35px;
        overflow: visible;
        background: #fff;
}


.right {
        height: 300px;
        background: #fff;
        float: left; position: relative; z-index: 5;
        padding: 0px 15px 0px 0px;
        overflow: auto;
}

.center
{
        height: 300px;
        background: #fff;
        float: left; width: 100%; position: relative; z-index: 3;
        overflow: auto;
}

#language{
 background: #000;
 color: #fff;
 position:absolute;
 top:5px; left:5px;
}

.inner { margin: 0; width: 100%; }
.clear { clear: both; }

/////////////////////////////////////////////////////////////////////
CSS-FILE LAYOUT_01

.outer {
        border-left-width: 150px;  /* left column width */
        border-left-color: #fff;   /* left column colour */

        border-right-width: 365px; /* right column width */
        border-right-color: #fff;  /* right column colour */

        background-color: #fff; /* center column colour */

        width: auto; border-left-style: solid; border-right-style: solid;
        height: 300px;
}

.right {
        width: 350px;              /* right column width */
        margin-right: -365px;      /* _negative_ right column width */
}
I have choosen that CSS-Layout because it was the first one that did not "squezzed" the content when narrowing the window.

Does anyone know how to get that Layout work with Safari too?!

regards, blake[/url]
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.05.2005, 12:34
Benutzer
neuer user
 
Registriert seit: 27.04.2005
Beiträge: 60
die_sarah befindet sich auf einem aufstrebenden Ast
Standard

<div class="wrapper"> schließen?
Einfaches validieren hätte dir auch diese Lösung gebracht?

Wenn es das nicht ist gib doch mal bitte einen Link zur gesamten Seite.

Die Sarah
__________________
Konfuzius sagt:
\"Wer ständig glücklich sein möchte, muss sich oft verändern.\"
...Deswegen bin ich mit CSS so glücklich
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.05.2005, 13:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2005
Beiträge: 16
dablake befindet sich auf einem aufstrebenden Ast
Standard

Wäre fein, wenns wirklich nur ein nicht geschlossender div wäre...

Laut browsershot is des Problem leider immernoch da.

Hast recht, ich sollte das ding erstmal validieren, vieelcith find ich den fehler dabei von ganz alleine...

Hier is der Link zur Seite.

Wenn ht.access an:

login: gast
pass: temppass
Mit Zitat antworten
  #4 (permalink)  
Alt 29.05.2005, 15:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2005
Beiträge: 16
dablake befindet sich auf einem aufstrebenden Ast
Standard

So,
html und css ist nun komplett validiert,

bis auf die Scrollbar Anpassungen, die nur der IE kennt, geht alles sauber durch.

Der nichtgeschlossende Div war es leider nicht.

Habe den language-div rausgeschmissen in der Hoffnung, das die absolute Positonierung die Fehlerquelle ist. hat leider nichts gebracht, zumindest sieht die html datei jetzt anders aus:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<link rel="stylesheet" href="layout_all.css" media="screen">
<link rel="stylesheet" href="layout_01.css" media="screen">
</head>

<body>
<div class="wrapper">

<div class="top">/// HOLDS THE LOGO PIC ///</div>

<div class="outer">
     <div class="inner">
          <div class="menu">/// MENU ///</div>
          <div class="center">/// USUALLY JUST HOLDS ANOTHER PIC ///</div>
          <div class="right">/// HOLDS TEXT ///</div>
          <div class="clear">/// JUST GETS RID OF FLOAT ///</div>
     </div> 

</div>

<div class="bottom">/// WELL, BOTTOM ///</div>

</div>

</body>
</html>
Gruß blake
Mit Zitat antworten
  #5 (permalink)  
Alt 29.05.2005, 17:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.782
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Mir erschließt sich gerade nicht, warum du eine derart komplizierte Konstruktion mit breiten Rahmen und mit negativem margin darüber positionierten Elementen wählst. Sowas braucht man doch "normalerweise" nur, wenn man das Verhalten von gleich langen Spalten vortäuschen will. Und da du eine feste Höhe verwendest, erübrigt sich das.
Durch diese Angabe passt sich auch in der Breite nichts mehr an (width "überschreibt" min-width):
Code:
.wrapper
{
min-width: 400px;
width: 760px;
}
Welche Funktion hat das div .inner?



Zu deinem Problem:
Leider kann ich momentan nicht mit Safari testen...
Ich würde zunächst versuchen, überflüssige Breitenangabe rauszulassen:
width:100% für .center
width:auto für .outer
Dann vielleicht noch float:left für .right weglassen.

Aber, wie schon geschrieben, IMHO ist dein Layout auch einfacher zu lösen...

Grüße
fricca
Mit Zitat antworten
  #6 (permalink)  
Alt 29.05.2005, 18:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2005
Beiträge: 16
dablake befindet sich auf einem aufstrebenden Ast
Standard

Naja, hatte mir bei ALA und co. Beiträge zum theman durchgelesen und dann die Methode gewählt, die mir sinnig erschien.

Noch ne Ecke komplizierter wurde es ,dadurch, dass ich ein "Inhalt zentriert darstellen" drumherum gelegt habe (deswegen Wrapper/outer/inner...)

Problem scheint aber inzwischen behoben zu sein.

Habe HTML und CSS validiert und hierbei einige kleinere fehler behoben (von denen ich aber nicht glaube, dass sie das PRoblem waren.)

Danach hab ich noch den ABSOLUT POSITIONIERTEN <div id="language"> entfernt, dieser wurde in Safari und Konqueror ebenfaqlss an der komplett falschen stelle dargestellt.

und siehe da: Seite läuft auch unter KonQueror so wie es beabsichtigt war, denke/hoffe, dass sie es im safari auch tut (wenn icapture wieder läuft werd ich des chekken..)

Danke für euere Bemühungen,

blake
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
Verschiebungen bei größerem Bildschirm seelefant CSS 4 28.07.2014 15:43
CSS von Plugin beisst! expand CSS 0 28.09.2012 17:44
joomla template wrock CSS 2 06.04.2012 19:24
CSS - CMS - lange Menus Balken/BG oben? shinobi CSS 3 13.10.2011 21:12
Nicht valieder Code von Map24 sveniboy (X)HTML 7 06.11.2005 19:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:15 Uhr.