ComputerBase Menü
Aktuelles

css navigationsleiste wird zweizeilig

H

Hiems

Newbie
Registriert
Dez. 2013
Beiträge
2
ich möchte bei meiner website 7 meüpunkte haben abe rnach 5 fangen diese eine neue zeile an?! helft mir bitte!!'

www.smeih.tk da könnt ihr das problem sehen


<html>

<head>
<title>Hundeverein Gaspoltshofen</title>
<meta name="description" content="Website" />
<meta name="keywords" content="enter your keywords here" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="main">

<div id="header"><div id="welcome">
<h1><a href="#">Hundeverein Gaspoltshofen</a></h1>
</div><!--close welcome--></div><!--close header-->

<div id="menubar">

<div id="menu_items">
<ul id="menu">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="ourwork.html">&Uumlber uns</a></li>
<li><a href="testimonials.html">Anlage</a></li>
<li><a href="projects.html">Projekte</a></li>
<li><a href="contact.html">Kontakt2</a></li>
<li><a href="contact.html">Kontakt</a></li>
<li><a href="termine.html">Termine</a></li>
</ul>
</div><!--close menu-->

</div><!--close menubar-->

<div id="site_content">

<div class="sidebar_container">

<div class="sidebar">
<div class="sidebar_item">
<h2>New Website</h2>
<p>Welcome to our new website. Please have a look around, any feedback is much appreciated.</p>
</div><!--close sidebar_item-->
</div><!--close sidebar-->

<div class="sidebar">
<div class="sidebar_item">
<h2>Latest Update</h2>
<h3>October 2013</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus tempor enim.</p>
</div><!--close sidebar_item-->
</div><!--close sidebar-->

<div class="sidebar">
<div class="sidebar_item">
<h3>September 2013</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus tempor enim.</p>
</div><!--close sidebar_item-->
</div><!--close sidebar-->

<div class="sidebar">
<div class="sidebar_item">
<h3>August 2013</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus tempor enim.</p>
</div><!--close sidebar_item-->
</div><!--close sidebar-->

</div><!--close sidebar_container-->

<div id="content">

<div class="content_item">

<h1>Welcome To Your Website</h1>
<p>This is my website about Dogs.</p>

<div class="content_images_text">

<div class="content_image">
<img src="hsv_700_4.jpg" alt="hsv_700_4" />
</div>

<div class="image_text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula a nunc id euismod. Fusce enim ligula, facilisis nec gravida in, feugiat sit amet risus. Vivamus ornare leo convallis lorem posuere ullamcorper. Nunc convallis ultrices lacus sed faucibus. Vestibulum imperdiet non felis quis dapibus.</p>
</div>

</div>

<div class="content_container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus tempor enim. Aliquam facilisis neque non nunc posuere eget volutpat metus tincidunt.</p>
<div class="button_small">
<a href="#">Read more</a>
</div><!--close button_small-->
</div><!--close content_container-->

<div class="content_container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus tempor enim. Aliquam facilisis neque non nunc posuere eget volutpat metus tincidunt.</p>
<div class="button_small">
<a href="#">Read more</a>
</div><!--close button_small-->
</div><!--close content_container-->
s
<div class="content_container">
<p>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Pellentesque cursus tempor enim. Aliquam facilisis neque non nunc posuere eget volutpat metus tincidunt.</p>
<div class="button_small">
<a href="#">Read more</a>
</div><!--close button_small-->
</div><!--close content_container-->

<div class="content_container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus tempor enim. Aliquam facilisis neque non nunc posuere eget volutpat metus tincidunt.</p>
<div class="button_small">
<a href="#">Read more</a>
</div><!--close button_small-->
</div><!--close content_container-->

</div><!--close content_item-->

</div><!--close content-->

</div><!--close site_content-->

</div><!--close main-->

<div id="footer">
| <a href="http://fotogrph.com/">Images</a> | website template by <a href="www.hiems.at">Hiems Design</a>
</div><!--close footer-->

</body>
</html>



css :

html
{ height: 100%;}

*
{ margin: 0;
padding: 0;}

body
{ font: normal 85% Arial, Helvetica, sans-serif;
color: #000;
background: #FFF url(background.jpg) repeat;
}

p
{ padding: 0 0 10px 0;
line-height: 1.7em;
font-size: 100% }

img
{ border: 0;}

h1, h2, h3, h4, h5, h6
{ font: normal 175% Arial, Helvetica, sans-serif;
color: #3F861B;
text-shadow: 1px 1px #18330B;
letter-spacing: -1px;
margin: 0 0 10px 0;}

h2
{ font: normal 165% Arial, Helvetica, sans-serif;}

h3
{ font: normal 130% Arial, Helvetica, sans-serif;
}

h4, h5, h6
{ margin: 0;
padding: 0 0 0px 0;
font: normal 150% Arial, Helvetica, sans-serif;
line-height: 1.5em;}

h5, h6
{ font: normal 95% Arial, Helvetica, sans-serif;
color: #888;
padding-bottom: 15px;}

a
{ color: #3F861B;
font-weight: bold;
background: transparent;
outline: none;
text-decoration: underline;}

a:hover
{ text-decoration: none;}

ul
{ margin: 2px 0 22px 30px;
line-height: 1.7em;
font-style: normal;
font-size: 100%;}

ol
{ margin: 8px 0 22px 20px;}

ol li
{ margin: 0 0 11px 0;}

#main, #header, #banner, #menubar, #site_content, #footer, #content_blue
{ margin-left: auto;
margin-right: auto;}

#header
{ height: 400px;
width: 960px;
background: transparent url(dogfrisbee.jpg) no-repeat;}

#menubar
{ width: 960px;
height: 100px;
margin-top: -100px;
background: transparent url(transparent.png) repeat;}

#welcome
{ width: 360px;
height: 70px;
padding-top: 30px;
float: left;
text-align: center;
margin: 0 auto;}

#welcome h1 a
{ font: normal 160% Arial, Helvetica, sans-serif;
letter-spacing: -2px;
color: #FFF;
text-decoration: none;
text-shadow: 1px 1px #000;}

#menu_items
{ float:left;
height: 75px;
margin-right: 20px;
padding-top: 25px;
width: 580px;}

ul#menu
{ margin:0;
float: right;}

ul#menu li
{ padding: 0 0 0 0px;
list-style: none;
margin: 2px 0 0 0;
display: inline;
background: transparent;}

ul#menu li a
{ float: left;
font: bold 120% Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
text-decoration: none;
text-shadow: none;
margin: 6px 0 0 10px;
padding: 10px 15px 10px 15px;
background: transparent; }

ul#menu li.current a, ul#menu li:hover a
{ color: #FFF;
background: #3F861B;
background: -moz-linear-gradient(#82AC10, #3F861B);
background: -o-linear-gradient(#82AC10, #3F861B);
background: -webkit-linear-gradient(#82AC10, #3F861B);
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; }

#site_content
{ width: 960px;
overflow: hidden;
margin: 0 auto;
padding: 0 0 20px 0;
background: transparent url(transparent_light.png) repeat;}

.sidebar_container
{ float: left;
margin: 20px 20px 0 20px;
width: 220px;
padding-left: 15px;
background: #3F861B;}

.sidebar
{ float: left;
width: 220px;
padding: 0;
margin-top: 10px;
margin-bottom: 10px;}

.sidebar_item
{ font: normal 100% Arial, Helvetica, sans-serif;
width: 215px;}

.sidebar h2
{ font: normal 140% Arial, Helvetica, sans-serif;
color: #FFF;
text-shadow: 0px 1px 0px #285412;}

.sidebar h3
{ color: #FFF;
text-shadow: 0px 1px 0px #285412;}

.sidebar p
{ color: #FFF;}

#content
{ width: 665px;
margin-bottom: 20px;
float: left;}

.content_item
{ width: 665px;
margin-top: 20px;
margin-bottom: 20px;}

.content_container
{ width: 310px;
padding: 5px;
margin-right: 10px;
float: left;}

.content_images_text
{ float: left;
width: 665px;
margin-bottom: 10px;}

.content_image
{ width: 300px;
height: 150px;
margin-right: 10px;
float: left;}

.image_text
{ width: 350px;
float: right;}

#footer
{ width: 960px;
height: 20px;
padding-top: 20px;
text-align: center;
background: transparent;
text-shadow: 1px 1px #18330B;
color: #FFF;
font-weight: bold;}

#footer a, #footer a:hover
{ text-decoration: none;
padding-bottom: 20px;}

#footer a:hover
{ text-decoration: underline;}

.readmore
{ font: bold 110% Arial, Helvetica, sans-serif;
height: 15px;
margin-left: 95px;
width: 90px;
padding: 5px 5px 10px 7px;
background: #3F861B;
background: -moz-linear-gradient(#82AC10, #3F861B);
background: -o-linear-gradient(#82AC10, #3F861B);
background: -webkit-linear-gradient(#82AC10, #3F861B);
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;}

.readmore a
{ color: #1D1D1D;}

.button_small
{ font: normal 110% Arial, Helvetica, sans-serif;
height: 15px;
width: 90px;
padding: 5px 5px 10px 7px;
background: #3F861B;
background: -moz-linear-gradient(#82AC10, #3F861B);
background: -o-linear-gradient(#82AC10, #3F861B);
background: -webkit-linear-gradient(#82AC10, #3F861B);
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;}

.button_small a
{ color: #FFF;
padding-left: 5px;}

.form_settings
{ margin: 15px 0 0 0;}

.form_settings p
{ padding: 0 0 4px 0;}

.form_settings span
{ float: left;
width: 280px;
text-align: left;}

.form_settings input, .form_settings textarea
{ padding: 2px;
width: 299px;
font: 100% arial;
border: 1px solid #BBB;
background: #FFF;
color: #47433F;}

.form_settings input[type="checkbox"]
{ padding: 2px 0;
width: 15px;
font: 100% arial;
border: 0;
background: #FFF;
color: #47433F;
margin: 28px 0;}

.form_settings .submit
{ font: bold 100% arial;
width: 99px;
margin: 0 0 0 206px;
height: 26px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #3F861B;
background: -moz-linear-gradient(#82AC10, #3F861B);
background: -o-linear-gradient(#82AC10, #3F861B);
background: -webkit-linear-gradient(#82AC10, #3F861B);
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
color: #FFF;}




bitte helft mir!!!


lg hiems
 
Deine unordered List ist zu kurz...Sprich es gehört breiter

Du setzt im CSS bei #menu_items eine width von 580px...mach hier 100%
Und wenn du das Menü linksbündig haben willst mach statt float:right ein float:left im #menu

lass wenn du ID's verwendest im CSS die tags, sprich ul oder div usw weg.
ID's sind sowieso schon eindeutig. Ein Selektor sollte genau nur so spezifisch sein wie benötigt und nicht mehr.
 
Zuletzt bearbeitet:
So auf die Schnelle - Du begrenzt das Menü hier:

#menu_items
{ float:left;
height: 75px;
margin-right: 20px;
padding-top: 25px;
width: 580px;}

Edit: Da war jemand schneller ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

J
Shopware 5 Accordion funktioniert nicht
Antworten
4
Aufrufe
1.033
ColdGlow
ColdGlow
M
HTML/CSS Navbar mit ZWEI Unterebenen (Dropdown)
Antworten
6
Aufrufe
3.588
netzgestaltung
netzgestaltung
RAMSoße
Navigationsleiste fixieren - html css?
Antworten
8
Aufrufe
4.327
RAMSoße
RAMSoße
N
Schriftgröße via Chrome Console ändern
Antworten
5
Aufrufe
1.604
floq0r
floq0r
T
  • Gelöst
html/css/javascript website bild neben text
Antworten
6
Aufrufe
2.590
thoss
T
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 160 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz