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

Problem mit der Textpositionierung

Status
Für weitere Antworten geschlossen.
derwunner

derwunner

Mitglied
Ich möchte gerne den text zwischen der liste und den div haben. Weil momentan steht er leider darunter. Bitte helft mir.
Hier der quelltext:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Layout 3 - derwunner</TITLE>
<style type="text/css">
body
{
background-color: blue;
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black;
 }

  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: #FFFFFF; background-color: #3333FF;
  }
  * 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;
  }

#rechts
{
float: right;
background-color: silver;
height: 500px;
width: 150px;
}
</style>
</HEAD>

<BODY>
<div id="rechts">
shoutbox
</div>
<ul id="Navigation">
    <li><h2>Navigation</h2></li><BR><BR><BR>
	<li><span>Home</span>
    <li><a href="videos.html">Videos</a></li>
    <li><a href="games1.html">Games</a></li>
    <li><a href="gamesroom.html">Gamesroom</a></li>
    <li><a href="#Beispiel">Seite 6</a></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>
test
</BODY>
</HTML>

MFG derwunner
 
Werbung:
Hallo,

zum einen ist da kein Text. Ein Textabsatz wird mit <p> ausgezeichnet, sowas gibts aber in Deinem Code nicht.

Wenn Du den Text zwischen den beiden haben willst, vermute ich, dass die shoutbox (übrigens ist "rechts" ein denkbar ungünstiger Name für eine Klasse, was wenn Du das mal irgendwann links positionierst? Entweder musst Du die Klassennamen überall ändern oder Du hast ein Element, das links steht und rechts heißt. Nenne es nach seinem Inhalt, also warum nicht "shoutbox"?) rechts und das Menü links sein soll? Dann solltest Du einfach ul#Navigation ein float:left verpassen. Schon steht der Text ("test") mitten drin.

Übrigens solltest Du Deinen Code bei Gelegenheit validoieren lassen (The W3C Markup Validation Service), denn da scheint mir noch einiges nicht in Ordnung zu sein. Und die <br> solltest Du rausschmeißen und Abstände lieber per CSS mit margin/padding definieren.

Gruß,
-Efchen
 
Efchen schrieb:
Hallo,

zum einen ist da kein Text. Ein Textabsatz wird mit <p> ausgezeichnet, sowas gibts aber in Deinem Code nicht.

Wenn Du den Text zwischen den beiden haben willst, vermute ich, dass die shoutbox (übrigens ist "rechts" ein denkbar ungünstiger Name für eine Klasse, was wenn Du das mal irgendwann links positionierst? Entweder musst Du die Klassennamen überall ändern oder Du hast ein Element, das links steht und rechts heißt. Nenne es nach seinem Inhalt, also warum nicht "shoutbox"?) rechts und das Menü links sein soll? Dann solltest Du einfach ul#Navigation ein float:left verpassen. Schon steht der Text ("test") mitten drin.

Übrigens solltest Du Deinen Code bei Gelegenheit validoieren lassen (The W3C Markup Validation Service), denn da scheint mir noch einiges nicht in Ordnung zu sein. Und die <br> solltest Du rausschmeißen und Abstände lieber per CSS mit margin/padding definieren.

Gruß,
-Efchen
Zum Vergrößern anklicken....


Cool, danke fuktioniert auch. Den code lasse ich mir aber von selfthtml validieren, die bieten so etwas auch an. Aber w3c ist natürlich auch nicht schlecht, danke für den link merk ich mir :-D
 
Werbung:
Dann hätte ich nur noch eine frage: Warum verschwindet meine navigationsleiste, wenn ich die shoutbox einsetze?

Hier der quelltext:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Layout 3 - derwunner</TITLE>
<style type="text/css">
body
{
background-color: blue;
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black;
 }

  ul#Navigation {
    width: 10em;
    margin: 0; padding: 0.2em 0.8em 0.8em;
    border: 1px solid black;
    background-color: silver;
    float: left;
  }
  * 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: #FFFFFF; background-color: #3333FF;
  }
  * 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;
  }

#shoutbox
{
float: right;
background-color: silver;
height: 601px;
width: 152px;
}
</style>
</HEAD>

<BODY>
<div id="shoutbox">
<iframe src="http://www.kostenlose-shoutbox.com/shoutbox.php?id=10579" width="152" height="601" frameborder="5">
</div>
<ul id="Navigation">
    <li><h2>Navigation</h2></li><BR><BR><BR>
	<li><span>Home</span>
    <li><a href="videos.html">Videos</a></li>
    <li><a href="games1.html">Games</a></li>
    <li><a href="gamesroom.html">Gamesroom</a></li>
    <li><a href="#Beispiel">Seite 6</a></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>
test
</BODY>
</HTML>
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben