Zur Navigation

Einfügen eines neuen div

1 elena

Hallo,
ich bin relativer Neuling auf dem Gebiet "css".

Ich habe folgende Konstellation:

oben ist ein #header, darunter am linken Rand eine #navi, rechts daneben ein #content und in dem #content ein#wrapper. Das funktioniert auch alles. Nun gestalte ich gerade ein wenig um (ich bin in der Übungsphase!) und möchte unter die #navi noch eine #navi_unten (oder wie immer man das nenen will) machen, wo ich z.B. eine Textzeile "Letzte Aktualisierung" oder ein "icra"-zeichen unterbringen kann. Unter dem #content ist noch ein #footer.
Hier ein Auszug aus dem Code:

#header
{
border: 1px solid #008484;
background-image:url(images/fotostreifen1.jpg);
background-repeat: repeat;
height: 70px;
margin: 10px 10px 10px 10px;
}

#navi
{
height: 310px;
width: 180px;
margin-left: 10px;
border: 1px solid #008484;
background-image: url(images/navibild_02_01_08.jpg);
background-repeat: no-repeat;
float: left;
display: inline;
}

#navi_unten
{
height: 310px;
margin-left: 10px;
width: 180px:
border: 1px solid #008484;
float: left;
dispay: inline;
}


#content
{
background-color: #008484;
margin-left: 200px;
margin-right: 10px;
border: 1px solid #005b5b;
text-align: justify;
}

#wrapper
{
margin: 10px auto;
padding-top:15px;
width: 715px;
}

#footer
{
font-size: 9pt;
text-align: center;
margin-left: 200px;
margin-right: 10px;
height: 20px;
clear: both;
}

Ich kann die #navi_unten aber anschließend nicht ansprechen, wenn ich da was eintragen will. Wo ist der Fehler??

elena

08.01.2008 10:09

2 Jörg

Hallo elena,

in dem Codeabschnitt befindet sich ein Fehler, hinter der width Angabe steht ein Doppelpunkt statt einem Semikolon:

#navi_unten
{
height: 310px;
margin-left: 10px;
width: 180px:
border: 1px solid #008484;
float: left;
dispay: inline;
}

Behebt eine Korrektur das Problem?

08.01.2008 10:28

3 anne (Gast)

Nicht ganz, jetzt sehe ich sie zwar, aber sie hängt neben der#navi und nicht drunter!

elena

08.01.2008 10:36

4 elena

sorry, ich hatte mich falsch eingeloggt, es muß natürlich als Absender "elena" heißen!

08.01.2008 10:38

5 Jörg

Du hast für die beiden divs gleich zwei Angaben definiert, die für ein Nebeneinander sorgen:

float: left;
display: inline;

Wenn du diese rausnimmst, sollten sie untereinander positioniert werden. Wenn du #content rechts von #navi und #navi_unten positonieren möchtest, musst du die beiden in ein gemeinsames div stecken, welches dann die Eigenschaft float:left erhält

08.01.2008 10:49

6 elena

Sorry, ich habe das nicht ganz kapiert. Mein html sieht so aus:

<div id="navi">
<ul>
<li> <a href="index.html">Home</a></li>
usw.....

</ul>
</div>

<div id="navi_unten"></div>

<div id="content">

Der css-code sieht jetzt so aus:


#navi
{
height: 310px;
width: 180px;
margin-left: 10px;
border: 1px solid #008484;
background-image: url(images/navibild_02_01_08.jpg);
background-repeat: no-repeat;
float: left;
display: inline;
}

#navi_unten
{
height: 310px;
margin-left: 10px;
width: 180px;
border: 1px solid #008484;
}

#content
{
background-color: #008484;
margin-left: 200px;
margin-right: 10px;
border: 1px solid #005b5b;
text-align: justify;
}

Aber so klappt es nicht, weil jetzt die #navi_unten neben der #navi hängt und der #content ganz heruntergerutscht ist.

Wie kann ich die beiden #navis in ein gemeinsames div stecken?? Muß ich da zuerst ein übergeordnetes neues div anlegen?? Kannst Du mir bitte das mal aufschreiben??

elena

08.01.2008 11:10

7 Jörg

Ja, du legst ein übergeordnetes div an, z.B.:
<div id="navi_gesamt">
<div id="navi"> 
<ul> 
<li> <a href="index.html">Home</a></li>
<!-- usw..... -->
</ul>
</div> 

<div id="navi_unten"></div>
</div>

<div id="content">

Der CSS-Teil sieht dann folgendermaßen aus:
#navi_gesamt {
float:left;
}

#navi
{
height: 310px;
width: 180px; 
margin-left: 10px;
border: 1px solid #008484;
background-image: url(images/navibild_02_01_08.jpg);
background-repeat: no-repeat;

/* die float und display Angaben entfernt */

}

#navi_unten
{
height: 310px;
margin-left: 10px;
width: 180px;
border: 1px solid #008484;
}

08.01.2008 11:21

8 elena

Juchhuuuuu!!!!
Das war's!! Jetzt klappt es! Wieder etwas dazugelernt!!

Danke Dir Jörg für Deine Mühe und Geduld!!

elena

08.01.2008 11:29

Beitrag schreiben (als Gast)





[BBCode-Hilfe]