#content soll sich automatisch angleichen

odo · #1 (**permalink**) 13.02.2008, 10:30

hallo forum

ich brauch dringend hilfe. Kann mir jemand den #content so einstellen,
dass er sich links an #navigation anschmiegt und rechts nicht über #collum
hinaus ragt. Danke für Ihre Hilfe.

Odo

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Seitentitel</title>
<meta name="language" content="de" />
<meta name="author" content="" />
<meta name="copyright" content="(C) 2005 Firmenname" />
<meta name="generator" content="hand coded" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="audience" content="all, alle" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="robots" content="index,follow" />


<link rel="stylesheet" type="text/css" href="css/layout.css" media="screen, projection" />
<!--[if gte IE 5]>
<style>
</style>
<![endif]-->

<link href="../css/layout.css" rel="stylesheet" type="text/css" />
</head>
                                                
<body>

<div id="container">
<div id="navigation"><br />
  <p><a href="#">GPZ &Uuml;berlingen   gemeinn&uuml;tzige GmbH</a></p>
  <p>&nbsp;</p>
  <p><a href="#">Bruderhaus Diakonie <br />
    Ravensburg</a></p>
  <p>&nbsp;</p>
  <p><a href="#">Bruderhaus Diakonie <br />
    Wangen</a></p>
  <p>&nbsp;</p>
  <p><a href="#">Gemeindepsychiatrisches <br />
    Zentrum Friedrichshafen</a></p>
  <p>&nbsp;</p>
  <p><a href="#">Sprungbrett-Werkstatt <br />
    Bermatingen</a></p>
  <p>&nbsp;</p>
  <p><a href="#">Sprungbrett-Werkstatt <br />
  Ki&szlig;legg</a></p>
  <p>&nbsp;</p>
  <p><a href="#">Stephanuswerk Isny</a></p>
  <p>&nbsp;</p>
  <p><a href="#">Weissenauer Werkst&auml;tten</a></p>
  <p><br />
    <a href="#">&Uuml;bersicht</a></p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p class="menubot"></p>
<!-- navigation --></div>
<div id="navoben">
  <div align="center"><a href="#">Home</a>- <a href="#">Impressum/Haftungsausschluss</a> - <a href="#">Kontakt</a>- <a href="#">Partner</a> - <a href="#">Sitemap</a> - <a href="#">Spende</a></div>
</div>
<div id="header"><!-- header -->
</div>


<div id="main">
<div id="column">
    <p><img src="../jpeg/gpz_werkseite_06.jpg" alt="" width="200" height="451" /></div>

<!-- column --></div>

<div id="content">
  <h1>Die Werkstatt im gemeindepsychiatrischen <br />
Zentrum &Uuml;berlingen</h1>
  liegt zentrumsnah am westlichen Ortsrand von &Uuml;berlingen und ist mit dem <br />
  PKW, dem LKW und den &ouml;ffentlichen Verkehrsmitteln gut zu erreichen.<br />
  Unser Motto &bdquo;mit Menschen f&uuml;r Menschen&ldquo; beschreibt nicht nur unseren<br />
  rehabilitativen Auftrag. Es steht auch f&uuml;r die &Uuml;berzeugung und die Qualit&auml;t <br />
  unseres Dienstleistungsgedanken. So werden Kunden zu Partnern.<br />
  <br />
  Unser Angebot untergliedert sich in folgende Bereiche:
  <p>&nbsp;</p>
<p>&nbsp; </p>
<!-- content --></div>

<p class="mainbot">#mainbot</p>
<!-- main --></div>
<p class="containerbot">&copy; 2008 - Werkst&auml;ttenverbund Oberschwaben </p>
<!--
<ul id="xtranav">
<li><a href="#">Kontakt</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">AGB</a></li>
<li><a href="#">Standorte</a></li>
<li><a href="#">Anfahrt</a></li>
<li><a href="#">FAQ</a></li>
</ul>
-->


<!-- container --></div>
</body>
</html>

Code:

* {
margin: 0;
padding: 0;
}
html {
    height: 100%;
    margin-bottom: 1px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 120%;
    color: #FFFFFF;
}
a {
    color: #FFFFFF;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}
a:visited { color: #FFFFFF; font-size: 14px; font-weight: bold; text-decoration: none; 
}

a:hover { color: #9933FF; font-size: 14px; font-weight: bold; text-decoration: none; 
}

a:active { color: #fedc6c; font-size: 14px; font-weight: bold; background-color: #9b1f15; text-decoration: none; 
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    color: #000000;

}

h1 {
    color: #94212d;
    margin: 0 20px 20px 0;
    padding: 5px 0 0 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
}

/* IDs */
#container {
    color: #000;
    width: 100%;
    background-color: #9933FF;
}

#navoben {
    position: absolute;
    top: 0;
    left: 200px;
    width: 599px;
    height: 20px;
    list-style-type: none;
    z-index: 5;
    color: #fff;
    bottom: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.7em;
    font-weight: normal;
    background-color: #94212D;
}

p.containerbot {
height: 28px;
line-height: 28px;
color: #fff;
background: #716959;
}
#header {
    width: 100%;
    height: 170px;
    background-color: #94212d;
    background-repeat: no-repeat;
    background-image: url(../jpeg/header_01.jpg);
}
#logo {
    position: relative;
    top: 0;
    left: 0;
    width: 200px;
    height: 122px;
    color: #fff;
    background-color: #FF0000;
    float: right;
}
#content {
    background-color: #66FFFF;
    padding: 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #94212d;
    left: 200px;
    width: auto;
    clear: right;
    position: relative;
}
#bild {
    height: 150px;
    width: 799px;
    color: #fff;
    background-color: #94212D;
    left: 200px;
    background-image: url(../jpeg/gpz_bilderbanner.jpg);
    background-repeat: no-repeat;
    top: 22px;
    position: absolute;
}
#main {
    margin-left: 200px;
    color: #000;
    background-color: #FF33CC;
}
#navigation {
    color: #FFFFFF;
    height: auto;
    background-color: #94212D;
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: bold;
    width: 190px;
    clear: left;
    position: absolute;
    top: 170px;
}
#column {
    color: #000;
    background: #a3c5c3;
    position: absolute;
    left: 799px;
}

/* Allgemeine Klassen */
.copyright {

}

Boris · #2 (**permalink**) 13.02.2008, 11:13

Wenn du anstelle von absoluten Positionierungen mit float + clear arbeitest, dann würde das gehen

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Seite links ausrichten	like.no.other	CSS	10	26.01.2011 01:10
Tabellen als Div Container	SpecialFighter	(X)HTML	7	12.10.2010 17:40
Ungewöhnlicher abstand beim clearen von floats	adrianno	CSS	14	16.09.2009 14:20
Dynamische Höhe im Content und DIV immer unten	keaton	CSS	8	13.12.2006 18:19
Seitenaufbau mit DIVs und 100% Höhe	vespasquire	CSS	6	12.09.2004 15:21