Wieso ist dieser div-layer so breit?

[jschuhma]

Guten Morgen miteinander,

ich habe gerade ein Problem mit einem div-layer.

Private

wenn ich die Seite das erste mal lade wird der "work" bereich horiziontal viel zu breit gezerrt... aktualisiere ich die Seite passiert das gleiche, gehe ich jedoch manuell in die Adresszeile und bestätige mit Enter.. wird das ganze korrekt dargestellt.

Hier mal mein CSS-Code

* { margin: 0; padding: 0; }

html, body, p, h1 {
    margin: 0px;
    padding: 0px;
    }

body {
    background: #ffffff url(../images/bg.gif) repeat-x;
    font-family:Arial, Sans-serif;
    font-size: 13px;
    color:#5e5e5e;
    line-height:23px;
    }

a, a:visited {
    color:#3d6789;
    text-decoration: underline;
    }
    
a:hover {
    text-decoration:none;
    }

h1 {
    color:#3d6789;
    font-size:57px;
    line-height:41px;
    margin-bottom:33px;
    }

p {
    margin-bottom:10px;
    }

#about {
    margin:auto;
    width:800px;
    padding-left:71px;
    margin-top:111px;
    background: #ffffff url(../images/muster.png) no-repeat;
    }

#portfolio {
    margin:auto;
    width:800px;
    padding-left:71px;
    margin-top:111px;
    background: #ffffff url(../images/muster.png) no-repeat;
    position:relative;
    }
    
#contact {
    margin:auto;
    width:700px;
    padding-left:71px;
    margin-top:111px;
    margin-bottom:80px;
    background: #ffffff url(../images/muster.png) no-repeat;
    }

#footer {
    width:100%;
    height:90px;
    border-top: #3d6789 solid 2px;
    background: #ffffff url(../images/footer.png)
    }    

#declaration {
    width:800px;
    border:  #3d6789 solid 1px;
    padding:5px;
    background:#FFFFFF;
    margin:auto;
    margin-top:17px;
    }
    
#footer p{
    margin:0px;
    text-align:center;
    color:#3d6789;
    }    


#slider{
        border: #3d6789 solid 3px;
    }    

.graphic, #prevBtn, #nextBtn{
    margin:0;
    padding:0;
    display:block;
    overflow:hidden;
    text-indent:-8000px;
    }

#slider img {
    border:0px;
    border-bottom: #3d6789 solid 1px;
    margin-bottom:5px;
    }

#slider ul li p{
    margin-left:10px;
    font-size:11px;
    line-height:10px;
    }
    
.tech {
    color: #3d6789;
    }
    
#slider ul, #slider li{
    margin:0;
    padding:0;
    list-style:none;
    }
    
#slider li{ 
    width:800px;
    height:300px;
    overflow:hidden; 
    }    
    
#prevBtn, #nextBtn{ 
    display:block;
    width:14px;
    height:39px;
    position:absolute;
    left:-30px;
    top:71px;
    }    

#prevBtn{
    margin-top:130px;
    margin-left:87px;
    }
    
#nextBtn{ 
    margin-left:907px;
    margin-top:130px;
    }    
    
#prevBtn a, #nextBtn a{  
    display:block;
    width:14px;
    height:39px;
    background:url(../images/button_l.png) no-repeat 0 0;    
    }    
    
#nextBtn a{ 
    background:url(../images/button_r.png) no-repeat 0 0;    
    }

#contact form {
    width:400px;
    color:#FFFFFF;
    background:#3d6789;
    padding-left:20px;
    padding-right:10px;
    padding-top:20px;
    }

#contact p {
    line-height:10px;
    }    
    
    
#contact  input {
    border:1px solid #E6E6E6;
    width:250px;
    height:25px;
    background: url(../images/bg_form.jpg);
    margin-bottom:20px;
    line-height:14px;
    font-size:14px;
    }    
    
#contact textarea {
    background-color:white;
    border:0px;
    margin-bottom:5px;
    width:250px;
    background: #ffffff url(../images/bg_form.jpg) repeat-x;
    }    

#contact .submit_button {
    margin-top:20px;
    margin-right:5px;
    font-size:12px;
    background:#ffffff;
    height: 33px;
    width: 114px;
    border: 1px solid #3d6789;
    }

Vielleicht kann mir jemand nen Tip geben, was ich da falsch gemacht habe.
Viele Grüße,

Jan

 

[Efchen]

ich habe gerade ein Problem mit einem div-layer.

Mit welchem?

wenn ich die Seite das erste mal lade wird der "work" bereich horiziontal viel zu breit gezerrt.

Ich finde kein Element mit Name/ID/Klasse "work".

aktualisiere ich die Seite passiert das gleiche, gehe ich jedoch manuell in die Adresszeile und bestätige mit Enter.. wird das ganze korrekt dargestellt.

Wenn ich die Seite auf die beschriebenen Weisen lade, kann ich keinen Unterschied in der Darstellung feststellen.

Vielleicht kann mir jemand nen Tip geben, was ich da falsch gemacht habe.

Vielleicht kannst Du noch beschreiben, was falsch ist. Und wenn das niemand bei sich sieht, vielleicht mit einem Screenshot klarmachen, worum es geht.

Das einzige, was mir auffällt ist, dass eine Schrift mit 57px Größe natürlich schon etwas groß ist.

 

[jschuhma]

sorry ;) da war ich etwas undeutlich. Es handelt sich um den div #portfolio

 

[Efchen]

Ja, so siehts bei mir auch aus. Immer.
div#portfolio ist 800px breit, "div#portfolio div#slider" ist 1327px breit, also breiter als div#portfolio. Daher ragt das natürlich über den Rand von div#portfolio hinaus.
"div#portfolio div#slider ul" ist sogar noch breiter, nämlich 7962px.

Was beunruhigt Dich daran? :-)

 

[jschuhma]

Ja, so siehts bei mir auch aus. Immer.
div#portfolio ist 800px breit, "div#portfolio div#slider" ist 1327px breit, also breiter als div#portfolio. Daher ragt das natürlich über den Rand von div#portfolio hinaus.
"div#portfolio div#slider ul" ist sogar noch breiter, nämlich 7962px.

Was beunruhigt Dich daran? :-)

Mh :) ok also die 1327px kommen ja vom margin-left des buttons, ne? ;)
Aber der Button muss ja da hin... andere idee?

und die 7962px kommen ja vom text-indent?


Wenn du mir nen Tip hast wie ich das anders hinbekomme...:)
grüße Jan

 

[Efchen]

Nein, eigentlich sind das alles Angaben, die im "width" der jeweiligen Elemente stehen.

Wie Du das anders hinbekommst? Einfach die Werte abändern, die musst doch Du da hingeschrieben haben. Firebug zeigt mir nur einen Wert von width an, wenn der von Dir irgendwo in Deinen Stylesheets angegeben wurde.

 

[jschuhma]

ja die werte hab ich ja nicht ohne grund so angegeben ;)
so waren die elemte (lokal) richtig angeordnet.. mus ich wohl nochma drüber schaun..