XHTMLforum - Einzelnen Beitrag anzeigen - Gesamtes Layout verschiebt sich bei Navigation

-rep- · #1 (**permalink**) 25.06.2012, 15:31

Hallo,

ich bin neu hier in diesem Forum und habe auch nach einen passenden Thread
gesucht, das auf mein Problem eingeht. Habe leider keines gefunden.
Mit CSS, Layout und HTML beschäftige ich mich erst seit 2 Wochen, also
relativ neu, bisher habe ich nur Desktop-Anwendungen entwickelt.
Nun zu meinem Problem. Mein gesamtes Layout verschiebt sich nach rechts, wenn ich Navigiere. Am besten, ihr macht euch selbst ein Bild.
http://dl.dropbox.com/u/23100716/AppDev/blog.png
http://dl.dropbox.com/u/23100716/AppDev/news.png

Also beide Bilder am besten im Browser nebeneinander anschauen, dann
seht ihr was ich meine.

Woran kann das liegen?

Hier der HTML Code:

HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>

</head>
<body>
  <div id="wrapper">
    <div id="header">
      <h1>
        My Page 
      </h1>
      
    <div id="form">
      <form id="search" method="get" action="">
        <input type="text" value="Keyword ... enter" id="q" name="q"/>
        <input type="submit" value="Search" />
      </form>
    </div>
      <div id="results"></div>
    </div>
      
    <div id="navigation">   
      <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="/posts">Blog</a></li>
        <li><a href="/articles">News</a></li>
        <li><a href="#">Code-Snippet</a></li>
        <li><a href="#">Download</a></li>
      </ul>    
    </div>
      
    <div id="rightcolumn">
      Webseite ist noch in Aufbau
    </div>
      
    <div id="leftcolumn">
    </div>
      
    <!-- IE Column clearing -->
    <div id="ie_clearing">&nbsp;</div>
    <!-- Ende: IE Column clearing -->

  </div>
</body>
</html>

Und CSS-Code:

Code:

* { padding: 0; margin: 0; }

body {
    background: none repeat scroll 0 0;
    color: #333;
    font-size: 13px;
    font-family: Helvetica, Arial, Tahoma, sans-serif;
    margin: 0;
    padding: 0;
}

code {
    font: 1.1em 'Courier New',Courier,Fixed;
}

small {
    font-size: 0.9em;
    line-height: 1.5em;
    margin-top: 0;
}

a {
    color: #004477;
    outline: medium none;
    text-decoration: none;
}

a:hover {
    color: #4a630f;
    text-decoration: none;
}

li {
  list-style: none;
}

fieldset, img {
    border: medium none;
}

hr {
    border: 0;
    width: 100%;
    color: #666;
    background-color: #AAAAAA;
    /*color: #26B8E0;*/
    /*background-color: #26B8E0;*/
    height: 1px;
}

#nav li {
    background: #676f7a url(nav-bg.jpg) bottom left repeat-x;
    border-left: 1px solid #707F90;
    border-right: 1px solid #3C444D;
    float: left;
}

#nav li a {
    color: #DFE1E2;
    float: left;
    padding: 10px 42px;
}

#nav li a:hover {
    background: #5d91da url(nav-bg-2.jpg) bottom left repeat-x;
    color: #fff;
}

#nav li a.active {
    background: #6aec7c url(nav-bg-3.jpg) bottom left repeat-x;
    color: #fff;
    text-decoration: underline;
}

#nav li.start {
    border-left: 0;
}

#nav li.ende {
    border-right: 0;
}

#wrapper { 
    background: none repeat scroll 0 0 #FFFFFF;
    margin-top: 20px;
    margin: 0 auto;
    padding: 0 20px;
    width: 922px;
}
#header {
    color: #333;
    width: 900px;
    float: left;
    padding: 10px;
    border: 1px solid #ccc;
    height: 100px;
    margin: 10px 0px 0px 0px;
    background-color:#F3F2ED;
    background:#F6F0E0;
}
#navigation {
    float: left;
    width: 900px;
    color: #333;
    padding: 10px;
    /*border: 1px solid #ccc;*/
    margin: 0px 0px 0px 0px;
    /*background-color:#F3F2ED;*/
}
#leftcolumn { 
  /*  color: #333;*/
  /*  border: 1px solid #ccc;*/
    margin: 0px 0px 0px 0px;
    padding: 10px;
    height: 350px;
    width: 678px;
    float: left;
    /*background:#CCC8B3;*/
}
#rightcolumn { 
    float: right;
    color: #333;
    /* border: 1px solid #ccc; */
    border: 1px solid #ccc;
    margin: 0px 0px 0px 0px;
    padding: 10px;
    height: 350px;
    width: 200px;
    display: inline;
    background: #808080
    /* background: #F6F0E0 */
}
#footer { 
    width: 900px;
    clear: both;
    color: #333;
    border: 1px solid #ccc;
    background-color:#F3F2ED;
    margin: 0px 0px 10px 0px;
    padding: 10px;
}

/* Flash CSS */

#notice {
    background-color: #01df01;
    border: 1px solid #00ff00;
    margin: 0 auto 0.5em;
    clear: both;
    padding: 0.5em 0.4em;
    max-width: 46.923em;
    *max-width: 45.750em;
}

#error {
    background-color: #ff8000;
    border: 1px solid #ff4000;
    margin: 0 auto 0.5em;
    clear: both;
    padding: 0.5em 0.4em;
    max-width: 46.923em;
    *max-width: 45.750em;
}

/* Search Form */

div#form {
    float: right;
    margin: 15px;
    padding: 5px;
    /* border-bottom: 1px solid #ddd;*/
}

div#form input[type=submit]{
    display: none;
}