Contentboxrechts verschiebt sich

Billbos

Hallo,

wie auf dem Screenshot zu sehen ist, verschiebt sich die #contentboxrechts nach Links!
Bei meinen anderen Sites tut sie dies nicht, trotz gleicher Einstellungen!

Komme einfach grade nicht drauf!
Hier ein Beispiel von einer anderen Site!

HTML

<div id="contenttop"></div>
        <div id="content">
            <div id="formularcontainer">
                <form action="" method="">
                    <fieldset id="contactForm">
                        <ul>
                            <li class="form">
                                Bei allen Feldern handelt es sich um Pflichtfelder!
                            </li>
                            <li class="form">
                                <label for="vorname">Vorname</label>
                                <input name="vorname" aria-required="true" id="vorname" type="text" />
                            </li>
                            <li class="form">
                                <label for="nachname">Nachname</label>
                                <input name="nachname" aria-required="true" id="nachname" type="text" />
                            </li>
                            <li class="form">
                                <label for="email">Email</label>
                                <input name="email" aria-required="true" id="email" type="email" />
                            </li>
                            <li class="form">
                                <label for="telefon">Tel.</label>
                                <input name="telefon" aria-required="true" id="telefon" type="tel" />
                            </li>
                            <li class="form">
                                <label for="betreff">Betreff</label>
                                <input name="betreff" aria-required="true" id="betreff" type="text" />
                            </li>
                            <li class="form">
                                <label for="nachticht">Nachricht</label>
                                   <textarea name="nachricht" aria-required="true" id="nachricht" rows="5" cols="20">
                                </textarea>
                            </li>
                            <li class="form">
                            <input class="btnCancel" type="reset" name="cancel" value="Abbrechen" />
                            <input class="btnSend" type="submit" name="absenden" value="Bestellen" />
                            </li>
                        </ul>
                    </fieldset>
                </form>
            </div>

            <div id="contentboxrechts">
                <h2 class="sidebar">Überschrift h2</h2>
                    <hr class="contentboxtrennlinie" />
                        <p class="sidebar-font">
                        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                        </p>
            </div>

            <br clear="left" />

        </div>

    <div id="contentbottom"></div>

Alles anzeigen

CSS

Code

/*---------- SCHRIFTEN ----------*/


h2.boxueberschrift {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    text-indent: 10px;
    color: #7e7e7e;
    text-shadow: 0px 1px 0px #fff;
    }

h2.sidebar {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    text-indent: 10px;
    color: #7e7e7e;
    text-shadow: 0px 1px 0px #fff;
    margin-bottom: 10px;
    }

p.sidebar-font {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin-left: 30px;
    color: #7e7e7e;
    padding-bottom: 20px;
    }




/*---------- CONTENT ----------*/


#contenttop {
    background: #7e7e7e;
    width: 960px;
    height: 25px;
    margin: 25px auto 0 auto;
    -webkit-border-top-left-radius: 7px;
    -webkit-border-top-right-radius: 7px;
    -khtml-border-top-left-radius: 7px;
    -khtml-border-top-right-radius: 7px;
    -moz-border-radius-topleft: 7px;
    -moz-border-radius-topright: 7px;
    -webkit-box-shadow: 0px 1px 2px #333;
    box-shadow: 0px 1px 2px #333;
    }

#contentindex {
    background: #ebebeb;
    width: 910px;
    margin: 25px auto 0 auto;
    -webkit-border-top-left-radius: 7px;
    -webkit-border-top-right-radius: 7px;
    -khtml-border-top-left-radius: 7px;
    -khtml-border-top-right-radius: 7px;
    -moz-border-radius-topleft: 7px;
    -moz-border-radius-topright: 7px;
    -webkit-box-shadow: 0px 1px 2px #333;
    -webkit-box-shadow: 0px 1px 2px #333;
    box-shadow: 0px 1px 2px #333;
    padding: 0 25px 20px 25px;
    }

#content {
    background: #ebebeb url(../img/content_hintergrund.png) repeat-y;
    width: 910px;
    margin: 0 auto;
    padding: 0 25px 20px 25px;
    }


#contentbottom {
    background: #7e7e7e;
    width: 960px;
    height: 25px;
    margin: 0 auto 25px auto;
    -webkit-border-bottom-left-radius: 7px;
    -webkit-border-bottom-right-radius: 7px;
    -khtml-border-bottom-left-radius: 7px;
    -khtml-border-bottom-right-radius: 7px;
    -moz-border-radius-bottomleft: 7px;
    -moz-border-radius-bottomright: 7px;
    -webkit-box-shadow: 0px 1px 2px #333;
    box-shadow: 0px 1px 2px #333;
    border-top: 1px solid #fff;
    }

#contentboxlinks {
    background: transparent;
    width: 290px;
    margin: 20px 10px auto auto;
    float: left;
    }


#contentboxmitte {
    background: transparent;
    width: 290px;
    margin: 20px 10px auto 10px;
    float: left;
    }


#contentboxrechts {
    background: transparent;
    width: 290px;
    margin: 20px auto auto 10px;
    float: left;
    }

Alles anzeigen

Ich bezweifel zwar, dass das Formular schuld ist, aber hier der komplette CSS Code!

Code

@charset "UTF-8";
/* CSS danielsfotos.com */


* {
    margin: 0;
    padding: 0;
    }


p {
    color: #989898;
    }


/*---------- BODY ----------*/


body {
    background: #c9c7c8;
    }


/*---------- WRAPPER ----------*/


#wrapper {
    background: transparent;
    width: 960px;
    margin: 50px auto auto auto;
    }

/*---------- NAVIGATION ----------*/


#navigation {
    font: Arial, Helvetica, sans-serif;
    background: #ebebeb;
    width: 645px;
    height: 40px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px; 
    -webkit-box-shadow: 0px 1px 2px #333;
    -moz-box-shadow: 0px 1px 2px #333;
    box-shadow: 0px 1px 2px #333;
    float: left;
    text-decoration: none;
    }

#navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    }

#navigation li {
    width: 120px;
    display: inline-block;
    line-height: 45px;
    font-size: 25px;
    text-align: center;
    }

#navigation li a {
    font: 30px bolder;
    color: #7e7e7e;
    text-shadow: 0px 1px 0px #fff;
    text-decoration: none;
    }

#navigation li a:hover {
    font: 30px bolder;
    color: #339ce6;
    text-shadow: 0px 1px 0px #fff;
    text-decoration: none;
    }

#navigation-sidebar {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    width: 290px;
    margin-bottom: 20px;
    }

#navigation-sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    text-indent: 30px;
    }


#navigation-sidebar li {
    width: 290px;
    text-decoration: none;
    padding: 5px 0;
    }

#navigation-sidebar li a {
    color: #7e7e7e;
    text-decoration: none;
    }

#navigation-sidebar li a:hover {
    color: #fff;
    text-decoration: none;
    }


/*---------- LOGO ----------*/


#logo {
    height: 40px;
    width: 315px;
    float: left;
    display: inline-block;
    background: transparent url(../img/logo.png);
    }


/*---------- HEADER ----------*/


#header {
    background: transparent url(../img/header.png) no-repeat;
    width: 960px;
    height: 265px;
    border: none;
    margin-top: 35px;
    }

#headerbottom {
    background: #ebebeb;
    width: 960px;
    height: 35px;
    -webkit-border-bottom-left-radius: 7px;
    -webkit-border-bottom-right-radius: 7px;
    -khtml-border-bottom-left-radius: 7px;
    -khtml-border-bottom-right-radius: 7px;
    -moz-border-radius-bottomleft: 7px;
    -moz-border-radius-bottomright: 7px;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    -webkit-box-shadow: 0px 1px 2px #333;
    -moz-box-shadow: 0px 1px 2px #333;
    box-shadow: 0px 1px 2px #333;
    }
/*---------- CONTENT ----------*/


#contenttop {
    background: #7e7e7e;
    width: 960px;
    height: 25px;
    margin: 25px auto 0 auto;
    -webkit-border-top-left-radius: 7px;
    -webkit-border-top-right-radius: 7px;
    -khtml-border-top-left-radius: 7px;
    -khtml-border-top-right-radius: 7px;
    -moz-border-radius-topleft: 7px;
    -moz-border-radius-topright: 7px;
    -webkit-box-shadow: 0px 1px 2px #333;
    box-shadow: 0px 1px 2px #333;
    }

#contentindex {
    background: #ebebeb;
    width: 910px;
    margin: 25px auto 0 auto;
    -webkit-border-top-left-radius: 7px;
    -webkit-border-top-right-radius: 7px;
    -khtml-border-top-left-radius: 7px;
    -khtml-border-top-right-radius: 7px;
    -moz-border-radius-topleft: 7px;
    -moz-border-radius-topright: 7px;
    -webkit-box-shadow: 0px 1px 2px #333;
    -webkit-box-shadow: 0px 1px 2px #333;
    box-shadow: 0px 1px 2px #333;
    padding: 0 25px 20px 25px;
    }

#content {
    background: #ebebeb url(../img/content_hintergrund.png) repeat-y;
    width: 910px;
    margin: 0 auto;
    padding: 0 25px 20px 25px;
    }


#contentbottom {
    background: #7e7e7e;
    width: 960px;
    height: 25px;
    margin: 0 auto 25px auto;
    -webkit-border-bottom-left-radius: 7px;
    -webkit-border-bottom-right-radius: 7px;
    -khtml-border-bottom-left-radius: 7px;
    -khtml-border-bottom-right-radius: 7px;
    -moz-border-radius-bottomleft: 7px;
    -moz-border-radius-bottomright: 7px;
    -webkit-box-shadow: 0px 1px 2px #333;
    box-shadow: 0px 1px 2px #333;
    border-top: 1px solid #fff;
    }

#contentboxlinks {
    background: transparent;
    width: 290px;
    margin: 20px 10px auto auto;
    float: left;
    }


#contentboxmitte {
    background: transparent;
    width: 290px;
    margin: 20px 10px auto 10px;
    float: left;
    }


#contentboxrechts {
    background: transparent;
    width: 290px;
    margin: 20px auto auto 10px;
    float: left;
    }


/*---------- FOOTER ----------*/


#navigationfooter {
    font: Arial, Helvetica, sans-serif;
    float: right;
    margin: 0 20px auto auto;
    }


#navigationfooter ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    }

#navigationfooter li {
    display: inline-block;
    line-height: 25px;
    font-size: 12px;
    text-align: center;
    padding: 0 12px;
    }

#navigationfooter li a {
    font-size: 12px;
    font-weight: bold;
    color: #c9c8c8;
    text-decoration: none;
    }

#navigationfooter li a:hover {
    color: #fff;
    font-weight: bold;
    }


/*---------- TRENNLINIEN ----------*/


hr.contentboxtrennlinie {
    width: 290px;
    border-top: 1px solid #f6f6f6;
    border-bottom: 1px solid #8f8f8f;
    margin: 1px 0 10px 0;
    } 


/*---------- ICONS ----------*/


.facebook-link {
    width: 290px;
    height: 166px;
    display: block;
    margin: 0 auto;
    }


.foto1 {
    background: url(../img/facebook_index.png) no-repeat;
    }

.facebook-link:hover {
    background-position: 0 -166px;
    }

.youtube-link {
    width: 175px;
    height: 170px;
    display: block;
    margin: 0 auto;
    float: left;
    padding-right: 2px;
    }

.foto2 {
    background: url(../img/youtube_index.png) no-repeat;
    }

.youtube-link:hover {
    background-position: 0 -170px;
    }

.profilbild {
    background: url(../img/profilbild.png) no-repeat;
    display: block;
    width: 290px;
    height: 375px;
    border: none;
    margin: 0;
    padding: 0;
    }

.facebookabout-link {
    width: 290px;
    height: 40px;
    display: block;
    margin: 0 auto;
    }


.foto3 {
    background: url(../img/facebook_link.png) no-repeat;
    }

.facebookabout-link:hover {
    background-position: 0 -40px;
    }

.youtubeabout-link {
    width: 290px;
    height: 40px;
    display: block;
    margin: 0 auto;
    }


.foto4 {
    background: url(../img/youtube_link.png) no-repeat;
    }

.youtubeabout-link:hover {
    background-position: 0 -40px;
    }


/*---------- FORMULAR ----------*/


#formularcontainer {
    width: 580px;
    padding: 25px 0 25px 0;
    float: left;
    }


fieldset { 
    padding:0 40px 35px 50px;    
    margin:0;
    border:0px solid transparent;
} 

