Ergebnis 1 bis 8 von 8

Thema: Buttons mit background repeat-x

  1. #1
    Meister(in)
    Registriert seit
    27.06.2008
    Ort
    Frankfurt am Main
    Alter
    27
    Beiträge
    485
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard Buttons mit background repeat-x

    Hi Leute,

    ich möchte eine INLINE-NAVIGATION erstellen und zwar auf einem #navi-background der schon fertig und als Bild eingefügt ist!

    Nun das Problem was bei mir auftaucht sind die Buttons.
    Ich habe ein Hintergrund für die Buttons gemacht. Der Hintergrund ist 45px hoch und 1px breit. Also soll sich der Button, der Größe des Schriftzuges annehmen, wie kann ich das in CSS festlegen das es in allen Browers läuft!

    Liebe Grüße

    Billbos

    PS: Die Page findet ihr auf www.billbos.eu !

    CSS-NAVIGATION
    Code:
    @charset "utf-8";
    /* CSS Billbos Navigation */
    
    #navi {
    background: #36aeff url(../img/navigation/background.png) no-repeat;
    margin: 0 auto;
    width: 600px;
    height: 50px;
    }
    
    #navi ul {
    list-style-type: none;
    }
    
    #navi li {
    display: inline-block;
    font-size: 18px;
    }
    
    #navi li:a {
    background: url(../img/navigation/button_top.png) repeat-x;
    width: auto;
    height: 45px;
    padding: 2px;
    }
    HTML-LAYOUT
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http&#58;//www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Home</title>
    
    <link rel="stylesheet" type="text/css" href="css/layout.css" />
    <link rel="stylesheet" type="text/css" href="css/navigation.css" />
    <link rel="stylesheet" type="text/css" href="css/FONT_index.css" />
    <link rel="stylesheet" type="text/css" href="css/FONT_default.css" />
    
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    </head>
    
    <body>
    
    
    
    <div class="top">
      <script type="text/javascript">
    AC_FL_RunContent&#40; 'codebase','http&#58;//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','600','height','120','title','billbos','src','flash/header','quality','high','pluginspage','http&#58;//www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/header' &#41;; //end AC code
    </script><noscript><object classid="clsid&#58;D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http&#58;//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="600" height="120" title="billbos">
        <param name="movie" value="flash/header.swf" />
        <param name="quality" value="high" />
        <embed src="flash/header.swf" quality="high" pluginspage="http&#58;//www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="600" height="120"></embed>
      </object>
    </noscript></div>
    
    
    <div id="navi">
     <ul>[*]Home[*]Sample[*]Sample[*]Bilder[*]Sample[*]Kontakt[*]Impressum[/list]
    </div>
    
    
    <div id="container">
    <h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ipsum mauris, vestibulum adipiscing, scelerisque vel, sollicitudin a, odio. Sed eget mi sed velit blandit semper. Ut est enim, molestie vel, pretium ut, ullamcorper nec, arcu. Cras ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla ac dui. Etiam sed quam. Cras nulla dui, pharetra ut, facilisis quis, facilisis ut, nibh. Nam vel dui nec magna semper tempus. Nunc lorem. Mauris lacus nisl, aliquet eu, sodales vitae, ullamcorper quis, ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h3>
     
    
    
    
    <h3>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tincidunt. Vivamus urna eros, mattis ac, commodo eget, tristique vitae, ipsum. Fusce quis nisl. Nulla elit ipsum, congue non, auctor at, porta at, sem. Nunc nec mi. Nunc ornare purus at sapien. Ut dui metus, pretium ut, ultrices nec, sagittis semper, sem. Vivamus convallis. Sed egestas nunc nec risus. Pellentesque sed arcu nec elit adipiscing consectetuer. Proin sed mauris in enim congue volutpat. Aenean nisi mi, condimentum nec, varius et, eleifend at, lacus. Sed congue pretium elit. Cras felis. Sed arcu. </h3>
    
    
    
    
    <h3>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tincidunt. Vivamus urna eros, mattis ac, commodo eget, tristique vitae, ipsum. Fusce quis nisl. Nulla elit ipsum, congue non, auctor at, porta at, sem. Nunc nec mi. Nunc ornare purus at sapien. Ut dui metus, pretium ut, ultrices nec, sagittis semper, sem. Vivamus convallis. Sed egestas nunc nec risus. Pellentesque sed arcu nec elit adipiscing consectetuer. Proin sed mauris in enim congue volutpat. Aenean nisi mi, condimentum nec, varius et, eleifend at, lacus. Sed congue pretium elit. Cras felis. Sed arcu.  </h3>
     
    </div>
    <div class="bottom"></div>
    
    
    </body>
    </html>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Azubi(ne)
    Registriert seit
    20.06.2008
    Beiträge
    64
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard Re: Buttons mit background repeat-x

    Zitat Zitat von Billbos
    wie kann ich das in CSS festlegen das es in allen Browers läuft!
    Was genau willst Du denn festlegen?

    Vielleicht hilft dir das hier weiter:
    http://de.selfhtml.org/css/layouts/n...onsleisten.htm

  3. #3
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    würd sagen du machst die navi eben auf die richtige größe .
    also dann z.b. um die 100px nehm ich an...
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  4. #4
    Meister(in)
    Themenstarter

    Registriert seit
    27.06.2008
    Ort
    Frankfurt am Main
    Alter
    27
    Beiträge
    485
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    LinuxMan ----> Ich meinte damit, dass es dann, wenn ich die Navigation erstellt habe, dass sie in allen Browsern läuft mit Hacks!

    Driver ----> Wie meinst du das, dass ich die Buttongröße schon einfach festlegen soll?

    LG BILLBOS

  5. #5
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    na deine navi is doch nur so breit wie z.b. der längste menüpunkt.
    also mach den div-container, der die navi beinhaltet, eben dann
    auch nur so groß - z.b. etwas um die 100 oder 200px.

    mit float kannst dann ausrichten, navi links, inhalt rechts.
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  6. #6
    Azubi(ne)
    Registriert seit
    20.06.2008
    Beiträge
    64
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat Zitat von Billbos
    LinuxMan ----> Ich meinte damit, dass es dann, wenn ich die Navigation erstellt habe, dass sie in allen Browsern läuft mit Hacks!
    Also, ich habe es nicht direkt ausprobiert, aber dieses Beispiel müsste in so ziemlich allen Browsern laufen:
    http://de.selfhtml.org/css/layouts/n...htm#horizontal

    Das Background image würde ich ins Element[*] setzen. Wenn Du nen mouseover Effekt mit image haben willst muss es ins Element <a>.

    Ob das ganze dann in allen Browsern laufen wird muss man dann sowieso testen. Wenn dann irgendein IE noch muckt muss man halt weiter sehen.

  7. #7
    Meister(in)
    Themenstarter

    Registriert seit
    27.06.2008
    Ort
    Frankfurt am Main
    Alter
    27
    Beiträge
    485
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ihr habt schon recht, ich möchte aber, dass die Navigation inline verläuft!

  8. #8
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    So in etwa sollte es klappen:
    Code:
    #navi &#123; 
    background&#58; #36aeff url&#40;../img/navigation/background.png&#41; no-repeat; 
    margin&#58; 0 auto; 
    width&#58; 600px; 
    line-height&#58; 50px;
    &#125; 
    
    #navi ul &#123; 
    list-style-type&#58; none; 
    margin&#58; 0 0 0 10px;
    &#125; 
    
    #navi li &#123; 
    float&#58; left;
    margin-right&#58; 10px;
    font-size&#58; 18px; 
    &#125; 
    
    #navi li&#58;a &#123; 
    background&#58; url&#40;../img/navigation/button_top.png&#41; repeat-x; 
    display&#58; block;
    width&#58; auto; 
    &#125;

Ähnliche Themen

  1. CSS - background-repeat | IE Problem
    Von sudeki05 im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 26.02.2008, 17:38
  2. tal:repeat in combobox
    Von Gast im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 1
    Letzter Beitrag: 24.10.2007, 13:44
  3. Repeat-Schleife?
    Von Solon im Forum Flash Forum
    Antworten: 1
    Letzter Beitrag: 06.06.2007, 14:58
  4. tal:repeat
    Von Dr. Evil im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 5
    Letzter Beitrag: 05.04.2007, 09:49
  5. body Background repeat
    Von Gast im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 18.02.2007, 15:56

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •