Menu CSS

Hi,
ich hab CSS mit einem Buch angefangen zu lernen und dann durch lesen im Internet.
Und ich habe das was ich gelesen habe auch angewendet.

Bezüglich
einfach horizontal und mit margin/padding ohne das der letzte Menupunkt in die nächste Zeile rutscht.
Zum Vergrößern anklicken....
Das hört sich doch ganz danach an als ob du ein ganz konkretes Problem hast. Dann hast du doch sicherlich auch etwas Quellcode dazu. Poste das doch dann kann ich dir helfen.

Ansonsten, wenn der letzte Menüpunkt umbricht heißt dies das dein Elternelement zu klein ist.

Grüße
 
also gut hab jetzt ein kleines Beispiel gebastelt aber jetzt habe ich es irgendwie hinbekommen das es nicht wegrutscht wahrscheinlich weil ich mit float gearbeitet habe anstatt
display:inline-block, table cell;

aber falls ich dieses problem wieder habe schreibe ich dir eine Nachricht ok?

danke, LG Mario :)
 
aja und ich wollte ul keine width Angabe geben sondern width:auto; (responsive) aber anscheinend funktioniert das so nicht. und li habe ich immer eine width Angabe gegeben (wahrscheinlich deshalb rutscht das letzte immer weg)!

und könntest du mir den Link von dem Buch geben? :)
 
Hier findest du jede Menge Bücher zum Thema CSS. Viele davon auch mit Kommetaren der Leser.

Oder in der Openbook Reihe von Galileo gibt es zum Beispiel das hier.

Ansonsten hat es auch oft schon geholfen wenn man selber mal bei Google z.B. nach "CSS + Tutorial" oder so sucht.
 
Hi,
darf ich dich mal fragen warum du dich so streubst uns etwas code zu zeigen?

Den Titel kann ich erst rasusuchen wenn ich wieder zu Hause bin. Aber ich würde dir eher ein aktuelles Buch, siehe auch Tombes Antwort empfehlen.

Ich habe nicht geschrieben das du der Ul eine feste Breite geben sollst sondern dass das Elternelement zu klein ist wenn umbrochen wird.

Grüße
 
zeige dir gerne den Code
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>Unbenanntes Dokument</title>
<style type="text/css">
* {
	font-family:"Segoe UI Semilight";
	font-size:100.01%;
}

body, html {
	margin:0%;
	padding:0%;
}

header {
	width:100%;
	height:100px;
	background:#CCC;
	padding:0%;
}

img {
	margin-left:10px;
}

ul {
	float:right;
	width:35%;
	height:100%;
	padding:0%;
	margin:0% 5% 0;

}

li {
	float:left;
	padding:1%;
	box-sizing:border-box;
	width:25%;
	height:80px;
	margin-top:10px;
	list-style:none;
	text-align:center;
	line-height:70px;	
	border-top:1px solid #999;
}

li:hover {
	background-image: url(Neu.2.svg);
	background-position:top center;
	background-repeat: no-repeat;
	color:#333;
	transition:color 0.3s ease-in-out;
	-webkit-transition:color 0.3s ease-in-out;
	-ms-transition:color 0.3s ease-in-out;
	-moz-transition:color 0.3s ease-in-out;
	-o-transition:color 0.3s ease-in-out;
}

</style>
</head>

<body>
<header>

	<img src="http://www.microsoft.com/global/oneMscomSettings/PublishingImages/HeaderImages/PhoneLogo.png" />
	<ul>
		<li>Home</li>
		<li>Work</li>
		<li>About</li>
        <li>Contact</li>
	</ul>
    
</header>
</body>
</html>

sry falls das jetzt nicht in den Code-tag drinnen ist, hab vergessen wie das geht!
 
CSS: 
li {
	float:left;
	padding:1%;
	box-sizing:border-box;
	width:25%;
	height:80px;
	margin-top:10px;
	list-style:none;
	text-align:center;
	line-height:70px;	
	border-top:1px solid #999;
}

Wenn man width = 25% und padding = 1% zusammenzählt kommt man auf 108%. Möglich das er daran liegt!?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück