Buttons mit background repeat-x

Billbos

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 http://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;
}

Alles anzeigen

HTML-LAYOUT

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>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( 'codebase','http://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://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/header' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://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://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>
  [*][url='#']Home[/url]
  [*][url='#']Sample[/url]
  [*][url='#']Sample[/url]
  [*][url='#']Bilder[/url]
  [*][url='#']Sample[/url]
  [*][url='#']Kontakt[/url]
  [*][url='#']Impressum[/url]
 [/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>

Alles anzeigen

LinuxMan

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/navigationsleisten.htm

driver

würd sagen du machst die navi eben auf die richtige größe .
also dann z.b. um die 100px nehm ich an...

Billbos

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

driver

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.

LinuxMan

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/na….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.

Billbos

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

sejuma

So in etwa sollte es klappen:

Code

#navi { 
background: #36aeff url(../img/navigation/background.png) no-repeat; 
margin: 0 auto; 
width: 600px; 
line-height: 50px;
} 


#navi ul { 
list-style-type: none; 
margin: 0 0 0 10px;
} 


#navi li { 
float: left;
margin-right: 10px;
font-size: 18px; 
} 


#navi li:a { 
background: url(../img/navigation/button_top.png) repeat-x; 
display: block;
width: auto; 
}

Alles anzeigen

Buttons mit background repeat-x

Tags

Benutzer online in diesem Thema