fieldset ul {
    margin: 0;
    padding: 15px 0 0 0;
    list-style-type: none;
}
form {
    border: 1px solid #7e7e7e;
      background: transparent;
    width:360px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 15px 0 0 0;
}
li.form {
    float:left;
    margin:0 0 12px 0;
    padding:0;
    text-align: left;
    width:253px;        
}
.errorMsg {
    float:left;
    width:360px;
    margin:0 0px 20px -50px;
    padding:0;
    border-width:1px 0;
    border-style: solid;
    border-color: #E00 #FFDCE5;
    color:#E00;
    background-color:#FFDCE5;
}
.errorMsg span {
    display: inline-block;
    padding:15px 40px 15px 50px;    
}
label { 
    float:left;
    line-height:167%;
    width:83px;
    cursor: pointer;
    position:relative;    
}
label[title~='Pflichtfeld']:after {
    content:"*";
    position: absolute;
    left:70px;
    top:0;
    font-weight:bold;
    z-index:5;
}
em,
label[title~='Pflichtfeld']:after {
    font-weight:bold;
    font-size:142%;
    color:#E00;
}
input{
    float:left;
    height:20px;
    width: 161px;     
    border:1px solid #8eb0d9;
    padding:0;
    background:#FFF;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 2px 2px 3px #e2e2e2, inset 2px 2px 3px #e2e2e2;
  -moz-box-shadow: 2px 2px 3px #e2e2e2, inset 2px 2px 3px #e2e2e2;
  box-shadow: 2px 2px 3px #e2e2e2, inset 2px 2px 3px #e2e2e2;
}


textarea {
    float:left;
    height:70px;
    width: 161px;     
    border:1px solid #8eb0d9;
    padding:0;
    background:#FFF;  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 2px 2px 3px #e2e2e2, inset 2px 2px 3px #e2e2e2;
  -moz-box-shadow: 2px 2px 3px #e2e2e2, inset 2px 2px 3px #e2e2e2;
  box-shadow: 2px 2px 3px #e2e2e2, inset 2px 2px 3px #e2e2e2;
}


input.btnCancel, 
input.btnSend {
    margin: 25px 0 0 0;
    float:left;
    width:85px;
    height:30px;
    font-weight:bold;
    color: #FFF;
    text-align: center;
    padding:0 0 2px 0;
    text-indent:0px;
    border:1px solid #8eb0d9;
    background-color:#8eb0d9;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    cursor:pointer;
      -webkit-box-shadow: inset 0px 0px 0px;
      -moz-box-shadow: inset 0px 0px 0px;
      box-shadow: inset 0px 0px 0px;    
}
input.btnSend  {
    float:right;
    margin-right:7px;
    border:1px solid #175ba2;  
      -webkit-box-shadow:1px 1px 2px #ccc;
    -moz-box-shadow:1px 1px 2px #ccc;
    box-shadow:1px 1px 2px #ccc;
    background:#175ba2;
}


fieldset legend {
    margin:0 0 0 -60px;
    padding:7px 20px;
    color:#FFF;
    font-weight:bold;
    font-size:18px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow:1px 1px 2px #ccc;
    -moz-box-shadow:1px 1px 2px #ccc;
    box-shadow:1px 1px 2px #ccc;
    background-color:#8eb0d9;
    background: -moz-linear-gradient(top, #8eb0d9, #6293cb);
      background: -webkit-gradient(linear, left top, left bottom,color-stop(0, #8eb0d9), color-stop(1, #6293cb));
    background: -webkit-linear-gradient(top, #8eb0d9, #6293cb);
    background: -o-linear-gradient(top, #8eb0d9, #6293cb);
    background: linear-gradient(top, #8eb0d9, #6293cb);          
}    
fieldset ul li:first-child {
    margin:0 40px 12px 0;    
}


input:active, 
input:hover, 
input:focus {
    background-color: #d9f0f9;
    border:1px solid #175ba2;    
}


.error {
    color:#E00;    
}
.error input {
    border-color:#E00;
    background-color:#FFDCE5;
  -webkit-box-shadow: 2px 2px 3px #fec3d2, inset 2px 2px 3px #fec3d2;
  -moz-box-shadow: 2px 2px 3px #fec3d2, inset 2px 2px 3px #fec3d2;
  box-shadow: 2px 2px 3px #fec3d2, inset 2px 2px 3px #fec3d2;    
}


input {
    outline:none;
   -webkit-transition: all 0.25s ease-in-out;
      -moz-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
input.btnSend:hover,
input.btnSend:active,
input.btnSend:focus  {
     -webkit-box-shadow: 0 0 5px rgba(98,147,203,.9); 
    -moz-box-shadow: 0 0 5px rgba(98,147,203,.9);
   box-shadow: 0 0 5px rgba(98,147,203,.9);
   border:1px solid rgba(23,91,162,1);
    background:#175ba2;
}
input.btnCancel:hover,
input.btnCancel:active,
input.btnCancel:focus {
    -webkit-outline:none; 
      -moz-outline:none; 
      outline:none; 
    background:#8eb0d9;
}


/*---------- SCHRIFTEN ----------*/


h2.boxueberschrift {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    text-indent: 10px;
    color: #7e7e7e;
    text-shadow: 0px 1px 0px #fff;
    }

h2.sidebar {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    text-indent: 10px;
    color: #7e7e7e;
    text-shadow: 0px 1px 0px #fff;
    margin-bottom: 10px;
    }

p.sidebar-font {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin-left: 30px;
    color: #7e7e7e;
    padding-bottom: 20px;
    }
/*----------  ----------*/
/*----------  ----------*/
/*----------  ----------*/
/*----------  ----------*/

Alles anzeigen

MFG

sejuma

Poste mal einen Link zur Problemseite.

Billbos

http://www.poure.eu/

Unregistriert

Hast du schon gesehen, wie oft diese Zeile

in deinem HTML-Code vorkommt und vor allen wo überall?

Billbos

Auf jeder Site im Mainfolder einmal!!!!

threadi

Es ist egal in welchen Dateien das <link>-Element überall vorkommt. Das <link>-Attribut darf pro Seite die im Browser ankommt nur im Bereich des <head> vorhanden sein. Bei dir kommt es mehrfach im <body>-Bereich vor, was falsch ist.

Billbos

Bie mir steht, es würde nur einmal existieren, oder wie meint ihr das?

threadi

Die Seite ist nicht mehr erreichbar. Du müsstest, wenn du sie aufrufst, nur mal die Quelltext-Ansicht deines Browsers anschauen. Dort kommt <link> sehr oft vor.

Billbos

Stimmt hat mich eben schon gewundert, also dann morgen früh!

Billbos

Hier mal die aktuelle Version!

http://www.poure.eu

Ich komme nicht dahinter woran es liegt!

Unregistriert

Siehe http://validator.w3.org/check?uri=http…=Inline&group=0
Solange du diese Fehler nicht beseitigt hast und immer noch <link ...> an der falschen Stelle hast, brauchst du hier erst garnicht mehr auflaufen.

Billbos

danke, nur wenn ich mir das dokument anschaue, über Dreamweaver, sehe ich nur das <link>-Attribut um head - Bereich der Seite und nicht in line 86!!!!

Unregistriert

Was du in dem dämlichen Dreamweaver siehst, ist doch völlig Latte! Entscheidend ist das, was der Browser bekommt. Du wirst vermutlich in einer includeten Datei diese Zeile stehen haben.

Das ist einer der Gründe, warum ich Dreamweaver nicht leiden kann. Alles auf die Schnelle zusammenklicken und sobald es Probleme gibt, ist Ende im Gelände, weil das nötige Grundlagenwissen fehlt.

Billbos

Okay, du hast recht, ich schmeiße mal eben die Zeile(n) raus!
Jetzt ist noch was, wenn ich in den include - Dateien z.B. <p> durch CSS definiert habe, werden diese dann wie gewohnt mit dem Style verstehen, wenn ich die <link> - Datei nicht anhänge?

<LINK> ist draußen!

Unregistriert

Du hast die CSS-Datei doch eingebunden! Und zwar im Header, wo es hingehört.

Billbos

Nun gut! Aber sie kommt nicht zweimal vor! Aus der include - Datei habe ich sie entfernt! Wieso verschiebt sich nun der rechte Bereich in die Mitte?

Unregistriert

Zitat von Billbos

<LINK> ist draußen!

Nein, ist es verdammt nochmal nicht!!!!!!!!!!!!!!!!
<link rel="stylesheet" type="text/css" href="../../css/danielsfotos_com.css"> steckt da immer noch doppelt drin!!!!!!!!!!!!

Mir reichts, ich verabschiede mich aus diesem Thread!

Billbos

Dann aktuallisier mal dein Browser!

http://danielsfotos.com

Unregistriert

Ja klar, nach dem x-ten Hinweis endlich hinbekommen! Glückwunsch!

Ein letzter Hinweis: schmeiß auf den anderen Seiten ebenfalls die doppelt und dreifachen <link ...> raus, nehme den Firefox und installiere darin die Add-Ons "Web Developer" und "Firebug". Mit Firebug kannst du dann feststellen, warum deine div's nicht unbedingt da liegen, wo du sie gerne hättest.

Ansonsten war's das hier für mich. Denn wie auch in diesem Thread werden alle Threads von dir zur "Never ending story", weil du entweder nicht das machst, was man dir sagt oder dir einfach Grundlagen fehlen.

Ende im Gelände!

Billbos

Es lag am float! Es war nicht gefloatet, somit hat es sich zur Größe des <form> Tags hin verschoben! Trotzdem danke!

Tags

Benutzer online in diesem Thema