CSS Anordnung der Listenelemente ist Vertikal

ekin06 · 29. Mai 2011

Hallo,

ich spiele grade ein bisschen mit Kwicks für jQuery herum. Leider werden bei mir die Listenelemente nur untereinander angeordnert, ich möchte sie aber nebeneinander, wie in einigen Beispielen zu sehen, haben.

Ich hatte es mal hinbekommen, dass war allerdings mit Blueprint und nicht mit dem FluidGrid System (liegt es daran?). Ansonsten weiß ich nicht was ich noch anders gemacht habe.

Ich poste hier mal den simplen Code, vlt findet ja einer den Fehler?
PS: Wie pack ich das alles in Spoiler!?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
  <head>
				<meta name="author" content="joh">
				<meta name="robots" content="noindex">
				<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
				<meta http-equiv="content-language" content="en">
				
				<title>Webseite</title>
				
				<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" />
				<link rel="stylesheet" href="css/fluid_grid.css" type="text/css" media="screen, projection" />
				<link rel="stylesheet" href="css/kwicks.css" type="text/css" />
				
				<script src="js/jquery-1.6.1.js" type="text/javascript"></script>
				<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
				<script src="js/jquery.kwicks-1.5.1.js" type="text/javascript"></script>
		
				<script type="text/javascript">
					$().ready(function() {  
						$('.kwicks').kwicks({  
							max: 105,  
							spacing: 0
						});  
					});  
				</script>
</head>

<body>
	<div id="site_container" class="container_12">
		<div id="header" class="grid_10">
			<p>Header</p>
		</div>
		<div class="clear"></div>
	
		<div id="navbar" class="grid_10">
			<ul class="kwicks">  
				<li id="kwick1">Home</li>  
				<li id="kwick2">Contact</li>  
				<li id="kwick3">About</li>  
				<li id="kwick4">Products</li>  
			</ul>  
		</div>
		
		<div class="clear"></div>
		
		<div id="content_container" class="grid_10">
			<div id="content" class="grid_7 alpha">
				Content
			</div>				
			<div id="meta" class="grid_3 omega">
				Information
			</div>
		</div>
		
		<div class="clear"></div>
		
		<div id="footer" class="grid_10">
			<p>Footer</p>
		</div>
	</div>
</body>
</html>

kwicks.css

Code:

.kwicks {  
    list-style: none;  
    position: relative;  
    margin: 0;  
    padding: 0; 
}  
.kwicks li{  
    display: block;  
    overflow: hidden;  
    padding: 0;  
    cursor: pointer;  
}  
     
.kwicks li{  
    float: left;  
    width: 125px;  
    height: 50px;  
    margin-right: 5px;  
}  
#kwick1 {   
    background-color: #53b388;  
}  

#kwick2 {  
    background-color: #5a69a9;  
}  

#kwick3 {  
    background-color: #c26468;  
 }  

#kwick4 {   
    background-color: #bf7cc7;  
    margin-right: none;  
}

In meiner style.css steht noch nichts weiter drin, nur paar Hintergrundfarben damit man die divs sieht:

Code:

#body {
}

#li {
}

#ul {
}

#a {
}

#header {
	background: #999;
}

#navbar {
}

#site_container {
}

#content_container {
}

#content {
background: #ccc;
}

#meta {
background: #eee;
}

#footer {
background: #000;
}

fluid_grid.css

Code:

/*
  960 Grid System ~ Core CSS.
  Learn more ~ http://960.gs/

  Licensed under GPL and MIT.
*/

/*
  Forces backgrounds to span full width,
  even if there is horizontal scrolling.
  Increase this if your layout is wider.

  Note: IE6 works fine without this fix.
*/

body {
  min-width: 960px;
}

/* `Containers
----------------------------------------------------------------------------------------------------*/

.container_12 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8,
.push_9, .pull_9,
.push_10, .pull_10,
.push_11, .pull_11 {
  position: relative;
}

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
  margin-left: 0;
}

.omega {
  margin-right: 0;
}

/* `Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .grid_1 {
  width: 60px;
}

.container_12 .grid_2 {
  width: 140px;
}

.container_12 .grid_3 {
  width: 220px;
}

.container_12 .grid_4 {
  width: 300px;
}

.container_12 .grid_5 {
  width: 380px;
}

.container_12 .grid_6 {
  width: 460px;
}

.container_12 .grid_7 {
  width: 540px;
}

.container_12 .grid_8 {
  width: 620px;
}

.container_12 .grid_9 {
  width: 700px;
}

.container_12 .grid_10 {
  width: 780px;
}

.container_12 .grid_11 {
  width: 860px;
}

.container_12 .grid_12 {
  width: 940px;
}

/* `Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .prefix_1 {
  padding-left: 80px;
}

.container_12 .prefix_2 {
  padding-left: 160px;
}

.container_12 .prefix_3 {
  padding-left: 240px;
}

.container_12 .prefix_4 {
  padding-left: 320px;
}

.container_12 .prefix_5 {
  padding-left: 400px;
}

.container_12 .prefix_6 {
  padding-left: 480px;
}

.container_12 .prefix_7 {
  padding-left: 560px;
}

.container_12 .prefix_8 {
  padding-left: 640px;
}

.container_12 .prefix_9 {
  padding-left: 720px;
}

.container_12 .prefix_10 {
  padding-left: 800px;
}

.container_12 .prefix_11 {
  padding-left: 880px;
}

/* `Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .suffix_1 {
  padding-right: 80px;
}

.container_12 .suffix_2 {
  padding-right: 160px;
}

.container_12 .suffix_3 {
  padding-right: 240px;
}

.container_12 .suffix_4 {
  padding-right: 320px;
}

.container_12 .suffix_5 {
  padding-right: 400px;
}

.container_12 .suffix_6 {
  padding-right: 480px;
}

.container_12 .suffix_7 {
  padding-right: 560px;
}

.container_12 .suffix_8 {
  padding-right: 640px;
}

.container_12 .suffix_9 {
  padding-right: 720px;
}

.container_12 .suffix_10 {
  padding-right: 800px;
}

.container_12 .suffix_11 {
  padding-right: 880px;
}

/* `Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .push_1 {
  left: 80px;
}

.container_12 .push_2 {
  left: 160px;
}

.container_12 .push_3 {
  left: 240px;
}

.container_12 .push_4 {
  left: 320px;
}

.container_12 .push_5 {
  left: 400px;
}

.container_12 .push_6 {
  left: 480px;
}

.container_12 .push_7 {
  left: 560px;
}

.container_12 .push_8 {
  left: 640px;
}

.container_12 .push_9 {
  left: 720px;
}

.container_12 .push_10 {
  left: 800px;
}

.container_12 .push_11 {
  left: 880px;
}

/* `Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .pull_1 {
  left: -80px;
}

.container_12 .pull_2 {
  left: -160px;
}

.container_12 .pull_3 {
  left: -240px;
}

.container_12 .pull_4 {
  left: -320px;
}

.container_12 .pull_5 {
  left: -400px;
}

.container_12 .pull_6 {
  left: -480px;
}

.container_12 .pull_7 {
  left: -560px;
}

.container_12 .pull_8 {
  left: -640px;
}

.container_12 .pull_9 {
  left: -720px;
}

.container_12 .pull_10 {
  left: -800px;
}

.container_12 .pull_11 {
  left: -880px;
}

/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
  zoom: 1;
}

Bin für jeden sachdienlichen Hinweis dankbar ;=)

bu1137 · 29. Mai 2011

AW: Anordnung der Listenelemente ist Vertikal

display: inline;

ekin06 · 29. Mai 2011

AW: Anordnung der Listenelemente ist Vertikal

hatte ich schon mal probiert (probier es aber gleich nochmal) und das ging nicht. weitere vorschläge?

bu1137 · 29. Mai 2011

AW: Anordnung der Listenelemente ist Vertikal

Wenn's damit nicht funktioniert, machst du irgendwas falsch. Und übrigens hast du zweimal ".kwicks li{"

ekin06 · 29. Mai 2011

AW: Anordnung der Listenelemente ist Vertikal

ok, hab ich zusammengepackt.

Wenn's damit nicht funktioniert, machst du irgendwas falsch.

ja, bloß wo? ^^

bu1137 · 29. Mai 2011

AW: Anordnung der Listenelemente ist Vertikal

Firebug oder ähnliches ist dein Freund.

Alternativ müsste es folgendermassen auch funktionieren, und ist wohl eher was du willst (und eigentlich auch so wie du's oben gepostet hast...):

HTML:

.kwicks {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	overflow: hidden;
}
.kwicks li {
	display: block;
	float: left;
	margin: 1px;
}

ekin06 · 29. Mai 2011

Habs immer noch net hinbekommen, evtl. probier ich es mal "clean" ohne FluidGrid.

Habe Chrome, da kann man die Elemente ja auch untersuchen.

Ergänzung (29. Mai 2011)

Okay, habs rausgefunden... in der kwicks.js musste man

isVertical: false,

setzen... daran hatte ich gar nicht mehr gedacht. -.-

Suche

CSS Anordnung der Listenelemente ist Vertikal

ekin06

Captain

bu1137

Captain

ekin06

Captain

bu1137

Captain

ekin06

Captain

bu1137

Captain

ekin06

Captain

Ähnliche Themen