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

Frage zu Buttons

T

TheFlexxi

Neues Mitglied
Frage zu Buttons *Bin anfäner*

Hallo zusammen, ich passe gerade ein Design per html/css an. (Mein erster versuch).

Bevor ich anfange hier der inhalt der buttons (CSS):

Code: 
/*Anfang Navi*/
#navi    {
    901px;
    height:48px;
    padding-top:124px;
    }
    
    #img1    {
        background-image:url(style/navi/01_01.jpg);
        height:48px;
        width:49px;
        float:left;
        }    
        
        #img2    {
        background-image:url(style/navi/startseite.jpg);
        height:48px;
        width:108px;
        float:left;
        margin-left:49px;
        display:inherit;
        }
        
        #img2:hover    {
        background-image:url(style/navi/startseite_over.jpg);
        height:48px;
        width:108px;
        float:left;
        margin-left:49px;
        display:inherit;
        }
                
        #img3    {
        background-image:url(style/navi/03_03.jpg);
        height:48px;
        width:11px;
        float:left;
        margin-left:100px;    
        display:block;            
        }
        
        #img4    {
        background-image:url(style/navi/angebote.jpg);
        height:48px;
        width:108px;
        float:left;
        margin-left:10px
        }
        
        #img4:hover    {
        background-image:url(style/navi/angebote_over.jpg);
        height:48px;
        width:108px;
        float:left;
        margin-left:10px;
        }
        
        #img5    {
        background-image:url(style/navi/05_05.jpg);
        height:48px;
        width:11px;
        float:left;
        margin-left:100px;
        }
        
        #img6    {
        background-image:url(style/navi/leistungen.jpg);
        height:48px;
        width:108px;
        float:left;
        margin-left:10px;    
        }
        
        #img6:hover    {
        background-image:url(style/navi/leistungen_over.jpg);
        height:48px;
        width:108px;
        float:left;
        margin-left:10px;    
        }        
        
        #img7    {
        background-image:url(style/navi/07_07.jpg);
        height:48px;
        width:11px;
        float:left;
        margin-left:100px;
        }
        
        #img8    {
        background-image:url(style/navi/templates.jpg);
        height:48px;
        width:108px;
        float:left;
        margin-left:10px;
        }
        
        #img8:hover    {
        background-image:url(style/navi/templates_over.jpg);
        height:48px;
        width:108px;
        float:left;
        margin-left:10px;
        }
        
        
        #img9    {
        background-image:url(style/navi/09_09.jpg);
        height:48px;
        width:11px;
        float:left;
        margin-left:100px;
        }

        #img10    {
        background-image:url(style/navi/referenzen.jpg);
        height:48px;
        width:108px;
        float:left;
        margin-left:10px;
        }
        
        #img10:hover    {
        background-image:url(style/navi/referenzen_over.jpg);    
        height:48px;
        width:108px;
        float:left;
        margin-left:10px;
        }
        
        #img11    {
        background-image:url(style/navi/11_11.jpg);
        height:48px;
        width:11px;
        float:left;
        margin-left:100px;
        }
        
        #img12    {
        background-image:url(style/navi/wir.jpg);
        height:48px;
        width:108px;
        float:left;
        margin-left:10px;
        }
        
        #img12:hover    {
        background-image:url(style/navi/wir_over.jpg);
        height:48px;
        width:108px;
        float:left;
        margin-left:10px;
        }        
        
        #img13    {
        background-image:url(style/navi/13_13.jpg);
        height:48px;
        width:11px;
        float:left;
        margin-left:100px;
        }
        
        #img14    {
        background-image:url(style/navi/contact.jpg);
        height:48px;
        width:108px;
        float:left;
        margin-left:10px;
        }
        
        #img14:hover    {
        background-image:url(style/navi/contact_over.jpg);
        height:48px;
        width:108px;
        float:left;
        margin-left:10px;
        }        
        
        #img15    {
        background-image:url(style/navi/15_15.jpg);
        height:48px;
        width:29px;
        float:left;
        margin-left:100px;
        /*Ende Navi*/
und hier in der html Datei:

HTML: 
    <div id="navi">
        <div id="img1">
        <li><a href="?site=news"><div id="img2"></div></a></li><!--startseite-->
        </li>
        <div id="img3">
        <li><a href="http://googel.de"><div id="img4"></div></a></li><!--angebote-->
        <div id="img5">
        <li><a href="http://web.de"><div id="img6"></div></a></li><!--leistungen-->
        <div id="img7">
        <li><a href="http://gmx.de"><div id="img8"></div></a></li><!--templates-->
        <div id="img9">
        <li><a href="http://gidf.de"><div id="img10"></div></a></li><!--referenzen-->
        <div id="img11">
        <li><a href="http://hd-webmedia.de"><div id="img12"></div></a></li><!--wir-->
        <div id="img13">
        <li><a href="http://sport.de"><div id="img14"></div></a></li><!--contact-->
        <div id="img15">
        </div><!--img15-->        
        </div><!--img13-->
        </div><!--img11-->
        </div><!--img9-->
        </div><!--img8-->
        </div><!--img7-->
        </div><!--img6-->
        </div><!--img4-->
        </div><!--img2--> 
      </div><!--navi-->
Das Problem:

problem.jpg


Wie man hier unschwer erkennen kann, ist die Navi nicht ganz in die weite gerückt, auch bei den Buttons stimmt was nicht, ich habe das Design auch mal mit Tabellen angepasst, aber dort haben die Buttons die ganze breite und sind beim overeffekt z.B ganz. Sprich beim html/css wird die navi nicht ganz ausgefüllt, auch die schwarzen punkte nerven diese kommen erst seitdem ich die buttons mit <li>.... verlinkt habe.

bitte um hilfe.

Im Forum oder per Icq: 250514882

mfg
 
Zuletzt bearbeitet:
Da kommen gleich mehrere Fehler zusammen:

Du verwendest Listenelemente "li" ohne zugehörige Liste.
Richtig wäre
Code: 
<ul>
<li>...</li>
<li>...</li>
</ul>

Dann solltest du die li's und nicht die img-Divs floaten.

für die unterschiedlichen Buttons verwende am besten Klassen, die du dann den a-Links zuweist.

Alles hier erklärt unter "Variante 2."
 
Nunja, habe es soweit gebracht das alles geht siehe:

Unbenanntes Dokument

nur im IE sieht es etwas komisch aus :(.

Code CSS:

Code: 
@charset "utf-8";
/* CSS Document */

* {
margin: 0px;
padding: 0px;
}

body    {
    margin:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#000000;
    background-color:#0a8094;
    }
    
    #wrapper    {
    width:901px;
    height:auto;
    margin:auto;
    }
    
    #bg    {
    width:901px;
    background-color:#fff;
    }
    
    #content    {
    background-color:#fff;
    width:901px;
    height:100%;
    margin:auto;
    min-height:450px;
    }
    
    /*Anfang Header*/
    #header    {
    background-image:url(style/header/01_01.jpg);
    width:901px;
    height:124px;
    }
    /*Ende Header*/

/*Anfang Navi*/
#navi    {
    width:901px;
    height:48px;
    }
    
    #img1    {
        background-image:url(style/navi/01_01.jpg);
        height:48px;
        width:49px;
        float:left;        }    
        
        #startseite    {
        background-image:url(style/navi/startseite.jpg);
        }
        
        #startseite:hover    {
        background-image:url(style/navi/startseite_over.jpg);
        }
                
        
        #angebote    {
        background-image:url(style/navi/angebote.jpg);
        }
        
        #angebote:hover    {
        background-image:url(style/navi/angebote_over.jpg);
        }
        
        
        #leistungen    {
        background-image:url(style/navi/leistungen.jpg);
        }
        
        #leistungen:hover    {
        background-image:url(style/navi/leistungen_over.jpg);
        }        
        
        #templates    {
        background-image:url(style/navi/templates.jpg);
        }
        
        #templates:hover    {
        background-image:url(style/navi/templates_over.jpg);
        }


        #referenzen    {
        background-image:url(style/navi/referenzen.jpg);
        }
        
        #referenzen:hover    {
        background-image:url(style/navi/referenzen_over.jpg);    
        }

        
        #wir    {
        background-image:url(style/navi/wir.jpg);
        }
        
        #wir:hover    {
        background-image:url(style/navi/wir_over.jpg);
        }        

        
        #contact    {
        background-image:url(style/navi/contact.jpg);
        }
        
        #contact:hover    {
        background-image:url(style/navi/contact_over.jpg);
        }        
        
        #img15    {
        background-image:url(style/navi/15_15.jpg);
        height:48px;
        width:29px;
        float:left;
        }
        
        #navi ul li {
        list-style-type: none;
        }
        
        li.spacer {
        background-image:url(style/navi/03_03.jpg);
        height:48px;
        width:11px;
        float:left;
        display:block;
        }
        
        li.button    {
        height:48px;
        width:108px;
        float:left;
        display:block;
        
        }
        
        span.spacer_img {
        height:48px;
        width:108px;
        display: block;
        }
        
        /*Ende Navi*/
        
        #u_navi    {
        background-image:url(style/navi/16_16.jpg);
        height:29px;
        width:900px;
        }
        
        #links    {
        background-image:url(style/news/bg.jpg);
        background-repeat:repeat-y;
        width:660px;
        height:auto;
        float:left;
        }
        
        
        /*Footer Anfang*/
        #footer    {
        width:901px;
        height:41px;
        clear: both;
        }
        
        #fimg1    {
        background-image:url(style/footer/01_01.jpg);
        width:733px;
        height:41px;
        float:left;
        }
        
        #cont    {
        background-image:url(style/footer/02_02.jpg);
        width:44px;
        height:41x;
        float:left;
        }
        
        #imprint    {
        background-image:url(style/footer/03_03.jpg);
        width:44px;
        height:41px;
        float:left;
                }
                
                
        #faq    {
        background-image:url(style/footer/04_04.jpg);
        width:24px;
        height:41px;
        float:left;
        }
        
        #ende    {
        background-image:url(style/footer/05_05.jpg);
        width:56px;
        height:41px;
        float:left;
                }
        #footer ul li {
        list-style-type: none;
        }

        span.spacer_img {
        height:41px;
        width:auto;
        display: block;
        }        
        /*Footer Ende*/
        
        /*Links Anfang*/
        
        /*Slider Anfang*/
        #slider    {
        width:660px; 
        height:162px;
        float:left;
        }
        
        #slider_links    {
        background-image:url(style/slide/02_02.jpg);
        width:11px;
        height:162px;
        float:left;    
        }
        
        #slide_oben    {
        background-image:url(style/slide/01_01.jpg);
        height:7px;
        width:660px;
        float:left;
        }
        
        #slide_content    {
        background-image:url(style/slide/03_03.jpg);
        width:640px;
        height:162px;
        float:left;
        }
        
        #slide_rechts    {
        background-image:url(style/slide/04_04.jpg);
        width:9px;
        height:162px;
        float:left;    
        }
        /*Slider EndeS*/
        #u_slider    {
        background-image:url(style/slide/05_05.jpg);
        height:15px;
        width:660px;
        float:left;
        }
        /*Links Ende*/
            
                /*Rechts Anfang*/
        #rechts    {
        background-color:#FFFFFF;
        background-repeat:repeat-y;
        width:240px;
        height:auto;
        float:left;
        }
        
        /*kundenmeinungen Anfang*/
        #kundenmeinungen    {
        background-image:url(style/rechts/02_02.jpg);
        width:240px;
        height:auto;
        float:left;
        }
        
        #kundenbild    {
        background-image:url(style/rechts/01_01.jpg);
        height:48px;
        width:240px;
        float:left;    
        }
        
        #kundenende    {
        background-image:url(style/rechts/03_03.jpg);
        height:7px;
        width:240px;
        float:left;
        }
        /*kundenmeinungen Ende*/    
        
        /*zufallstemplate Anfang*/
        #zufallstemplate    {
        background-image:url(style/rechts/02_02.jpg);
        width:240px;
        height:auto;
        float:left;
        }
        
        #zufallstemplate_content    {
        background-image:url(style/rechts/02_02.jpg);
        height:auto;
        width:240px;
        float:left;
        }
            
        #zufallstemplatebild    {
        background-image:url(style/rechts/04_04.jpg);
        height:62px;
        width:240px;
        float:left;
        }
            
        #zufallstemplateende    {
        background-image:url(style/rechts/03_03.jpg);
        height:7px;
        width:240px;
        float:left;
        }                    
        /*zufallstemplate Ende*/            
                
        /*Rechts Ende*/


weiteres im 2. teil
 
2-teil da ich max 1000 zeichen oder so posten darf.

Code Html:

HTML: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="_style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
 <div id="bg">
   <div id="header"></div><!--header-->
   <div id="navi">
    <ul>
           <li><div id="img1"></div></li>
        <li id="startseite" class="button"><a href="?site=news"><span class="spacer_img"></span></a></li><!--startseite-->
        <li class="spacer">&nbsp;</li>
        <li id="angebote" class="button"><a href="http://googel.de"><span class="spacer_img"></span></a></li><!--angebote-->
        <li class="spacer">&nbsp;</li>
        <li id="leistungen" class="button"><a href="http://web.de"><span class="spacer_img"></span></a></li><!--leistungen-->
        <li class="spacer">&nbsp;</li>
        <li id="templates" class="button"><a href="http://gmx.de"><span class="spacer_img"></span></a></li><!--templates-->
        <li class="spacer">&nbsp;</li>
        <li id="referenzen" class="button"><a href="http://gidf.de"><span class="spacer_img"></span></a></li><!--referenzen-->
        <li class="spacer">&nbsp;</li>
        <li id="wir" class="button"><a href="http://hd-webmedia.de"><span class="spacer_img"></span></a></li><!--wir-->
        <li class="spacer">&nbsp;</li>
        <li id="contact" class="button"><a href="http://sport.de"><span class="spacer_img"></span></a></li><!--contact-->
        <li><div id="img15"></div></li>
      </ul>   
    </div><!--navi-->
    <div id="u_navi"></div><!--u_navi-->
  <div id="content"> 
      <div id="links">
    <div id="slider">
     <div id="slide_oben"></div><!--slider oben-->
     <div id="slider_links"></div>
     <div id="slide_content"></div>
     <div id="slide_rechts"></div>
    </div><!--slider ende-->
     <div id="u_slider"></div><!--u_slider-->
    </div><!--links-->
    
    <div id="rechts">
      <div id="kundenmeinungen">
    <div id="kundenbild"></div>
    <div id="kundenende"></div>
    </div><!--kunden...-->
    <div id="zufallstemplate">
    <div id="zufallstemplatebild"></div>
    <div id="zufallstemplate_content"></div>
    <div id="zufallstemplateende"></div>
    </div><!--zufallstemplate-->
    </div><!--rechts-->
  </div><!--content-->
  <div id="footer"> 
  <ul>
   <li><div id="fimg1">&nbsp;</div></li>
   <li id="cont"><a href="http://web.de"><span class="spacer_img"></span></a></li>
   <li id="imprint"><a href="http://wer-kennt-wen.de"><span class="spacer_img"></span></a></li>
   <li id="faq"><a href="http://lol.de"><span class="spacer_img"></span></a></li>
   <li id="ende"><a href="http://erde.de"></a></li>
   
   </ul>
  </div><!--footer-->
</div><!--bg-->
 </div><!--wrapper-->
</body>
</html>

bitte um hilfe im FF geht alles 1A

mfg
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben