Anfängerprobleme + Probleme mit DIVs

bierson · 5 Juni 2012

Guten Tag liebe Community,

ich bin Anfänger auf dem Gebiet HTML und versuche mich an meiner ersten Homepage.
Nun bin ich an einem Punkt wo ich nicht weiter weiß und hoffe von euch die benötigten Tipps zu erlangen.

Mein Problem liegt darin das ich nicht weiß wie ich die DIVs aufbauen muss und mit welchen Attributen belgen muss, damit sie das machen was ich will.

Also meine Seite sollte folgender Maßen aufgebaut sein.

Ein durchgängiger roter Hintergrund und in der Mitte ein Schriftrolle in der der Content stehen soll. Neben der Schriftrolle sollte die Menüleiste sein. Und das ganze sollte immer mittig sein, egal welche Auflösung der Bildschirm hat, aber hier stoße ich an meine Grenzen. Da ich nciht weß wie ich das umsetzen soll. Ich hab es schon geschafft es immer mittig zu halten, wenn ich mein Menü mit im COntent also ind er Mitte bei der Schriftrolle habe. Aber die Menü soll ausserhalb sein und wenn ich es nach aussen baue, wird der Abstand zum Content zur Schriftrolle immer größer... Da liegt mein Problem.

Ich lege ein Bild bei, damit man das Problem sieht.

Hoffe ihr versteht mein Problem, schonmal danke im vorraus!

Hier der CSS code

Code:

/* *** css by miss monorom www.intensivstation.ch *** */
/* css released under Creative Commons License -  http://creativecommons.org/licenses/by/2.0/deed.en  */

body {
background-image:url('bg.jpg');

font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;
}
a {color: #DB7093;}
a:visited {color:#DB7093;}
a:hover {color: #564b47;}
a:active { color:#000000;}

h1 {
font-size: 11px;
text-transform:uppercase;
/*border-top:1px solid #564b47; */
/*border-bottom:1px solid #564b47; */
padding:5px 15px;
margin:0px }

h2 {
font-size:20px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}

img.download {vertical-align:middle;}

/* ----------container zentriert das layout-------------- */
#container {
width: 850px;
height: 1080px;
padding-top: 0px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
background-image:url('pergament-gr.gif');

}

/* ----------banner for logo-------------- */
#banner {
text-align: right;
padding: 0px;
padding-top: 110px;
margin: 0px;
margin-top: 140px;
padding-left: 40px;
}
#banner img {padding:10px 0px;} 

/* -----------------Inhalt--------------------- */
#content {
padding: 0px;
padding-top: 30px;
margin-left: 200px;
margin-right: 0px;
}
div#content { 
min-height:500px;
height:expression(this.scrollHeight > 500 ? "auto":"500px"); 
}

p, pre{
padding: 5px 10px;
margin:0px;
}

/* --------------left navigavtion------------- */
#left {
float: left;
width: 200px;
margin: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 200px;
padding-top: 190px;
}

/* -----------footer--------------------------- */
#footer {
clear: both;
margin: 0px;
padding: 0px;
padding-top: 125px;
padding-right: 100px;
text-align: right; }

Und der HTML Code

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>
<link type="text/css" href="1.css" rel="stylesheet" media="screen" />
<title>Vom Kornburger Schloss</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="left">
        <h2></h2>
        
<a href="index.html"> <img src="b-news2.png" width="200" height="73"> </a>
<br>
<a href="ueberuns.html"><img src="b-ueberuns2.png" width="200" height="73"> </a>
<br>
<a href="hunde.html"><img src="b-hunde2.png" width="200" height="73"> </a>
<br>
<a href="wurfplannung.html"><img src="b-wurfplannung2.png" width="200" height="73"> </a>
<br>
<a href="nachzucht.html"><img src="b-nachzucht2.png" width="200" height="73"> </a>
<br>
<a href="verkauf.html"><img src="b-verkauf2.png" width="200" height="73"> </a>
<br>
<a href="galerie.html"><img src="b-galerie2.png" width="200" height="73"></a> 
<br>
<a href="links.html"><img src="b-links2.png" width="200" height="73"></a> 
<br>
<a href="kontakt.html"><img src="b-kontakt2.png" width="200" height="73"> </a>

    </div>
    

<div id="container">
    <div id="banner" ><center><img src="logo.png" alt="" width="500" height="108" border="0" /></center>
    </div>
    
    
    
    
    
    <div id="content">
        <h2>Herzlich Willkommen auf unserer ,</h2>
<p></p>
<br>
<pre>             <img src="startbild.png" width="349" height="289"></pre>
<pre></pre>

    
    </div>
    
    
     <div id="footer"><h1>&copy; 2012 Renata Wallek</h1></div>
</div>
</body>
</html>

Und hier ein Bild von meinem Problem:

Danke

Gruß bierson

noxTo · 5 Juni 2012

ich bin zwar kein experte was html und css betrifft aber der div fürs menue liegt ausserhalb des container div´s da du diesen ja zentrierst ist der menue divcontainer nicht von der css eigenschaft betroffen da er ja ausserhalb des container divs liegt. pack ihn mit rein dann sollte es doch gut sein.

Anfängerprobleme + Probleme mit DIVs

bierson

Neues Mitglied

noxTo

Mitglied

Neueste Beiträge