✔ div nebeinander, vertical align & mouse over

Status
Nicht offen für weitere Antworten.
A

aKraus

Erfahrenes Mitglied
Hallo,

ich überarbeite gerade meine Website und will sie komplett in CSS erstellen.
Ich habe allerdings 3 kleine Probleme.
1. bekomme ich den Content irgendwie nicht richtig neben dem Menü plaziert
2. im IE6 geht der Mouseovereffekt im Menü nicht
3. Beim Tune In oben würde ich ganz gerne die einzellnen Links vertical zentrieren, allerdings geht das irgendwie nicht :(

Kann mir einer von euch ggf. helfen? Ich selbst hab bisher wenig mit CSS gearbeitet, allerdings sind Tabellen in meinem Fall total langsam...

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>TechnoBase.FM</title>
<style type="text/css">
    html, body {
        margin:0;
        padding:0;
        text-align:center; /* IE 5 */
        background-color:black;
        font-size:8pt; 
        word-spacing:0pt; 
        cursor:default; 
        color:#000000; 
        font-family:Arial, Helvetica, sans-serif; 
        letter-spacing:0px; 
    }
    
    div     {
        font: 8pt Arial, Helvetica, sans-serif;
        color:#ffffff
    }

    #Design_BannerTop {        
        margin:0 auto;
        width:857px;
        height:123px;
        background-image:url('http://wsm.technobase.eu/slicenew.jpg');    
        text-align:left;
    }
    
    #Design_Banner {
        top:30px;
        left:110px;
        width:720px;
        height:85px;
        background-color:green;
        position:relative;
    }    
    
    .clear_left { clear:left; }
    
    .Design_Content { margin:0 auto; width:857px; text-align:left; }    
    .Design_Body    { margin:0 auto; width:857px; text-align:left; background-image:url('http://wsm.technobase.eu/sliceit_85_2.jpg'); }
        
    #menu            { width:152px; left:39px; text-align:left; margin-left:auto; margin-right:auto; float:left; position:relative; }        
    #menu_main       { width:152px; height:37px; text-align:left; margin-left:auto; margin-right:auto; float:left; position:relative; background-image:url('http://wsm.technobase.eu/main_top.gif'); }        
    #menu_team       { width:152px; height:37px; text-align:left; margin-left:auto; margin-right:auto; float:left; position:relative; background-image:url('http://wsm.technobase.eu/team_top.gif'); }        
    #menu_radiostuff { width:152px; height:37px; text-align:left; margin-left:auto; margin-right:auto; float:left; position:relative; background-image:url('http://wsm.technobase.eu/radiostuff_top.gif'); }        
    #menu_profil     { width:152px; height:37px; text-align:left; margin-left:auto; margin-right:auto; float:left; position:relative; background-image:url('http://wsm.technobase.eu/profil_top.gif'); }        
    
    #content         { width:448px; height:10px; text-align:left; margin-left:auto; margin-right:auto; background-color:aqua; }        
    

    #partnerpool { width:152px; height:97px; text-align:left; margin-left:auto; margin-right:auto; float:left; position:relative; background-image:url('http://wsm.technobase.eu/sliceit_42.jpg'); }
    
    #TuneIn_Winamp    { width:58px; height:57px; background-image:url('http://wsm.technobase.eu/winamp.jpg'); text-align:left; margin-left:auto; margin-right:auto; float:left; }
    #TuneIn_Real      { width:58px; height:57px; background-image:url('http://wsm.technobase.eu/real.jpg');   text-align:left; margin-left:auto; margin-right:auto; float:left; }
    #TuneIn_Media     { width:58px; height:57px; background-image:url('http://wsm.technobase.eu/media.jpg');  text-align:left; margin-left:auto; margin-right:auto; float:left; }
    #TuneIn_Phonostar { width:58px; height:57px; background-image:url('http://wsm.technobase.eu/phono.jpg');  text-align:left; margin-left:auto; margin-right:auto; float:left; }

    #Design_Header_1_1 { height:31px; width:39px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('http://wsm.technobase.eu/sliceit_02.jpg');}        
    #Design_Header_1_2 { height:31px; width:151px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('http://wsm.technobase.eu/sliceit_03.jpg');}
    #Design_Header_1_3 { height:31px; width:206px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('http://wsm.technobase.eu/sliceit_04.jpg');}
    #Design_Header_1_4 { height:31px; width:191px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('http://wsm.technobase.eu/sliceit_05.jpg');}
    #Design_Header_1_5 { height:31px; width:65px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('http://wsm.technobase.eu/sliceit_06.gif');}
    #Design_Header_1_6 { height:31px; width:23px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('http://wsm.technobase.eu/sliceit_07.gif');}
    #Design_Header_1_7 { height:31px; width:59px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('http://wsm.technobase.eu/sliceit_08.gif');}
    #Design_Header_1_8 { height:31px; width:89px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('http://wsm.technobase.eu/sliceit_09.gif');}
    #Design_Header_1_9 { height:31px; width:34px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('http://wsm.technobase.eu/sliceit_10.gif');}

    #Design_Header_2_1 { height:68px; width:39px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('http://wsm.technobase.eu/sliceit_12.jpg');}    
    #Design_Header_2_2 { height:68px; width:151px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('http://wsm.technobase.eu/sliceit_13.jpg');}
    #Design_Header_2_3 { height:68px; width:206px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('http://wsm.technobase.eu/sliceit_14.jpg');}    
    #Design_Header_2_4 { height:68px; width:191px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('http://wsm.technobase.eu/sliceit_18.jpg');}    
    #Design_Header_2_5 { height:68px; width:236px; text-align:center; margin-left:auto; margin-right:auto; float:left; background-color:#2e2f35; }    
    #Design_Header_2_6 { height:68px; width:34px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('http://wsm.technobase.eu/sliceit_17.gif');}
        
    #Design_Header_3_1 { height:72px; width:39px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_18-17.jpg'); }
    #Design_Header_3_2 { height:72px; width:151px; text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_19.jpg'); }
    #Design_Header_3_3 { height:72px; width:206px; text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_20.jpg'); }
    #Design_Header_3_4 { height:72px; width:191px; text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_21.jpg'); }
    #Design_Header_3_5 { height:72px; width:65px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_22.jpg'); }
    #Design_Header_3_6 { height:72px; width:23px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_23.jpg'); }
    #Design_Header_3_7 { height:72px; width:59px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_24.jpg'); }
    #Design_Header_3_8 { height:72px; width:89px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_25.jpg'); }
    #Design_Header_3_9 { height:72px; width:34px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_26.jpg'); }

    #Design_Header_4_1 { height:27px; width:39px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_27.gif'); }
    #Design_Header_4_2 { height:27px; width:613px; text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_28.gif'); vertical-align:bottom; }
    #Design_Header_4_3 { height:27px; width:23px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_29.jpg'); }
    #Design_Header_4_4 { height:27px; width:59px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_30.jpg'); }
    #Design_Header_4_5 { height:27px; width:89px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_31.gif'); }
    #Design_Header_4_6 { height:27px; width:34px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_32.gif'); }
    
    #Design_Header_5_1 { height:24px; width:39px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_33.gif'); }
    #Design_Header_5_2 { height:24px; width:151px; text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_34.jpg'); }
    #Design_Header_5_3 { height:24px; width:206px; text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_35.gif'); }
    #Design_Header_5_4 { height:24px; width:256px; text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_36.gif'); }
    #Design_Header_5_5 { height:24px; width:23px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_37.jpg'); }
    #Design_Header_5_6 { height:24px; width:59px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_38.jpg'); }
    #Design_Header_5_7 { height:24px; width:89px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_39.jpg'); }
    #Design_Header_5_8 { height:24px; width:34px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background:url('http://wsm.technobase.eu/sliceit_32.gif'); }

    .menuFront { width:10px;  height:13px; background-color: #BD743B; display:block; float:left; color:#ffffff; text-decoration: none; border-bottom: 1px solid black;}
    .menuText  { width:115px; height:13px; background-color: #5F5644; display:block; float:left; color:#ffffff; text-decoration: none; border-bottom: 1px solid black; padding:0px 5px}
    .menuBack  { width:8px;   height:13px; background-color: #47372B; display:block; float:left; color:#ffffff; text-decoration: none; border-bottom: 1px solid black; padding-left: 5px; }    
    
    a:hover .menuFront { cursor:pointer; color:#ffffff; text-decoration: none; background-color: #E1A474; }    
    a:hover .menuText  { cursor:pointer; color:#ffffff; text-decoration: none }
    a:hover .menuBack  { cursor:pointer; color:#ffffff; text-decoration: none }
    
    .TuneIn { position:absolute; text-align:center; vertical-align:middle; visibility:hidden }
    .TuneInLink { background-color:#191b1d; width:120px; color:white; display:block; float:left; text-align:center; text-decoration: none; height:16px; border:1px solid gray; }
    .TuneInLink_special { background-color:#191b1d; width:120px; color:#ffb200; display:block; float:left; text-align:center; text-decoration: none; height:16px; border:1px solid gray; font-weight:bold}
    
    a:hover .TuneInLink { background-color:    #2e2f35; cursor:pointer; color:#E1A474; text-decoration: none; }
    a:hover .TuneInLink_special  { background-color: #2e2f35; cursor:pointer; color:#FFFF99; text-decoration: none; font-weight:bold }

</style>
</head>
    <body>
        <div id="Design_BannerTop"><!--<div id="Design_Banner">Banner</div>--></div>
        <div class="Design_Content">
            <div id="Design_Header_1_1"></div>
            <div id="Design_Header_1_2"></div>
            <div id="Design_Header_1_3"></div>
            <div id="Design_Header_1_4"></div>
            <div id="Design_Header_1_5"></div>
            <div id="Design_Header_1_6"></div>
            <div id="Design_Header_1_7"></div>
            <div id="Design_Header_1_8"></div>
            <div id="Design_Header_1_9"></div>
        </div>
        <div class="Design_Content">    
            <div id="Design_Header_2_1"></div>
            <div id="Design_Header_2_2"></div>
            <div id="Design_Header_2_3"></div>
            <div id="Design_Header_2_4"></div>
            <div id="Design_Header_2_5">                
                <div id="TuneIn_Media" onmouseover="document.getElementById('TuneLinks_Media').style.visibility='visible'" onmouseout="document.getElementById('TuneLinks_Media').style.visibility='hidden'">
                    <div class="TuneIn" id="TuneLinks_Media" onmouseout="this.style.visibility='hidden'">
                        <a href="JavaScript:myPopUp(285, 130, 'http://www.TechnoBase.fm/wmplayer.php?Stream=http://DSL.TechnoBase.eu/listen.asx', 'no');"><span class="TuneInLink_special">High Quality AAC+</span></a><br class="clear_left"/>
                        <a href="JavaScript:myPopUp(285, 130, 'http://www.TechnoBase.fm/wmplayer.php?Stream=http://DSL.TechnoBase.eu/listen-dsl.asx', 'no');"><span class="TuneInLink">High Quality MP3</span></a><br class="clear_left"/>
                        <a href="JavaScript:myPopUp(285, 130, 'http://www.TechnoBase.fm/wmplayer.php?Stream=http://ISDN.TechnoBase.eu/listen.asx', 'no');"><span class="TuneInLink">Low Quality AAC+</span></a><br class="clear_left"/>
                    </div>
                </div>                
                <div id="TuneIn_Winamp" onmouseover="document.getElementById('TuneLinks_Winamp').style.visibility='visible'" onmouseout="document.getElementById('TuneLinks_Winamp').style.visibility='hidden'">
                    <div class="TuneIn" id="TuneLinks_Winamp" onmouseout="this.style.visibility='hidden'">
                        <a href="http://DSL.TechnoBase.eu/listen.pls"><span class="TuneInLink_special">High Quality AAC+</span></a><br class="clear_left"/>
                        <a href="http://DSL.TechnoBase.eu/listen-dsl.pls"><span class="TuneInLink">High Quality MP3</span></a><br class="clear_left"/>
                        <a href="http://ISDN.TechnoBase.eu/listen.pls"><span class="TuneInLink">Low Quality AAC+</span></a><br class="clear_left"/>
                        <a href="http://OGG.TechnoBase.eu/listen.pls"><span class="TuneInLink">OGG Vorbis</span></a><br class="clear_left"/>
                    </div>
                </div>                
                <div id="TuneIn_Phonostar" onmouseover="document.getElementById('TuneLinks_Phonostar').style.visibility='visible'" onmouseout="document.getElementById('TuneLinks_Phonostar').style.visibility='hidden'">
                    <div class="TuneIn" id="TuneLinks_Phonostar" onmouseout="this.style.visibility='hidden'">
                        <a href="psradio://|ChannelId|3855/"><span class="TuneInLink">Phonostar</span></a><br class="clear_left"/>
                    </div>
                </div>
                <div id="TuneIn_Real" onmouseover="document.getElementById('TuneLinks_Real').style.visibility='visible'" onmouseout="document.getElementById('TuneLinks_Real').style.visibility='hidden'">
                    <div class="TuneIn" id="TuneLinks_Real" onmouseout="this.style.visibility='hidden'">
                        <a href="http://DSL.TechnoBase.eu/listen.ram"><span class="TuneInLink">High Quality MP3</span></a><br class="clear_left"/>
                        <a href="http://ISDN.TechnoBase.eu/listen.ram"><span class="TuneInLink">Low Quality MP3</span></a><br class="clear_left"/>
                    </div>
                </div>
            </div>
            <div id="Design_Header_2_6"></div>
        </div>    
        <div class="Design_Content">    
            <div id="Design_Header_3_1"></div>
            <div id="Design_Header_3_2"></div>
            <div id="Design_Header_3_3"></div>
            <div id="Design_Header_3_4"></div>
            <div id="Design_Header_3_5"></div>
            <div id="Design_Header_3_6"></div>
            <div id="Design_Header_3_7"></div>
            <div id="Design_Header_3_8"></div>
            <div id="Design_Header_3_9"></div>
        </div>
        <div class="Design_Content">
            <div id="Design_Header_4_1"></div>
            <div id="Design_Header_4_2"></div>
            <div id="Design_Header_4_3"></div>
            <div id="Design_Header_4_4"></div>
            <div id="Design_Header_4_5"></div>
            <div id="Design_Header_4_6"></div>
        </div>
        <div class="Design_Content">
            <div id="Design_Header_5_1"></div>
            <div id="Design_Header_5_2"></div>
            <div id="Design_Header_5_3"></div>
            <div id="Design_Header_5_4"></div>
            <div id="Design_Header_5_5"></div>
            <div id="Design_Header_5_6"></div>
            <div id="Design_Header_5_7"></div>
            <div id="Design_Header_5_8"></div>
        </div>
        <div class="Design_Body">
            <div id="menu">
                <div id="partnerpool"></div><br class="clear_left"/>
                <div id="menu_main"></div><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/news.php"><span class="menuFront"></span><span class="menuText">News</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/news.php?action=archiv"><span class="menuFront"></span><span class="menuText">News Archiv</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/news.php?action=article"><span class="menuFront"></span><span class="menuText">Artikel</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/news.php?action=interview"><span class="menuFront"></span><span class="menuText">Interviews</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/releases.php"><span class="menuFront"></span><span class="menuText">Releases</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/events.php"><span class="menuFront"></span><span class="menuText">Events</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/pictures.php"><span class="menuFront"></span><span class="menuText">Partypics</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/contact.php"><span class="menuFront"></span><span class="menuText">Kontakt</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/application/"><span class="menuFront"></span><span class="menuText">Bewirb dich</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="http://thesticker.de/fanwerbung/index.php?cPath=64" target="_blank"><span class="menuFront"></span><span class="menuText">Fanshop</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/webawards"><span class="menuFront"></span><span class="menuText">Web Awards</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/search"><span class="menuFront"></span><span class="menuText">Suchen</span><span class="menuBack"></span></a><br class="clear_left"/>
                <br class="clear_left"/>
                <div id="menu_team"></div><br class="clear_left"/>
                <a href="#"><span class="menuFront"></span><span class="menuText">Link</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="#"><span class="menuFront"></span><span class="menuText">Link</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="#"><span class="menuFront"></span><span class="menuText">Link</span><span class="menuBack"></span></a><br class="clear_left"/>
                <br class="clear_left"/>
                <div id="menu_radiostuff"></div><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/showplan.php"><span class="menuFront"></span><span class="menuText">Sendeplan</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/partnerpool"><span class="menuFront"></span><span class="menuText">Partnerpool</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/guestbook.php"><span class="menuFront"></span><span class="menuText">Gästebuch</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/forum"><span class="menuFront"></span><span class="menuText">Forum</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/irc"><span class="menuFront"></span><span class="menuText">Chatroom</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/streambox.php"><span class="menuFront"></span><span class="menuText">Streambox</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/linkus"><span class="menuFront"></span><span class="menuText">Link Us</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/djlinks"><span class="menuFront"></span><span class="menuText">DJ Links</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/wallpaper"><span class="menuFront"></span><span class="menuText">Wallpaper</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/faq"><span class="menuFront"></span><span class="menuText">FAQ</span><span class="menuBack"></span></a><br class="clear_left"/>
                <a href="http://www.TechnoBase.FM/impressum"><span class="menuFront"></span><span class="menuText">Impressum</span><span class="menuBack"></span></a><br class="clear_left"/>
                <br class="clear_left"/>
            </div>
            <div id="content">asdf</div>
        </div>
    </body>
</html>
 
Zuletzt bearbeitet:
Hi.

  • Versuch es mal hiermit:
Code: 
#content         { /*width:448px;*/ /*height:10px;*/ text-align:left; margin:0 200px;  background-color:aqua; }
  • Wende den Hover-Effekt direkt auf die Links, und nicht auf die span-Elemente an.

    Zudem solltest du dich mit CSS-Listenmenüs beschäftigen, denn das von dir verwendete "Konstrukt" mit den <br>-Tags ist schon etwas abenteuerlich:



  • Wende mal diese Regel auf das DIV ##Design_Header_2_5 an:
Code: 
#Design_Header_2_5 { height:62.5px; padding-top:5.5px; width:236px; text-align:center; margin-left:auto; margin-right:auto; float:left; background-color:#2e2f35; }
 
Hallo,erstmal vielen Dank für deine schnelle Antwort. Ich habe das Design soweit überarbeitet, nur habe ich das Problem, dass bei sehr langem Text der Hintergrund der Page nicht mitgezogen wird, bzw. im Firefox der Hintergrund überhaupt nicht angezeigt wird. Andere Frage:Ist es möglich das Ziel eines Links mittels CSS zu beeinflussen? Wahrscheinlich nicht, oder?
Code: 
TechnoBase.FM	html, body {		margin:0;		padding:0;		text-align:center; /* IE 5 */		background-color:black;	    font-size:8pt; 		word-spacing:0pt; 		cursor:default; 		color:#000000; 		font-family:Arial, Helvetica, sans-serif; 		letter-spacing:0px; 	}		div 	{		font: 8pt Arial, Helvetica, sans-serif;		color:#ffffff	}	#Design_BannerTop {				margin:0 auto;		width:857px;		height:123px;		background-image:url('Pictures/slicenew.jpg');			text-align:left;	}		#Design_Banner {		top:30px;		left:110px;		width:720px;		height:85px;		background-color:green;		position:relative;	}			.clear_left { clear:left; }		.Design_Content { margin:0 auto; width:857px; text-align:left; }		.Design_Body    { margin:0 auto; width:857px; text-align:left; background-image:url('Pictures/sliceit_85_2.jpg'); }			#menu            { width:152px; text-align:left; margin-left:auto; margin-right:auto; float:left;}			#menu_right      { width:205px; text-align:left; margin-left:auto; margin-right:auto; float:left;}				#menu_main       { width:152px; height:37px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/main_top.gif'); }			#menu_team       { width:152px; height:37px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/team_top.gif'); }			#menu_radiostuff { width:152px; height:37px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/radiostuff_top.gif'); }			#menu_profil	 { width:152px; height:37px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/profil_top.gif'); }				#menuSpacer		 { width:39px;  height:10px; text-align:left; margin-left:auto; margin-right:auto; float:left;}		.contentSpacer	 { width:13px;  height:10px; text-align:left; margin-left:auto; margin-right:auto; float:left;}				#content		 { width:448px; height:10px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-color:aqua; }		/*	#content         { width:448px; height:10px; text-align:left; margin:0 200px;  background-color:aqua; float:left; }*/	#contentBanner	 { width:448px; height:57px; text-align:left; margin-left:auto; margin-right:auto; float:left; }		#contentDiv      { width:448px; height:10px; text-align:left; margin-left:auto; margin-right:auto; float:left; }				#partnerpool { width:152px; height:97px; text-align:left; margin-left:auto; margin-right:auto; float:left; position:relative; background-image:url('Pictures/sliceit_42.jpg'); }		#TuneIn_Winamp    { width:58px; height:57px; background-image:url('Pictures/winamp.jpg'); text-align:left; margin-left:auto; margin-right:auto; float:left; }	#TuneIn_Real      { width:58px; height:57px; background-image:url('Pictures/real.jpg');   text-align:left; margin-left:auto; margin-right:auto; float:left; }	#TuneIn_Media     { width:58px; height:57px; background-image:url('Pictures/media.jpg');  text-align:left; margin-left:auto; margin-right:auto; float:left; }	#TuneIn_Phonostar { width:58px; height:57px; background-image:url('Pictures/phono.jpg');  text-align:left; margin-left:auto; margin-right:auto; float:left; }	#Design_Header_1_1 { height:31px; width:39px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_02.jpg');}			#Design_Header_1_2 { height:31px; width:151px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_03.jpg');}	#Design_Header_1_3 { height:31px; width:206px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_04.jpg');}	#Design_Header_1_4 { height:31px; width:191px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_05.jpg');}	#Design_Header_1_5 { height:31px; width:65px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_06.gif');}	#Design_Header_1_6 { height:31px; width:23px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_07.gif');}	#Design_Header_1_7 { height:31px; width:59px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_08.gif');}	#Design_Header_1_8 { height:31px; width:89px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_09.gif');}	#Design_Header_1_9 { height:31px; width:34px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_10.gif');}	#Design_Header_2_1 { height:68px; width:39px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_12.jpg');}		#Design_Header_2_2 { height:68px; width:151px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_13.jpg');}	#Design_Header_2_3 { height:68px; width:206px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_14.jpg');}		#Design_Header_2_4 { height:68px; width:191px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_18.jpg');}		#Design_Header_2_5 { height:62.5px; padding-top:5.5px; width:236px; text-align:center; margin-left:auto; margin-right:auto; float:left; background-color:#2e2f35; }	#Design_Header_2_6 { height:68px; width:34px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_17.gif');}			#Design_Header_3_1 { height:72px; width:39px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_18-17.jpg'); }	#Design_Header_3_2 { height:72px; width:151px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_19.jpg'); }	#Design_Header_3_3 { height:72px; width:206px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_20.jpg'); }	#Design_Header_3_4 { height:72px; width:191px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_21.jpg'); }	#Design_Header_3_5 { height:72px; width:65px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_22.jpg'); }	#Design_Header_3_6 { height:72px; width:23px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_23.jpg'); }	#Design_Header_3_7 { height:72px; width:59px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_24.jpg'); }	#Design_Header_3_8 { height:72px; width:89px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_25.jpg'); }	#Design_Header_3_9 { height:72px; width:34px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_26.jpg'); }	#Design_Header_4_1 { height:27px; width:39px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_27.gif'); }	#Design_Header_4_2 { height:27px; width:613px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_28.gif'); vertical-align:bottom; }	#Design_Header_4_3 { height:27px; width:23px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_29.jpg'); }	#Design_Header_4_4 { height:27px; width:59px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_30.jpg'); }	#Design_Header_4_5 { height:27px; width:89px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_31.gif'); }	#Design_Header_4_6 { height:27px; width:34px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_32.gif'); }		#Design_Header_5_1 { height:24px; width:39px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_33.gif'); }	#Design_Header_5_2 { height:24px; width:151px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_34.jpg'); }	#Design_Header_5_3 { height:24px; width:206px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_35.gif'); }	#Design_Header_5_4 { height:24px; width:256px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_36.gif'); }	#Design_Header_5_5 { height:24px; width:23px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_37.jpg'); }	#Design_Header_5_6 { height:24px; width:59px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_38.jpg'); }	#Design_Header_5_7 { height:24px; width:89px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_39.jpg'); }	#Design_Header_5_8 { height:24px; width:34px;  text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_32.gif'); }			#Partner_1_1 { height:58px; width:23px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_44.jpg'); }	#Partner_1_2 { height:58px; width:59px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_45.jpg'); }	#Partner_1_3 { height:58px; width:89px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_46.jpg'); }	#Partner_1_4 { height:58px; width:34px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_47.jpg'); }			#Partner_2_1 { width:23px; height:65px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_52.jpg'); }	#Partner_2_2 { width:59px; height:65px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_53.jpg'); }	#Partner_2_3 { width:89px; height:65px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_54.jpg'); }	#Partner_2_4 { width:34px; height:65px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_55.jpg'); }	#Partner_3_1 { width:23px; height:44px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_58.jpg'); }	#Partner_3_2 { width:59px; height:44px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_59.jpg'); }	#Partner_3_3 { width:89px; height:44px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_60.jpg'); }	#Partner_3_4 { width:34px; height:44px; text-align:left; margin-left:auto; margin-right:auto; float:left; background-image:url('Pictures/sliceit_61.jpg'); }	.navigation {  } 	.navigation LI { padding: 0; margin: 0; list-style: none; width: 133px; }	.navigation UL { padding: 0; margin: 0;  }	.navigation A { color: #ffffff; text-decoration: none; display:block; padding: 0px 5px; margin: 0; width: 120px; background-color:#5F5644; border-bottom:1px black solid; border-left:10px solid #BD743B; border-right:8px solid #47372B;}	.navigation A:link, .navigation A:visited { background-color:#5F5644; border-left:10px solid #BD743B;  border-bottom:1px black solid; border-right:8px solid #47372B; }	.navigation A:hover, .navigation A:focus  { border-left:10px #E1A474 solid;   }	    	.TuneIn { position:relative; text-align:center; vertical-align:middle; visibility:hidden; top:28px }	.TuneInLink { background-color:#191b1d; width:120px; color:white; display:block; float:left; text-align:center; text-decoration: none; height:16px; border:1px solid gray; }	.TuneInLink_special { background-color:#191b1d; width:120px; color:#ffb200; display:block; float:left; text-align:center; text-decoration: none; height:16px; border:1px solid gray; font-weight:bold}		a:hover .TuneInLink { background-color:	#2e2f35; cursor:pointer; color:#E1A474; text-decoration: none; }	a:hover .TuneInLink_special  { background-color: #2e2f35; cursor:pointer; color:#FFFF99; text-decoration: none; font-weight:bold }		#LoginTop     { height:30px; text-align:center; margin-left:auto; margin-right:auto; width:157px; background-image:url('Pictures/login_top.gif'); }	#LoginHead    { height:8px;  text-align:center; margin-left:auto; margin-right:auto; width:157px; background-image:url('Pictures/login_head.gif'); }	#LoginContent { width:157px; text-align:center; margin-left:auto; margin-right:auto; background-image:url('Pictures/login_streck.gif'); }	#LoginFoot    { height:7px;  text-align:center; margin-left:auto; margin-right:auto; width:157px; background-image:url('Pictures/login_foot.gif'); }	#CounterTop     { height:27px; width:153px; text-align:center; margin-left:auto; margin-right:auto; background-image:url('Pictures/ct_top.jpg'); }	#CounterHead    { height:10px; width:153px; text-align:center; margin-left:auto; margin-right:auto; background-image:url('Pictures/ct_head.jpg'); }	#CounterContent { width:153px; text-align:left; margin-left:auto; margin-right:auto; background-image:url('Pictures/ct_streck.jpg'); }	#CounterFoot    { height:11px; width:153px; text-align:center; margin-left:auto; margin-right:auto; background-image:url('Pictures/ct_foot.jpg'); }			
					
			
			
			
			
			
			
			
			
		
						
			
			
			
																						High Quality AAC+
						High Quality MP3
						Low Quality AAC
					
				
																			High Quality AAC+
						High Quality MP3
						Low Quality AAC+
						OGG Vorbis
					
				
																			Phonostar
					
				
															High Quality MP3
						Low Quality MP3
					
				
			
			
		
							
			
			
			
			
			
			
			
			
		
					
			
			
			
			
			
		
					
			
			
			
			
			
			
			
		
					
							

				

															
News						
News Archiv						
Artikel						
Interviews						
Releases						
Events						
Partypics						
Kontakt						
Bewirb dich						
Fanshop						
Web Awards						
Suchen									

				

															
Link						
Link						
Link									

				

															
Sendeplan						
Partnerpool						
Gästebuch						
Forum						
Chatroom						
Streambox						
Link Us						
DJ Links						
Wallpaper						
FAQ						
Impressum									
			
			
							


													Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
					Das hier ist ein sehr langer Text
				
			
										
				
				
				
				
				
				
				
				
				
					
				
				
				
				
										
				
															
						
						
						
						[ IMG]http://wsm.technobase.eu/reg_but.jpg[ /IMG]
						[ IMG]http://wsm.technobase.eu/pw_but.jpg[ /IMG]									
				
				

				
				
									  Besucher
					  • 685 Online
					  • 16852 Heute
					  • 21067 Gestern
					  • 13589745 Gesamt

										  Neuste Benutzer
					  • Exi
					  • Exi
					  • Exi
					  • Exi
					  • Exi
										
  • 58311 Registrierte Benutzer
															
  Zuhörer
					  • TechnoBase: 3584
 
Da ich komischerweise nicht nicht bearbeiten kann und aus unerklärlichen Gründen die HTML Datei sehr komisch aussieht, hier nochmals als Anhang.
 

Anhänge

Dass in den modernen Browsern der Hintergrund bei zunehmenden Inhalt nicht mitwächst, liegt zum einen an den festen Höhenangaben für die DIVs #content und #contentDiv, und zum anderen an der fehlenden Aufhebung der Floatumgebung innerhalb von .Design_Body:

Code: 
#content { 
width:448px; 
/*height:10px;*/ 
text-align:left; 
margin-left:auto; 
margin-right:auto; 
float:left; 
background-color:aqua; 
}    

#contentDiv { 
width:448px; 
/*height:10px;*/ 
text-align:left; 
margin-left:auto; 
margin-right:auto; 
float:left; 
}


.clearfix:after {
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Die Klasse clearfix rufst du zusätzlich im DIV .Design_Body auf:

Code: 
<div class="Design_Body clearfix"> ... </div>
 
Hallo,

ich hab noch einen kleinen Fehler beim aktuellen Design. Bild im Anhang.

Gruß
 

Anhänge

  • Fehler_CSS.jpg
    Fehler_CSS.jpg
    37,2 KB · Aufrufe: 23
Hi,

setz mal dieses Stylesheet für die Links ein:

Code: 
.navigation A { color: #ffffff; text-decoration: none; display:block; padding: 0px 5px; margin:0 0 1px 0; width: 120px; background-color:#5F5644;  border-left:10px solid #BD743B; border-right:8px solid #47372B;}
.navigation A:link, .navigation A:visited { background-color:#5F5644; border-left:10px solid #BD743B; border-right:8px solid #47372B; }

Das Problem hierbei ist, das die Browser den Rahmen nicht so zusammensetzen, wie du es dir vorstellst, sondern den linken und rechten Rahmen durchziehen, und somit den unteren Rahmen "abschneiden".

Aus diesem Grund hab ich den unteren Rahmen rausgenommen und stattdessen einen unteren Außenabstand für die Links gesetzt, durch den der schwarze Hintergrund zum Vorschein kommt.
 
Hey,cool cool - danke.ich hab mal vorrübergehend eine Testumgebung erstellt und siehe da, wenn man auf http://tb.rarecore.eu/ geht, rennt die Page wesendlich schneller. Danke dafür.Mir fällt nur gerade auf, dass ganz unten auf der Page bei der Renderzeit ein Fehler mit einer schwarzen Linie zu sehen ist. Was genau ist da mein Problem?Gruß
 
An dieser Stelle greifen wohl die äußeren Polsterungseigenschaften des p-Elements, die noch auf null gesetzt werden müssen:

Code: 
p {
margin:0;
}
 
Hi,

2 kleine Probleme hab ich noch, die nur im IE auftreten und ich keine Ahnung hab, was ich dagegen machen kann :(
 

Anhänge

  • ie6 probleme.jpg
    ie6 probleme.jpg
    38,7 KB · Aufrufe: 22
  • design.zip
    design.zip
    5,3 KB · Aufrufe: 13
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück