Menü in CSS - Wie bekomme ich das richtig ausgerichtet?

[MXWorker]

Wie bekomme ich das Menu am besten so das es sich automatisch an die Breite anpasst und die nächste Zeile dann auch den gleichen Abstand hat wie zwischen den einzelnen Menüpunkten und sich der Menüpunkt nicht teilt wie es gerade der Fall ist? Hat jemand ne Idee?

Hier der Code:

HTML

<!-- NAVIGATION START --> 
  <div id="navigation"><a href="index.php" target="_self">Home</a><a href="villas_apartments.php" target="_self">Javea Holidays villas &amp; apartments for rent</a><a href="all_properties.php" target="_self">View all Javea properties</a><a href="enquiry.php" target="_self">Enquiry Form</a><a href="enquiry.php" target="_self">Reduced Prices</a><a href="enquiry.php" target="_self">summer properties</a><a href="enquiry.php" target="_self">Winter properties</a></div>
  <!-- NAVIGATION ENDE -->

CSS

#navigation {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	height: 30px;
	width: 760px;
	margin-top: -5px;
	text-align: center;
	color: #000000;
	float: left;
	background-color: #006600;
	font-weight: normal;
	margin-bottom: 0px;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
	margin-right: 0px;
	margin-left: 0px;
}
	#navigation a,
	#navigation span {
	background-color: #006600;
	color: #FF9900;
	padding: 3px;
	border: 1px solid #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	margin-top: 0px;
	margin-right: 2px;
	margin-bottom: 0px;
	margin-left: 2px;
	}
	#navigation a:hover,
	#navigation a:focus {
	background-color: #FF9900;
	color: black;
	border: 1px solid #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	}

 

[dms]

white-space:nowrap dürfte Dir da weiterhelfen.

 

[MXWorker]

Danke, soweit funzt das.

Nun hab ich das nächste Problem. Die rechte Box liegt jetzt im Firefox unter der linken. Im IE siehst korrekt aus.

Zum anschauen hier mal der Link.

 

[MXWorker]

PS. das gleiche Problem im Safari.

 

[msslovi0]

Zunächst mal:

Eine ID muss auf der Seite eindeutig sein, das ist bei dir definitiv nicht gegeben.

Schlechter Code Teil 1:

<!-- TOP START -->
  <div id="top">
    <div id="offers">
      <p align="center" class="h1">Javea holiday rentals. 
        Villas and apartments 
        for rent
        on the Costa Blanca, Spain.<br />
      </p>
    </div>
  </div>
<!-- TOP ENDE -->

Div-Suppe, deprecated-Attribute, keine Semantik.

Guter Code:

<h1>Javea holiday rentals. Villas and apartments for rent on the Costa Blanca, Spain.</h1>

Schlechter Code Teil 2:

#navigation { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    height: 30px; 
    width: 760px; 
    margin-top: -5px; 
    text-align: center; 
    color: #000000; 
    float: left; 
    background-color: #006600; 
    font-weight: normal; 
    margin-bottom: 0px; 
    padding-top: 20px; 
    padding-right: 0px; 
    padding-bottom: 5px; 
    padding-left: 0px; 
    margin-right: 0px; 
    margin-left: 0px; 
}

Angaben so weit es geht zusammenfassen, die Angabe einer Einheit bei 0 ist unnötig, Farbangaben kann man verkürzt schreiben. Beispielsweise:

margin: -5px 0 0 0;
padding: 20px 0 5px 0;
color: #000;

Auch verstehe ich nicht, warum bei dir irgendwie alle Elemente floaten, auch wenn es da gar nichts zum floaten gibt . Das schafft nur unnötige Probleme mit anderen floats und beim clearen.

Zu deinem Problem: Gibt beiden Spalten feste Breiten und lass die rechte rechts floaten.

Matt