Navbar anpassen? [HTML/CSS]

LetsGammel · 14. Mai 2011

Hey,

Ich bin noch ziemlicher Anfänger in CSS & HTML, und bin gerade veradammt ratlos

Ich möchte eine Navbar machen-

Der Hintergrund der Navbar soll ein Bild sein, und auf der Navbar sollen Buttons in Form von Bildern sein. Mein Problem jetzt: Ich habe die Navbar richtig positioniert, die Buttons draufgehauen. Mein Problem ist, dass ich die Buttons gerne IN der Navbar verschieben möchte. Per standart sind die Buttons links oben in der Navbar, ich möchte den ersten Button z.B. weiter nach rechts und an das untere Ende der Navbar haben.

Ein Screen wie es jetzt aussieht:

Meine .css:

Code:

html, body {
background-color: 62a7de
}

body {
  text-align: center; /* Zentrierung IE */
}

#header {
width:892px;
height:212px;
margin-bottom: 10pt;
}

#navbar {
width:900px;
height:57px;
background:url(navbar.gif) no-repeat ;
margin: 0 auto;
}

#content {
text-align:left;
margin: 0 auto; 
width:900px;
background-color:silver;
}

(Navbar)

Meine .html:

Code:

<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" /> 
<title>hey</title>
<script
language="JavaScript">
<!--
button1_a= new Image();
button1_a.src = "button_home.gif"
button1_b= new Image();
button1_b.src = "button_home_hover.gif"
//-->
</script>
</head>
<body>
<img id="header" src="header.gif"></img>
<div id="navbar">
<p align="left">
<a href="index.php" onmouseover="switch1.src='button_home_hover.gif';"
onmouseout="switch1.src='button_home.gif';"><img src="button_home.gif" name="switch1"></img></a>
</p>
</div>
<div id="content">
hi
</div>
</body>
</html>

Znrl · 14. Mai 2011

Schau mal hier:

http://www.cssplay.co.uk/menus/

z.b.

http://www.cssplay.co.uk/menus/pro_horizontal.html

Ich würde das erstmal nicht mit JavaScript machen... jmd. der das nicht an hat sieht dann die Navigation nicht.

Das da oben ist allgemein ne nette Seite für CSS etc.

edit:
nochmal direkt wegen Bildern. Das könnte so in die richtung gehen(mal von den Bildern abgesehen^^?
http://www.cssplay.co.uk/menus/image_dropdown.html

Du musst dir da den Quelltext eben anzeigen lassen und die Stelle suchen, wo das Menü drin vorkommt.. (steht irgendwo drin wie: <h2>Image drop down menu</h2> da fängt das interessante dann an) ist aber eigentlich recht übersichtlich.

Machen tust du das am Ende über Divs, Listen und so... manche nutzen auch noch Tabellen, um die Grafiken da drin anzuordnen... gilt aber wohl meistens als veraltet.

LetsGammel · 14. Mai 2011

Danke ;D
Habe die Navbar jetzt perfekt angepasst. Jetzt bereitet mir jedoch ein anderer Teil Sorgen, im Content. Dort will ein Stück Text nicht an die richtige Stelle.

So soll es aussehen:

So sieht es aus:

Meine .css:

Code:

#advertisement {
margin-left: 5pt;
width:523px;
height:205px;
background-color:5c8188;
font-family: arial;
font-size: 14pt;
color: bfbbbb;
}

  #advertisement ul {
  list-style:none;
  }

  #advertisement li {
  float:left;
  width:400px;
  margin-bottom: 10pt;                
 
}

Meine .html:

Code:

<div id="bg">
<div id="contentbox">
<br />
<div id="advertisement">
<img src="advertisement.jpg"></img>
<ul>
<li><p align="left">Athos Online - Where the players decide!</p></li>
<li><p align="right"><a href="server.php">more...</a></p></li>
</ul>
</div>
</div>
</div>

Es handelt sich um das advertisement-Fenster.

Znrl · 14. Mai 2011

Das ist immer so ne Sache.. meistens liegts an dem hier:
http://de.selfhtml.org/css/formate/box_modell.htm
Wenn was gar nicht will setz ich erstmal alle möglich padding: 0px margin: 0px usw...
Besser sieht man das auch mit bestimmten Tools. Gibts auch als Firefox Plugin: Web Developer und Firebug etc. Da kann man sich die "Boxen" anzeigen lassen.

Suche

LetsGammel

Newbie

Znrl

Lieutenant

LetsGammel

Newbie

Znrl

Lieutenant

Ähnliche Themen