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;
}

fricca · #2 (**permalink**) 25.06.2012, 15:37

Zitat:

Zitat von -rep-

Woran kann das liegen?

Am Scrollbalken, der nicht immer da ist.

Code:

html {overflow-y:scroll;}

Bitte gib immer einen Link zum Problem an. Siehe auch unsere Hinweise für Fragende.

-rep- · #3 (**permalink**) 25.06.2012, 18:25

Ok, danke. Hat funktioniert.

----
Auf der Hilfe Seite des Forums finde ich nichts zu diesen Trackback-URLs und wie ich das nutzen soll.
Ich hab jetzt einfach mal den Link des Threads da reinkopiert.

fricca · #4 (**permalink**) 25.06.2012, 18:57

Zitat:

Zitat von -rep-

Auf der Hilfe Seite des Forums finde ich nichts zu diesen Trackback-URLs und wie ich das nutzen soll.
Ich hab jetzt einfach mal den Link des Threads da reinkopiert.

Wie meinen?
Ich rede nicht von Trackbacks, sondern von einem Link zu deinem Problem. Der gepostete Code hilft nicht, dein Problem nachzuvollziehen. Verstehst du denn die Hinweise für Fragende nicht?

-rep- · #5 (**permalink**) 25.06.2012, 21:33

Ja, ich habe die Hilfe für Fragende nicht wirklich verstanden.

Du möchtest einen Link zu der Homepage, die ich da aufbaue?
Falls ja, das geht leider noch nicht, weil ich noch keinen Server gemietet habe.

fricca · #6 (**permalink**) 25.06.2012, 22:01

Zitat:

Zitat von -rep-

Du möchtest einen Link zu der Homepage, die ich da aufbaue?

Eigentlich möchte ich gar nichts.
Die Hinweise für Fragende sind hauptsächlich für diejenigen, die hier wollen, das andere sich mit ihren Problemen beschäftigen. Denn nur in ganz wenigen Fällen ist es möglich, mit Hilfe von Kristallkugeln Probleme zu lösen.

Zitat:

Falls ja, das geht leider noch nicht, weil ich noch keinen Server gemietet habe.

Es gibt Freehoster.

-rep- · #7 (**permalink**) 25.06.2012, 23:11

Ok, entschuldige, das ich hier neu bin und mir keine Zeit nehmen konnte,
mich mit den eigenheiten des Froums zu beschäftigen. Werde es nachholen.
Und entschuldige, das ich nicht auführlich genug war.

Ich werde mich mal umsehen und wenn ich einen Freehoster gefunden habe,
mich wieder melden. CSS ist echt schwer. Ständig kommen neue Probleme.

lottikarotti · #8 (**permalink**) 26.06.2012, 09:12

Hallo,

Zitat:

Zitat von -rep-

Ich werde mich mal umsehen und wenn ich einen Freehoster gefunden habe,
mich wieder melden. CSS ist echt schwer. Ständig kommen neue Probleme.

dann solltest du vllt. einen Blick auf Little Boxes werfen

Gruß, lotti.

Woogie · #9 (**permalink**) 27.06.2012, 10:44

Ich denke auch das Fricca das Problem selbst ja schon angesprochen hat, einmal hast einen scrollbalken drin und genau um die breite wird dann dein Content versetzt. Glaub die Antwort hast Du wohl überlesen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Ausrichtung Kalender	greece4u	CSS	20	14.05.2012 13:32
Navigation ist nicht mittig	Schokokrapfen	CSS	29	19.09.2011 23:19
Problem mit Navigation	safari	CSS	12	20.04.2011 11:11
Float-Problem?	mischaef	CSS	33	20.10.2010 16:20
Javascript UL Navigation im IE6	ven	CSS	7	29.04.2008 15:29