✔ design auf 1024px optimieren

[muck86]

Hi,
ich schon wieder....

...aber es muss sein, denn ich hab ein Problem, welches mich in den Wahnsinn treibt

Ich möchte,das meine Webseite bei einer Bildschirmauflösung von 1024x768 den Bildschirm ausfüllt -> d.h keine horizontalen scrollbalken da sind.

Hab alles mit Divs zusammengebaut, mein Wrapper Div ist 1024px breit, und trotzdem bekomm ich bei der Auflösung einen Scrollbalken.
Das CSS vom Wrap ist:

#wrap {
	
	width:1024px;
	margin:auto;
	height: 100%;
	position:absolute;
	top:0%;
	left:50%;
	margin-left:-512px;
	background:#a9a9a9;
}

Damit ihr wisst was ich meine hier die Url zur Seite:
http://www.asv-voesendorf.at/newnew/

komisch find ich auch das die linke seite wie abgeschnitten aussieht****

Der Banner besteht aus 3 Teilen ->zusammen 1019 px

Css vom Menü links:

#nav {
	position:absolute;
	top:284px;
	left:3px;
	width:154px;
	padding-left:15px;
	padding-top:12px;
	padding-bottom:8px;
	border-width:3px;
	border-color:#000000;
	border-top-style:dotted;
	border-left-style:solid;
	border-right-style:solid;
	border-bottom-style:solid;
	background:#dadada;
}

Bitte nicht steinigen wenn was Grundlegendes nicht passt- ist mein erstes mal das ich mich mit Webdesign - Programmierung auseinandersetze.

Vielen lieben Dank!

 

[hans jörg]

Hi,

probiers mal mit:

#container
{
position:relative;
width:1000px;
margin:0 auto;
}

1024px würde ich nicht als Breit nehmen, da ja bei längeren Inhalt auch der Scrollbalken noch irgendwo Platz haben muss. In das Element kannst dann die ganze Seite reinpacken...

 

[muck86]

ergibt leider das gleiche Verhalten!

 

[hans jörg]

Aus dem Quellcode deiner CSS Datei:

#wrap {
	
	width:1019px;
	margin:0 auto;
	height: 100%;
	position:relative;
	top:0%;
	left:50%;
	margin-left:-512px;
	background:#a9a9a9;
}

- bei width 1019px wirst du auf einer 1024er Auflösung wenn du einen Vertikalen Scrollbalken hast immer****** auch einen horizontalen Scrollbalken haben, da der Vertikale Scrollbalken nunmal Breiter als 6px ist (1024 - 1019)

die 3 nachstehenden Befehle solltest du Entfernen:

#wrap {
	top:0%;
	left:50%;
	margin-left:-512px;
}

vor allem wird margin:0 auto; ein paar Zeilen Später von margin-left:-512px; überschrieben

also:

#wrap {
	
	width:1000px;
	margin:0 auto;
	position:relative;
	background:#a9a9a9;
}

denn Rest der Seite solltest du von den Breiten anpassen, dass die 1000 nicht überschritten werden, wenn du auf 1024 keinen horizontalen Balken willst

 

[SpiceLab]

Für die Boxendimensionierung sind von der Bildschirm-Auflösung (1024x768px) zumindest der umlaufende Browserfensterrahmen, sowie seine inneren aktiven Fensterelemente (Titel-, Menü-, Adress-, Fav.-leiste, ggfs. zusätzl. Toolbars, untere Statuszeile) zu subtrahieren.

Der Scrollbalken würde dem Besucher/Nutzer damit vom Browser nur in dem Fall angeboten werden, wenn die Seite nicht in seinem maximierten Fenster ("Vollbildmodus") betrachtet/geladen wird.

komisch find ich auch das die linke seite wie abgeschnitten aussieht****

Das ist nicht "komisch" (eigenartig, sonderbar), sondern seit je her Praxisrealität, wenn das Element, wie von dir eingangs gezeigt, über die drei CSS-Eigenschaften position:absolute, left:50% u. margin-left:-512px im Viewport (horizontal) zentriert wird. Die zuletzt genannte steht hier im Verhältnis zur deklarierten Breite width:1024px, und beträgt immer ihre Hälfte mit negativem Vorzeichen, um den linken Boxenrand von seiner mittigen Startposition im Fenster (left:50%) nach links zu verrücken, und so die nach rechts verschobene Box in der Fenstermitte auszurichten.

Siehe zum Vergleich http://d-graff.de/selfhtml/center1.html, wo genau das gleiche mit linken und oberen Boxenrand geschieht, sobald die Größe des Browserfensters die Boxendimension (Breite u. Höhe) unterschreitet.

Lösung in diesem Fall: http://d-graff.de/fricca/center.html.

Oder, wie schon von hans jörg vorgeschlagen, alternativ mit margin:auto.

Wichtig hierbei zu beachten:

Da du deinen vorherigen Themen, und der CSS-Formatierung für #nav zufolge, auch die inneren Kinder-Elemente absolut positionierst, ist in seinem ersten Vorschlag (Post #2) für das Eltern-Element #wrap die CSS-Regel position:relative auch dringend erforderlich, damit sich alle nachfolgenden inneren Positionsangaben auf seine Boxengrenzen beziehen, und nicht auf das <body>-Element (= Browserfensterrand) !

 

[muck86]

Recht herzlichen Dank euch beiden. Funktioniert jetzt und ich bin schlauer!