Autor |
Nachricht |
DamnSimple
Threadersteller
Dabei seit: 12.08.2006
Ort: Siegen
Alter: -
Geschlecht:
|
Verfasst Do 25.09.2008 07:38
Titel [CSS] Kleines CSS-Problem |
|
|
Hallo,
ich hab's nun geschafft das Layout einigermaßen in HTML+CSS umzusetzen, allerdings habe ich noch ein paar kleine Probleme.
1. Wie bekomme ich es hin, das der Content und die rechte Zusatzspalte immer gleich lang mit der Navigationsspalte ist?
2. Wie schaffe ich es, das die Höhe des gesamten Designs mindestens 100% der Browserhöhe einnimmt und sich nur falls mehr Text da ist verlängert?
Danke schonmal im vorraus.
Hier die Seite
|
|
|
|
|
xBe
Dabei seit: 03.06.2006
Ort: Mönchengladbach
Alter: 34
Geschlecht:
|
Verfasst Do 25.09.2008 08:14
Titel Re: [CSS] Kleines CSS-Problem |
|
|
Es wäre von Vorteil wenn du den Code hier postest, dann brauchen wir un s nicht wund suchen, wo was steht ect.
Zudem wirst du einiges über die Suiche finden...
100% height
mfg xBe
|
|
|
|
|
Anzeige
|
|
|
DamnSimple
Threadersteller
Dabei seit: 12.08.2006
Ort: Siegen
Alter: -
Geschlecht:
|
Verfasst Do 25.09.2008 08:24
Titel
|
|
|
Height 100% habe ich schon versucht, da tut sich garnichts.
Hier ist der HTML-Code
Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="Helmus Metzgerei [Inhaber Herbert Kremer]"></meta>
<link rel="shortcut icon" href="img/favicon.ico" />
<title>Helmus Metzgerei [Inhaber Herbert Kremer]</title>
<style type="text/css" media="screen"> @import "style.css"; </style>
</head>
<body>
<div id="container">
<div id="header">
<div id="head_left">
test 1...2...3...
</div>
<div id="head_content">
test 1...2...3...
</div>
<div id="head_right">
test 1...2...3...
</div>
</div>
<div id="content">
<div id="co_left">
<ul id="navi">
<li><a href="index.html" target="_self" title="Home" alt="Home">Home</a></li>
<li><a href="team.html" target="_self" title="Das Team" alt="Das Team">Das Team</a></li>
<li class="unter">Die Metzgerei</li>
<li><a class="unter" href="produktion.html" target="_self" title="Die Produktion" alt="Die Produktion">· Die Produktion</a></li>
<li><a class="unter" href="laden.html" target="_self" title="Der Laden" alt="Der Laden">· Der Laden</a></li>
<li><a href="angebote.html" target="_self" title="Angebote" alt="Angebote">Angebote</a></li>
<li><a href="auszeichnungen.html" target="_self" title="Auszeichnungen" alt="Auszeichnungen">Auszeichnungen</a></li>
<li><a href="impressum.html" target="_self" title="Impressum" alt="Impressum">Impressum</a></li>
<li><a href="feedback.html" target="_self" title="Feedback" alt="Feedback">Feedback</a></li>
</ul>
</div>
<div id="co_content">
test 1...2...3...
</div>
<div id="co_right">
test 1...2...3...
</div>
</div>
<div id="footer">
<div id="foot_left">
test 1...2...3...
</div>
<div id="foot_content">
test 1...2...3...
</div>
<div id="foot_right">
test 1...2...3...
</div>
</div>
</div>
</body>
</html>
|
Hier ist der CSS-Code
Code: |
body {
background-image: url(img/bg.gif);
background-repeat: repeat;
margin-top: 0px;
font-family: Verdana, Lucida Grande, Tahoma, Trebuchet MS, sans-serif;
font-size: 11px;
}
#container {
margin: 0 auto;
width: 900px;
z-index: 1;
}
#header {
width: 900px;
height: 120px;
background-color: white;
z-index: 1;
}
#head_left {
width: 200px;
height: 120px;
float: left;
background-color: #fff;
border-left: 1px white solid;
border-bottom: 1px white solid;
z-index: 1;
}
#head_content {
width: 546px;
height: 120px;
float: left;
background-color: #0d6380;
border-left: 1px white solid;
border-right: 1px white solid;
border-bottom: 1px white solid;
z-index: 1;
}
#head_right {
width: 150px;
height: 120px;
float: left;
background-color: #0099cc;
border-right: 1px white solid;
border-bottom: 1px white solid;
z-index: 1;
}
#content {
width: 900px;
height: 100%;
background-color: white;
z-index: 1;
}
#co_left {
width: 200px;
height: auto;
min-height: 100%;
padding: 0px;
float: left;
background-color: #0099cc;
border-left: 1px white solid;
border-bottom: 1px white solid;
z-index: 1;
}
#co_content {
width: 506px;
height: auto;
min-height: 100%;
float: left;
padding: 20px;
background-color: #efefef;
border-left: 1px white solid;
border-right: 1px white solid;
border-bottom: 1px white solid;
z-index: 1;
}
#co_right {
width: 150px;
height: auto;
min-height: 100%;
float: left;
background-color: #0099cc;
border-right: 1px white solid;
border-bottom: 1px white solid;
z-index: 1;
}
#footer {
clear: both;
width: 900px;
height: 120px;
z-index: 2;
}
#foot_left {
width: 200px;
height: 120px;
float: left;
background-color: #0099cc;
border-left: 1px white solid;
z-index: 2;
}
#foot_content {
width: 546px;
height: 120px;
float: left;
background-color: #0d6380;
border-left: 1px white solid;
border-right: 1px white solid;
z-index: 2;
}
#foot_right {
width: 150px;
height: 120px;
float: left;
background-color: #0099cc;
border-right: 1px white solid;
z-index: 2;
}
ul#navi {
font-size: 11px;
float: left; width: 200px;
margin: 0 0 100%; padding: 0;
}
ul#navi li {
list-style: none;
margin: 0; padding: 0;
border-bottom: 1px white solid;
}
ul#navi li.unter {
list-style: none;
margin: 0; padding: 0;
border-bottom: 1px white solid;
display: block;
padding: 10px;
font-weight: bold;
color: white;
background-color: #0d6380;
}
ul#navi a {
display: block;
padding: 10px;
font-weight: bold;
color: white;
text-decoration: none;
}
ul#navi a:link {
background-color: #0d6380;
color: white;
text-decoration: none;
}
ul#navi a:visited {
background-color: #0d6380;
color: white;
text-decoration: none;
}
ul#navi a:hover {
background-color: #0099cc;
color: white;
cursor: help;
text-decoration: none;
}
ul#navi a:active {
background-color: #0d6380;
color: white;
text-decoration: none;
}
ul#navi a.unter {
display: block;
padding: 10px;
color: white;
text-decoration: none;
}
ul#navi a.unter:link {
background-color: #0099cc;
color: white;
text-decoration: none;
}
ul#navi a.unter:visited {
background-color: #0099cc;
color: white;
text-decoration: none;
}
ul#navi a.unter:hover {
background-color: #efefef;
color: #666666;
cursor: help;
text-decoration: none;
}
ul#navi a.unter:active {
background-color: #0099cc;
color: white;
text-decoration: none;
}
|
Ist nicht so perfekt, bin noch am üben.
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Do 25.09.2008 08:31
Titel
|
|
|
ich sehe nirgends das du die höhe deines wrappers auf 100% stellst.
|
|
|
|
|
DamnSimple
Threadersteller
Dabei seit: 12.08.2006
Ort: Siegen
Alter: -
Geschlecht:
|
Verfasst Do 25.09.2008 08:33
Titel
|
|
|
Ich hatte's aber schonmal probiert, lokal und es hat nichts genutzt.
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Do 25.09.2008 08:34
Titel
|
|
|
dann zeig doch mal wie du das gemacht hattest.
|
|
|
|
|
konsumkünstler
Dabei seit: 05.06.2005
Ort: -
Alter: -
Geschlecht:
|
|
|
|
|
DamnSimple
Threadersteller
Dabei seit: 12.08.2006
Ort: Siegen
Alter: -
Geschlecht:
|
Verfasst Do 25.09.2008 09:19
Titel
|
|
|
Besonders weitergeholfen hat mir das auf jeden Fall nicht.
|
|
|
|
|
|
|
|
Ähnliche Themen |
Kleines CSS-Problem
kleines CSS Problem
kleines Javascript problem
Kleines Website Problem
kleines flash problem
Kleines vBulletin/JS/IE Problem
|
|