Navigation unter 3 Bildern

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

21:02, 23.8.2010

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:

<!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:

.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.

Beitrag zuletzt geändert: 23.8.2010 21:05:25 von wakeboarder

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
~~m**********n~~

12:44, 24.8.2010
Wenn ich dich richtig verstanden habe, möchtest du die Navigationselemente auf der ganzen Breite verteilen, das geht so:

per jquery:
1. die Breite der Navigation auslesen
2. die Breite durch die Anzahl der (Links * 2) teilen
3. dann mit .css() bei padding-left und padding-right den oben errechneten Wert einfügen

PS: Es ist immer hilfreich, den kompletten Source bzw. einen Link zur Seite, die nicht passwortgeschützt ist, hinzuzufügen. Dein Source sieht nämlich so aus: Klick
~~w******s~~

18:15, 25.8.2010
Hallo wakeboarder,

wenn ich dich richtig verstanden habe, suchst du lediglich jemanden, der dir eine kostenlose Service-Leistung anbietet! Das ist meine Erachtens nach falsch in einem Forum. Entweder du gibst dir etwas Mühe und bastelst erstmal selbst die Navigation zusammen und fragst dann bei konkreten Problemen - oder du lässt es eben sein. Im Netz gibt es genügend Informationen, um eine solche Leiste zu basteln. Auf einschlägige Tutorials brauche ich hier nichtmal verweisen, da die Seiten sowieso bekannt sind. Wenn du hier einen sinnvollen Ansatz vorweist mit konkreten Problem wird dir auch sicherlich geholfen.

mator-kaleen schrieb: per jquery:
1. die Breite der Navigation auslesen
2. die Breite durch die Anzahl der (Links * 2) teilen
3. dann mit .css() bei padding-left und padding-right den oben errechneten Wert einfügen
Das ist doch unnötig ein Framework zu benutzen, wenn es sich lediglich um HTML/CSS Arbeit handelt.
Im Prinzip würde also ein einfaches div mit Listenelementen reichen, die dann mit CSS anordnen und entsprechend formatieren. Ich denke es soll so wie im Bild aussehn - also nicht drei einzelne Menüs.
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city