Css/Div-Problem

  • Themenstarter Themenstarter c0deRider
  • Beginndatum Beginndatum
C

c0deRider

Guest
Code: 
div#navigation {
         background: #006699;
         position: absolute;
         top: 0px;
         left: 0px;
         width: 280px;
         height: 100%;
         padding: 5px;
         }

div#navigation li {
         list-style: none;
         }

div#navigation p {
         font-size: 140%;
         }
Code: 
<html>
 <head>
  <title></title>
  <link rel="stylesheet" href="css/style.css" type="text/css">
 </head>
 <body>
  <div id="navigation">
  <ul>
   <li><p><a href="index.html">Startseite</a></p></li>
   <li><p><a href="texte/bimetall.html">Bimetallmesswerk</a></p></li>
   <li><p><a href="texte/drehspul.html">Drehspulenmesung</a></p></li>
   <li><p><a href="texte/potenzio.html">Potenziometer</a></p></li>
  </ul>
  </div>
  <div id="content">
   <h1>Überschrift 1</h1>
   <h2>Überschrift 2</h2>
   <p>
   Inhalt
   </p>
  </div>
 </body>
</html>

Ich muss heute meine eingerosteten css Kenntnisse nutzen um ne kleine Seite für die schule zu basteln. Php und javascript sind hierbei nicht erlaubt -.- Sobald die contentbox größer wird als die navibox bleibt unter dem Navigationsbereich ein weißer kasten. Das liegt daran das ich die Divbox für den Navigationsteil auf 100% gesetzt hab. 100% des Browserfensters. Hat irgendjemand ne gute idee was ich dagegen machen kann? Vielleicht ne div box welche den anderen untergeordnet ist und mit dem browser mitwandert? Oder gibt es ne einfachere Lösung? Danke im Voraus!
lg
 
Ist die Frage so dumm dass niemand antwortet? :D
 
ne, aber so richtig habe ich Dein Ziel nicht verstanden !

Wenn Du beides auf ein höhe haben willst, arbeite doch mit einem parent div und bette die anderen nav, content darin ein ...
 
Ziel ist es die navigation-div mit der content-div "mitwachsen" zu lassen. Manuel die navigation-box mit leerzeilen anzupassen ist echt nicht das wahre. Hab vorher nie mit parent-divs gearbeitet. Klingt so als wäre das eine übergeordnete div. Ich werds versuchen (: Danke für die antwort!
Lg
 
Zuletzt bearbeitet:
Mach das Div doch 9999 Pixel hoch und gib ihm ein overflow: hidden. Irgendwie so in der Art dürfte das funktionieren.
 
Ich kann sie ebenso auf 200% setzen :D auf die Idee mit overflow bin ich nicht gekommen. Danke dir ich schau mal (:
 
c0deRider hat gesagt.:
Ich kann sie ebenso auf 200% setzen :D auf die Idee mit overflow bin ich nicht gekommen. Danke dir ich schau mal (:
Zum Vergrößern anklicken....

Nicht ganz. Wenn du Content hast, der höher als 200% ist, dann wird deine Navigationsleiste unten wieder abgeschnitten angezeigt. Daher nimmt man einfach Werte von denen man annimmt, daß sie nie erreicht werden. Wird oft verwendet um Elemente verschwinden zu lassen (position: absolute; margin-left: -9999px; ).
 
wie wäre es mit dem Overflow in dem Content div, dann bekommt
dieses seinen eigenen Scrollbalken, wenn erforderlich.

div#navigation {
background: #006699;
position: absolute;
top: 0px;
left: 0px;
width: 280px;
height: 100%;
padding: 5px;
}

div#navigation li {
list-style: none;
}

div#navigation p {
font-size: 140%;
}

div#content {
overflow: auto;
position: absolute;
background: #ff0000;
top: 0px;
left: 280px;
width: 600px;
height: 100%;
padding: 5px;
}
 
Hab jetzt ne weile rumprobiert. Wenn ich ne scrollleiste per overflow einfüge hab ich 2 xD Das sieht leider nicht so schön aus. Gibt es ne möglichkeit die länge der navigationsbox an die der contenbox anzupassen?
lg und danke für die antworten :)

//edit
Hab die lösung xD
Code: 
div#navigation {
         background: #006699;
         position: fixed;
         top: 0px;
         left: 0px;
         width: 280px;
         height: 100%;
         /*padding: 5px;*/
         }

Der innenabstand sorgt nach den 100% für ne hässliche ecke in der Box. (nicht bei allen browsern) Da die links in einer liste angeordnet sind kann man sich das eh sparen :D Danke für die Hilfe!
lg
 
Zuletzt bearbeitet:
body {
overflow: hidden;
width: 100%;
height: 100%;
}

Dann gibt es keinen zweiten Scrollbalken und im IE auch keine hässlichen Ecken.

Gruss
 
Wenn ich schon mal dabei bin kann ich auch gleich frage was es mit diesen ..ähm.. keine Ahnung wie das heißt auf sich hat. Wenn man zb. bei Wikipedia auf einen link im Inhaltsverzeichnis klickt scrollt die seite automatisch zum entsprechenden abschnitt. Wie funktioniert sowas?+
lg
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben