• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS + HTML Navigation unter den 3 Bildern

E

europachat

Neues Mitglied
Hallo,

ich möchte diese Navigation, wie auf dem Screen zu sehen ist unter den 3 Bildern machen in der gleichen Breite wie die Bilder oben sind. http://wakeboarder.lima-city.de/Bild33.jpg

EDIT: Farbe der Navigation (Hintergrund) #EEEEEE

Hier ist der Quellcode.

HTML:

Code: 
<!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);">&gt;&nbsp;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);">&gt;&nbsp;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);">&gt;&nbsp;Clubnight // 21. August</span>
          </div>
     </div>
</div>

</body>
</html>

CSS:

Code: 
.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; }

Wie mache ich das am besten, könnte mir jemand bitte helfen?


Gruß Markus.
 
Werbung:
Willkommen im Forum.
Du setzt deine Navigation in den Container "teaser_holder" unter die drei Boxen und gibst ihr auf jeden Fall die Eigenschaften

Code: 
width: 100%; clear: both;
und die übrigen Formatierungen. Dann ist sie schonmal unter den Boxen.
Oder du setzt die Navigation unter den Container "teaser_holder" und machst ihn genauso breit wie "teaser_holder".

Übrigens macht man Abstände mit margin und padding und nicht mit Positionierung.

EDIT: Der Seite eine Breite von 1500px zu geben ist nicht gut. bei kleineren Auflösungen (z.B. 1024px Breite) oder alles unter 1500px bekommt horizontale Scrollbalken.

lg
kruschimappel
 
Zuletzt bearbeitet:
Habe jetzt statt 1500 das:

3 * 262px + 3 * 120px = 1146px

Ich komm mit der Navigation darunter nicht ganz klar, wie soll ich das einbinden, bei mir verschiebt sich alles. Ich check seit gestern gar nichts mehr. :neutral:

Akuteller Code:

HTML:

PHP: 
<!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);">&gt;&nbsp;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);">&gt;&nbsp;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);">&gt;&nbsp;Clubnight // 21. August</span>
          </div>
     </div>
</div>
</body>
</html>

CSS:

PHP: 
.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:1146px; margin: 0;}
 
Zuletzt bearbeitet:
Werbung:
Warum kopierst du den gleichen Code nochmal hier rein?
Da ist immer noch nichts von deinen Versuchen, die Navigation einzubinden, zu sehen.
Was ist, wenn jemand eine Auflösung mit 1024px Breite hat? Oder 800px? Flexible Layouts sind i.d.R. besser ;)
Und am besten, du stellst eine "Live"-Version auf http://wakeboarder.lima-city.de/ online. Das ist dann für uns im Forum leichter zu untersuchen (z.B. mit Firebug).
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben