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

Beitrag lesen

SELF-Forum

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