• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Größe der Webseite ändern

B

blizzard11

Neues Mitglied
Hallo ich habe da mal eine frage ich hoffe ihr könnt mir weiterhelfen
ich bin eine seite am bearbeiten und ich komme an der größe der page nicht weiter
Kindermode Kuscheldecken bei lollymo.de
das ist die seite und wie bekomme ich die page ganz ausgefüllt weil links und rechts,oben unten ist ja noch platz den ich mit der page ausgefüllt haben möchte könnt ihr mir da weiter helfen???
Danke im vorraus:grin:
hier ist die style.css datei
@charset "utf-8";
/* CSS Document */
body {
background-image: url(../images/back.png);
top:0px;
left: 0px;
background-repeat: repeat-x;
background-attachment: fixed;
font-family: Arial;
font-size: 13px;
}

h1 {
font-size: 18px;
padding-bottom: 4px;
width: 100%;
border-bottom: 1px solid #d86f9a;
}

h2 {
font-size: 15px;
background-image: url(../images/star.png);
background-repeat: no-repeat;
padding-left: 20px;
}

a {
text-decoration: none;
color: #000;
font-weight: bold;
}

a:hover {
text-decoration: underline;
color: #000;
font-weight: bold;
}

a.footertext {
text-decoration: none;
color: #fff;
font-weight: normal;
}

a.footertext:hover {
text-decoration: underline;
color: #fff;
font-weight: normal;
}

#back {
position: absolute;
width: 100%;
height: 265px;
bottom: 0px;
left: 0px;
background-image: url(../images/back-bottom.png);
background-repeat: repeat-x;
}

img {
border:none;
}

#container {
position: absolute;
top: 50%;
margin-top: -350px;
width: 800px;
height: 580px;
left: 50%;
margin-left: -400px;
}

#balken {
position: absolute;
top: 86px;
left: 71px;
}


#logo {
position: absolute;
top: 23px;
left: 5px;
}


#button1v {
position: absolute;
top: 114px;
left: 300px;
background-image: url(../images/button1-h.png);
background-repeat: no-repeat;
width: 113px;
height: 35px;
}


#button1v:hover {
position: absolute;
top: 114px;
left: 300px;
background-image: url(../images/button1.png);
background-repeat: no-repeat;
width: 113px;
height: 35px;
}


#button2v {
position: absolute;
top: 114px;
left: 415px;
background-image: url(../images/button2-h.png);
background-repeat: no-repeat;
width: 113px;
height: 35px;
}

#button2v:hover {
position: absolute;
top: 114px;
left: 415px;
background-image: url(../images/button2.png);
background-repeat: no-repeat;
width: 113px;
height: 35px;
}


#button3v {
position: absolute;
top: 114px;
left: 537px;
background-image: url(../images/button3-h.png);
background-repeat: no-repeat;
width: 113px;
height: 35px;
}

#button3v:hover {
position: absolute;
top: 114px;
left: 537px;
background-image: url(../images/button3.png);
background-repeat: no-repeat;
width: 113px;
height: 35px;
}

#button1 {
position: absolute;
top: 114px;
left: 300px;
background-image: url(../images/button1.png);
background-repeat: no-repeat;
width: 113px;
height: 35px;
}

#button1:hover {
position: absolute;
top: 114px;
left: 300px;
background-image: url(../images/button1-h.png);
background-repeat: no-repeat;
width: 113px;
height: 35px;
}

#button2 {
position: absolute;
top: 114px;
left: 415px;
background-image: url(../images/button2.png);
background-repeat: no-repeat;
width: 113px;
height: 35px;
}

#button2:hover {
position: absolute;
top: 114px;
left: 415px;
background-image: url(../images/button2-h.png);
background-repeat: no-repeat;
width: 113px;
height: 35px;
}

#button3 {
position: absolute;
top: 114px;
left: 537px;
background-image: url(../images/button3.png);
background-repeat: no-repeat;
width: 113px;
height: 35px;
}

#button3:hover {
position: absolute;
top: 114px;
left: 537px;
background-image: url(../images/button3-h.png);
background-repeat: no-repeat;
width: 113px;
height: 35px;
}

#kasten {
position: absolute;
top: 120px;
left: 73px;
}

#text {
position: absolute;
top: 185px;
left: 127px;
width: 420px;
height: 370px;
overflow: auto;
}

#footer {
position: absolute;
width: 710px;
height: 80px;
padding-left: 78px;
top: 531px;
left: 50px;
background-image: url(../images/footer.png);
background-repeat: no-repeat;
}

#footertext {
position: absolute;
width: 710px;
height: 80px;
padding-left: 78px;
top: 531px;
left: 50px;
color: #FFF;
font-size: 11px;
padding-top: 40px;
padding-left: 80px;
}

img.galery {
margin: 0px 7px 7px 0px;
padding: 3px;
border: 2px solid #d86f9a;
}



.input {font-size: 11px; color: #666666; text-decoration: none; padding: 3px; margin-bottom: 4px; width: 370px; height: 15px; background-color: transparent; border: 1px solid #fbc3da}
textarea {font-size: 11px; color: #666666; text-decoration: none; font-family: Tahoma; width: 370px; height: 65px; background-color: transparent; border: 1px solid #fbc3da; padding: 4px; margin-top: 7px;}

input:focus {border: 1px solid #d86f9a}
textarea:focus {border: 1px solid #d86f9a}


#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #d86f9a; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
Zum Vergrößern anklicken....
 
Vorweg: prüfe mal deinen Zeichensatz und HTML-Code:
Markup Validation of http://lollymo.de/ - W3C Markup Validator
Sauberer HTML-Code ist wichtig für die korrekte Darstellung.

Zu deiner Frage: mit "Page" meinst Du eigentlich den Viewport des Browsers. Der ist bei jedem Besucher deiner Webseite anders. Die einen haben 900 Pixel breite, andere 1200, wieder andere 1800 oder auch nur 600. Die Seite so wie sie jetzt ist passt perfekt auf die kleinste, bei PCs üblichen Viewports, welches meist (nicht immer) bei einer Bildschirmauflösung von 1024x768 genutzt wird. Ich sehe daher nicht wirklich einen Grund wieso Du die Seite breiter machen solltest.

Abgesehen davon ist eine "Vergrößerung" eine Anpassung des Designs.

Und: jede Veränderung an deiner Seite ist etwas schwierig. Du hast praktisch alle Elemente absolut positioniert. Dadurch kannst Du sie nicht sauber automatisch anordnen lassen und musst quasi alle Positionierungen, Höhen und Breiten anpassen wenn Du etwas ändern willst. Ich würde dir empfehlen erstmal die Seite ohne absolute Positionierung umzusetzen. Dann wäre dir auch eine Änderung von Maßen möglich.
 
Hallo,

und wenn gerade am überarbeiten bist mach mal ein richtoges Impressum rein, das jetzt ist ja ein witz und schreit ja grade nach einer Abmahnung :O).

Cheffchen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben