Text und Menü. Es passt nicht zusammen?

Johnny · 17 April 2011

Hallo, ich habe folgendes Problem:

Habe nun endlich mein Menü gefunden, habe es auch linksbündig und vertikal ausgerichtet und nun möchte ich meinen Text rechts von der Menüzeile haben, kriege ihn aber nur darunter. Ich bin mir nicht sicher, ob dass nun zu CSS gehört oder zu HTML, wenn zu CSS dann bitte einfach verschieben.

Kann mir jemand sagen wie ich den Text, am besten mit kleinem Abstand von der Menüleiste, ausrichten kann? Hier der Quelltext:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title>Titel</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">

    <style type="text/css">
#info {height:450px;}

.menu, .menu ul {padding:0; margin:0; list-style:none;}
.menu {margin-left:120px;}
.menu {width:230px; height:300px; background:#fcfcfc; border:1px solid #ddd; border-width:1px 0 1px 1px; position:relative; z-index:500;}
.menu table {border-collapse:collapse; padding:0; margin:0 0 -1px 0; width:0; height:0; font-size:1em;}
.menu ul {position:absolute; left:-9999px;}

.menu li {width:180px; height:42px; float:left; border-right:1px solid #ddd;}

.menu li a {display:block; width:100%; height:42px; line-height:42px; color:#777; text-decoration:none; font-size:14px; font-family:"lucida grande", arial, sans-serif; text-indent: 50px; float: right;}

.menu li.sub a {background:url(breadcrumbs/grey.gif) no-repeat 150px center;}

.menu li a:hover {white-space:nowrap; position:relative; color:#06f;}

.menu li.sub a:hover {background:url(breadcrumbs/blue.gif) no-repeat 150px center; color:#06f;}
.menu li.sub a b {display:block; color:#06f; font-weight:normal;}

.menu li:hover {position:relative;}
.menu li:hover.sub > a {background:url(breadcrumbs/blue.gif ) no-repeat 150px center; color:#06f;}

.menu li.home {background:url(breadcrumbs/home.gif) no-repeat 10px center;}
.menu li.products {background:url(breadcrumbs/graph.gif) no-repeat 10px center;}
.menu li.services {background:url(breadcrumbs/services.gif) no-repeat 10px center;}
.menu li.shop {background:url(breadcrumbs/flower.gif) no-repeat 10px center;}



.menu :hover ul
{width:120px; height:auto; left:165px; top:7px; background:#fcfcfc; border:1px solid #ddd;}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{width:120px; height:auto; left:115px; top:-1px; background:#fcfcfc; border:1px solid #ddd; border-width:1px 0 1px 1px;}

.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul
{left:-9999px; width:0; height:0;}

.menu :hover ul li,
.menu :hover ul li a
{width:120px; height:25px; line-height:25px; text-indent:10px; float:none;}

.menu :hover ul li.sub a,
.menu :hover ul :hover ul li.sub a,
.menu :hover ul :hover ul :hover ul li.sub a,
.menu :hover ul :hover ul :hover ul :hover li.sub a,
.menu :hover ul :hover ul :hover ul :hover ul :hover li.sub a
{background:url(breadcrumbs/grey.gif) no-repeat 100px center; color:#777;}

.menu :hover ul li.sub a:hover,
.menu :hover ul :hover ul li.sub a:hover,
.menu :hover ul :hover ul :hover ul li.sub a:hover,
.menu :hover ul :hover ul :hover ul :hover ul li.sub a:hover
{background:url(breadcrumbs/blue.gif) no-repeat 100px center; color:#06f;}
.menu :hover ul li.sub:hover > a,
.menu :hover ul :hover ul li.sub:hover > a,
.menu :hover ul :hover ul :hover ul li.sub:hover > a,
.menu :hover ul :hover ul :hover ul :hover ul li.sub:hover > a
{background:url(breadcrumbs/blue.gif) no-repeat 100px center; color:#06f;}

.menu :hover ul li a,
.menu :hover ul :hover ul li a,
.menu :hover ul :hover ul :hover ul li a,
.menu :hover ul :hover ul :hover ul :hover ul li a,
.menu :hover ul :hover ul :hover ul :hover :hover ul li a
{background:#fcfcfc; color:#777;}

.menu :hover ul li a:hover,
.menu :hover ul :hover ul li a:hover,
.menu :hover ul :hover ul :hover ul li a:hover,
.menu :hover ul :hover ul :hover ul :hover ul li a:hover,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul li a:hover
{background:#fcfcfc; color:#06f;}

.menu li.sub a b,
.menu :hover li.sub a b,
.menu :hover ul :hover li.sub a b,
.menu :hover ul :hover ul :hover li.sub a b,
.menu :hover ul :hover ul :hover ul :hover li.sub a b,
.menu :hover ul :hover ul :hover ul :hover ul :hover li.sub a b
{display:block; color:#06f; font-weight:normal;}

.menu li.sub a.selected b,
.menu :hover ul li.sub a.selected b,
.menu :hover ul :hover ul li.sub a.selected b,
.menu :hover ul :hover ul :hover ul li.sub a.selected b,
.menu :hover ul :hover ul :hover ul :hover ul li.sub a.selected b,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul li.sub a.selected b
{display:block; background:#fcfcfc; color:#06f; font-weight:normal;}
</style>

<center><img src="banner2.jpg"/></center>
</head>

<body>



<div>

<ul class="menu">
    <li class="home"><a href="index.html">Home</a></li>


    <li class="sub"><a href="news.html">News</a>
    <ul>
    <li class="sub"><a href="news.html">News</a></li>
    <li class="sub"><a href="umfragen.html">Umfragen</a>
    </li>
    <li class="sub"><a href="specials.html">Specials</a></li>
    </li>
    </ul>

    <li class="sub services"><a href="apps.html">Apps</a>
    <ul>
    <li><a href="iphone.html">iPhone</a></li>
    <li><a href="ipad.html">iPad</a></li>
    </ul>
    </li>

    <li class="sub"><a href="support.html">Support</a>
    <ul>
    <li><a href="faq.html">FAQ</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    <li><a href="g&auml;stebuch.html">G&auml;stebuch</a></li>
    </ul>
    </li>

    </div>


    <h1><center>Herzlich Willkommen auf www.Reviewing-apps.de</center></h1>

    <p>Die besten,aktuellsten und au&szlig;ergew&ouml;hnlichsten Apps stellen wir Ihnen
    hier vor.
    </p>






</body>
</html>

threadi · 17 April 2011

Zunächst zu deinem HTML-Code: der ist bereits fehlerhaft. Zwischen <head> und </head> gehört nichts was für den Besucher sichtbar ausgegeben werden soll. Z.B. das hier:

Code:

<center><img src="banner2.jpg"/></center>

Das Element <center> sollte man zudem heute nicht verwenden. Zentrierung erreicht man wie auch jede andere Gestaltung per CSS.

Und zu deiner Menü-Frage: wenn Du etwas nebeneinander haben willst, musst Du die betreffenden Elemente floaten. Bei der Klasse "menu" musst Du quasi nur

Code:

float: left;

ergänzen. Wenn Du einen Abstand von der Klasse "menu" nach rechts willst, musst Du nur "margin-right" mit einem passenden px-Wert versehen.

Johnny · 17 April 2011

Verstehe nicht ganz was du meinst, ich möchte den text rechts vom menü haben, sprich das hier

<p>Die besten,aktuellsten und außergewöhnlichsten Apps stellen wir Ihnen hier vor. </p>

das hätte ich gerne auf gleicher Höhe mit dem Menü, nur wie?

threadi · 17 April 2011

Das habe ich dir bereits geschrieben. Hier noch ein Link um zu verdeutlichen was ich meine:
float: Elemente umfließen lassen: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Johnny · 17 April 2011

Entweder verstehe ich dich nicht richtig oder du mich nicht, bzw ich bin zu dämlich es anzuwenden. Hier ist der link zur Hp, der Willkommenssatz soll gleichauf mit dem Menü sein, allerdings rechts davon und nicht in der Menübox, sondern halt zentriert.
Habe deinen Code angewandt, anscheinend wohl an der falschen Stelle. http://www.reviewing-apps.de
html:
<ul class="menu" style="float: left;">

css:
.menu, .menu ul {padding:0; float: left; margin:0; list-style:none;}

threadi · 17 April 2011

Das CSS hast Du richtig eingefügt, aber es wirkt nicht weil Du meinen ersten Tipp zur Prüfung des fehlerhaften HTML-Codes nicht berücksichtigt hast. Dort sind so viele Fehler drinne, dass die CSS-Eigenschaften nicht das bewirken was sie eigentlich sollten. Im Fall des Menüs beendest Du das Menü nicht mal und der Text steht vom HTML-Code her plötzlich mitten im Menü - da kann er natürlich auch nicht gefloatet werden.

Also bitte erst Fehler beseitigen, dann mit CSS testen:
[Invalid] Markup Validation of http://www.reviewing-apps.de/ - W3C Markup Validator

Johnny · 18 April 2011

Ich habe ihn schon befolgt, nur die Fehler, die mir angezeigt werden, verstehe ich nicht.
Habe sie nun größtenteils ausgebessert bekommen, 2 sind immer noch da. Die kriege ich aber auch nicht weg. Nur funktioniert es immer noch nicht....:evil:

Gibt es noch ne andere Möglichkeit ?

Johnny · 18 April 2011

habe es nun geschafft, dankesehr

Johnny · 18 April 2011

Ich weiss ich nerve, aber wie bekomme ich den Text nun auf die selbe Ebene mit dem Menü ( auf die selbe Höhe). also dass es direkt unter dem Banner ist.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title>Titel</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">

    <style type="text/css">
#info {height:450px;}

.menu, .menu ul {padding:0; float: left; margin:0; list-style:none;}
.menu {margin-left:120px;}
.menu {width:230px; height:300px; background:#fcfcfc; border:1px solid #ddd; border-width:1px 0 1px 1px; position:relative; z-index:500;}
.menu table {border-collapse:collapse; padding:0; margin:0 0 -1px 0; width:0; height:0; font-size:1em;}
.menu ul {position:absolute; left:-9999px;}

.menu li {width:180px; height:42px; float:left; border-right:1px solid #ddd;}

.menu li a {display:block; width:100%; height:42px; line-height:42px; color:#777; text-decoration:none; font-size:14px; font-family:"lucida grande", arial, sans-serif; text-indent: 50px; float: right;}

.menu li.sub a {background:url(breadcrumbs/grey.gif) no-repeat 150px center;}

.menu li a:hover {white-space:nowrap; position:relative; color:#06f;}

.menu li.sub a:hover {background:url(breadcrumbs/blue.gif) no-repeat 150px center; color:#06f;}
.menu li.sub a b {display:block; color:#06f; font-weight:normal;}

.menu li:hover {position:relative;}
.menu li:hover.sub > a {background:url(breadcrumbs/blue.gif ) no-repeat 150px center; color:#06f;}

.menu li.home {background:url(breadcrumbs/home.gif) no-repeat 10px center;}
.menu li.products {background:url(breadcrumbs/graph.gif) no-repeat 10px center;}
.menu li.services {background:url(breadcrumbs/services.gif) no-repeat 10px center;}
.menu li.shop {background:url(breadcrumbs/flower.gif) no-repeat 10px center;}



.menu :hover ul
{width:120px; height:auto; left:165px; top:7px; background:#fcfcfc; border:1px solid #ddd;}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{width:120px; height:auto; left:115px; top:-1px; background:#fcfcfc; border:1px solid #ddd; border-width:1px 0 1px 1px;}

.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul
{left:-9999px; width:0; height:0;}

.menu :hover ul li,
.menu :hover ul li a
{width:120px; height:25px; line-height:25px; text-indent:10px; float:none;}

.menu :hover ul li.sub a,
.menu :hover ul :hover ul li.sub a,
.menu :hover ul :hover ul :hover ul li.sub a,
.menu :hover ul :hover ul :hover ul :hover li.sub a,
.menu :hover ul :hover ul :hover ul :hover ul :hover li.sub a
{background:url(breadcrumbs/grey.gif) no-repeat 100px center; color:#777;}

.menu :hover ul li.sub a:hover,
.menu :hover ul :hover ul li.sub a:hover,
.menu :hover ul :hover ul :hover ul li.sub a:hover,
.menu :hover ul :hover ul :hover ul :hover ul li.sub a:hover
{background:url(breadcrumbs/blue.gif) no-repeat 100px center; color:#06f;}
.menu :hover ul li.sub:hover > a,
.menu :hover ul :hover ul li.sub:hover > a,
.menu :hover ul :hover ul :hover ul li.sub:hover > a,
.menu :hover ul :hover ul :hover ul :hover ul li.sub:hover > a
{background:url(breadcrumbs/blue.gif) no-repeat 100px center; color:#06f;}

.menu :hover ul li a,
.menu :hover ul :hover ul li a,
.menu :hover ul :hover ul :hover ul li a,
.menu :hover ul :hover ul :hover ul :hover ul li a,
.menu :hover ul :hover ul :hover ul :hover :hover ul li a
{background:#fcfcfc; color:#777;}

.menu :hover ul li a:hover,
.menu :hover ul :hover ul li a:hover,
.menu :hover ul :hover ul :hover ul li a:hover,
.menu :hover ul :hover ul :hover ul :hover ul li a:hover,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul li a:hover
{background:#fcfcfc; color:#06f;}

.menu li.sub a b,
.menu :hover li.sub a b,
.menu :hover ul :hover li.sub a b,
.menu :hover ul :hover ul :hover li.sub a b,
.menu :hover ul :hover ul :hover ul :hover li.sub a b,
.menu :hover ul :hover ul :hover ul :hover ul :hover li.sub a b
{display:block; color:#06f; font-weight:normal;}

.menu li.sub a.selected b,
.menu :hover ul li.sub a.selected b,
.menu :hover ul :hover ul li.sub a.selected b,
.menu :hover ul :hover ul :hover ul li.sub a.selected b,
.menu :hover ul :hover ul :hover ul :hover ul li.sub a.selected b,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul li.sub a.selected b
{display:block; background:#fcfcfc; color:#06f; font-weight:normal;}

.content {margin-left:220px;width:1200px;height:auto; text-align: left;}
</style>




<body>
<center><img src="banner2.jpg"></center>





<ul class="menu" style="float: left;">
    <li class="home"><a href="index.html">Home</a></li>



    <li class="sub"><a href="news.html"><b>News</b></a>
    <ul>
    <li class="sub"><a href="news.html">News</a></li>
    <li class="sub"><a href="umfragen.html">Umfragen</a>
    </li>
    <li class="sub"><a href="specials.html">Specials</a></li>

    </ul>

    <li class="sub services"><a href="apps.html">Apps</a>
    <ul>
    <li><a href="iphone.html">iPhone</a></li>
    <li><a href="ipad.html">iPad</a></li>
    </ul>
    </li>

    <li class="sub"><a href="support.html">Support</a>
    <ul>
    <li><a href="faq.html">FAQ</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    <li><a href="g&auml;stebuch.html">G&auml;stebuch</a></li>
    </ul>



<div class="content">
<h1>Willkommen auf DER Website f&uuml;r Apps!</h1>
<p>Auf dieser Website finden Sie alles &uuml;ber Apps. Von Reviews bis hin
zu Gameplays und Produkten von Apple. Die Reviews sind teilweise im Videoformat, <br>
aber auch rein schriftlich mit Bildbegleitung. <br />
Informationen und Neuigkeiten rund um
Apple wollen wir Ihnen nat&uuml;rlich nicht vorenthalten und informieren sie
deshalb t&auml;glich &uuml;ber neue Produkte</a>.<br />
Bei Fragen oder Anregungen benutzen Sie bitte die Kategorie Support oder kontaktieren sie mich per Facebook.</p>

<em>Viel Spa&szlig; beim rumsurfen.</em>

</div>







</body>
</html>

threadi · 18 April 2011

Wenn Du die englischsprachigen nicht verstehst, dann schau sie dir auf deutsch an:
HTML / XHTML / XML / WML Validator

Inzwischen beendest Du zwar die Liste, aber der Content befindet sich mitten in dieser. Du musst die Liste des Menüs vor dem Content beenden ...

Johnny · 18 April 2011

Aber die Liste ist doch VOR dem Content beendet...

Habe den Validator rüberlaufen lassen und alle, bis auf einen Fehler beseitigen können. Und zwar anscheinend genau den, den du mir die ganze Zeit vorwirfst. Nur weiss ich nicht, wie ich dies behebe, denn wenn ich ein </ul> einfüge, geht das stylesheet CSS nimmer auf. Dann ist die Menüleiste rechts von der Box und, naja das Stylesheet geht halt nimmer auf.

Matze27 · 18 April 2011

HTML:

<ul class="menu" style="float: left;">
    <li class="home"><a href="index.html">Home</a></li>
    <li class="sub"><a href="news.html"><b>News</b></a>
        <ul>
            <li class="sub"><a href="news.html">News</a></li>
            <li class="sub"><a href="umfragen.html">Umfragen</a></li>
            <li class="sub"><a href="specials.html">Specials</a></li>
        </ul>
    <li class="sub services"><a href="apps.html">Apps</a>
        <ul>
            <li><a href="iphone.html">iPhone</a></li>
            <li><a href="ipad.html">iPad</a></li>
        </ul>
    </li>
    <li class="sub"><a href="support.html">Support</a>
        <ul>
            <li><a href="faq.html">FAQ</a></li>
            <li><a href="kontakt.html">Kontakt</a></li>
            <li><a href="g&auml;stebuch.html">G&auml;stebuch</a></li>
        </ul>
    </li>
</ul>



<div class="content" style="float: left;">
<h1>Willkommen auf DER Website f&uuml;r Apps!</h1>
<p>Auf dieser Website finden Sie alles &uuml;ber Apps. Von Reviews bis hin
zu Gameplays und Produkten von Apple. Die Reviews sind teilweise im Videoformat, <br>
aber auch rein schriftlich mit Bildbegleitung. <br />
Informationen und Neuigkeiten rund um
Apple wollen wir Ihnen nat&uuml;rlich nicht vorenthalten und informieren sie
deshalb t&auml;glich &uuml;ber neue Produkte</a>.<br />
Bei Fragen oder Anregungen benutzen Sie bitte die Kategorie Support oder kontaktieren sie mich per Facebook.</p>

<em>Viel Spa&szlig; beim rumsurfen.</em>

</div>

So war es bestimmt von threadi gemeint.

gruß
Matze

Johnny · 18 April 2011

Danke ;)

Aber ich möchte den text nun höher platziert haben, wie mache ich das? ;)
http://www.reviewing-apps.de

mermshaus · 18 April 2011

Keine Lust, das alles kleinschrittig aufzuzählen.

margin-left von .content sollte im Zweifel halt größer sein als die Gesamtbreite von .menu.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title>Titel</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">

    <style type="text/css">
#info {height:450px;}

.menu, .menu ul {padding:0; float: left; margin:0; list-style:none;}
.menu {margin-left:120px;}
.menu {width:230px; height:300px; background:#fcfcfc; border:1px solid #ddd; border-width:1px 0 1px 1px; position:relative; z-index:500;}
.menu table {border-collapse:collapse; padding:0; margin:0 0 -1px 0; width:0; height:0; font-size:1em;}
.menu ul {position:absolute; left:-9999px;}

.menu li {width:180px; height:42px; float:left; border-right:1px solid #ddd;}

.menu li a {display:block; width:100%; height:42px; line-height:42px; color:#777; text-decoration:none; font-size:14px; font-family:"lucida grande", arial, sans-serif; text-indent: 50px; float: right;}

.menu li.sub a {background:url(breadcrumbs/grey.gif) no-repeat 150px center;}

.menu li a:hover {white-space:nowrap; position:relative; color:#06f;}

.menu li.sub a:hover {background:url(breadcrumbs/blue.gif) no-repeat 150px center; color:#06f;}
.menu li.sub a b {display:block; color:#06f; font-weight:normal;}

.menu li:hover {position:relative;}
.menu li:hover.sub > a {background:url(breadcrumbs/blue.gif ) no-repeat 150px center; color:#06f;}

.menu li.home {background:url(breadcrumbs/home.gif) no-repeat 10px center;}
.menu li.products {background:url(breadcrumbs/graph.gif) no-repeat 10px center;}
.menu li.services {background:url(breadcrumbs/services.gif) no-repeat 10px center;}
.menu li.shop {background:url(breadcrumbs/flower.gif) no-repeat 10px center;}



.menu :hover ul
{width:120px; height:auto; left:165px; top:7px; background:#fcfcfc; border:1px solid #ddd;}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{width:120px; height:auto; left:115px; top:-1px; background:#fcfcfc; border:1px solid #ddd; border-width:1px 0 1px 1px;}

.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul
{left:-9999px; width:0; height:0;}

.menu :hover ul li,
.menu :hover ul li a
{width:120px; height:25px; line-height:25px; text-indent:10px; float:none;}

.menu :hover ul li.sub a,
.menu :hover ul :hover ul li.sub a,
.menu :hover ul :hover ul :hover ul li.sub a,
.menu :hover ul :hover ul :hover ul :hover li.sub a,
.menu :hover ul :hover ul :hover ul :hover ul :hover li.sub a
{background:url(breadcrumbs/grey.gif) no-repeat 100px center; color:#777;}

.menu :hover ul li.sub a:hover,
.menu :hover ul :hover ul li.sub a:hover,
.menu :hover ul :hover ul :hover ul li.sub a:hover,
.menu :hover ul :hover ul :hover ul :hover ul li.sub a:hover
{background:url(breadcrumbs/blue.gif) no-repeat 100px center; color:#06f;}
.menu :hover ul li.sub:hover > a,
.menu :hover ul :hover ul li.sub:hover > a,
.menu :hover ul :hover ul :hover ul li.sub:hover > a,
.menu :hover ul :hover ul :hover ul :hover ul li.sub:hover > a
{background:url(breadcrumbs/blue.gif) no-repeat 100px center; color:#06f;}

.menu :hover ul li a,
.menu :hover ul :hover ul li a,
.menu :hover ul :hover ul :hover ul li a,
.menu :hover ul :hover ul :hover ul :hover ul li a,
.menu :hover ul :hover ul :hover ul :hover :hover ul li a
{background:#fcfcfc; color:#777;}

.menu :hover ul li a:hover,
.menu :hover ul :hover ul li a:hover,
.menu :hover ul :hover ul :hover ul li a:hover,
.menu :hover ul :hover ul :hover ul :hover ul li a:hover,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul li a:hover
{background:#fcfcfc; color:#06f;}

.menu li.sub a b,
.menu :hover li.sub a b,
.menu :hover ul :hover li.sub a b,
.menu :hover ul :hover ul :hover li.sub a b,
.menu :hover ul :hover ul :hover ul :hover li.sub a b,
.menu :hover ul :hover ul :hover ul :hover ul :hover li.sub a b
{display:block; color:#06f; font-weight:normal;}

.menu li.sub a.selected b,
.menu :hover ul li.sub a.selected b,
.menu :hover ul :hover ul li.sub a.selected b,
.menu :hover ul :hover ul :hover ul li.sub a.selected b,
.menu :hover ul :hover ul :hover ul :hover ul li.sub a.selected b,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul li.sub a.selected b
{display:block; background:#fcfcfc; color:#06f; font-weight:normal;}

.content {margin-left:250px;width:1200px;height:auto; text-align: left;}
</style>




<body>
<center><img src="banner2.jpg"></center>





<ul class="menu">
    <li class="home"><a href="index.html">Home</a></li>
    <li class="sub"><a href="news.html"><b>News</b></a>
        <ul>
            <li class="sub"><a href="news.html">News</a></li>
            <li class="sub"><a href="umfragen.html">Umfragen</a></li>
            <li class="sub"><a href="specials.html">Specials</a></li>
        </ul>
    <li class="sub services"><a href="apps.html">Apps</a>
        <ul>
            <li><a href="iphone.html">iPhone</a></li>
            <li><a href="ipad.html">iPad</a></li>
        </ul>
    </li>
    <li class="sub"><a href="support.html">Support</a>
        <ul>
            <li><a href="faq.html">FAQ</a></li>
            <li><a href="kontakt.html">Kontakt</a></li>
            <li><a href="g&auml;stebuch.html">G&auml;stebuch</a></li>
        </ul>
    </li>
</ul>



<div class="content">
<h1>Willkommen auf DER Website f&uuml;r Apps!</h1>
<p>Auf dieser Website finden Sie alles &uuml;ber Apps. Von Reviews bis hin
zu Gameplays und Produkten von Apple. Die Reviews sind teilweise im Videoformat, <br>
aber auch rein schriftlich mit Bildbegleitung. <br />
Informationen und Neuigkeiten rund um
Apple wollen wir Ihnen nat&uuml;rlich nicht vorenthalten und informieren sie
deshalb t&auml;glich &uuml;ber neue Produkte.<br />
Bei Fragen oder Anregungen benutzen Sie bitte die Kategorie Support oder kontaktieren sie mich per Facebook.</p>

<em>Viel Spa&szlig; beim rumsurfen.</em>

</div>

</body>
</html>

Johnny · 18 April 2011

Es soll nicht weiter links oder rechts sein, sondern weiter nach oben.
Das muss doch mit einem Code gehen oder nicht?

Matze27 · 18 April 2011

Hallo,
so weit ich das beurteilen würde, stimmen deinen Größenverhätnisse nicht. Der content ist viel zu groß, mit den Außenabständen die du gewählt hast.

Johnny · 19 April 2011

In meinen Augen aber im Moment zweitrangig, ich will den text doch einfach nur nach oben haben. Mehr net !! ;)

mermshaus · 19 April 2011

An meinem Beispiel passt dir in der Hinsicht was nicht?

Matze27 · 19 April 2011

Durch ändern der größe bekommst du deinen Text unter den Banner.

HTML:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title>Titel</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">

    <style type="text/css">
#info {height:450px;}

.menu, .menu ul {padding:0; float: left; margin:0; list-style:none;}
.menu {margin-left:120px;}
.menu {width:230px; height:300px; background:#fcfcfc; border:1px solid #ddd; border-width:1px 0 1px 1px; position:relative; z-index:500;}
.menu table {border-collapse:collapse; padding:0; margin:0 0 -1px 0; width:0; height:0; font-size:1em;}
.menu ul {position:absolute; left:-9999px;}

.menu li {width:180px; height:42px; float:left; border-right:1px solid #ddd;}

.menu li a {display:block; width:100%; height:42px; line-height:42px; color:#777; text-decoration:none; font-size:14px; font-family:"lucida grande", arial, sans-serif; text-indent: 50px; float: right;}

.menu li.sub a {background:url(breadcrumbs/grey.gif) no-repeat 150px center;}

.menu li a:hover {white-space:nowrap; position:relative; color:#06f;}

.menu li.sub a:hover {background:url(breadcrumbs/blue.gif) no-repeat 150px center; color:#06f;}
.menu li.sub a b {display:block; color:#06f; font-weight:normal;}

.menu li:hover {position:relative;}
.menu li:hover.sub > a {background:url(breadcrumbs/blue.gif ) no-repeat 150px center; color:#06f;}

.menu li.home {background:url(breadcrumbs/home.gif) no-repeat 10px center;}
.menu li.products {background:url(breadcrumbs/graph.gif) no-repeat 10px center;}
.menu li.services {background:url(breadcrumbs/services.gif) no-repeat 10px center;}
.menu li.shop {background:url(breadcrumbs/flower.gif) no-repeat 10px center;}



.menu :hover ul
{width:120px; height:auto; left:165px; top:7px; background:#fcfcfc; border:1px solid #ddd;}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{width:120px; height:auto; left:115px; top:-1px; background:#fcfcfc; border:1px solid #ddd; border-width:1px 0 1px 1px;}

.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul
{left:-9999px; width:0; height:0;}

.menu :hover ul li,
.menu :hover ul li a
{width:120px; height:25px; line-height:25px; text-indent:10px; float:none;}

.menu :hover ul li.sub a,
.menu :hover ul :hover ul li.sub a,
.menu :hover ul :hover ul :hover ul li.sub a,
.menu :hover ul :hover ul :hover ul :hover li.sub a,
.menu :hover ul :hover ul :hover ul :hover ul :hover li.sub a
{background:url(breadcrumbs/grey.gif) no-repeat 100px center; color:#777;}

.menu :hover ul li.sub a:hover,
.menu :hover ul :hover ul li.sub a:hover,
.menu :hover ul :hover ul :hover ul li.sub a:hover,
.menu :hover ul :hover ul :hover ul :hover ul li.sub a:hover
{background:url(breadcrumbs/blue.gif) no-repeat 100px center; color:#06f;}
.menu :hover ul li.sub:hover > a,
.menu :hover ul :hover ul li.sub:hover > a,
.menu :hover ul :hover ul :hover ul li.sub:hover > a,
.menu :hover ul :hover ul :hover ul :hover ul li.sub:hover > a
{background:url(breadcrumbs/blue.gif) no-repeat 100px center; color:#06f;}

.menu :hover ul li a,
.menu :hover ul :hover ul li a,
.menu :hover ul :hover ul :hover ul li a,
.menu :hover ul :hover ul :hover ul :hover ul li a,
.menu :hover ul :hover ul :hover ul :hover :hover ul li a
{background:#fcfcfc; color:#777;}

.menu :hover ul li a:hover,
.menu :hover ul :hover ul li a:hover,
.menu :hover ul :hover ul :hover ul li a:hover,
.menu :hover ul :hover ul :hover ul :hover ul li a:hover,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul li a:hover
{background:#fcfcfc; color:#06f;}

.menu li.sub a b,
.menu :hover li.sub a b,
.menu :hover ul :hover li.sub a b,
.menu :hover ul :hover ul :hover li.sub a b,
.menu :hover ul :hover ul :hover ul :hover li.sub a b,
.menu :hover ul :hover ul :hover ul :hover ul :hover li.sub a b
{display:block; color:#06f; font-weight:normal;}

.menu li.sub a.selected b,
.menu :hover ul li.sub a.selected b,
.menu :hover ul :hover ul li.sub a.selected b,
.menu :hover ul :hover ul :hover ul li.sub a.selected b,
.menu :hover ul :hover ul :hover ul :hover ul li.sub a.selected b,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul li.sub a.selected b
{display:block; background:#fcfcfc; color:#06f; font-weight:normal;}

.content {margin-left:250px;width:800px;height:auto; text-align: left;}
</style>




<body>
<center><img src="banner2.jpg"></center>





<ul class="menu">
    <li class="home"><a href="index.html">Home</a></li>
    <li class="sub"><a href="news.html"><b>News</b></a>
        <ul>
            <li class="sub"><a href="news.html">News</a></li>
            <li class="sub"><a href="umfragen.html">Umfragen</a></li>
            <li class="sub"><a href="specials.html">Specials</a></li>
        </ul>
    <li class="sub services"><a href="apps.html">Apps</a>
        <ul>
            <li><a href="iphone.html">iPhone</a></li>
            <li><a href="ipad.html">iPad</a></li>
        </ul>
    </li>
    <li class="sub"><a href="support.html">Support</a>
        <ul>
            <li><a href="faq.html">FAQ</a></li>
            <li><a href="kontakt.html">Kontakt</a></li>
            <li><a href="g&auml;stebuch.html">G&auml;stebuch</a></li>
        </ul>
    </li>
</ul>



<div class="content">
<h1>Willkommen auf DER Website f&uuml;r Apps!</h1>
<p>Auf dieser Website finden Sie alles &uuml;ber Apps. Von Reviews bis hin
zu Gameplays und Produkten von Apple. Die Reviews sind teilweise im Videoformat, <br>
aber auch rein schriftlich mit Bildbegleitung. <br />
Informationen und Neuigkeiten rund um
Apple wollen wir Ihnen nat&uuml;rlich nicht vorenthalten und informieren sie
deshalb t&auml;glich &uuml;ber neue Produkte.<br />
Bei Fragen oder Anregungen benutzen Sie bitte die Kategorie Support oder kontaktieren sie mich per Facebook.</p>

<em>Viel Spa&szlig; beim rumsurfen.</em>

</div>

</body>
</html>

mermshaus · 19 April 2011

Okay, ich hatte den Außenabstand nach links von .menu übersehen. Da müssen noch mal 120 Pixel dazu. ;)

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title>Titel</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

    <style type="text/css">
    .menu, .menu ul {padding:0; float: left; margin:0;}
    .menu {margin-left:120px;}
    .menu {width:230px; height:300px; background:green; }

    .content {margin-left:370px;width:1200px;height:600px; background: red;}
    </style>
</head>


<body>
    <ul class="menu">
        <li>menu</li>
    </ul>

    <div class="content">
        <p>content</p>
    </div>
</body>

</html>

Text und Menü. Es passt nicht zusammen?

Neues Mitglied

Moderator

Neues Mitglied

Moderator

Neues Mitglied

Moderator

Neues Mitglied

Neues Mitglied

Neues Mitglied

Moderator

Neues Mitglied

Mitglied

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Mitglied

Neues Mitglied

Senior HTML'ler

Mitglied

Senior HTML'ler