zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden ul li - Abstandsprobleme

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.01.2008, 02:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.01.2008
Beiträge: 15
franksauerdesign befindet sich auf einem aufstrebenden Ast
Standard ul li - Abstandsprobleme

Hi, ich habe ein Problem bzgl. dem Abstand zwischen einem list-Text ("Big Surf Summer...")und einer nachfolgenden Grafik (gepunktete Linie). Ich will das die Grafik bündig, bzw. 4px (z.B. "padding-bottom: 4px;") anschließt. Momentan hat sie mehr als 4px und ich weiss einfach nicht, wie ich den Abstand kleiner bekomme!

Link
frank-sauer.com

Es wäre toll, wenn mir jemand weiterhelfen könnte.

html:
Code:
<div id="header">
		<ul id="Navigation_1">
			<li>&quot;Big Surf Summer&quot;, Extreme Sports Channel</li>
		</ul>
  

	<ul id="Navigation_3">
		<li>
  			<div align="right"><a href="links/spotlink.html" target="_parent" class="links"> + Play Spot</a></div>
		</li>
	</ul>
</div> 
 


<div id="info_text">
	<div id="line_654x2_2"><img src="http://xhtmlforum.de/images/line_654x2.png" border="0" /></div>	
	<div id="info">Agency: Developed at <a href="http://www.frank-sauer.com" target="_parent" class="links">Jellyfish Pictures</a> in cooperation with FP-Filmproduktion</div>
	<div id="info">Description: TV-Spot including Promo and Trailer</div>	
	<div id="info">Role: concept, design & animation</div>	
</div>

CSS:

Zitat:
@charset "utf-8";
/* CSS Document */

body {
background-color: #faf9ed;}

.links:hover {
color: #383838;
/*text-decoration: underline;*/
/*border-bottom: 2px solid #f92452;*/
}

a {
text-decoration: none;
color: #f92452;
}

#line_654x2 {
width: 654px; height: 2px;
margin-left: 50px; padding-bottom: 30px;
display:block;
}

#info_text {
width: 654px;
margin-left: 50px; padding-top: 10px; padding-bottom: 2px;
display:block;
}

#info {
width: 648px;
font-family: Arial, Helvetica, sans-serif; color: #383838; letter-spacing: -0,5em; font-size: 12px; font-weight:bold;
padding-top: 2px; padding-left: 6px;
display:block;
}


#header {
width: 654px;
margin-left: 50px; min-width: 650px; padding-top: 16px;
display:block;
}

ul#Navigation_1 {
font-family: Arial, Helvetica, sans-serif; color: #383838; letter-spacing: -0,5em; font-size: 20px; font-weight:bold;
margin: 0; padding: 0; border: 0;
float: left; width: 22em;
list-style: none;
display:block;
}

ul#Navigation_3
{
font-family: Arial, Helvetica, sans-serif; color: #383838; letter-spacing: -0,5em; font-size: 20px; font-weight:bold;
float: left; width: 10.5em;
margin: 0; padding: 0; border: 0;
padding-bottom: 0px;
list-style: none;
display:block;
}

Geändert von franksauerdesign (26.01.2008 um 13:01 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.01.2008, 09:33
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Dem LI auch die Abstände auf 0 setzen inkl. line-height: 1; ?
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.01.2008, 13:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.01.2008
Beiträge: 15
franksauerdesign befindet sich auf einem aufstrebenden Ast
Standard

Hi, danke für deine Antwort. Ich habe das CSS mit den folgenden "li" ergänzt, was jedoch nur eine minimale Änderung bewirkt hat! Kannst du mir sagen, was genau ich definieren muss, damit ich den Abstand geringer gestalten kann?

CSS-Ergänzung

Code:
li {
margin: 0; padding: 0; border: 0;
line-height: 1;
display:block;
padding-bottom: 0px; 
}
Mit Zitat antworten
  #4 (permalink)  
Alt 26.01.2008, 13:28
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Als erstes solltest Du validieren, dann clearen (das div mit der Grafik folgt auf Floats), und dann die Deko-Grafik (der display: block; fehlt) ins CSS schreiben. Außerdem siehe FAQ (oberster Thread) "CSS-Prolog".
Mit Zitat antworten
  #5 (permalink)  
Alt 03.02.2008, 17:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.01.2008
Beiträge: 15
franksauerdesign befindet sich auf einem aufstrebenden Ast
Standard

Hi, danke für die letzten Tipps. Ich habe es schließlich geschafft, mein geplantes Design umzusetzen. Bis auf "letter-spacing" ist alles validiert und clear. Ich habe aber jetzt ein browserspezifisches Problem bzgl. "border-bottom" im IE. Normalerweise wird bei "border-bottom" im IE ja nicht angezeigt (z.B. ein rollOver-Balken), was ich auch in Kauf nehme. Ich habe jedoch ganz oben in meinem Design ein javascript gif-rollOver, dass bei "a:hover img" auch mitaktiviert. Was in Firefox, Safari, etc. kein Problem ist, stellt IE den Balken plötzlich dar. Jedoch wird er nicht unter dem gif dargestellt, sondern integriert sich quasi in das gif-div und verursacht so eine Stauchung des gif-Bildes.

Wie kann ich die richtige nichtgestauchte Darstellung erreichen?
Warum zeigt er mir im IE überhaupt ein border-bottom beim gif an, aber nicht beim großen Bild?

Wenn es ginge würde ich gerne die border-bottom (für firefox etc.) "a:hover img" für die großen Bilder beibehalten und das gif ausschließen! Wie kann ich es erreichen, dass das gif nicht über img definiert wird?

LINK
FS - frank-sauer.com

CSS
Code:
	* {
		margin: 0px;
		padding: 0px;
	}

	body {
		font-family: Arial, Helvetica, sans-serif;
		background-color: #faf9ed;
		margin: 5px;
		padding: 0px;
		font-size: 100.01%
	}
	
	.clear {
		clear:both;
		font-size:1px;
		line-height:0px;
		margin-top:-1px;
	}
	
		a:hover img {
		text-decoration: underline;
		border-bottom: 4px solid #f92452;
	}
	
		.links:hover {
		color: #0992c6; 
	}

	a {
		text-decoration: none; 
		color: #f92452; 
	}
	
	/*
	#oml-wrapper {
		margin:0px;
		width:20em;
		border:0em solid #666;
		text-align:left;
		background: #333; 
	*/
	
	#line_654x2 {
		width: 654px; height: 2px;
		margin-left: 0px; padding-bottom: 26px; 
		display:block;
	}
	
	#line_654x6 {
		width: 654px; height: 6px;
		margin-left: 0px; padding-bottom: 18px;
		display:block;
	}
	
	#reel{
		width: 644px; height: 40px;
		margin-left: 0px; padding-top: 0px; padding-bottom: 18px; padding-left: 10px;
		display:block;
	}
	
	#content {
		height:276px; width: 654px;
		margin-left:0px;
		padding-bottom: 8px;
		display:block;
	}

	
	.oml-main {
		width:654px; /*width to right */
		position:relative;
		top:0em;
		left:0em;
		margin-right: 0em;
		margin-left: 0em;
	}
	
	.oml-c1 {
		font-family: Arial, Helvetica, sans-serif; color: #383838; letter-spacing: -0,5em; font-size: 20px; font-weight:bold; display: block;
		width:542px;
		position:relative;
		top:0em;
		left:0em; /* left:-11.25em; */
		float:left;
		padding-bottom:2px;
	}
	
	.oml-c2 {
		font-family: Arial, Helvetica, sans-serif; color: #383838; letter-spacing: -0,5em; font-size: 20px; font-weight:bold; display: block;
		position:relative;
		top:0px;
		left:0em;
		width:112px;
		margin-left:0px;
		float:left;
		padding-bottom:2px;
	}

		#line_654x2_2 {
		width: 654px; height: 0px;
		margin-left: 0px; padding-bottom: 7px; 
		display:block;
	}
	

	#info_text {
		width: 654px;
		margin-left: 0px; padding-top: 0px; padding-bottom: 5px;
		display:block;
	}

	#info {
		width: 654px;
		font-family: Arial, Helvetica, sans-serif; color: #383838; letter-spacing: -0,5em; font-size: 12px; font-weight:bold;
		padding-top: 0px; padding-left: 0px;
		display:block;
	}
	
	#line_654x6_2 {
		width: 654px; height: 6px;
		margin-left: 0px; padding-bottom: 52px;
		display:block;
	}
HTML
Code:
<!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=iso-8859-1" />
<title>FS - frank-sauer.com</title>

<script language="JavaScript">
<!--
browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);
if (browser_name == "Netscape" && browser_version >= 3.0)
{ rollover = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 4.0)
{ rollover = 'true'; }
else { rollover = 'false'; }
if (rollover == 'true') {
grafik1=new Image();grafik1.src="images/rot.gif";
grafik2=new Image();grafik2.src="images/blau.gif";
}
function rein1(img,ref) { if (rollover == 'true') { document.images[img].src = ref; } }
function raus1(img,ref) { if (rollover == 'true') { document.images[img].src = ref; } }
//-->
</script>

<script type="text/javascript" src="js/filler.js"></script>
<script type="text/javascript">
	window.onload=function(){ AddFillerLink("oml-1","oml-2","oml-3"); }
</script>
<style type="text/css" media="screen">
	@import url("mainstyle.css");
</style>
</head>

<body>
<!-- <div id="oml-wrapper"> -->
	
    
    
    <div id="reel">
		<a href="ziel.htm" 
			onMouseOver="rein1('platzhalter1',grafik2.src);"
			onMouseOut="raus1('platzhalter1',grafik1.src);">
			<img src="images/rot.gif" width="197" height="40" border="0" name="platzhalter1" alt="Es klappt" target="_parent" >
		</a>
	</div>
    
    <div id="line_654x2"><img src="images/line_654x2.png" border="0" /></div>
    
    <div id="line_654x6"><img src="images/line_654x6.png" border="0" /></div>
    
    <div id="content"><a href="#"><img src="images/image_654x276.png" border="0" /></a></div>
    
    <div class="oml-main">
	
		<div class="oml-c1" id="oml-1">
			"Big Surf Summer", Extreme Sports Channel
	  	</div>
		
		<div class="oml-c2" id="oml-2">
			<a href="links/spotlink.html" target="_parent" class="links"> + Play Spot</a>
		</div>
		
	
		<br class="clear" />
	</div>
<!-- </div> -->

<div id="line_654x2_2"><img src="images/line_654x2.png" border="0" /></div> 

<div id="info_text">
	<div id="info">Agency: Developed at <a href="http://www.frank-sauer.com" target="_parent" class="links">Jellyfish Pictures</a> in cooperation with FP-Filmproduktion</div>
	<div id="info">Description: TV-Spot including Promo and Trailer</div>	
	<div id="info">Role: concept, design & animation</div>	
</div>

<div id="line_654x6_2"><img src="images/line_654x6.png" border="0" /></div>

</body>
</html>
Mit Zitat antworten
  #6 (permalink)  
Alt 05.02.2008, 23:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.01.2008
Beiträge: 15
franksauerdesign befindet sich auf einem aufstrebenden Ast
Standard

Hi, leider hat bisher noch niemand geantwortet, daher nochmal die Frage, ob jemand eine Lösung für das genannte Problem kennt?

Ich bin dankbar für jeden Tipp oder Link.
Mit Zitat antworten
  #7 (permalink)  
Alt 08.02.2008, 03:05
Neuer Benutzer
neuer user
 
Registriert seit: 23.01.2008
Ort: Bad Tölz
Beiträge: 6
da`email befindet sich auf einem aufstrebenden Ast
Idee mein Lösungsansatz

Hallo Frank,
Hallo Community,

das ist mein erster Post an diesem Board. Ich hoffe ich kann helfen.
Ich möchte ja auch dass mir geholfen wird.

Kurz zu mir: Ich selbst bin noch blutiger Anfänger. Bin seit knapp 3 Wochen, so Freundin und Arbeit es zulassen, dabei html / css zu "lernen" ( learning by doing oder trial and error ).

So das zu mir, jetzt zu Frank's Problem. Ich hab das mal als kleine Denksportaufgabe genutzt. Bei mir hat es funktioniert, ob es stilistisch einwandfrei ist müssen andere entscheiden.

HTML:
So dann ... Ersetze
Code:
<div id="content"><a href="#"><img src="images/image_654x276.png" border="0" /></a></div>
erstmal mit
Code:
<div id="content"><a href="ziel.html"><img src="images/image_654x276.png" alt="Ziel" width="654" height="276" border="0" /></div>
und pass den Link und den alt Text noch an.

Ist zwar nicht zwingend aber so wie ich es weiß gehört es einfach dazu
die Attribute mit anzugeben, oder?

CSS:
Das Style von dir
a:hover img {
text-decoration: underline;
border-bottom: 4px solid #f92452;
}

macht dir an jedes verlinkte img einen roten unteren rand beim hovern.
Da du es ja aber nur an dem großen haben willst musst du es auch einzeln, und vor allem richtig, ansprechen.

#content a:hover { border-bottom: 4px solid #f92452; }

Ich hoffe das ist so richtig und es hilft dir weiter.
Bei mir hat es jedenfalls funktioniert.

gReez
Mit Zitat antworten
  #8 (permalink)  
Alt 08.02.2008, 12:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.01.2008
Beiträge: 15
franksauerdesign befindet sich auf einem aufstrebenden Ast
Standard

Besten Dank da`email, klappt wunderbar. Rock on...
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Abstandsprobleme im IE7 cabotine CSS 3 14.08.2008 18:15
zwei Spalten layout, IE Abstandproblem paramit CSS 2 03.07.2008 14:05
Abstandsprobleme ollie75 CSS 1 14.11.2005 11:10


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:42 Uhr.