Container auf 100% + Verlänerung bei mehr Text

shr3k · 01.02.2005, 11:25

Guten Morgen an alle CSS-Puristen,

wie es so ist als Anfänger, schreibt man, wenn man ein Problem hat in ein Forum, das tue ich jetzt, weil ich überhaupt nicht mehr weiter komme.

Ich will das der linke container meiner seite auf 100% im Browserfenster angezeigt wird, der text soll dann den container automatisch verlängern,
wenn er mehr länge braucht.

Das ganze ist noch online zu sehen: hier

Meine style.css sieht so aus:

Code:

body {margin:0; padding:0; background-image:url(bg.jpg); height:100%;}

#box_main {background-color:transparent; width:700px; min-height:262px; max-height:100%; margin:0px; position:relative;}
#box_nav {background:transparent; margin:0; float:left; width:240px; position:absolute; top:0px; left:0px;}
 #nav_1 {float:left; background-image:url(page_1.jpg); width:202px; height:228px;}
 #nav_2 {float:left; background-image:url(page_2.jpg); width:202px;}
 #nav_space {float:left; background-image:url(page_2.jpg); width:202px;}
 #nav_3 {float:left; background-image:url(page_3.jpg); width:202px; height:29px;}
#box_content {margin:0px 0px 0px 0px; padding:0px; position:absolute; top:35px; left:240px;}

img {border:0px;}
img#point {width:20px; height:20px;}


ul {list-style:none; margin-left:40px; margin-top:0px;}

.hp_text {font-family:Arial; font-size:12px; color:#034550;}
.hp_topic {font-family:Arial; font-size:17px; font-weight:bold; color:#000000;}

Naja und im html sieht das ganze so aus:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
 <head>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
  <title>[ DOUGART ]</title>
  <meta name="Author" content="Martin Wollmann" />
  <meta name="Description" content="DOUGART" />
  <link rel="stylesheet" href="style.css" type="text/css" />
 </head>
 <body> 
 
<div id="box_main"> 
  <div id="box_nav"> 
    <div id="nav_1"></div>
    <div id="nav_2"> 
      <ul>
        <li>home</li>
        <li>about</li>
        <li>work</li>
        <li>contact</li>
        <li>@</li>
      </ul>
    </div>
    <div id="nav_space" height="100%"></div>
    <div id="nav_3"></div>
  </div>
  <div id="box_content"> <span class="hp_topic"><img src="point.png" id="point"> 
    DOUGART</span> <br />
    <span class="hp_text"> dougart dougart dougart dougart dougart dougart dougart 
    dougart <br />
    dougart dougart dougart dougart dougart dougart dougart dougart <br />
    dougart dougart dougart dougart dougart dougart dougart dougart <br />
    dougart dougart dougart dougart dougart dougart dougart dougart <br />
    dougart dougart dougart dougart dougart dougart dougart dougart <br />
    dougart dougart dougart dougart dougart dougart dougart dougart <br />
    dougart dougart dougart dougart dougart dougart dougart dougart <br />
    dougart dougart dougart dougart dougart dougart dougart dougart <br />
    </span> <br />
    <br />
    <span class="hp_topic"><img src="point.png" id="point"> DOUGART</span> <br />
    <span class="hp_text"> dougart dougart dougart dougart dougart dougart dougart 
    dougart <br />
    dougart dougart dougart dougart dougart dougart dougart dougart <br />
    dougart dougart dougart dougart dougart dougart dougart dougart <br />
    dougart dougart dougart dougart dougart dougart dougart dougart <br />
    dougart dougart dougart dougart dougart dougart dougart dougart <br />
    dougart dougart dougart dougart dougart dougart dougart dougart <br />
    dougart dougart dougart dougart dougart dougart dougart dougart <br />
    dougart dougart dougart dougart dougart dougart dougart dougart <br />
    </span> </div>
</div> 
 </body>
</html>

Ich hoffe mir kann geholfen werden, danke im Voraus.
mfg, shr3k

shr3k · 01.02.2005, 13:38

Kann mir wer helfen?
Ich wäre auch schon über Lösungsansätze froh.

Boris · 01.02.2005, 13:42

Du solltest einfach einen aüßeren Container erstellen, der die Navigation enthält (als float, links) und den Inhaltstext beinhaltet. So ist er immer 100% groß.

shr3k · 01.02.2005, 14:51

Aber ich habe doch einen äußeren Container oder nicht? den #box_main
oder sehe ich das falsch?

Boris · 01.02.2005, 15:07

Ja, aber Du hast Deinen Text da nicht drin, sondern in einem Extra-DIV ...

shr3k · 01.02.2005, 15:13

ok danke, das werde ich gleichmal ändern. aber meine frage steht trotzdem noch:
wird dann die grafik auf der linken seite bis nach unten (browserfenterende) gezogen? [also diese: ]hier dazu muss ich sagen das die grafik in drei teile zerlegt ist, den 'banner' und 'footer' und das 'mittelstück', welchen in die länge gezogen werden soll.

ich wäre wirklich dankbar, wenn das auch noch klappen würde Adagio.

mfg, shr3k

Boris · 01.02.2005, 23:54

Schau mal hier: http://www.stunicholls.myby.co.uk/layouts/bodyfix.html

shr3k · 02.02.2005, 10:12

Ich danke dir, ist nicht ganz das, was ich mir vorgestellt habe, aber die Seite ist wirklich hilfreich.

Gestern habe ich noch ein wenig rumgebastelt, und jetzt ist das hier herausgekommen: http://web6.stevens-network.com/dougart/css/home.php

Naja da hat sich für mich aber noch ein weiteres Problem ergeben:
In der Navigation ist das erste Feld (Container) mit einer background-color belegt, so soll es auch sein, aber ich suche noch nach einer besseren schreibweise, die auch zu css passt. ich habe das erstmal so gelöst:

Code:

// Nur der erste Container:

<div id="link_n" onMouseOver="this.style.backgroundColor='#339933';" onMouseOut="this.style.backgroundColor='#FFD52B';">&nbsp;1</div>

Im style.css sieht 'link_n' so aus:

Code:

#link_n {float:left; width:63px; height:63px; border:1px #034550 solid; margin:1px; font-family:Arial, sans-serif; font-size:10px; color:#517581;}

Naja und dazu suche ich jetzt eine css-freundlichere variation.

mfg.shr3k

Boris · 02.02.2005, 10:34

100% hohe Designs sind generell nicht CSS-freundlich

shr3k · 02.02.2005, 10:46

dann werde ich es erstmal so lassen, obwohl ich grade noch was gemacht habe, was aber noch nicht ganz der gewünschten effekt hat:

Code:

//für das zweite feld
a:hover#link_2 {background-color:#FFE16C; float:left; width:63px; height:63px; font-family:Arial, sans-serif; font-size:10px;}

html:

Code:

 
<div id="link_n"><a href="#" id="link_2">&nbsp;2</a></div>

shr3k · 02.02.2005, 17:07

Hi nochmal, ich habe grade gesehen das du auch wirksam bist in nem anderem forum, da ist mein problem auch nochmal gestellt: http://www.xhtmlforum.de/viewtopic.php?t=2993