mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 06.12.2016 04:01 Benutzername: Passwort: Auto-Login

Thema: [css] divs nebeneinander zentrieren vom 22.03.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [css] divs nebeneinander zentrieren
Autor Nachricht
Ranta
Threadersteller

Dabei seit: 28.02.2006
Ort: Ratingen
Alter: -
Geschlecht: Männlich
Verfasst Mi 22.03.2006 10:22
Titel

[css] divs nebeneinander zentrieren

Antworten mit Zitat Zum Seitenanfang

Huhu, ich bin ein totaler CSS neuling, also bitte habt nachsicht. Lächel

Ich hab einen div-container 800px breit.
Da drinne möchte ich jetzt nebeneinander 6 weitere divs mit einer jeweiligen breite von 90px haben.

1. Frage: wie bekomme ich die zentriert?
Ich hab das jetzt mit <center></center> gemacht, gibts da nich ne elegantere Lösung?

2. Frage: Wie bekomme ich es hin dass die inneren divs nebeneinander stehen? der klatsch mir die immer untereinander. Mit float:left bekomme ich sie zwar nebeneinander, allerdings sind sie dann nicht mehr zentriert im übergeordneten div, sondern linksbündig.

Das ganze soll so aussehen (gemeint ist die orange Navigation):
http://www.dnjvn.de/kram/v3.jpg


Quelltext:

Code:

         <div class="navi">
            <center>
               <div class="button0" onmouseover="this.className='button1'" onmouseout="this.className='button0'"><a class="navi" href="http://">HOME</a></div>
               <div class="button0" onmouseover="this.className='button1'" onmouseout="this.className='button0'"><a class="navi" href="http://">TERMINE</a></div>
               <div class="button0" onmouseover="this.className='button1'" onmouseout="this.className='button0'"><a class="navi" href="http://">BAND</a></div>
           </center>
         </div>


CSS:

Code:

div.navi
  {
         width: 800px;
         height: 29px;
         text-align: center;
         background-image: url(gfx/bg_navi.gif);         
         border-top: 1px solid #000000;
         border-bottom: 1px solid #000000;      
  }

div.button0
  {      
         width: 90px;
         text-align: center;
         color: #FFFFFF;
         background-image: url(gfx/button_bg_0.gif);
         padding-top: 9px;
         padding-bottom: 6px;
         float: left;
   }

div.button1
  {
         width: 90px;
         text-align: center;
         color: #FFFFFF;
         background-image: url(gfx/button_bg_1.gif);
         padding-top: 9px;
         padding-bottom: 6px;
         float: left;
         
  }
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
mcbethy

Dabei seit: 02.12.2002
Ort: Hamburg
Alter: 33
Geschlecht: Weiblich
Verfasst Mi 22.03.2006 10:26
Titel

Antworten mit Zitat Zum Seitenanfang

Du möchtest die Navigation mit einzelnen Divs lösen, habe ich das richtig verstanden?

Das ließe sich sauberer mit einer horizontalen Liste umsetzen.
http://de.selfhtml.org/css/layouts/navigationsleisten.htm Geht auch mit Bildern.


Zuletzt bearbeitet von Nimroy am Mi 22.03.2006 10:44, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Ranta
Threadersteller

Dabei seit: 28.02.2006
Ort: Ratingen
Alter: -
Geschlecht: Männlich
Verfasst Mi 22.03.2006 11:47
Titel

Antworten mit Zitat Zum Seitenanfang

hmm, also ich bekomme das nicht hin so wies da steht. das sieht voll seltsam aus. ich glaub ich pack da einfach noch nen spacer-div davor, sodass es zentriert aussieht.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
chrisnrw

Dabei seit: 20.08.2004
Ort: Essen
Alter: 30
Geschlecht: Männlich
Verfasst Mi 22.03.2006 11:55
Titel

Antworten mit Zitat Zum Seitenanfang

Zentrieren geht mit:

Code:
<div align="center">
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Mi 22.03.2006 12:23
Titel

Antworten mit Zitat Zum Seitenanfang

chrisnrw hat geschrieben:
Zentrieren geht mit:

Code:
<div align="center">



selfhtml hat geschrieben:

Beachten Sie:

Das div-Element wird weiterhin zum HTML-Standard gehören. Das Attribut align ist jedoch als deprecated eingestuft und soll künftig entfallen. Statt dessen sollten Sie mit Stylesheets arbeiten.


http://www.htmlgoodies.com/tutorials/html_401/html4-ref/article.php/3460291


Zuletzt bearbeitet von sahnemuh am Mi 22.03.2006 12:24, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
nicoG

Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht: Männlich
Verfasst Di 28.03.2006 09:40
Titel

Antworten mit Zitat Zum Seitenanfang

Hi Lächel
Blockelemente zentrierst du per
Code:

margin-left:auto;
margin-right:auto;

Oder kurz:
Code:
margin:0 auto;


Inlineelemente werden per text-align:center; zentriert (was bei HTML align="center" entspricht, da man jedoch Layout und Inhalt trennen sollte, mach das mit CSS)

Die Navi solltest du, wie mcbethy bereits erwähnt hat, mit einer unordered list (ul) erstellen, aufgrund der Semantik.
Wie das geht?:
http://css.maxdesign.com.au/listamatic
http://tuts.nicogutmann.de/css/ul_navi.php
  View user's profile Private Nachricht senden
 
Ähnliche Themen [CSS] 4 DIVS nebeneinander
CSS / Newbie / DIVs nebeneinander positionieren?
css Div _Layer Problem / mehrere Divs nebeneinander und unte
3 divs nebeneinander
2 Divs nebeneinander die zum Elternelement relativ sind?
3 Divs nebeneinander im Container auf einer Höhe?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.