Steve0209: 2 DIVs nebeneinander und variable Textlänge (Umbruch)

SELF-Forum

2 DIVs nebeneinander und variable Textlänge (Umbruch)

Steve0209
– Informationen zu den Bewertungsregeln

Hallo zusammen,

hoffe ihr könnte mir helfen:

Habe 2 DIVs nebeneinander (navigation links mit float left und den Contentbereich daneben).

Jetzt habe ich das Problem, dass der Contentbereich immer unterschiedlich lang ist und dementsprechend am Ende der Navigation umbricht und der Text schon unterhalb der Navigation anfängt.
Ich könnte das wohl mit Festlegung von "height" für Navigation und Content lösen, das ist aber nicht besonders schön, wenn man öfter den Text ändern will.

Gibt es eine Möglichkeit, dass sich der Contentbereich "automatisch" verändert (je nach Textmenge) und nicht am Ende der Navigation umbricht?

Hoffe ihr könnte mir helfen.

Viele Grüße
Steve0209

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. 2 DIVs nebeneinander und variable Textlänge (Umbruch)

    Alexander, W. Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Steve,

    kannst den HTML Code inkl. CSS hier posten?

    Gruß Alexander.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. 2 DIVs nebeneinander und variable Textlänge (Umbruch)

      Steve0209
      – Informationen zu den Bewertungsregeln

      kannst den HTML Code inkl. CSS hier posten?

      Hi Alexander,

      klar:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title></title>  
<link href="css/vk.css" rel="stylesheet" type="text/css" />  
</head>  
  
<body tracingsrc="data/01_start.jpg" tracingopacity="44">  
  
  
<div id="container">  
  <div id="header_about">  
  <h1>Über</h1></div>  
  <div id="head_u"></div>  
  <div id="navi">  
    <ul>  
      <li><a href="index.html">&raquo; Home</a></li>  
      <li id="on"><a href="about.html">&raquo; Über</a></li>  
      <li><a href="maerkte.html">&raquo; MÄrkte</a></li>  
      <li><a href="beratung.html">&raquo; Beratungsleistung</a></li>  
      <li><a href="referenzen.html">&raquo; Referenzen &amp; Partner</a></li>  
      <li><a href="empfehlungen.html">&raquo; Links &amp; Empfehlungen</a></li>  
      <li><a href="impressum.html">&raquo; Kontakt &amp; Impressum</a></li>  
    </ul>  
  </div>  
  <div id="content">  
    <h2>Über mich</h2><br />  
  
    <p> Blindtext  
</p>  
  </div>  
  
  
  <div id="footer">  
    <div id="footer1">  
       <ul>  
           Mein Serviceangebot<br /><br />  
  
           <li><a href="beratung.html">Beratung</a></li>  
           <li><a href="#">Workshops</a></li>  
           <li><a href="#">Coaching</a></li>  
       </ul>  
    </div>  
    <div id="footer2">  
    <ul>  
           Wichtige Links<br /><br />  
  
           <li><a href="#">Beratung</a></li> |  
           <li><a href="#">München</a></li> |  
      </ul>  
    </div>  
    <div id="footer3">  
     <ul>  
           Bookmarken bei:<br />  
  
<br/>  
  
  
      </ul>  
    </div>  
    <div id="footer4">  
     <ul>  
           Copyright &copy; <br /><br />  
Kreativkonzept: <br />  
<a href="#"></a><br />  
<br />  
Umsetzung: <br />  
<a href="#"></a></li>  
  
      </ul>  
    </div>  
  </div>  
</div>  
  
  
</body>  
</html>

      CSS:

      @charset "utf-8";  
/* CSS Document */  
  
* {  
	margin: 0;  
	padding: 0;  
}  
  
body {  
	background-color: #abbfc0;  
	padding: 0;  
	margin: 0;  
	font-family: Verdana, Arial, Helvetica, sans-serif;  
  
}  
  
  
#container {  
	width: 995px;  
	margin: 0 auto;  
	position: relative;  
	background-color: #fff;  
  
  
}  
#header_start {  
	height: 420px;  
	background-image: url(../images/banner_start.jpg);  
	background-repeat: no-repeat;  
}  
  
#header_start h1{  
    text-indent: -2000px;  
  
}  
#header_about {  
	height: 220px;  
	background-image: url(../images/banner_about.jpg);  
	background-repeat: no-repeat;  
}  
#header_about h1 {  
	text-indent: -2000px;  
}  
  
  
#head_u {  
	height: 29px;  
	background-color: #779396;  
}  
  
#navi_start {  
	width: 247px;  
	float: left;  
	background-color: #fff;  
	text-transform: uppercase;  
	height: 350px;  
	padding-right: 20px;  
	*padding-right: 0px;  
  
}  
  
#navi_start ul {  
	list-style-type: none;  
	font-size: 13px;  
	text-align: left;  
	padding-top: 32px;  
	font-size: 12px;  
	font-family: Verdana, Geneva, sans-serif;  
}  
  
#navi_start li {  
	display: block;  
	padding: 12px 10px 12px 10px;  
	font-weight: bold;  
	background-image: url(../images/linie.gif);  
	background-repeat: repeat-x;  
	background-position: center bottom;  
	margin: 0 15px 0 15px;  
}	  
#navi_start a{  
	color: #779396;  
	text-decoration: none;  
  
}  
  
#navi_start #on  a  {  
	color: #7c9e14;  
}  
  
  
#navi {  
	width: 247px;  
	float: left;  
	background-color: #fff;  
	text-transform: uppercase;  
	height: 410px;  
  
}  
  
#navi ul {  
	list-style-type: none;  
	font-size: 13px;  
	text-align: left;  
	padding-top: 32px;  
	font-size: 12px;  
	font-family: Verdana, Geneva, sans-serif;  
}  
  
#navi li {  
	display: block;  
	padding: 12px 10px 12px 10px;  
	font-weight: bold;  
	background-image: url(../images/linie.gif);  
	background-repeat: repeat-x;  
	background-position: center bottom;  
	margin: 0 15px 0 15px;  
}	  
#navi a{  
	color: #779396;  
	text-decoration: none;  
  
}  
  
#navi #on  a  {  
	color: #7c9e14;  
}  
  
#content_start {  
	background-color: #fff;  
	font-family: Verdana, Geneva, sans-serif;  
	height: 350px;  
}  
  
#content_start h2{  
	color: #779396;  
	font-size: 19px;  
	font-weight: lighter;  
	padding: 43px 10px 10px 20px;  
  
}  
  
#content_start p{  
	color: #779396;  
	font-size: 12px;  
	padding: 0px 230px 40px 20px;  
}  
  
#content {  
	background-color: #fff;  
	font-family: Verdana, Geneva, sans-serif;  
	height: 410px;  
	*height: 447px;  
	overflow-y: scroll;  
	width: 500px;  
}  
  
#content h2{  
	color: #779396;  
	font-size: 19px;  
	font-weight: lighter;  
	padding: 43px 10px 10px 20px;  
  
}  
  
#content p{  
	color: #779396;  
	font-size: 12px;  
	padding: 0px 20px 40px 20px;  
}  
  
  
  
  
#footer {  
	background-color: #779396;  
	color: #fcffff;  
	font-size: 12px;  
	height: 178px;  
}  
#footer1 {  
	float: left;  
	background-image: url(../images/dot.gif);  
	background-repeat: repeat-y;  
	background-position: right;  
	width: 247px;  
	height: 130px;  
	margin: 23px 0;  
}  
  
#footer1 ul{  
	padding: 0 19px 0 19px;  
	list-style-type: none;  
}  
  
#footer1 ul li{  
   display: block;  
}  
  
#footer1 ul li a{  
	color: #fcffff;  
	text-decoration: none;  
}  
  
#footer2 {  
	float: left;  
	background-image: url(../images/dot.gif);  
	background-repeat: repeat-y;  
	background-position: right;  
	width: 247px;  
	height: 130px;  
	margin: 23px 0;  
}  
  
#footer2 ul{  
	padding: 0 19px 0 19px;  
	list-style-type: none;  
}  
#footer2 ul li{  
   display: inline;  
}  
  
#footer2 ul li a{  
	color: #fcffff;  
	text-decoration: none;  
}  
  
#footer3 {  
	float: left;  
	background-image: url(../images/dot.gif);  
	background-repeat: repeat-y;  
	background-position: right;  
	width: 247px;  
	height: 130px;  
	margin: 23px 0;  
}  
  
#footer3 ul{  
	padding: 0 19px 0 19px;  
	list-style-type: none;  
}  
#bookmark {  
	float: left;  
}  
  
#footer4 {  
	float: left;  
	width: 247px;  
	height: 130px;  
	margin: 23px 0;  
}  
  
#footer4 ul{  
	padding: 0 19px 0 19px;  
	list-style-type: none;  
}  
  
#footer4 ul a{  
	color: #fcffff;  
	text-decoration: none;  
}
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. 2 DIVs nebeneinander und variable Textlänge (Umbruch)

        Alexander, W. Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo Steve,

        wenn der ganze Contenttext auf der Seite (ohne Scrollbar) dargestellt werden muss, dann kannst du bei "#content" die "height" weg nehmen und "overflow" ebenfalls.

        Ich hoffe, ich habe dich richtig verstanden. Ansonsten bitte präzisiere die Frage.

        Beispiel:

        #content {  
	background-color: #fff;  
	font-family: Verdana, Geneva, sans-serif;  
	min-height: 410px;  
	width: 500px;  
}

        Gruß Alexander.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. 2 DIVs nebeneinander und variable Textlänge (Umbruch)

          Steve0209
          – Informationen zu den Bewertungsregeln

          wenn der ganze Contenttext auf der Seite (ohne Scrollbar) dargestellt werden muss, dann kannst du bei "#content" die "height" weg nehmen und "overflow" ebenfalls.

          danke für deine Antwort.
          Allerdings habe ich immer noch das problem, dass der Contentbereich irgendwann unter der navigation weiterläuft...
          wir kann ich das verhindern? Muss ich eine min-height bei der navi vergeben? hätte aber eigentlich gern, dass sich die navi an dem contentbereich ausrichtet (flexibel).

          Hoffe du weisst was ich meine... :(

          VG
          Steve

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. 2 DIVs nebeneinander und variable Textlänge (Umbruch)

            ChrisB
            – Informationen zu den Bewertungsregeln

            Hi,

            Allerdings habe ich immer noch das problem, dass der Contentbereich irgendwann unter der navigation weiterläuft...
            wir kann ich das verhindern?

            Durch Lesen der Antworten, die du auf deine Fragen bekommst.
            https://forum.selfhtml.org/?t=188634&m=1255941

            MfG ChrisB

            --
            Light travels faster than sound - that's why most people appear bright until you hear them speak.
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

  2. 2 DIVs nebeneinander und variable Textlänge (Umbruch)

    Steel
    – Informationen zu den Bewertungsregeln

    Hi

    Du suchst eventuell nach margin fuer en Contentbereich.

    Schau mal hier: http://intensivstation.ch/templates/

    --
    "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
          - T. Pratchett
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln