XHTMLforum
Seite 1 von 2 1 2
40 Beiträge dieses Themas auf einer Seite anzeigen

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Navigation rutscht heraus (http://xhtmlforum.de/showthread.php?t=63390)

Muamicus 03.01.2011 21:01
Navigation rutscht heraus
 
Hallo,

meine komplette Navigation rutscht im IE 7 aus dem Container heraus.
Habe auch speziell für den IE 7 rumexperimentiert leider alles ohhe Erfolg.

Hoffe mir kann da jemadn helfen :)

Link

CSS - Navigation

Code:
                                                                /*NAVIGATION*/
*                {margin:0; padding:0;}
#menu                {
                        float:left;
                        list-style:none;
                        background-image:url("../img/head.jpg");
                        background-repeat:x-repeat;
                        width:850px;
                        height:331px;
                        margin:0 0 0 55px;
}
#menu span {
        display: none;
        position: absolute;                margin-left:-150px;
}
#menu a {
        display: block;
        text-indent: -900%;
        position: absolute;
        outline: none;
}
#menu a:hover {
        background-position: left bottom;
}
#menu a:hover span{
        display: block;
}
#menu .home {float:left;
        width: 87px;
        height: 22px;
        background: url(../img/home.gif) no-repeat;
        margin:200px 0 0 100px;
}
#menu .home span {float:left;
        width: 113px;
        height: 50px;
        background: url(../img/home_hover.gif) no-repeat;
        margin:-36px 0 0 -13px;
}
#menu .warum {float:left;
        width: 485px;
        height: 49px;
        background: url(../img/warum.gif) no-repeat;
        margin:220px 0 0 150px;
}
#menu .warum span {float:left;
        width: 485px;
        height: 49px;
        background: url(../img/warum_hover.gif) no-repeat;
        margin:-19px 0 0 0px;
}
#menu .referenz {float:left;
        width: 216px;
        height: 45px;
        background: url(../img/referenzen.gif) no-repeat;
        margin:140px 0 0 250px;
}
#menu .referenz span {float:left;
        width: 216px;
        height: 45px;
        background: url(../img/referenzen_hover.gif) no-repeat;
        margin:-19px 0 0 0px;
}
#menu .kontakt {float:left;
        width: 145px;
        height: 37px;
        background: url(../img/kontakt.gif) no-repeat;
        margin:180px 0 0 500px;
}
#menu .kontakt span {float:left;
        width: 145px;
        height: 37px;
        background: url(../img/kontakt_hover.gif) no-repeat;
        margin:-19px 0 0 0px;
}
#menu .leistungen {float:left;
        width: 194px;
        height: 50px;
        background: url(../img/leistungen.gif) no-repeat;
        margin:120px 0 0 480px;
}
#menu .leistungen span {float:left;
        width: 194px;
        height:50px;
        background: url(../img/leistungen_hover.gif) no-repeat;
        margin:-19px 0 0 0px;
}
#menu .impressum {float:left;
        width: 141px;
        height: 33px;
        background: url(../img/imp.gif) no-repeat;
        margin:270px 0 0 360px;
}
#menu .impressum span {float:left;
        width: 141px;
        height: 33px;
        background: url(../img/imp_hover.gif) no-repeat;
        margin:-19px 0 0 0px;
}
CSS - Content

Code:
*                {margin:0;
                padding:0;
}
body        {
                text-align:center;
                font-family:Arial;
                font-size:100.01%;
                background-color:#f5f1dc;
}
#wrapper        {
                        margin:0 auto;
                        background-image:url("../img/bg.jpg");
                        background-repeat:x-repeat;
                        width:960px;
                        min-height:300px;
                        padding-bottom:10px;
}
#wrapper:after {
                content:".";
                display:block;
                clear:both;
                font-size:0;
                overflow:hidden;
                height:.1px;
                visibility:hidden;
        }

#content                {

                                width:530px;
                                min-height:250px;               
                                margin-left:45px;
}
#content        h2        {
                                text-align:left;
                                color:#444343;
                                font-size:18px;
                                width:370px;
                                min-height:30px;
                                margin:10px 0 0 55px;
                                padding-top:13px;
}
#content        p        {
                                text-align:left;
                                color:#161e80;
                                line-height:26px;
                                width:370px;
                                min-height:30px;
                                margin:10px 0 0 55px;

}
#content_top        {
                                background-image:url("../img/content_top.png");       
                                background-repeat:no-repeat;
                                width:500px;
                                height:176px;
                                margin:20px 0 0 25px;
}
#content_mid        {
                                background-image:url("../img/content_mid.png");       
                                background-repeat:y-repeat;
                                width:500px;
                                min-height:113px;
                                margin:-10px 0 0 25px;
}
#content_bot        {
                                background-image:url("../img/content_bot.png"); 
                                background-repeat:no-repeat;
                                width:500px;
                                height:113px;
                                margin:0px 0 0 25px;
}
#content_bot ul        {
                                text-align:left;
                                padding-top:10px;
                                font-size:12px;
}
#ul1                        {float:left;
                                margin-left:55px;               
                                width:120px;               
}
#ul2                        {
                                float:left;
                                margin-left:10px;
                                width:160px;               
}
#ul3                        {
                                float:left;
                                margin-left:0px;
                                width:140px;               
}
#content_bot li        {
                                list-style:none;
}
#content_bot a        {
                                text-decoration:none;
                                color:#939395;
}
#content_bot a:hover        {
                                color:#636366;
}
#content_bot a:aktive        {
                                color:#a0101d;
}
#head                {
                        width:800px;
                        height:331px;
                }
               
               
                                                                                /*CONTENT RIGHT*/
#content_right        {
                        float:right;
                        margin:23px 80px 0 0;
                        width:270px;
                        min-height:400px;
}
#right_top        {
                       
                                background-image:url("../img/right_top.png");       
                                background-repeat:no-repeat;
                                width:270px;
                                height:44px;
                                margin:0px 0 0 0px;
}
#right_mid        {
                       
                                background-image:url("../img/right_mid.png");       
                                background-repeat:y-repeat;
                                width:270px;
                                height:216px;
                                margin:0px 0 0 0px;
}
.ref_img                {
                                float:left;
                                background-image:url("../img/unger_img.png");       
                                background-repeat:no-repeat;
                                margin:10px 0 0 30px;
                                width:80px;
                                height:80px;
}
.ref_img2                {
                                float:left;
                                background-image:url("../img/schmiedeeisen_img.png");       
                                background-repeat:no-repeat;
                                margin:10px 0 0 30px;
                                width:80px;
                                height:80px;
}
#right_mid        p        {
                                float:left;
                                text-align:left;
                                margin:10px 0 0 10px;
                                width:138px;
                                height:100px;
}
#right_mid        p a        {
                                color:#a53038;
}
#right_mid        p a:hover        {
                                color:#8394de;
}
#right_bot        {
                       
                                background-image:url("../img/right_bot.png");       
                                background-repeat:no-repeat;
                                width:270px;
                                height:20px;
                                margin:0px 0 0 0px;
}
#w3c_paper        {
                        float:right;
                        background-image:url("../img/w3c_paper.png");       
                        background-repeat:no-repeat;
                        margin:43px 0px 0 0;
                        width:269px;
                        height:210px;
                        min-height:400px;
}
#w3c_paper        p        {
                                float:left;
                                background-image:url("../img/p_bg.png"); 
                                text-align:left;
                                line-height:20px;
                                margin:42px 0 0 120px;
                                width:138px;
                                height:150px;       
}
#w3c_paper        p a        {
                                color:#a53038;
}
#w3c_paper        p a:hover        {
                                color:#8394de;
}



                                                                                /*LEISTUNGEN*/
                                                                               
                                                                               
                               
                               
.link_lst                {color:#a53038;
                                }       
.link_lst:hover  {color:#8394de;
                                }       




#content .lst_ul                        {
                                text-align:left;
                                margin:0px 0 0 60px;
                                padding:20px 0 20px 0;
                                width:480px;
                                }
#content .lst_ul li                        {
                                list-style:none;
                                margin-top:3px;
                                }
.haken                        {
                                width:15px;
                                height:15px;
                                margin-right:10px;}
                               
                               
                                                                                /*REFERENZEN*/
                                                                               
