Ausrichtung Aufzählungszeichen

snowbound_ch · #1 (**permalink**) 19.02.2008, 17:01

Servus, für einen Profi wohl eine einfache und lockere Sache, leider komme ich nicht dahinter. Wie kann auf folgender Site den Pfeil auf Euro-Infocorner ganz oben ausrichten und nicht mittig mit den Unterseiten?

was auch toll wäre, wenn die Unterseiten ein anderes Aufzählungszeichen hätten, doch da stehe ich noch mehr an...

Danke für jede Hilfe!!!!!

snowbound_ch · #2 (**permalink**) 19.02.2008, 17:04

CSS

Code:

/*------------------------------------------------------------*
**  Body
**------------------------------------------------------------*/
#body { background: #fff url(/uploads/eu08design/body_.png) repeat-x; }
#body div { background: transparent url(/uploads/eu08design/body_left.png) no-repeat; }
#body div div { background: transparent url(/uploads/eu08design/body_right.png) no-repeat 100% 0%; height: 1%; padding: 0 20px 30px; }
* html #body div div { width: 100%; }
#body div div:after	{ 
	content: "."; 
	display: block; 
	clear: both; 
	visibility: hidden; 
	height: 0;
	}	
#body div div div { background-image: none; padding: 0; }

/*------------------------------------------------------------*
**  Content
**------------------------------------------------------------*/
#body #content { 
	float: right; 
	height: auto !important;
	min-height: 300px; 
	height: 300px;
	width: 475px;
	background: #fff url(/uploads/eu08design/content_shadow.png) no-repeat;	
	padding: 23px 25px 0 38px;
	}
#body #content ul.img { list-style-type: none; padding: 0; margin: 0; width: 100%; }	
#body #content ul.img:after	{ 
	content: "."; 
	display: block; 
	clear: both; 
	visibility: hidden; 
	height: 0;
	}	
#body #content ul.img li { float: left; margin-left: 10px; margin-bottom: 10px; padding: 0; background: transparent; }
#body #content ul.img li a { border: none; }
#body #content ul.img li img { border: 7px solid #900; padding: 1px; }	
#body #content ul.img li a:hover img { border-color: #000; }	


form { background-color: #f4f4f4; padding: 20px; margin-top: 20px;  }
form p { margin: 10px 0; }
form p label { width: 100px; display: block; float: left; }
form p input, 
form p textarea { border: 1px solid #999; padding: 4px; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 1.3em; width: 240px; }
textarea { height: 100px; } 
input.btn { width: auto; }
	
/*------------------------------------------------------------*
**  Breadcrumb
**------------------------------------------------------------*/
#body #content .breadcrumb {  
	background-color: #600; 
	background-repeat: repeat-y; 
	margin-bottom: 20px;
	}

/** specific pages **/
#body #content .home { background-image: url(/uploads/eu08design/header_tent.jpg); }
#body #content .about { background-image: url(/uploads/eu08design/header_about.jpg); }
#body #content .services { background-image: url(/uploads/eu08design/header_services.jpg); }
#body #content .portfolio { background-image: url(/uploads/eu08design/header_portfolio.jpg); }
#body #content .contact { background-image: url(/uploads/eu08design/header_contact.jpg); }

/*------------------------------------------------------------*
**  Submenu
**------------------------------------------------------------*/
#body #sub { 
	float: left; 
	margin: 33px 0 0 0;		
	background-color: #fff; 
	height: auto !important;
	min-height: 267px; 
	height: 267px;
	width: 172px;
	padding: 20px 10px 0 20px;
	}

#body #sub ul.sponsor { list-style-type: none; padding-left: 0px; }	
#body #sub ul.sponsor:after	{ 
	content: "."; 
	display: block; 
	clear: both; 
	visibility: hidden; 
	height: 0;
	}	
#body #sub ul.sponsor li { float: left; padding: 0; background-image: none; }
#body #sub ul.sponsor li a { border: none; }
#body #sub ul.sponsor li img { border: 0px solid #900; padding: 1px; }	
#body #sub ul.sponsor li a:hover img { border-color: #000; }

heiko_rs · #3 (**permalink**) 19.02.2008, 17:08

Ich positioniere BG-Grafiken von li immer mit top-Position in em, da die Grafik dann bei Textvergr. weitgehend mit nach unten wandert, ohne (wie bei 50% o.ä.) bei mehreren Zeilen plötzlich zwischen denselben zu stehen.

Für die Unterseiten nimmst Du den Nachfahrenselektor, Prinzip li li { ... }.

fricca · #4 (**permalink**) 19.02.2008, 17:08

Die Aufzählungszeichen sind Hintergrundbilder. Dafür gibt es die Eigenschaft background-position.
Das von dir gepostete Stylesheet ist nicht dasjenige, das für die Darstellung der Liste verantwortlich ist.

mantiz · #5 (**permalink**) 19.02.2008, 17:12

Witzig finde ich ja, dass in dem CSS, welches Du postest der erforderliche Teil gar nicht vorhanden ist.

Du hast

Code:

ul li { background: url(/uploads/eu08design/bullet.gif) no-repeat 0% 52%; padding-left: 25px; }

in Deinem CSS stehen, wo Du explizit angibst, dass die Hintergrundgrafik bei 52% Höhe beginnen und damit quasi mittig dargestellt werden soll.
Ändere die 52% in z.B. top, oder 10px oder was Dir gerade gefällt, dann passt's.

// Edit:
Ups, da waren gleich 2 schneller als ich.

snowbound_ch · #6 (**permalink**) 19.02.2008, 18:10

Jepp sorry, hier noch das komplette CSS:

Code:

body {
	background: #600 url(/uploads/eu08design/bg.png) repeat-x;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 83%; 
	text-align: center;
	margin: 0; 
	padding: 0;
	color: #555;
	}
img { border: 0; }
ul, 
p { line-height: 1.4em; font-size: 1em; margin: 15px 0 20px; }
h2 { margin: 0; color: #fff; font-weight: normal; padding: 45px 170px 47px 30px; font-size: 1.9em; }
h3, h4 { font-size: 2em; font-weight: normal; color: #000; margin: 0; }
h4 { font-size: 1.7em; }
a { color: #f00; text-decoration: none; border-bottom: 1px solid #FFC4C4; }		
a:hover { border-color: #f00; }
.l1 { border: none !important; margin: 0 !important; }

ul { 
	padding: 0;
	list-style-type: none;
	line-height: 1.8em;
	}
ul li { background: url(/uploads/eu08design/bullet.gif) no-repeat 0% 52%; padding-left: 25px; }
		
/*------------------------------------------------------------*
**  Container
**------------------------------------------------------------*/		
#container {
	width: 780px;
	margin: 0 auto;
	text-align: left;
	}
* html #container { width: 740px; }	
	
/*------------------------------------------------------------*
**  Header
**------------------------------------------------------------*/			
#header { width: 780px; }
#header:after	{ 
	content: "."; 
	display: block; 
	clear: both; 
	visibility: hidden; 
	height: 0;
	}
#header h1 { font-weight: normal; font-size: 2em; padding: 1.2em 0 28px 1.1em; margin: 0; font-family: Verdana, Arial;}
#header h1 a { color: #fff; text-decoration: none; border: none; }
#header h1 a span {
	color: #f00;
}

/** Navigation **/
#header ul {
	margin: -6.9em 0 0 0; 
	padding: 0 10px;
	list-style-type: none;
	float: right;
	}
* html #header ul { padding: 0; }	
#header ul li { 
	float: left;
	text-align: center;
	margin: 0 10px;
	background: transparent;
	padding: 0;
	}	
#header ul li a { 
	display: block; 
	text-decoration: none; 
	color: #fff; 
	font-size: 1.2em; 
	padding: 2em 10px; 
	border-bottom: 0.3em solid #3F0000; 
	}	
#header ul li a:hover { border-color: #f00; }	
#header ul li a.on,
#header ul li a.on:hover { border-color: #fff; }		

/*------------------------------------------------------------*
**  Body
**------------------------------------------------------------*/
#body { background: #fff url(/uploads/eu08design/body_.png) repeat-x; }
#body div { background: transparent url(/uploads/eu08design/body_left.png) no-repeat; }
#body div div { background: transparent url(/uploads/eu08design/body_right.png) no-repeat 100% 0%; height: 1%; padding: 0 20px 30px; }
* html #body div div { width: 100%; }
#body div div:after	{ 
	content: "."; 
	display: block; 
	clear: both; 
	visibility: hidden; 
	height: 0;
	}	
#body div div div { background-image: none; padding: 0; }

/*------------------------------------------------------------*
**  Content
**------------------------------------------------------------*/
#body #content { 
	float: right; 
	height: auto !important;
	min-height: 300px; 
	height: 300px;
	width: 475px;
	background: #fff url(/uploads/eu08design/content_shadow.png) no-repeat;	
	padding: 23px 25px 0 38px;
	}
#body #content ul.img { list-style-type: none; padding: 0; margin: 0; width: 100%; }	
#body #content ul.img:after	{ 
	content: "."; 
	display: block; 
	clear: both; 
	visibility: hidden; 
	height: 0;
	}	
#body #content ul.img li { float: left; margin-left: 10px; margin-bottom: 10px; padding: 0; background: transparent; }
#body #content ul.img li a { border: none; }
#body #content ul.img li img { border: 7px solid #900; padding: 1px; }	
#body #content ul.img li a:hover img { border-color: #000; }	


form { background-color: #f4f4f4; padding: 20px; margin-top: 20px;  }
form p { margin: 10px 0; }
form p label { width: 100px; display: block; float: left; }
form p input, 
form p textarea { border: 1px solid #999; padding: 4px; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 1.3em; width: 240px; }
textarea { height: 100px; } 
input.btn { width: auto; }
	
/*------------------------------------------------------------*
**  Breadcrumb
**------------------------------------------------------------*/
#body #content .breadcrumb {  
	background-color: #600; 
	background-repeat: repeat-y; 
	margin-bottom: 20px;
	}

/** specific pages **/
#body #content .home { background-image: url(/uploads/eu08design/header_tent.jpg); }
#body #content .about { background-image: url(/uploads/eu08design/header_about.jpg); }
#body #content .services { background-image: url(/uploads/eu08design/header_services.jpg); }
#body #content .portfolio { background-image: url(/uploads/eu08design/header_portfolio.jpg); }
#body #content .contact { background-image: url(/uploads/eu08design/header_contact.jpg); }

/*------------------------------------------------------------*
**  Submenu
**------------------------------------------------------------*/
#body #sub { 
	float: left; 
	margin: 33px 0 0 0;		
	background-color: #fff; 
	height: auto !important;
	min-height: 267px; 
	height: 267px;
	width: 172px;
	padding: 20px 10px 0 20px;
	}

#body #sub ul.sponsor { list-style-type: none; padding-left: 0px; }	
#body #sub ul.sponsor:after	{ 
	content: "."; 
	display: block; 
	clear: both; 
	visibility: hidden; 
	height: 0;
	}	
#body #sub ul.sponsor li { float: left; padding: 0; background-image: none; }
#body #sub ul.sponsor li a { border: none; }
#body #sub ul.sponsor li img { border: 0px solid #900; padding: 1px; }	
#body #sub ul.sponsor li a:hover img { border-color: #000; }

snowbound_ch · #7 (**permalink**) 19.02.2008, 18:20

Hat alles geklappt DANKE!!!

Ausser jemand möchte mir noch helfen das li li zu positionieren, oder sind die Abstände fest gegeben? nach oben und links meine ich...

mantiz · #8 (**permalink**) 19.02.2008, 18:21

Die betreffende Stelle habe ich Dir oben doch schon genannt.

// Edit:
Nen kleinen Tacken zu langsam.

Das andere Prob kann ich mir evtl. später ansehen, jetzt gerade hab' ich keine Lust, da bin ich ehrlich.

mantiz · #9 (**permalink**) 19.02.2008, 18:35

OK, hab' mir nochmal durchgelesen, was Du überhaupt willst, das kannst Du (wie Heiko bereits geschrieben hat) ganz einfach mit

Code:

ul li li { background-image: url(/uploads/eu08design/bullet2.gif); }

erreichen.
Habe hier nur das background-image angegeben, weil die anderen Angaben, wie no-repeat, Positionierung, etc. dann von "ul li" geerbt werden, da es wahrscheinlich sowieso die gleichen sind, kann man sich hier etwas Arbeit ersparen.

snowbound_ch · #10 (**permalink**) 19.02.2008, 19:25

Jap Danke, das weis ich schon alles meine Frage gilt dem Abstand von links mit padding 0px ist der schon ziemlich gross vorallem auch zum übergreifendem Reiter (also ul li), wie kann man den verringern?

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Ausrichtung eines PopUp-Menüs	Maik20b	CSS	4	07.11.2010 20:11
Aufzählungszeichen im Firefox unterschiedlich groß	Unwritten	CSS	7	24.06.2009 10:03
Problem mit der Ausrichtung im IE8	DaveX	CSS	3	21.03.2008 21:45
Ausrichtung, Aufteilung, CSS - Brauche Hilfe	daFish	CSS	0	05.04.2006 12:12
Vertikale sowie horizontale Ausrichtung einer Box	sancho	CSS	4	29.09.2005 15:16