1. Liebe Forumsgemeinde,

    aufgrund der Bestimmungen, die sich aus der DSGVO ergeben, müssten umfangreiche Anpassungen am Forum vorgenommen werden, die sich für uns nicht wirtschaftlich abbilden lassen. Daher haben wir uns entschlossen, das Forum in seiner aktuellen Form zu archivieren und online bereit zu stellen, jedoch keine Neuanmeldungen oder neuen Kommentare mehr zuzulassen. So ist sichergestellt, dass das gesammelte Wissen nicht verloren geht, und wir die Seite dennoch DSGVO-konform zur Verfügung stellen können.
    Dies wird in den nächsten Tagen umgesetzt.

    Ich danke allen, die sich in den letzten Jahren für Hilfesuchende und auch für das Forum selbst engagiert haben. Ich bin weiterhin für euch erreichbar unter tti(bei)pcwelt.de.
    Dismiss Notice

CSS Layout

Discussion in 'Web-Know-how für die Homepage' started by Chimi, Sep 23, 2007.

Thread Status:
Not open for further replies.
  1. Chimi

    Chimi Byte

    Hab mal ne Frage, ich hab n bissl mit CSS rumgespielt, doch an einer stelle komme ich nicht weiter.

    Ich habe links eine navigationsleiste für die links, rechts ist das hauptfenster wo dann der text usw stehen soll.

    Aber wie bekomme ich das hin, dass die navileiste immer genauso lang ist wie das hauptfenster, bzw. das hauptfenster so lang ist wie die navileiste? Das ganze soll passieren ohne das ich größenangaben für das eine oder andere eingebe für die höhe. (Hat den grund, dass ich wenn ich ein loyout für eine seite mache, die größenangaben immer wieder verändern muss)

    So sieht das aus, damit ihr euch vorstellen könnt was ich meine:
    http://home.arcor.de/sebastian.kemper5/HTML/versuch.htm

    Das ist die Htm-Datei
    Code:
    <html>
<head>
<link rel="stylesheet" href="versuch.css" type="text/css">
<style type="text/css">

</style>
</head>
<body>

<div id="container">
<div id="head">Meine Lieblingsseiten im World Wide Web</div>

<div id="navigation">
<div id="linkliste">

<p class="uberschrift">Freizeit</p>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>

</div>

<div id="linkliste">

<p class="uberschrift">Schule</p>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>

</div>

<div id="linkliste">

<p class="uberschrift">Arbeit</p>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>
<a class="link" href="http://www.ogame.de">Ogame</a>

</div>
</div>

<div id="main">
Morbi lacinia, felis et consectetuer accumsan, sapien ante venenatis justo, id tempus mi neque a eros. 
Mauris ornare. Sed sollicitudin urna quis lectus. Nunc ac sapien. Praesent adipiscing porta arcu. 
Etiam enim ipsum, pellentesque ut, tempor sit amet, faucibus sit amet, ligula. Nunc ut orci. Phasellus non est. Pellentesque ac lacus. 
Fusce elementum, purus sed rhoncus placerat, erat tellus tincidunt massa, at tristique libero mauris ut lacus. 
Integer neque neque, malesuada at, volutpat pharetra, laoreet eget, erat.</p>

<p>Morbi lacinia, felis et consectetuer accumsan, sapien ante venenatis justo, id tempus mi neque a eros. 
Mauris ornare. Sed sollicitudin urna quis lectus. Nunc ac sapien. Praesent adipiscing porta arcu. 
Etiam enim ipsum, pellentesque ut, tempor sit amet, faucibus sit amet, ligula. Nunc ut orci. Phasellus non est. Pellentesque ac lacus. 
Fusce elementum, purus sed rhoncus placerat, erat tellus tincidunt massa, at tristique libero mauris ut lacus. 
Integer neque neque, malesuada at, volutpat pharetra, laoreet eget, erat.</p>

Morbi lacinia, felis et consectetuer accumsan, sapien ante venenatis justo, id tempus mi neque a eros. 
Mauris ornare. Sed sollicitudin urna quis lectus. Nunc ac sapien. Praesent adipiscing porta arcu. 
Etiam enim ipsum, pellentesque ut, tempor sit amet, faucibus sit amet, ligula. Nunc ut orci. Phasellus non est. Pellentesque ac lacus. 
Fusce elementum, purus sed rhoncus placerat, erat tellus tincidunt massa, at tristique libero mauris ut lacus. 
Integer neque neque, malesuada at, volutpat pharetra, laoreet eget, erat.</p>

Morbi lacinia, felis et consectetuer accumsan, sapien ante venenatis justo, id tempus mi neque a eros. 
Mauris ornare. Sed sollicitudin urna quis lectus. Nunc ac sapien. Praesent adipiscing porta arcu. 
Etiam enim ipsum, pellentesque ut, tempor sit amet, faucibus sit amet, ligula. Nunc ut orci. Phasellus non est. Pellentesque ac lacus. 
Fusce elementum, purus sed rhoncus placerat, erat tellus tincidunt massa, at tristique libero mauris ut lacus. 
Integer neque neque, malesuada at, volutpat pharetra, laoreet eget, erat.</p>

Morbi lacinia, felis et consectetuer accumsan, sapien ante venenatis justo, id tempus mi neque a eros. 
Mauris ornare. Sed sollicitudin urna quis lectus. Nunc ac sapien. Praesent adipiscing porta arcu. 
Etiam enim ipsum, pellentesque ut, tempor sit amet, faucibus sit amet, ligula. Nunc ut orci. Phasellus non est. Pellentesque ac lacus. 
Fusce elementum, purus sed rhoncus placerat, erat tellus tincidunt massa, at tristique libero mauris ut lacus. 
Integer neque neque, malesuada at, volutpat pharetra, laoreet eget, erat.</p>


</div>
</div>

</body>
</html>
    Und das hier die CSS-Datei
    Code:
    html { 
	background:#00CCFF;}

body {
	background:white;
	color:red;
	font-size:100%;
	text-align:justify;;
	font-family:Arial, Verdana;
	width:900px;
	margin-left:auto;
	margin-right:auto; }

#container { 
    	border: 1px silver;
   	color:blue;
	background:#3333FF;
	border:1px solid black;}

#head {
	background:#9910FF;
	color:black; 
	height:75px;
	padding:5px;
	border-bottom:1px solid black;}

#navigation {
    	color:white;
	width:170px; 
	float:left;}

#linkliste {
	width:150px;
	margin:10px; 
	border:1px solid black;}

#main {
	color:red; 
	background:white;
	margin-left:170px;
	padding:20px;
	border-left:1px solid black; }

a.link {
 	display:block;
 	border-top:1px solid #000;
 	background-color:#354462;
 	text-align:left;
 	color:#eeeeee;
 	text-decoration:none;
 	padding-left:5px;
 	padding-bottom:5px;
 	padding-top:5px; 
	font-weight:bold;}

a:hover {
	background:white;
	color:black;
	font-weight:bold; }

.uberschrift {
	font-weight:bold;
	background:#c1c1c1;
	margin:auto;
	padding:5px;
	text-align:center;
	font-size:150%;
	color:black; }
     
    Chimi, Sep 23, 2007
    #1
  2. kalweit

    kalweit Hüter der Glaskugel

    Tja, da wirst du wohl auf die "Werbeversprechen" der Anti-Layouttabellen-Fraktion hereingefallen sein. Eine befriedigende Lösung für dein Problem gibt es nicht.
     
    kalweit, Sep 23, 2007
    #2
  3. prm

    prm Byte

    Bastle dir mit einem Grafikprogramm eine passende Hintergrundgrafik und füge die in den container gemäß dieser Anleitung
     
    prm, Sep 24, 2007
    #3
  4. 21designs

    21designs ROM

    Hallo,

    halte mal ausschau nach einem Javascript, welches die Größe von Div`s reguliert. Das wird das Poblem lösen ohne auf Blindgif`s etc. zurückzugreifen.

    Gruß Stefan
     
    21designs, Sep 30, 2007
    #4
  5. kalweit

    kalweit Hüter der Glaskugel

    ...jo, Pflaster drübber damit man selbst den Fehler nicht mehr sieht. :D JavaScript um Designprobleme zu lösen, halte ich für den denkbar schlechtesten Weg.
     
    kalweit, Sep 30, 2007
    #5
Thread Status:
Not open for further replies.

Share This Page