|
|||
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>"Big Surf Summer", 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:
Geändert von franksauerdesign (26.01.2008 um 13:01 Uhr) |
Sponsored Links |
|
||||
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 |
Sponsored Links |
|
|||
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; } |
|
|||
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; } 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> |
|
|||
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> Code:
<div id="content"><a href="ziel.html"><img src="images/image_654x276.png" alt="Ziel" width="654" height="276" border="0" /></div> 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 |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |