kostenloser Webspace werbefrei: lima-city

CSS - Wo liegt der fehler?

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

auto bekommen blocken boxen code datei display fehler header http index inhalt list navigation position problem setzen tag text url
  1. Autor dieses Themas

    chk89

    chk89 hat kostenlosen Webspace.

    19:20, 3.3.2013
    Ich habe ein Script benutzt um ein dropdown zu tag/bekommen">bekommen.
    Die homepage soll mittig angezeigt werden.
    und die links in der naviliste sollen auch zentriert sein. die dropdownmenüs sollen linksbündig sein.
    Leider sind die links der navigation linksbündig und die links des dropdowns zentriert.
    Ich weiß leider nicht wie ich das noch erreichen kann.
    Hier der code:

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




<title>test</title>

<link rel="stylesheet" type="text/css" href="ressources/css/CSS.css" />

</head>
<body>

<div align="center">

			
<div id=header>

<img src="ressources/pictures/log.jpg"  alt="logo" height="80%">
</div>

<div id="navigation">
 <ul id="nav">
        <li><a href="http://www.script-tutorials.com/">Home</a></li>
        <li><a class="fly" href="#">Tutorials</a>
            <ul class="dd">
                <li><a href="http://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li>
                <li><a href="#">JS / jQuery</a>
                    
                </li>
                <li><a href="http://www.script-tutorials.com/category/php/">PHP</a></li>
                <li><a href="http://www.script-tutorials.com/category/mysql/">MySQL</a></li>
                <li><a href="http://www.script-tutorials.com/category/xslt/">XSLT</a></li>
                <li><a href="http://www.script-tutorials.com/category/ajax/">Ajax</a></li>
            </ul>
        </li>
        <li><a class="fly" href="#">Resources</a>
            <ul class="dd">
                <li><a class="fly" href="#">By category</a>
                    <ul>
                        <li><a href="http://www.script-tutorials.com/category/php/">PHP</a></li>
                        <li><a href="http://www.script-tutorials.com/category/mysql/">MySQL</a></li>
                        <li><a class="fly" href="#">Menu1</a>
                            
                        </li>
                        <li><a href="http://www.script-tutorials.com/category/ajax/">Ajax</a></li>
                    </ul>
                </li>
                <li><a class="fly" href="#">By tag name</a>
                    
                </li>
            </ul>
        </li>
        <li><a href="http://www.script-tutorials.com/about/">About</a></li>
        <li><a href="http://www.script-tutorials.com/click-action-multilevel-css3-dropdown-menu/">Go Back To The Tutorial</a></li>
    </ul>
</div>
<div id="content">
blabla
	
</table>
</form></div>
<div id="footer">blabla
</div>

</div>
</body>
</html>


    CSS.css
    body {
	color: black;
	background-color: #f0f0f0;
	font-size: 100%;
	font-family: Helvetica, Arial, sans-serif;
	margin: 0px auto;
	align: center;
	
}




div#navigation {
width: 1100px;
align: center;
position: relative;
top: -30px;
height: 3.45em;
padding:0px;
margin:0px;

}

#nav,#nav ul {
    background-color:#424440;
    list-style:none;
    margin:0;
    padding:0;
    
}
#nav {
	font-size: 1.5em;
	height: 2em;
    padding-left:5px;
    padding-top:5px;
    position:relative;
    z-index:2;
}
#nav ul {
    left:-9999px;
    position:absolute;
    top:39px;
    
}
#nav ul ul {
    left:-9999px;
    position:absolute;
    top:0;
    width:auto;
}
#nav li {
	background-color: #424440;
    float:left;
    margin-right:5px;
    position:relative;
}
#nav li a {
    font-weight: lighter;
	font-size: 0.9em;
    color: #d6d6d6;
    display:block;
    float:left;
    
    padding: 0.5em 1em;
    text-decoration:none;
}
#nav > li > a {
    overflow:hidden;
}
#nav li a.fly {
    padding-right:15px;
    
}
#nav ul li {
    margin:0;
}
#nav ul li a {
    width:120px;
}
#nav ul li a.fly {
    padding-right:10px;
}

/*hover styles*/
#nav li:hover > a {
    
    color:#ffffff;
}

/*focus styles*/
    #nav li a:focus {
    outline-width:0;
}

/*popups*/
#nav li a:active + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover {
    left:0;
}

#nav ul.dd {
	box-shadow: 3px 3px #fff;
	align: left;
	}

#nav ul.dd li a:active + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover {
    left:140px;   
}

div#header {
background-color: #ffc84a;
width: 100%;
height: 180px;
}

div#content {
	width: 800px;
	align: center;
	background-color: #d6d6d6;
	position: relative;
	top: -30px;
	margin-bottom: -30px;
}

div#footer {
align: center;
background-color: #424440;
color: #ffffff;
padding-top: 1.5em;
font-size: 1.4em;
height: 3em;
}

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. staymyfriend

    Kostenloser Webspace von staymyfriend

    staymyfriend hat kostenlosen Webspace.

    22:41, 3.3.2013
    Hast Du einen Link zu Deiner Problem-index.html? Die Homepage auf Deinem Webspace hat einen anderen Sourcecode... Wäre einfacher, wenn man das Problem auch optisch vor sich hat... So auf den ersten Blick würde ich mal die "margin"-Werte in der CSS überprüfen...

  4. fabi755

    fabi755 hat kostenlosen Webspace.

    10:57, 4.3.2013
    Also willst du das alle Links der Navigation mittig sind?
    Sprich das komplette <ul> oder jeweils die Links sprich der Inhalt der <li>?




    Hier noch ein paar Auffälligkeiten von meiner Seite:

    Kleiner Tipp: nicht 
    align
    !! sondern 
    text-align


    Es scheint so, dass du versuchst die komplette Seite mit 
    text-align: center;
    mittig zu setzen. Das bezieht sich aber nur auf den Inhalt.
    Sprich,..
    <div style="width 100px; text-align: center;">Text</div>

    Würde den Inhalt mittig setzen, nicht das div.

    <div style="width: 100px; margin: auto;">Text</div>


    Würde das komplette Div mittig setzen. Wichtig ist hierbei, dass eine Breite vorhanden ist


    staymyfriend schrieb:
    Hast Du einen Link zu Deiner Problem-index.html?


    Habe mir mal die Freiheit genommen, das ganze hochzuladen:
    http://fabi755.lima-city.de/sonstiges/forum/cssfehler-chk89/

    Beitrag zuletzt geändert: 6.3.2013 10:16:58 von fabi755

  5. kaetzle7

    Moderator Kostenloser Webspace von kaetzle7

    kaetzle7 hat kostenlosen Webspace.

    12:42, 4.3.2013
    Bei dir steht ganz zum Schluss irgendwo ein 
    </table>
    und ein 
    </form>
    - die dazugehörigen Anfangstags 
    <table>
    und 
    <form>
    finde ich allerdings nirgends...
  6. Autor dieses Themas

    chk89

    chk89 hat kostenlosen Webspace.

    15:01, 4.3.2013
    Hallo, ich möchte, dass das komplette ul links ist.
    Hab auch nochmal was versucht:

    body {
	color: black;
	background-color: #f0f0f0;
	font-size: 100%;
	font-family: Helvetica, Arial, sans-serif;
	margin: 0px auto;
}




div#navigation {
width: 1100px;
position: relative;
top: -30px;
height: 3.45em;
padding:0px;
margin:0px;
margin: auto;
text-align: left;
}

#nav,#nav ul {
    background-color:#424440;
    list-style:none;
    margin:0;
    padding:0;
    
}
#nav {
	font-size: 1.5em;
	height: 2em;
    padding-left:5px;
    padding-top:5px;
    position:relative;
    z-index:2;
}
#nav ul {
    left:-9999px;
    position:absolute;
    top:39px;
    
}
#nav ul ul {
    left:-9999px;
    position:absolute;
    top:0;
    width:auto;
}
#nav li {
	background-color: #424440;
    float:left;
    margin-right:5px;
    position:relative;
}
#nav li a {
    font-weight: lighter;
	font-size: 0.9em;
    color: #d6d6d6;
    display:block;
    text-align: left;
    
    padding: 0.5em 1em;
    text-decoration:none;
}
#nav > li > a {
    overflow:hidden;
}
#nav li a.fly {
    padding-right:15px;
    
}
#nav ul li {
    margin:0 auto;
}
#nav ul li a {
    width:120px;
}
#nav ul li a.fly {
    padding-right:10px;
}

/*hover styles*/
#nav li:hover > a {
    
    color:#ffffff;
}

/*focus styles*/
    #nav li a:focus {
    outline-width:0;
}

/*popups*/
#nav li a:active + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover {
    left:0;
}

#nav ul.dd {
	box-shadow: 3px 3px #fff;
	text-align: left;
	}

#nav ul.dd li a:active + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover {
    left:140px;   
}

div#header {
background-color: #ffc84a;
width: 100%;
height: 180px;
margin: 0px auto;
text-align: center;
}

div#content {
	width: 800px;
	align: center;
	background-color: #d6d6d6;
	position: relative;
	top: -71px;
	bottom: 0px;
	margin: auto;
}

div#footer {
text-align: center;
background-color: #424440;
color: #ffffff;
padding-top: 1.5em;
font-size: 1.4em;
height: 3em;
}

    Mit diesem CSS sind die unterlinks linksbündig.
    Leider wird die hazuptnavigation, also das ul nicht zentriert; was ich nicht verstehe: warum ist der content nach oben verschoben obwohl ich position: relative; bottom:0; habe?

    Lg

  7. fabi755

    fabi755 hat kostenlosen Webspace.

    10:34, 6.3.2013
    Das die Navigation im Drop-Down mittig ist, liegt an deinem HTML Code 
    <div align="center">..</div>


    Um zur Lösung zur kommen, musst du dieses Tag entfernen.

    Zusätzlich muss das 
    text-align: center
    in der CSS-Datei bei 
    div#navigation
    raus genommen werden.

    Um deinen Content-DIV mittig zu setzen füge in der CSS-Datei bei 
    div#content
    ein 
    margin: auto;
    ein.

    Den Rest solltes du, denke ich mal selber hin bekommen. Wenn noch Fragen offen sind oder es noch nicht so klappt wie es soll, frag einfach :wink:

    Tipp am Rande, das Design sollte nur per CSS gestaltet werden.

    Beitrag zuletzt geändert: 6.3.2013 10:35:30 von fabi755

  8. kaetzle7

    Moderator Kostenloser Webspace von kaetzle7

    kaetzle7 hat kostenlosen Webspace.

    12:54, 6.3.2013
    chk89 schrieb:
    Hallo, ich möchte, dass das komplette ul links ist.
    Hab auch nochmal was versucht:
    [...]
    Solange du nicht auf die hier gegebenen Tipps nicht eingehst, kann dir niemand vernünftig helfen...

    --> Stelle einen Link zur Verfügung, damit wir deine Seite sehen können und deinen derzeitigen Stand der Veränderungen - das war die allererste Bitte gleich nach deinem Eingangspost.


    Mit dem Validator kannst du Fehler in deiner HTML und auch CSS sichtbar machen, merze sie aus und du bist deinem Ziel schon ein ganzes Stück näher, denn ungültige Eingaben und Fehler in diesem Bereich zerschleißen immer das Design. Die notdürftig von fabi755 hochgeladene Seite, die deinem geposteten Code entspricht, zeigt im HTML und im CSS einige Fehler an, die zuerst mal beseitigt werden sollten.

    Bitte überzeuge uns doch mal, dass du in diesem Thread nicht nur schreibst, sondern auch liest...

  9. pcw

    pcw hat kostenlosen Webspace.

    17:47, 6.3.2013
    Ich habe ein Script benutzt um ein dropdown zu bekommen.


    Warum braucht man ein Script für ein Navigationsmenü?
    Auf der von Fabi hochgeladenen Seite (was eigentlich deine Aufgabe hätte sein sollen) sehe ich keine Subnavigation ???

    Ansonsten kann ich mich nur dem letzen Post von kaetzle7 anschließen....


  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!