ungewollte zeilenumbrüche

[kreisquadrat]

hallo,

ich will hier gerade eine feine navigationsleiste machen, aber ich will ein feld in der navigation andersfarbig als alle anderen machen.
was jetzt passiert, ist, dass der blaue text in einer ganz neuen zeile erscheint.
es soll aber wie die anderen punkte in der selben zeile stehen.
margin 0 und padding 0 hab ich schon probiert, das bringt nichts.


hier der css code in style3.css:

#navigation {
    width: 700px;
    margin-right: auto;
    margin-left: auto;
    clear: both;
    overflow: hidden;
    margin-bottom: 10px;
}
#navigationjugend {
    width: 700px;
    margin-right: auto;
    margin-left: auto;
    clear: both;
    overflow: hidden;
    margin-bottom: 10px;
}
#navigation ul {
    list-style-type: none;
    width: auto;
    margin: 0;
    padding: 0;
}
#navigation li {
    float: left;
}
#navigation a {
    text-decoration: none;
    color: #000000;
    display: block;
    margin: 0 1px;
    padding: 5px;
    border: 0px solid #708090;
    background-color: #FFDD97;
}
#navigation a:hover {
    text-decoration: none;
    color: #ffffff;
    background-color: #FF9933;
}
}
#navigation h {
    text-decoration: none;
    color: #000000;
    display: block;
    margin: 0 1px;
    padding: 5px;
    border: 0px solid #708090;
    background-color: #0000A0;
}
#navigation h:hover {
    text-decoration: none;
    color: #ffffff;
    background-color: #0000FF;
}
#navigationjugend ul {
    list-style-type: none;
    width: auto;
    margin: 0;
    padding: 0;
}
#navigationjugend li {
    float: left;
}
#navigationjugend a {
    text-decoration: none;
    color: #000000;
    display: block;
    margin: 0 1px;
    padding: 5px;
    border: 0px solid #708090;
    background-color: #0000FF;
}
#navigationjugend a:hover {
    text-decoration: none;
    color: #ffffff;
    background-color: #0000A0;
}

und hier der html code auf der seite

    <div id="navigation">
        <ul>
            <li><a href="../default.htm">Start</a></li>
            <li><a href="../kreatives/kreatives.htm">Kreatives</a></li>
            [B]</div><div id="navigationjugend">
            <li><a href="jugend.htm">Jugend</a></li>
            </div><div id="navigation">[/B]
            <li><a href="../newstermine/newstermine.htm">News & Termine</a></li>
            <li><a href="../information_links/information_links.htm">Links</a></li>
            <li><a href="../sponsoren/sponsoren.htm">Sponsoren</a></li>
            <li><a href="../contact/contact.htm">Kontakt</a></li>
        </ul>
    </div>
    <!-- End Navigation -->

der relevante teil ist fett geschrieben.

 

[jansh]

Dein Problem ist das DIV-Element innerhalb der Liste.
DIV ist ein Block-Element und erzeugt somit außerhalb der Liste ein neues Block-Element.
Warum gibst du der "jugendnavigation" nicht einfach eine eigene Klasse, in der du die Farbe definierst, oder machst das über das "style"-Attribut?

 

[kreisquadrat]

ähm ich bin ein absoluter neuling in sachen css.

mit klasse meinst du

#navigationjugend a {
text-decoration: none;
color: #000000;
display: block;
margin: 0 1px;
padding: 5px;
border: 0px solid #708090;
background-color: #0000FF;
}

sowas oder?
ich hab schon probiert ein "a2" zu erstellen, aber das geht ja nicht.
und a kann ich in "navigation" nur einmal definieren oder verstehe ich da jetzt etwas falsch?

 

[MrMurphy]

Hallo,

jetzt ohne mir den Quelltext genauer anzuschauen:

Tags dürfen grundsätzlich nie übergreifen. Wenn du ein div und dann ein ul öffnest, muss zunächst das ul geschlossen werden und dann erst das div. Außerdem ist div ein Blockelement, das einen Zeilenumbruch bewirkt.

Ändere mal

</div><div id="navigationjugend">
<li><a href="jugend.htm">Jugend</a></li>
</div><div id="navigation">

in

<li><span id="navigationjugend"><a href="jugend.htm">Jugend</a></span></li>

Dann kannst du das span-Element mit der id entsprechend anpassen. Das span-Element ist Eigenschaftslos und bewirkt von sich aus keine Veränderungen.

Gruss

MrMurphy

 

[jansh]

Nein.
Ich meine das folgendermaßen.

HTML-Code:

<div id="navigation">
        <ul>
            <li><a href="../default.htm">Start</a></li>
            <li><a href="../kreatives/kreatives.htm">Kreatives</a></li>
            <li class="youth"><a href="jugend.htm">Jugend</a></li>
            <li><a href="../newstermine/newstermine.htm">News & Termine</a></li>
            <li><a href="../information_links/information_links.htm">Links</a></li>
            <li><a href="../sponsoren/sponsoren.htm">Sponsoren</a></li>
            <li><a href="../contact/contact.htm">Kontakt</a></li>
        </ul>
    </div>

CSS:

.youth {
/* Hier stehen deine Formatierungen für den Listenpunkt "Jugendnavigation" */
}

 

[kreisquadrat]

wudnerbar danke ! hab jetzt mrmurphys lösung genommen.

 

[Elroy]

wudnerbar danke ! hab jetzt mrmurphys lösung genommen.

MrMurphys Lösung verwendet aber einen <span> der absolut unnötig ist.

janshs Lösung ist der bessere Vorschlag.

Gruss
Elroy

 

[kreisquadrat]

egal, hauptsache es funktioniert :)

aber ich hab da nochmal ein problem:

ich will eine schriftart in einer anderen farbe erstellen. bisher sieht das in der .css so aus:

#content h1,h2,h3,h4,h5,h6 {
color: #b22222
}

bzw

#content {
    position: relative;
    float: left;
    width: 290px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: left;
}

wenn das noch dazu gehört.

bzw in der html datei:

    <div id="page_content">
        <!-- Begin Content -->
        <div id="content">
            <!-- #BeginEditable "content" -->
            <h2>Jugend</h2>
            <h3>Die Gruppe für junge Menschen.</h3>
&nbsp;</p>
            <!-- #EndEditable --></div>
        <!-- End Content -->

die 2 schriftarten, die ich habne will sollen genau so aussehen wie die aktuellen h2 und h3, nur mit der farbe #2E2EFE.

 

[jansh]

Du musst der <h2>-Überschrift eine Klasse zuweisen.
zB: <h2 class="meineKlasse">TEXT</h2>

Und der Klasse "meineKlasse" weist du dann die Farbe #2e2efe zu.
z.B. so:

h2.meineKlasse {
color:#2e2efe;
}