Div Positionierung und Content variabel

C

cronicle

Grünschnabel
Einen wunderschönen guten Tag,

Ich habe mich hier viele Threads durchgelesen die auch auf mein Problem zutreffen aber irgendwie funtzt das alles nicht.

Ich muss ein Design für Joomla erstellen d.h. die Navigation und der Content müssen Variable sein. Die Navigation ist meisten natürlich nicht so lang wie der Content deswegen müssen die beiden unterschiedlich variable sein.

Meine Probleme sind :

1. Der Content/Navigation Bereich soll Variable sein sich also der länge anpassen
2. Um die beiden Haupt Divs für navi und content neben einander zu setzen verwende ich Float:left aber es wird im IE anders dargestellt als im FF. Der IE schiebt alles etwas weiter lang rechts als der FF.


Liste mal meinen Quellcode auf ... Hoffe jemand kann mir da Helfen -.-

Vielen dank schonmal und sorry wenn die Frage zum 1000000 mal kommt ;)

HTML CODE
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/template.css">
</head>
<body>
<div id="All">
<div id="Header"></div>
<div id="Content">
<div id="Navigation">
<div id="Nav_head"></div>
<div id="Nav_middle">
<!-- NAVIGATIONS INHALTE -->
</div>
<div id="Nav_footer"></div>
</div>
<div id="Topic"></div>
<div id="Top_head"></div>
<div id="Top_middle">
<!-- TEXT INHALTE -->
</div>
<div id="Top_footer"></div>
</div>
<div id="Footer"></div>
</div>
</body>
</html>
Zum Vergrößern anklicken....

CSS CODE
body {
background-color: #5DC4ED;
margin:0px auto;
height:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;

}
/* POSITIONIERUNGS DIV */

#All {
width: 980px;
left: 50%;
margin-left: -490px;
position:absolute;
}
/* Hauptbereiche */

#Header {
width: 980px;
height: 154px;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
}

#Content {
width: 980px;
background-image: url(../images/body_bg.jpg);
background-repeat: repeat-y;
}


#Footer {
width: 980px;
height:14px;
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
position: absolute;
bottom: 0;
}
/* ALLE NAVIGATIONS ELEMENTE */

#Navigation {
Border: 1px solid black;
height: 200px;
width: 226px;
margin-left: 20px;
Float:left;

}

#Nav_head {
width:226px;
height:21px;
background-image: url(../images/nav_head.jpg);
background-repeat: no-repeat;
}

#Nav_middle {
width:226px;
background-image: url(../images/nav_middle.jpg);
background-repeat: repeat-y;
}

#Nav_footer {}

/* ALLE TOPIC ELEMENTE */

#Topic {
Border: 1px solid black;
width: 300px;
margin-left: 250px;
}

#Top_head {
width:226px;
height:21px;
background-image: url(../images/nav_head.jpg);
background-repeat: no-repeat;
}

#Top_middle {
width:226px;
background-image: url(../images/nav_middle.jpg);
background-repeat: repeat-y;
}

#Top_footer {}
Zum Vergrößern anklicken....
 
Hi,

  1. Der Artikel AnyColumnLongest listet diverse Techniken auf, um "Equal-Height-Columns" zu erzeugen.

    Zudem ist hier die height:200px-Deklaration für #Navigation hinderlich, wenn das Element in der Höhe variabel sein soll, da diese Angabe von den standardkonformen Browsern als fixe Höhe behandelt wird. Mit min-height:200px lässt sich eine Mindesthöhe für dieses Element einrichten, die dann bei zunehmenden Inhalt mitwächst.

  2. Hier tritt bei #Navigation im IE6 sein "Doubled Float-Margin"-Bug in Erscheinung - siehe CSS IE6 rückt floatende Boxen zu weit ein - was tun?

mfg Maik
 
Das Problem an der Sach ist das sich der Hintergrund nicht Variable ist.
Meine Navigation und den Topic(Eigentlicher Content Bereich) sind Variable.

So die Seite ist Online .... http://www.ravensberger-jugendbildungshaus.de

Könnt euch das ja mal anschauen hier nochmal meine neue CSS:

* {
margin:0px;
padding:0px;
}

body {
background-color: #5DC4ED;
font-family: Verdana, Arial, Helvetica, sans-serif;

}
/* POSITIONIERUNGS DIV */

#All {
width: 980px;
left: 50%;
margin-left: -490px;
position:absolute;
background-image: url(../images/body_bg.jpg);

}
/* Hauptbereiche */

#Header {
width: 980px;
height: 154px;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
margin-bottom:23px;

}

#Content {
width: 980px;

}


#Footer {
width: 980px;
height:13px;
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
}

/* LINKVERLAUF OBEN */

#process {
position:absolute;
left:30px;
top:152px;
}

/* ALLE NAVIGATIONS ELEMENTE */

#Navigation {
width: 222px;
margin-left: 20px;
FLOAT:left;
display:inline;
}

#Nav_head {
width:222px;
height:20px;
background-image:url(../images/nav_head.jpg);
background-repeat: no-repeat;
}

#Nav_middle {
width:222px;
background-image:url(../images/nav_middle.jpg);
background-repeat: repeat-y;
padding-left: 25px;
}

#Nav_footer {width:222px;
height:14px;
background-image:url(../images/nav_footer.jpg);
background-repeat: no-repeat;}

/* ALLE TOPIC ELEMENTE */

#Topic {
width: 705px;
margin: 0 0 0 245px;
min-height:350px;
}

#Top_head {
width:705px;
height:20px;
background-repeat: no-repeat;
background-image:url(../images/top_head.jpg);
}

#Top_middle {
width:705px;
background-image:url(../images/top_middle.jpg);
background-repeat: repeat-y;
padding-left: 25px;
}

#Top_footer {
width:705px;
height:11px;
background-image:url(../images/top_footer.jpg);
background-repeat: no-repeat;
}

/* SCHRIFT UND LINKS */

a {
Text-Decoration:none;
font-size: 10px;
color: #5A5A5A;
}

a:hover {
color:#5DC4ED;
Text-Decoration:none;
font-size: 10px;
}
h3 {
font-size: 12px;
color: #5A5A5A;
}
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück