Zum Inhalt springen

Zentrieren von Div-Containern

RastaROCKET

Von RastaROCKET
in Webdesign

 Teilen

Empfohlene Beiträge

RastaROCKET

RastaROCKET

Geschrieben
Geschrieben

Hallo Gemeinde!

Ich hab ein wahrscheinlich recht simples Problem, aber ich komm einfach nicht auf die Lösung. Evtl. hab ich mich schon total verhtmlt... Ich will die drei Icons in der Subnavigation dieser Seite zentrieren, aber ich schaff es einfach nicht.


<div id="SubNavigation">

  <div style="margin:0 auto;">

     <ul>

       <li class="subTitle">

         <div class="projectNavIcon" >

           <a title="" href="#"> </a>

         </div>

       </li>

     </ul>  

     <ul>

       <li class="subTitle">

         <div class="projectNavIcon" >

           <a title="" href="#"> </a>

         </div>

       </li>

     </ul>    

  </div>  

</div>
Das umschließende Div hat die ID #SubNavigation. Hier hab ich text-align:center angegben. Ich dacht jetzt dass das DIV um die uls diese doch zentrieren müsste. Steh irgendwie auf dem Schlauch. 

#SubNavigation

{	

	width:758px;				

	text-align:center;

}


#SubNavigation ul

{

	list-style:none;

	margin:0px;

	padding:0px;	

}

Die Listen brauche ich, da ich eigentlich, bei Mousover über einem Subnavigationspunkt unter diesem, den Titel des aktuellen Kontext anzeigen wollte. Also z. B. so:

subnav.jpg

Wenn ihr eine bessere Idee habt würde ich mich freuen!

Vielen Dank schon mal!

Gruß,

Kristof

Link zu diesem Kommentar
Auf anderen Seiten teilen
forTeesSake

forTeesSake

Geschrieben
Geschrieben

Oh ja, das verstehe ich.

Da gibt es wohl ein Problem mit dem ""text-align: center" und dem float Deiner <ul>

Alternativ würde ich die ganzen <ul> und <li> einfach weglassen, und nur Deine <a> nacheinander schreiben. Dann ist auch alles zentriert. Und die "onmouserver()" Anweisungen kannst Du ja auch in die <a> mit rein packen.

also in etwa (nicht vollständig)


<div id="SubNavigation">

  <div style="text-align:center;">

       <a href="/aktuell/0815/onlinegang/" onmouseover="" onmouseout="" title="Projekt Neues von der Homepage"> </a>

       <a href="/aktuell/0815/onlinegang/" onmouseover="" onmouseout="" title="Projekt Neues von der Homepage"> </a>

       <a href="/aktuell/0815/onlinegang/" onmouseover="" onmouseout="" title="Projekt Neues von der Homepage"> </a>

  </div>

  <div style="clear:both;"></div>

</div>

Link zu diesem Kommentar
Auf anderen Seiten teilen
RastaROCKET

RastaROCKET

Geschrieben
  • Autor
Geschrieben

Ja, das sollte funktionieren, danke!

Die Liste hatte ich ursprünglich hierfür gebraucht:

Die Listen brauche ich, da ich eigentlich, bei Mousover über einem Subnavigationspunkt unter diesem, den Titel des aktuellen Kontext anzeigen wollte. Also z. B. so:

subnav.jpg

Oder gibt es da ein elegatere Lösung? Hast du evtl. eine Idee? Ich bauch das nicht bei MousOver, aber wenn das Projekt aktiv ist sollte unter dem aktivem SubNavi-Punkt der Name des Projektes stehen. Wie mach ich das wenn das ganze dynamisch wächst? Kann da ja nicht mit Position absolute arbeiten.

Vielen Dank schon mal!

Gruß,

Kristof

Link zu diesem Kommentar
Auf anderen Seiten teilen
RastaROCKET

RastaROCKET

Geschrieben
  • Autor
Geschrieben

Div-Suppe, trifft es wohl recht gut :rolleyes: .

Hab mich bemüht es so sauber wie möglich zu machen, leider hat mich der Unterschiede in der Darstellung der gebräuchlichen Browsern dazu gezwungen es so aufzubauen. Mit position absolut kann ich nicht arbeiten, da die Seite dynamisch aus einem CMS entsteht. Ich weiss nie wie viele Projekte ich habe.

Link zu diesem Kommentar
Auf anderen Seiten teilen
M.A.Knapp

M.A.Knapp

Geschrieben
Geschrieben (bearbeitet)

ich hab da mal was gebastelt (verhält sich in IE und FF gleich )


<html>

<body>


<div style="text-align:center;" >


  <table style="margin-left:auto; margin-right:auto; table-layout:fixed" >

    <tr>

      <td style="width:32px; height:32px;" >

	<div style="width:32px; height:32px; background-color:#ff0000" 

             onmouseover="this.firstChild.style.display='inline';" 

             onmouseout="this.firstChild.style.display='none';" ><div style="display:none; position:relative; top:32px; font-size:x-large;" >ROT</div>

        </div>

      </td>

      <td style="width:32px; height:32px;">

	<div style="width:32px; height:32px; background-color:#00ff00" 

             onmouseover="this.firstChild.style.display='inline';" 

             onmouseout="this.firstChild.style.display='none';" ><div style="display:none; position:relative; top:32px; font-size:x-large;" >GRÜN</div>

        </div>

      </td>

      <td style="width:32px; height:32px;">

	<div style="width:32px; height:32px; background-color:#0000ff" 

             onmouseover="this.firstChild.style.display='inline';" 

             onmouseout="this.firstChild.style.display='none';" ><div style="display:none; position:relative; top:32px; font-size:x-large;" >BLAU</div>

        </div>

      </td>

    </tr>

  </table>


</div>




</body>

</html>

Bearbeitet von M.A.Knapp
Link zu diesem Kommentar
Auf anderen Seiten teilen
FMG

FMG

Geschrieben
Geschrieben
...leider hat mich der Unterschiede in der Darstellung der gebräuchlichen Browsern dazu gezwungen es so aufzubauen.

Nun ja... Du lässt die Browser raten und wunderst dich, wenn sie es dann gnadenlos tun?

Teile dem Browser mit, in welcher Sprache du mit ihm zu sprechen gedenkst, sprich füge erstmal einen passenden docType an und lasse die Seite dann erstmal validieren.

Zu deinem Problem: Wenn du einen Listenpunkt (.subTitle) mit display:block formatierst und diesen Block dann floatet, fängst der erste Block wo an? Richtig, links...

Pack deshalb die Subnavigation in eine richtige Liste, anstatt für jeden Menüpunkt eine neue Liste auf zu machen und formatiere den li-Tag dann mit display: inline; (ohne float!).

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...