• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigationsleiste umfließen lassen?!

N

Newone88

Neues Mitglied
Hi,
zur erklärung bin grad dabei mich mit HTML und CSS zu befassen weil mich das thema einfach intererssiert.

hab mich jetzt schon ein bisschen eingelesen aber habe bei der Navigationsleiste noch einenige Schwierigkeiten mit dem "float"

Und zwar möchte ich das die Navi-leiste am linken Rand ist und rechts davon mit Text umschlossen wird sozusagen.

mein bissheriger Navi code schaut so aus:


ul#Navigation {
width: 200px;
margin: 0px 100px; padding: 0.9em 0.8em 0.8em;
border: 1px solid black;
background-color: transparent;

}

ul#Navigation li {
list-style: none;
margin: 0.9em; padding: 0;
}

ul#Navigation a, ul#Navigation span, ul#Navigation h2 {
display:block;
padding: 0.5em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: gray; background-color: black;
}


ul#Navigation a:hover, ul#Navigation span {
border-color: black;
border-left-color: white; border-top-color: white;
color: red; background-color: white;
}
ul#Navigation h2 {
font-size: 1em;
margin: 1.1em 0 0;
border-color: gray;
color: white; background-color: black;
}

wo muss ich denn da den float befehl einfügen um den Text da hinzubekommen wo ich ihn haben will?

Danke für die Antworten
 
Huhu danke für die Prompte Antwort!
Nicht wirklich. Da ich wie gesagt mich grad reinarbeite weiss ich nicht mal genau wo der Befehl hingehört oder was er bewirkt :( Sry
Wär die dankbar für ne Erklärung.
 
ul#Navigation h2 {
font-size: 1em;
margin: 1.1em 0 0;
border-color: gray;
color: white; background-color: black;
text-align: right;
}

Probiere es mal so.
 
Auch wenn es aufwendig ist könntest du mal ein Bild davon machen wie es aussieht und was du erreichen möchtest, weil ich es mir nicht so gena vorstellen kann.
 
ImPrinzip hab ich das hier kopiert http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=Navigationsleisten
Und will nun das ich rechts daneben einen Text, Bilder usw plazieren kann. Habe bisher nur Hintergrund usw verändert.

Hm der Link führt nich dahin wo ich wollte.

Kannst ja das mal im editor einfügen und öffnen das ist der ganze Text

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Navigationsleiste mit Überschriften</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}

ul#Navigation {
width: 10em;
margin: 0; padding: 0.2em 0.8em 0.8em;
border: 1px solid black;
background-color: silver;
}
* html ul#Navigation { /* Korrekturen fuer IE 5.x */
width: 11.6em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
ul#Navigation li {
list-style: none;
margin: 0.4em; padding: 0;
}

ul#Navigation a, ul#Navigation span, ul#Navigation h2 {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a, * html ul#Navigation span, * html ul#Navigation h2 {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 8.8em; /* Breitenangabe fuer IE 6 */
}
ul#Navigation a:hover, ul#Navigation span {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
ul#Navigation h2 {
font-size: 1em;
margin: 1.1em 0 0;
border-color: gray;
color: black; background-color: #eee;
}

</style>
</head>
<body>
<h1 id="Beispiel">Navigationsleiste mit Überschriften</h1>

<ul id="Navigation">
<li><h2>Rubrik 1</h2></li>
<li><a href="#Beispiel">Seite 1</a></li>
<li><a href="#Beispiel">Seite 2</a></li>
<li><a href="#Beispiel">Seite 3</a></li>

<li><h2>Rubrik 2</h2></li>
<li><span>aktuelle Seite</span></li>
<li><a href="#Beispiel">Seite 5</a></li>
<li><a href="#Beispiel">Seite 6</a></li>

<li><h2>Rubrik 3</h2></li>
<li><a href="#Beispiel">Seite 7</a></li>
<li><a href="#Beispiel">Seite 8</a></li>
<li><a href="#Beispiel">Seite 9</a></li>
</ul>

</body>
</html>

Hab den so kopiert da das etwas zu schwer is für mich im Moment :(
 
Also die Auflistung habe ich jetzt so gestaltet unabhängig von den Stylesheets.
<body>
<h1 id="Beispiel">Navigationsleiste mit Überschriften</h1>

<h2>Rubrik 1</h2>
<ul>
<li><a href="#Beispiel">Seite 1</a></li>
<li><a href="#Beispiel">Seite 2</a></li>
<li><a href="#Beispiel">Seite 3</a></li>
</ul>

<h2>Rubrik 2</h2>
<ul>
<li><span>aktuelle Seite</span></li>
<li><a href="#Beispiel">Seite 5</a></li>
<li><a href="#Beispiel">Seite 6</a></li>
</ul>

<h2>Rubrik 3</h2>
<ul>
<li><a href="#Beispiel">Seite 7</a></li>
<li><a href="#Beispiel">Seite 8</a></li>
<li><img src="Null.jpg" width="10" height="10" /><a href="#Beispiel">Seite 9</a></li>
</ul>

</body>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben