Problem mit der Breite "Menu"
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abstand
august
bild
blocken
code
display
fenster
http
index
kulisse
list
papierkorb
pixel
position
relative text
schieben
stellen
text
type
url
-
Hallo,
ich möchte den Abstand zwischen den Bildern auf 120px stellen, habe es schon probiert, funktioniert aber nicht, da verschiebt es mir alles. Hier die Bilder: http://wakeboarder.lima-city.de/
Code:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <link type="text/css" rel="stylesheet" href="http://wakeboarder.lima-city.de/css/main.css"> <style type="text/css"> .teaser_content_navigation ul { list-style-type: none; padding-left: 10px; margin: 0px; } .teaser_content_navigation li { display: block; line-height: 15px; font-style: bold; color:#CCC } </style> <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script> <![endif]--> </head> <body> <div id="teaser_holder"> <div class="teaser_content"> <div class="teaser_content_image"> <img style="border: 0px solid ; width: 250px; height: 145px;" alt="" src="http://www.wakeboarder.lima-city.de/images/www/Bild3.jpg"> <br style="color: rgb(255, 0, 0);"> <span style="color: rgb(255, 0, 0);">> Clubnight // 21. August</span> </div> </div> <div class="teaser_content"> <div class="teaser_content_image"> <img style="border: 0px solid ; width: 250px; height: 145px;" alt="" src="http://www.wakeboarder.lima-city.de/images/www/Bild3.jpg"> <br style="color: rgb(255, 0, 0);"> <span style="color: rgb(255, 0, 0);">> Clubnight // 21. August</span> </div> </div> <div class="teaser_content"> <div class="teaser_content_image"> <img style="border: 0px solid ; width: 250px; height: 145px;" alt="" src="http://www.wakeboarder.lima-city.de/images/www/Bild3.jpg"> <br style="color: rgb(255, 0, 0);"> <span style="color: rgb(255, 0, 0);">> Clubnight // 21. August</span> </div> </div> </div> </body> </html>
CSS:
.teaser_holder { position: fixed; bottom: 10px; width: 1000px; height: 330px; margin-left: -500px; left: 50%;} .teaser_background { position: fixed; bottom: 10px; width: 1000px; height: 125px; margin-left: -500px; left: 50%; background-color: #333; z-index:110; } .teaser_content {position: relative; top: 45px; width: 262px; z-index:120; float:left; text-transform: uppercase; font-size: 9px; margin-left: 53px;} .teaser_content_image {position: relative; padding:6px 6px 14px 6px; background-color: #000; font-size: 11px; } .teaser_content img { margin-bottom: 4px; } .teaser_content_navigation { margin: 6px 2px 0px 6px; font-size: 11px; } .teaser_content_navigation ul { list-style-type: none; padding-left: 10px; margin: 0px; } .teaser_content_navigation li { display: block; line-height: 15px; font-style: bold; color:#CCC } -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du musst das margin-left von .teaser_content auf 120px ändern:
.teaser_content { float:left; font-size:9px; margin-left:120px; position:relative; text-transform:uppercase; top:45px; width:262px; z-index:120; }
Gruß
illuxio
Beitrag zuletzt geändert: 23.8.2010 17:42:13 von illuxio -
Bilder = 250px breit
zwischenraum= 3 x 120 (bei content margin-left)
250*3+120*3 = 1110 pixel breit
Wenn Du nur 2*120 haben willst:
.teaser_content {position: relative; top: 45px; width: 262px; z-index:120; float:left; text-transform: uppercase; font-size: 9px; margin: 0 ;}
mittle "teaser_content"
<div class="teaser_content" style="margin-left: 120px; margin-right: 120px;">
Schau hier.
Mach dabei aber mal das Fenster klein, das die Bilder dabei umbrechen ist Dir bewusst?
Beitrag zuletzt geändert: 23.8.2010 18:11:31 von simuliertes -
Perfekt funktioniert, Danke.....
So habe ich es:
.teaser_holder { position: fixed; bottom: 10px; width: 1000px; height: 330px; margin-left: -500px; left: 50%;} .teaser_background { position: fixed; bottom: 10px; width: 1000px; height: 125px; margin-left: -500px; left: 50%; background-color: #333; z-index:110; } .teaser_content {position: relative; top: 45px; width: 262px; z-index:120; float:left; text-transform: uppercase; font-size: 9px; margin-left: 120px;} .teaser_content_image {position: relative; padding:6px 6px 14px 6px; background-color: #000; font-size: 11px; } .teaser_content img { margin-bottom: 4px; } .teaser_content_navigation { margin: 6px 2px 0px 6px; font-size: 11px; } .teaser_content_navigation ul { list-style-type: none; padding-left: 10px; margin: 0px; } .teaser_content_navigation li { display: block; line-height: 15px; font-style: bold; color:#CCC } body { width:1500px; }
das sich die Bilder nicht untereinander schieben aber wie hoch muss width:1500px sein?
Beitrag zuletzt geändert: 23.8.2010 19:45:13 von wakeboarder -
wakeboarder schrieb:
das sich die Bilder nicht untereinander schieben aber wie hoch muss width:1500px sein?
Du meinst wohl wie breit die Gesamtlänge ist (?)
Wenn ich mich nicht täusche:
Bilder: je 250px breit
teaser_content_image: margin-left/right: je 6 px = 12 pro Bild
abstand: 3 x 120
(250 x 3)+(120 x 3)+(12 x 3)=1146 px
Da einige browser automatisch noch Rahmen machen:
body { width:1146px; margin: 0;}
müsste gehen, kann sein das ich aber was übersehen habe.
Edit: Ja geht hab's kurz mit firebug getestet.....
" Links für Dich um mal ein bisschen "hinter die Kulissen " deiner Seite zu gucken:
X-Ray
FIrebug
Beitrag zuletzt geändert: 23.8.2010 23:51:46 von simuliertes -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
