  |
| Autor |
Nachricht |
razor2
Neuer [User]
Anmeldung: 03.04.06
Beiträge: 2
|
 Verfasst am: 03.04.2006, 18:38 Titel: Probleme mit CSS Layout |
 |
|
Hi,
ich erstelle gerade meine erste Homepage mit eine CSS Layout. Nur leider habe ich atm ein Problem. Das Menü ist nicht so lang wie der Contentbereich (siehe Screenshot) Wie kann ich das Problem lösen?
 
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Testseite</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<center>
<div id="frame">
<div id="logo"><br /><br /><center><h2>... Logo ...</h2></center></div>
<div id="welcome"><div class="welcome_text">Willkommen</div></div>
<div id="menuleft">
<div class="menuliste">
<ul>
<li>Home</li>
<li>Kontakt</li>
<li>Links</li>
<hr class="menu">
<li>Forum</li>
</ul>
</div>
</div>
<div id="content">
<div class="content_text">
(hier steht der lange text)
</div></div>
<div id="footer"><div class="copyright">
© Nilz
</div></div>
</div>
</center>
</body>
</html>
|
| Code: |
/* ------------------ Basic Settings ------------------ */
body
{
background-color: #EFEFEF;
}
/* ------------------ Layout Settings ------------------ */
#frame
{
background-color: #B1B1B1;
padding: 0px;
margin-top: 50px;
width: 750px;
height: auto;
border: 0px dashed black;
}
#logo
{
background-image: url('images/logo.gif');
width: 750px;
height: 100px;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
}
#welcome
{
background-image: url('images/background.gif');
width: 750px;
height: 25px;
margin-left: 0px;
border: 1px solid black;
}
#menuleft
{
background-color: #F7F7F7;
width: 150px;
height: 150px;
float: left;
border: 1px solid black;
border-right: 1px dashed black;
border-top: 0px solid black;
border-bottom: 0px dashed black;
min-height: 200px;
}
#content
{
background-color: #F7F7F7;
width: 600px;
height: auto;
margin-left: 150px;
border-right: 1px solid black;
min-height: 200px;
}
#footer
{
background-image: url('images/background.gif');
width: 750px;
height: 15px;
margin-left: 0px;
border: 1px solid black;
}
div
{
font-family: Verdana;
font-size: 11px;
}
/* ------------------ Schrift Settings ------------------ */
.welcome_text
{
padding-top: 5px;
text-align: center;
font-weight: bold;
}
.copyright
{
text-align: center;
font-weight: bold;
}
.menuliste
{
padding: 10px;
text-align: left;
}
.content_text
{
padding: 10px;
text-align: left;
}
hr.menu
{
width: 60px;
color: silver;
height: 1px;
margin-left: 0px;
} |
|
|
| Nach oben |
|
 |
Neals
Neuer [User]
Anmeldung: 14.03.06
Beiträge: 5
|
| Verfasst am: 04.04.2006, 16:30 Titel: |
|
|
Versuchs mal so:
| Code: | #menuleft
{
/*height: 150px;*/
/*min-height: 200px;*/
height: auto;
} |
Nebenbei:
Das lässt sich in einem div fassen!
| Code: | | <div id="menuleft"><div class="menuliste"> |
| Code: | | <div id="welcome"><div class="welcome_text"> |
| Code: | | <div id="content"><div class="content_text"> |
| Code: | | <div id="footer"><div class="copyright"> |
|
|
| Nach oben |
|
|
razor2
Neuer [User]
Anmeldung: 03.04.06
Beiträge: 2
|
| Verfasst am: 04.04.2006, 17:16 Titel: |
|
|
| Neals hat folgendes geschrieben: | Versuchs mal so:
| Code: | #menuleft
{
/*height: 150px;*/
/*min-height: 200px;*/
height: auto;
} |
|
Das funktioniert leider nicht.
| Neals hat folgendes geschrieben: |
Nebenbei:
Das lässt sich in einem div fassen!
| Code: | | <div id="menuleft"><div class="menuliste"> |
| Code: | | <div id="welcome"><div class="welcome_text"> |
| Code: | | <div id="content"><div class="content_text"> |
| Code: | | <div id="footer"><div class="copyright"> |
|
Ok. Aber wie kann ich dann das Menü vom Contentbereich mit einer border trennen?
|
|
| Nach oben |
|
|
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1686
|
| Verfasst am: 04.04.2006, 19:21 Titel: |
|
|
würde es ungefähr so versuchen:
<div id="container"> (Hintergrundfarbe festlegen)
<div id="navigation"> (float: left) </div>
<div id="inhalt"> (margin-left: (Breite von "navigation")) </div>
</div>
So als "rudimentäre" Struktur 
|
|
| Nach oben |
|
|
kryon-publishing
Stammuser [User]
Anmeldung: 15.10.05
Beiträge: 38
|
| Verfasst am: 04.04.2006, 20:56 Titel: |
|
|
| Neals hat folgendes geschrieben: | Versuchs mal so:
| Code: | #menuleft
{
/*height: 150px;*/
/*min-height: 200px;*/
height: auto;
} |
|
hallo,
Ich würde es auch mit hilfe von height und width machen. Aber damit es noch funktioniert, braucht du noch das hinzuzufügen:
position:relative/absolute/fixed/static;
left:xxpx; //brauchst wenn position:relative oder absolute ist
top:xxpx; //brauchst wenn position:relative oder absolute ist
mehr information kriegst du auf der seite: de.selfhtml.org
| Code: |
#menuleft
{
/*postion: ...;
/*left: ...px;
/*top:--px;
/*height: 150px;*/
/*min-height: 200px;*/
height: auto;
}
|
Hoffe ich könnte dir helfen.
freundliche Grüsse
kryon-publishing
|
|
| Nach oben |
|
|
|
|
