CSS Layout / bei andere Auflösung verschoben

[fanatic79]

Hallo,ich habe ein CSS Layout und es wird bei der Auflösung 1024 x768 optimal dargestellt. nur bei der Auflösung 800x600 ist die tabellenbox nach links verschoben ,und die header grafik ein teil abgeschnitten.

wie muss ich da vor gehn um eine optimale darstellung zu bekommen die mit beiden Auflösungen funktionieren ?
geht es mit if <di>auflösung 800x600 ,usw dann....?
oder kann ich im css style das layout verkleineren oder wenigstens in der mitte die spalten?
Es geht um das open spurce Layout auf der Seite :
CSS XHTML Tableless Layout XHTML CSS Web Template

 

[threadi]

HTML wie auch CSS interessieren sich nicht für die Auflösung eines Besuchers. Wichtig ist einzig der Bereich in dem die Webseite angezeigt wird (Viewport). Der kann durchaus auch mal eine völlig krumme Breite und Höhe haben (wie 563x398). Das heißt für dich, dass du dich nicht an solche Werte halten solltest. Entscheide dich je nach Design für eine Mindestbreite des Viewports und erstelle die Webseite dafür. Kleinere Auflösungen sehen kann nur einen Teil der Webseite, klar. Heutzutage lohnt es sich Webseiten für rund 992 Pixel Breite zu erstellen. Kleinere Maße wie 800x600 sind sehr wenig verbreitet.

 

[fanatic79]

und wie stell ich sie nun um? wie erreiche ich mit diesem layout die optimale größe?

die mittlere spalte im layout rutscht bei einer auflösung 800x600 etwas nach links. die möchteich gerne schmäler machen. nur wie? wie nennt sich die spalte?<div>middle´?
im css style sind nur pxel angaben von rändern usw.

 

[fanatic79]

in der Style CSS sind nur die breiten zu finden:welche ist für die mitte?

.midcontent {
width : auto;
margin-right: 11px;
margin-left: 4px;
margin-bottom: 20px;
border : 1px solid #c2ceda;
background-color : white;
padding : 0;
}
.midcontent2 {
width : auto;
margin-right: 11px;
margin-left: 4px;
margin-bottom: 20px;
border : 1px solid #c2ceda;
background-color : white;
padding : 10px;
}
#navleftmenu {
width : 150px;
top : 20px;
left : 10px;
background-color : #fff;
padding : 0;
voice-family : "\"}\"";
voice-family : inherit;
width : 150px;
}
body > #navleftmenu {
width : 150px;
}
#navright {
width : 160px;
top : 20px;
right : 10px;
background-color : #fff;
padding : 0;
z-index : 1;
voice-family : "\"}\"";
voice-family : inherit;
width : 160px;
}
body > #navright {
width : 160px;

 

[threadi]

Laut der Demo ist es #divmid

 

[fanatic79]

also widte auto? sollich das umstellen?
das was mitt und links ist weiss ich,nur wo ich das in der css datei umstellen kann nicht..:-(
also die mitte etwas schmäler und die linke spalte etwas schmäler,damit nix verschoben wird bei 800x600 wie geht das?

 

[fanatic79]

juhuu ich habs, zwar is das linke navimenue zwar jetzt bissjen schmäler,sieht aber dennoch noch gut aus.und es überlagert sich nichts.bei beiden auflösungen. hab links auf 124pixel statt 150

 

[Efchen]

Heutzutage lohnt es sich Webseiten für rund 992 Pixel Breite zu erstellen. Kleinere Maße wie 800x600 sind sehr wenig verbreitet.

Dem kann ich nur widersprechen.

Gerade heutzutage werden die Displays auch oft immer kleiner. Man denke da an Handys und PDAs (zugegeben, die sollte man per CSS über ein eigenes Stylesheet für "handheld" bedienen), aber auch moderne Notebooks kommen oft mit sehr kleinen Bildschirmen aus. Der Asus EeePC hat z.B. 640x400 oder so ähnlich. Modern sind überhaupt die kleinen "Handtaschen-Notebooks", die oft grad mal einen 10"-Bildschirm und damit entsprechend niedrige Auflösungen haben. 992px Breite ist IMHO eine völlig willkürliche und an nichts festmachbare Wahl.
Hinzu kommt nämlich noch, dass die Tendenz bei großen Bildschirmen zu nicht maximierten Browsern geht. Da sind dann selbst bei 1600px Breiteder Auflösung locker mal Größen von deutlich weniger als 992px drin.

bei beiden auflösungen.

Die Auflösung ist irrelevant. Bitte versuche, Dich von der Vorstellung zu lösen, dass die wichtig wäre. Stelle bei einer Auflösung von 1024x768 einfach Deinen Browser auf eine Größe von z.B. 772x612.