| Autor |
Nachricht |
Ranta
Threadersteller
Dabei seit: 28.02.2006
Ort: Ratingen
Alter: -
Geschlecht: 
|
Verfasst Mi 22.03.2006 11:22
Titel [css] divs nebeneinander zentrieren |
  |
|
Huhu, ich bin ein totaler CSS neuling, also bitte habt nachsicht. 
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;
}
|
|
|
| |
   |
 |
mcbethy
Dabei seit: 02.12.2002
Ort: Hamburg
Alter: 41
Geschlecht: 
|
Verfasst Mi 22.03.2006 11:26
Titel
|
|
|
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 11:44, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
Ranta
Threadersteller
Dabei seit: 28.02.2006
Ort: Ratingen
Alter: -
Geschlecht:
|
Verfasst Mi 22.03.2006 12:47
Titel
|
|
|
|
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.
|
|
| |
|
|
chrisnrw
Dabei seit: 20.08.2004
Ort: Essen
Alter: 38
Geschlecht:
|
Verfasst Mi 22.03.2006 12:55
Titel
|
|
|
Zentrieren geht mit:
| Code: | | <div align="center"> |
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Mi 22.03.2006 13:23
Titel
|
|
|
| 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 13:24, insgesamt 1-mal bearbeitet
|
|
| |
|
|
nicoG
Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht:
|
Verfasst Di 28.03.2006 10:40
Titel
|
|
|
Hi
Blockelemente zentrierst du per
| Code: |
margin-left:auto;
margin-right:auto;
|
Oder kurz:
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
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
3 divs nebeneinander
[CSS] 4 DIVS nebeneinander
CSS / Newbie / DIVs nebeneinander positionieren?
2 DIVS nebeneinander, der Linke autom. skaliert
2 Divs nebeneinander die zum Elternelement relativ sind?
mehrere divs nebeneinander ohne umbruch
|
|
Willkommen auf dem Portal für Mediengestalter
