XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   #content soll sich automatisch angleichen (http://xhtmlforum.de/showthread.php?t=50351)

odo 13.02.2008 10:30

#content soll sich automatisch angleichen
 
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 13.02.2008 11:13

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:35 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023