Hallo,
meine Website ist wie folgt aufgebaut:
- container
- header
- menu (oben, horizontal)
- navileft (links, vertikal - wenn man oben im menu klickt, stehen die Links hier als Liste)
- content (rechts von navileft)
- footer
Der content sollte aus einer Überschrift, sowie aus einem Text mit Bild(ern) bestehen.
Die Überschrift ist dort wo sie sein soll, allerdings sind Bild und Text nach unten gerutscht und fangen erst da an, wo links navileft aufhört. Es ist also einiges an Zwischenraum zwischen Überschrift und Bild/Text.
Zudem hätte ich gerne dass das Bild rechts ist und der Text um das Bild herum läuft!
Hier der CSS-Code:
Hier mein HTML-Code für navileft und content:
Vielen Dank für eure Hilfe!
;-)
meine Website ist wie folgt aufgebaut:
- container
- header
- menu (oben, horizontal)
- navileft (links, vertikal - wenn man oben im menu klickt, stehen die Links hier als Liste)
- content (rechts von navileft)
- footer
Der content sollte aus einer Überschrift, sowie aus einem Text mit Bild(ern) bestehen.
Die Überschrift ist dort wo sie sein soll, allerdings sind Bild und Text nach unten gerutscht und fangen erst da an, wo links navileft aufhört. Es ist also einiges an Zwischenraum zwischen Überschrift und Bild/Text.
Zudem hätte ich gerne dass das Bild rechts ist und der Text um das Bild herum läuft!
Hier der CSS-Code:
Code:
/* ----------------Menü links, Liste-------------------- */
#navileft {
float: left;
width: 200px;
margin: 0px;
padding: 45px 15px 10px 0px;
background: #cccccc;
}
ul.list1{
list-style:none;
font-size:70%;
font-weight: bold;
}
ul.list2{
padding-top:5px;
font-size:60%;
padding-bottom:10px;
}
ul.list3{
padding-top:5px;
padding-bottom:10px;
font-size:60%;
}
/* -----------------Inhalt--------------------- */
#content {
background: #86351b url(img/content.gif) repeat-y;
background-color: #ffffff;
padding: 30px 30px 30px 30px;
margin-left: 200px;
margin-right: 0px;
}
div#content {
min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px");
}
p, pre{
padding: 5px 10px;
margin:0px;
}
.h3 {
color: #3f1d0e;
font-size: 105%;
font-style: bold;
padding: 0px 0px 0px 5px;
line-height: 12px;
padding-top: 15px;
padding-bottom: 20px;
}
.h4 {
color: #333333;
font-size: 14px;
font-style: bold;
padding: 0 0 0 0px;
line-height: 12px;
padding-top: 0px;
padding-bottom: 10px;
}
.links {
color: #3f1d0e;
font-size: 11px;
font-style: inherit;
padding: 10px 10px 10px 5px;
line-height: 50px;
padding-top: 0px;
padding-bottom: 0px;
}
.fliesstext {
text-align: left;
color: #49180a;
font-size: 12px;
}
.picture {
background-color: #F9F9F9;
font: 10px/1.4em Tahoma, sans-serif;
color:#49180a;
text-align:center;
clear: left;
border: thin silver solid;
padding: 1px;
}
.picture-img {
border: 1px solid #CCCCCC;
vertical-align:middle;
margin-bottom: 3px;
display:block;
}
.picture-right {
margin: 0 0 10px 10px;
padding: 2px;
float:right;
}
.picture-left {
margin: 0 10px 10px 0;
padding: 2px;
float:left;
}
.clear {
clear: left;
font-size: 1px;
line-height: 0;
}Hier mein HTML-Code für navileft und content:
Code:
<div id="navileft">
<ul class="list1">
<li>Projekte</a></li>
</ul>
<ul class="list2">
<li><a class="list2" href="#">Maria Magdalena Special School</a></li>
<li><a class="list2" href="#">Nurseries</a></li>
</ul>
</div>
<div id="content">
<p><span class="h3">Herzlich Willkommen!</span></p>
<div class="picture right" style="width:322px;">
<img src="img/kid01.jpg" width="320" height="206" alt="Welcome"/>Mädchen in Kenia. </div>
<p><span class="fliesstext">Wir freuen uns, dass Sie uns gefunden haben! Unser Verein fördert Selbsthilfeprojekte in der Gemeinde nd Umgebung von Munyu in Kenia. Das Dorf Munyu liegt ca. 70 km nordöstlich der Hauptstadt Nairobi in einer ländlichen und armen Region.</span>
<div class="clear"></div>
</div>Vielen Dank für eure Hilfe!
;-)
