✔ design auf 1024px optimieren

M

muck86

Grünschnabel
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:
Code: 
#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:

Code: 
#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!
 
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...
 
Aus dem Quellcode deiner CSS Datei:
Code: 
#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:
Code: 
#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:
Code: 
#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
 
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.


muck86 hat gesagt.:
komisch find ich auch das die linke seite wie abgeschnitten aussieht****
Zum Vergrößern anklicken....
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) !
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück