✔ Problem mit Boxgröße

C

counteract

Erfahrenes Mitglied
Hallo zusammen,

folgende Problemstellung: die Navigations Box im leftcolumn ist zu breit und der rightcolumn hat zu wenig platz um seinen Inhalt anzuzeigen. Dieser wird nun weiter unten angezeit. Wie kann ich das Problem lösen?

CSS

Code: 
* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper { 
 margin: 0 auto;
 width: 925px;
}
#faux {
 /* background: url(ground.jpg); */
 margin-bottom: 0px;
 overflow: auto; /* Fix for IE */
 width: 100%
}
#navcontainer ul
{
list-style-type: none;
text-align: left;
}
#navcontainer ul li a
{
width: 100px;
padding: 0px;
padding-left: 20px;
text-align: left;
font: normal 14px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-decoration: none;
color: #999;
}
#navcontainer ul li a:hover
{
background: transparent url(pin.jpg) left center no-repeat;
color: black;
}
#navcontainer ul li a#current
{
background: transparent url(pin.jpg) left center no-repeat;
color: #666;
}
#header {
 color: #333;
 width: 925px;
 padding: 0px;
 height: 160px;
 margin: 5px 0px 0px 0px;
 background: #FFFFFF;
 background-image:url(head.jpg); background-repeat:no-repeat;
 background-position: center;
}
#leftcolumn { 
 display: inline;
 color: #333;
 margin: 0px;
 padding: 65px;
 padding-top: 130px;
 width: 195px;
 height: 450px;
 float: left;
 background-image:url(navi.jpg); background-repeat:no-repeat;
}
#rightcolumn { 
 float: right;
 color: #333;
 margin: 0px;
 padding: 10px;
 width: 683px;
 display: inline;
 position: relative;
}
#footer { 
 width: 925px;
 clear: both;
 color: #333;
 background: #FFFFFF;
 margin: 0px 0px 5px 0px;
 padding: 0px;
 height: 65px;
 background-image:url(footer.jpg); background-repeat:no-repeat;
 background-position: center;
}
.clear { clear: both; background: none; }

HTML

HTML: 
<body>

   <!-- Begin Wrapper -->
   <div id="wrapper">
   
         <!-- Begin Header -->
         <div id="header"></div>
		 <!-- End Header -->
		 
         <!-- Begin Faux Columns -->
		 <div id="faux">
		 
		       <!-- Begin Left Column -->
		       <div id="leftcolumn">
               <div id="navcontainer">
<ul id="navlist">
<li id="active"><li><a href="#" id="current">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
</ul>
</div>  
               </div>
<!-- End Left Column -->
		 
		       <!-- Begin Right Column -->
		       <div id="rightcolumn"><span class="clear">
			     <div class="clear"></div>
	       </div>
<!-- End Right Column -->
			   
			   <div class="clear"></div>
			   
         </div>	   
         <!-- End Faux Columns --> 

         <!-- Begin Footer -->
         <div id="footer"></div>
		 <!-- End Footer -->
		 
   </div>
   <!-- End Wrapper -->
</body>
</html>

Ich habe schon probiert die Breite des navcontainers auf 100px zu beschränken, jedoch hat auch dies nicht funktioniert...
 
Hi,

sollen wir dir nun bei der Entscheidungsfindung weiterhelfen, wie du den Platz in dem Layout einteilst?

Ich seh hier eigentlich kein konkretes CSS-Problem vorliegen - zumal der Inhalt der rechten Spalte uns vorbehalten geblieben ist, um nachvollziehen zu können, weshalb die Spaltenbreite nicht ausreicht.

mfg Maik
 
So, hab mal kurz das CSS-Boxmodell in deinem Layout überprüft, bei dem die deklarierten Innenabstände zur width/height-Angabe hinzugezählt wird, und demnach bleibt für den rechten Spaltenblock eine Restbreite von width:580px, anstelle der width:683px übrig.

Dies ist auch der Grund, weshalb sie bei dir (ohne jeglichen Inhalt) nach unten umgebrochen wird.

mfg Maik
 
naja ich denke mal das es nicht so um den Inhalt geht weil auch wenn die rechte box leer ist verschiebt sie sich!

Wie kann ich die Größe bzw Breite des navcontainers begrenzen, da er das Layout zerstört. Wie gesagt er setzt die rechte Box nach unten.
 
counteract hat gesagt.:
naja ich denke mal das es nicht so um den Inhalt geht weil auch wenn die rechte box leer ist verschiebt sie sich!
Zum Vergrößern anklicken....
Siehe mein letzter Post.

counteract hat gesagt.:
Wie kann ich die Größe bzw Breite des navcontainers begrenzen, da er das Layout zerstört. Wie gesagt er setzt die rechte Box nach unten.
Zum Vergrößern anklicken....
In diesem Fall solltest du erstmal die Breite bzw. den Innenabstand padding für #leftcolumn herabsetzen, der links und rechts in der Summe 130px ergibt, die wiederum zu width:195px addiert werden, und die "tatsächliche" Boxenbreite somit 325px beträgt; die darin eingebundene Navigation soll aber nur 100px breit sein.

mfg Maik
 
Das Problem ist das ich die breite des linken paddings nicht verringern kann weil er genau an dieser position sitzen muss!

Das beste wäre also meiner meinung nach wenn ich die box verkleinern könnte! Das funktioniert aber aus irgendeinen grund nicht!
 
Wird denn auch der rechte Innenabstand in der linken Spalte benötigt?

Oder sprichst du jetzt vom Innenabstand der rechten Spalte?

Letztlich mußt du das Boxmodell (siehe Abmessungen der Box) beachten, damit du die Breite von #wrapper nicht überschreitest, so wie es derzeit mit 103px Überschuß der Fall ist, weshalb der rechte Spaltenblock umgebrochen wird.

Wo du nun an den beiden width- und/oder padding-Angaben etwas "abzwacken" kannst, kann ich dir leider auch nicht sagen, da ich den gewünschten grafischen Aufbau der Seite nicht kenne.

Fest steht, dass die Summe dieser vier Angaben 1028px ergibt, das Elternelement #wrapper aber nur 925px breit ist.

mfg Maik
 
Ich meine den rechten innenabstand der rechten Spalte.
Und dieser muss eben so sein, da ich ja ein hintergrundbild habe und die Navigation soll in den Bild drin sein! Deshalb ist die Breite des innenabstandes so gewählt.
Das mit der Positionierung und dem Überschuss ist mir also klar.

Meine Frage ist, wie kann ich die Breite des navcontainers begrenzen, da es ja mit der anweisung width: 100px; nicht funktioniert.

Danke aber schonmal für die schnelle hilfe.
 
counteract hat gesagt.:
Meine Frage ist, wie kann ich die Breite des navcontainers begrenzen, da es ja mit der anweisung width: 100px; nicht funktioniert.
Zum Vergrößern anklicken....
Dass die width:100px-Deklaration nicht greift, liegt einfach daran, weil in dem Regelblock dem Inline-Element a die Angabe display:block fehlt, um "Block-Level-Charakteristika" zu erhalten.

mfg Maik
 
ich habe es jetzt so gemacht:

CSS
HTML: 
#navcontainer ul
{
list-style-type: none;
text-align: left;
}
#navcontainer ul li a
{
display:block;
width: 50px;
padding: 0px;
padding-left: 20px;
text-align: left;
font: normal 14px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-decoration: none;
color: #999;
display:block;
}
#navcontainer ul li a:hover
{
background: transparent url(pin.jpg) left center no-repeat;
color: black;
}
#navcontainer ul li a#current
{
background: transparent url(pin.jpg) left center no-repeat;
color: #666;
}

Jedoch besteht das selbe problem...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück