zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Gesamtes Layout verschiebt sich bei Navigation

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.06.2012, 15:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.06.2012
Beiträge: 4
-rep- befindet sich auf einem aufstrebenden Ast
Standard Gesamtes Layout verschiebt sich bei Navigation

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;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.06.2012, 15:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von -rep- Beitrag anzeigen
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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.06.2012, 18:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.06.2012
Beiträge: 4
-rep- befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 25.06.2012, 18:57
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von -rep- Beitrag anzeigen
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?
Mit Zitat antworten
  #5 (permalink)  
Alt 25.06.2012, 21:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.06.2012
Beiträge: 4
-rep- befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 25.06.2012, 22:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von -rep- Beitrag anzeigen
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.
Mit Zitat antworten
  #7 (permalink)  
Alt 25.06.2012, 23:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.06.2012
Beiträge: 4
-rep- befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 26.06.2012, 09:12
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Hallo,

Zitat:
Zitat von -rep- Beitrag anzeigen
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.
__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint
Mit Zitat antworten
  #9 (permalink)  
Alt 27.06.2012, 10:44
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.04.2012
Beiträge: 109
Woogie befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
layout, verschieben

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:42 Uhr.