.referenz_box        {
                                float:left;
                                width:480px;
}               
#last_box                {
                        margin-bottom:30px;
}                                                       
.img_link        {
                float:left;
                margin:20px 0 0 50px;
                border:0;
                width:100px;
                height:90px;
}
.link_text        {
                float:left;
                width:280px !important;
                margin:30px 0 0 30px !important;
                min-height:30px;
}





                                                                                        /*KONTAKT*/
                                                                                       
#content .fieldbox                {
                                                        text-align:left;
                                                        width:330px;
                                                        min-height:60px;               
                                                        margin-left:60px;
}               
#name                                        {margin-left:30px;}
#vname                                        {margin-left:6px;}
#betreff                                {margin-left:25px;}
#mail                                        {margin-left:46px;}
#text                                        {margin-left:90px; margin-top:-22px;}
#anliegen                                {float:left; }
html

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<link rel="shortcut icon" href="img/icon.ico" type="image/x-icon" />
<title>Your-Dreamworks - Webdesign aus Hoyerswerda</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Your-dreamworks ist eine Werbeagentur im Bereich Webdesign aus Hoyerswerda." />
<meta name="keywords" content="Startseite, Webdesigner, Webagentur, Suchmaschinenoptimierung, Webdesign, Web Design, HTML, PHP-Programmierer, PHP, Webtagebuch, Webblog, XHTML, Hoyerswerda, CMS, CSS, W3C valide" />
<meta name="language" content="de" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Nils Hoffmann" />
<meta name="abstract" content="Your dreamworks ist eine junge dynamische Werbeagentur aus Hoyerswerda bei Dresden das sich auf Webdesign/ -entwicklung spezialisiert hat." />
<meta name="copyright" content="Nils Hoffmann" />
<meta name="designer" content="Nils Hoffmann" />
<meta name="publisher" content="www.your-dreamworks.de" />
<meta name="revisit-After" content="5 days" />
<meta name="distribution" content="global" />
<style type="text/css">
        @import url("css/content.css");
        @import url("css/navigation.css");
</style>
</head>
<body>
<div id="wrapper">
        <div id="head">
                <ul id="menu">
                        <li><a href="index.php" class="home">Startseite<span></span></a></li>
                        <li><a href="warum_modernes_webdesign.php" class="warum">Warum modernes Webdesign?<span></span></a></li>
                        <li><a href="referenzen.php" class="referenz">Referenzen<span></span></a></li>
                        <li><a href="kontakt.php" class="kontakt">Kontakt<span></span></a></li>
                        <li><a href="leistungen.php" class="leistungen">Leistungen<span></span></a></li>
                        <li><a href="impressum.php" class="impressum">Impressum<span></span></a></li>
                </ul>
        </div>
        <div id="content_right">
        <div id="right_top"></div>
        <div id="right_mid">
                <div class="ref_img"></div>
                <p>
                <a href="http://unger-holzcreation.de/">Holzcreation Unger</a><br />
                Ihre Möbeltischlerei aus Schwarzkollm
                </p>
                <div class="ref_img2"></div>
                <p>
                <a href="http://schmiedeeisen-shop.de/">Schmiedeeisen Shop</a><br />
                Schmiedeeiserne Zaunbauteile
                </p>
        </div>
        <div id="w3c_paper">
                <p>Your Dreamworks versucht die strikten Vorgaben des <a href="http://validator.w3.org/">W3C</a> umzusetzen und präsentiert Sie <a href="suchmaschinenoptimierung.php">Suchmaschinen- freundlich</a> im Internet.</p>
        </div>
        <div id="right_bot"></div>
        </div>
        <div id="content">
                <div id="content_top"></div>
                <div id="content_mid">
                <h2>Betreff: Was ist your dreamworks?</h2>
                        <p>
                        <i>Wer aufhört zu werben, um Geld zu sparen, kann ebenso seine Uhr anhalten, um Zeit zu sparen.</i><br /><br />
                        Your dreamworks ist eine junge, dynamische und moderne Werbeagentur aus Hoyerswerda.
                        Vom Konzept über die Realisation, Logo-Design bis hin zur Bildoptimierung erhalten Sie alles aus
                        einer Hand. Dank dieser Leistungen sichern Sie sich einen professionellen und vor allem zeitgemäßen
                        Auftritt Ihrer Seite im Internet.<br /><br />
                        <strong>Ihre Website ist Ihr Aushängeschild im Internet!</strong>
                        <br /><br />
                        Your dreamworks präsentiert Sie professionell, anwenderfreundlich und zeitgerecht im Internet
                        und verschafft Ihnen einen Vorsprung gegenüber Ihrer Konkurrenz.
                        </p>
                        <p>
                                <a href="#wrapper" class="link_lst">nach oben</a>
                        </p>
                </div>
                <div id="content_bot">
                        <ul id="ul1">
                                <li><a href="index.php">>> Startseite</a></li>
                                <li><a href="warum_modernes_webdesign.php">>> Warum modernes &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Webdesign?</a></li>
                                <li><a href="kontakt.php">>> Kontakt</a></li>
                                <li><a href="leistungen.php">>> Leistungen</a></li>
                                <li><a href="impressum.php">>> Impressum</a></li>
                        </ul>
                        <ul id="ul2">
                                <li><a href="referenzen.php"><strong>>> Neuste Referenzen</strong></a></li>
                                <li><a href="http://unger-holzcreation.de/">>> Holzcreation Unger</a><br /></li>
                                <li><a href="http://schmiedeeisen-shop.de/">>> Schmiedeeisen Shop</a><br /></li>
                                <li><a href="referenzen.php">>> uvm.</a></li>
                        </ul>
                        <ul id="ul3">
                                <li><a href="#"><strong>Partnerlink`s</strong></a></li>
                                <li><a href="#">>> Link 1</a></li>
                                <li><a href="#">>> Link 1</a></li>
                                <li><a href="#">>> Link 1</a></li>
                        </ul>
                </div>
        </div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10061099-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
P.S. Die Seite befindet sich noch in der Beta Version :)

Manfred62 03.01.2011 21:09
Warum ist der #head kleiner wie die darin liegende ul (800px --> 850px)?

Manfred

Muamicus 03.01.2011 21:13
Oh,

habe ich sofort behoben.

Daran liegts aber leider auch nicht. Wäre auch zu schön gewesen :(

Manfred62 03.01.2011 22:11
Noch ein Punkt fällt mir auf: wo ist der Bezug für pos.absolute (relative) im #menu?
Teste eventuell mal mit firebug lite im IE.

Manfred

plastiko 03.01.2011 23:21
Der ganze #head ist etwas durch den Wind.
#head und #menu brauchen kein float, margin oder width. Nur #menu bräuchte height, background und position: relative.
Siehe Little Boxes containing block
Dann die li mit position: absolut; in #menu positionieren.

Muamicus 04.01.2011 08:16
Vielen Dank schon mal.
Kann leider erst am Abend probieren.

Werde mir das Buch wohl auch mal zulegen müssen. Sehr gut erklärt !

Eine Frage noch, kann ich auch die einzelnen class pos:rel; ?
Sozusagen Die einzelnen img die ich jetzt alle gefloatet habe.

Frage nur weil plastiko das <b>li</b> so betont hat

Kann z.B. <a href class="home" behalten oder sollte li class="home" bekommen ?

Vielen Dank.

plastiko 04.01.2011 12:36
Welche img?
li habe ich betont weil du momentan für a position: absolute; stehen hast.
Class sollte jeweils in li stehen.

Muamicus 04.01.2011 12:43
OK, ich versuche es heute Abend umzusetzen.

Du dann <li class="img"> bekommt anstelle von a das pos:abs; ? So richtig verstanden?

plastiko 04.01.2011 13:13
Zitat:
Zitat von Muamicus (Beitrag 484472)
... So richtig verstanden?
Ich weiß es nicht.
Code:
<li class="home"><a href="index.php">Startseite<span></span></a></li>
Wenn du den Linktext per text-indent versteckst, brauchst du das span nicht.

Muamicus 04.01.2011 13:14
Vielen Dank schon mal !


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:34 Uhr.
Seite 1 von 2 1 2
40 Beiträge dieses Themas auf einer Seite anzeigen

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023