Erstmal der Code:
Und CSS:
Jetzt mein Problem:
Ich will ein 2 Spalten Layout im Inhaltsbereich haben, was auch klappt. Nur ich will, wenn im Menue2 keine Links vorhanden sind, dass man dann auch keine leerer Kasten sieht.( Testet es mal, dann wisst ihr, was ich meine.)
Wieso nicht einfach an den Stellen die Div weglassen? Weil ich es in ein CMS einfügen muss und dort kann man dass dann nicht wegmachen.
Hoffe ihr könnt mein Problem verstehen.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="Herzlich willkommen auf unsere Homepage."/>
<meta name="keywords" content="Landseer, vom, Nebelwald, Donata, Künsler, VDH, DLC, Aktuelles, Zucht, Rüden, Hündinnen, Startseite"/>
<meta name="author" content="Donata Künsler"/>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<title>Vom Nebelwald - Home -</title>
</head>
<body>
<div id="wrapper">
<div id="container">
<div class="title">
<h2><a href="index.html"></a></h2>
</div>
<div class="header"></div>
<div class="navigation">
<ul>
<li><a href="index.html" id="active">Startseite</a> </li>
<li><a href="aktuelles.html">Aktuelles</a> </li>
<li><a href="ueber_uns.html">Über uns</a> </li>
<li><a href="unsere_Landseer.html">Unsere Landseer</a> </li>
<li><a href="galerie.html">Galerie</a> <li>
<li><a href="wurfplanung.html">Wurfplanung</a> </li>
<li><a href="kontakt.html">Kontakt</a> <li>
<a href="impressum.html">Impressum</a> <li>
</ul>
<div class="clearer"></div>
</div>
<div id="menue2">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div class="main">
<div class="content">
<!-- Inhalt -->
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<!-- Inhalt Ende -->
</div>
<div class="clearer"></div>
</div>
<div class="footer">
<div class="left">
<a href="http://www.landseer.de" target="_blank"><img src="pic/DLCKopf1_ne55.gif" border="0" width="56" height="58" alt="Landseer Kopf" /> </a>seit 1993 Mitglied im Deutschen Landseer Club (DLC) <a href="http://www.vdh.de" target="_blank"><img src="pic/vdh60x33.jpg" border="0" width="60" height="33" alt="VDH" /> </a>
</div>
<div class="clearer"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Code:
/*
Name: Natural Essence
Date: 2007-02-20
Description: Soft and natural single/two-column template.
Author: Viktor Persson
URL: http://templates.arcsin.se
Feel free to use and modify but please provide credits.
*/
/* default elements */
* {margin: 0; padding: 0;}
body {
background: #5F96F5 url('img/bg.jpg') repeat-x;
color: #050505;
font-style:normal; font-variant:normal; font-weight:normal; font-size:62.5%; font-family:sans-serif; padding-left:0; padding-right:0; padding-top:2%; padding-bottom:2%
}
a {color: #7B9FFF;}
a:hover {color: #215AF5;}
big {font-size: 1.1em;}
h1, h2, h3 {color: #021C62; padding: 8px 0 2px;}
h1 {font: normal 2.4em serif,sans-serif;}
h1 a {text-decoration: none;}
h1 a:hover {text-decoration: underline;}
h2 {font: normal 1.6em serif,sans-serif;}
h3 {font: bold 1.2em serif,sans-serif;}
blockquote {
background: url('img/quote.gif') no-repeat;
display: block;
font: normal 1.1em Georgia,serif;
padding-left: 26px
}
form, table {margin-bottom: 1.2em;}
img {border: none;}
label {display: block;}
li {line-height: 1.5em;}
p {padding: 2px 0 10px;}
small, .small {font: normal 0.9em sans-serif;}
ul {padding: 0 2em 1.2em;}
/* structure */
#wrapper {
background: #256CF0 url('img/wrapper.gif') no-repeat left bottom;
margin: 0 auto;
width: 962px
}
#container {
background: #FFFFFF;
border-top: 6px solid #256CF0;
font-size: 1.3em;
line-height: 1.3em;
margin: 0 auto;
width: 950px;
}
/* header */
.title {
background: #FFFFFF url('img/header-h1.jpg') repeat-x;
border-top: 1px solid #050505
}
.title h1 {
color: #441;
font: normal 2.2em Georgia,"Trebuchet MS",sans-serif;
padding: 10px 0 10px 18px;
}
.header {
border-top: 2px solid blue;
background: #DAD7C5 url('img/header_image.jpg') no-repeat left bottom;
height: 100px
}
/* navigation */
.navigation {
background: blue url('img/nav.gif') repeat-x; height: 41px;
border-top: 1px solid blue;
list-style:none;
}
.navigation a {
background: #FFF url('img/nav.gif') repeat-x;
border-right: 1px solid #C9C6B3;
color: #787878;
float: left;
line-height: 41px;
text-align: center;
text-decoration: none; font-style:normal; font-variant:normal; font-weight:bold; font-size:1em; font-family:Tahoma, sans-serif; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0
}
.navigation a:hover, .navigation a#active {background-position: left bottom; color: #331;}
.navigation ul {
list-style:none;
padding-left:0;
}
/* main */
.main#two-columns {background: #FFF url('img/two-columns.gif') repeat-y;}
/* bottom */
.bottom {
background: #DCDAC9 url('img/bottom.gif') no-repeat left bottom;
border-top: 1px solid #AA8;
color: #444;
padding-left:20px; padding-right:20px; padding-top:14px; padding-bottom:14px
}
.bottom .left, .bottom .right {width: 49%;}
/* footer */
.footer {
background: #256CF0;
color: #EED;
padding: 10px;
}
.footer .left {width: 66%;}
.footer .right {
width: 33%;
text-align: right;
}
.footer a {
color: #FFF;
text-decoration: none;
}
.footer a:hover {
color: #FFF;
text-decoration: underline;
}
/* gallery */
.gallery td {
vertical-align: top;
text-align: center;
}
.gallery em {display: block;}
/* misc */
.clear, .clearer {clear: both;}
.clearer {font-size: 0;}
.col2 .left {width: 64%;}
.col2 .right .content {background: #FFF;}
.col2 .right {width: 33%;}
.content {padding: 18px 20px ; height:auto; }
.left {float: left;}
.right {float: right;}
.right .content {padding: 18px 12px 12px;}
/* block list */
ul.block {
border-top: 1px dashed #BCBAAC;
margin: 4px 0;
padding: 0;
width: 90%;
}
.block li {
border-bottom: 1px dashed #BCBAAC;
list-style: none;
}
.block li a, .block li em {
color: #553;
display: block;
}
.block li em {
font-size: 0.9em;
font-style: normal;
}
.block li a {
padding: 4px 3%;
text-decoration: none;
width: 94%;
}
.block li a span {font-weight: bold;}
.block li a:hover {
background: #D2D0C0;
color: #553;
}
.right .block, .right .block li {border-color: #DCDACC;}
.right .block li a:hover {background: #F2F0EA;}
#menue2 {
width: 150px;
height:auto;
padding-left:25px;
padding-top:25px;
padding-bottom:25px;
float:left;
/*
border-right:3px;
border-style:solid;
border-color:#256CF0;
border-top:none;
border-left:none;
*/
}
#menue2 a {
color:#043DA7;
}Ich will ein 2 Spalten Layout im Inhaltsbereich haben, was auch klappt. Nur ich will, wenn im Menue2 keine Links vorhanden sind, dass man dann auch keine leerer Kasten sieht.( Testet es mal, dann wisst ihr, was ich meine.)
Wieso nicht einfach an den Stellen die Div weglassen? Weil ich es in ein CMS einfügen muss und dort kann man dass dann nicht wegmachen.
Hoffe ihr könnt mein Problem verstehen.
Zuletzt bearbeitet:
