73%
22%
19%
11%
6%
Mittwoch, 10. Januar 2007, 15:23
Elemente einer Seite mit CSS nebeneinander...
Moin!
Ich hoffe mein Titel ist so einigermaßen verständlich.
Es geht um diese Seite: Klick! (am besten mit Firefox anschauen, ist aber für mein Problem -glaube ich- egal..)
Oben ist ein Balken auf dem sich Links befinden, mein Problem: die Links stehen untereinander statt nebeneinander!
Meine Frage also: wie bekomm ich die nebeneinander???
Das alles ist eine große DIV-Box mit Link drinne...
Der zugehörige CSS-Code:
Ich hoffe mein Titel ist so einigermaßen verständlich.
Es geht um diese Seite: Klick! (am besten mit Firefox anschauen, ist aber für mein Problem -glaube ich- egal..)
Oben ist ein Balken auf dem sich Links befinden, mein Problem: die Links stehen untereinander statt nebeneinander!
Meine Frage also: wie bekomm ich die nebeneinander???
Das alles ist eine große DIV-Box mit Link drinne...
Der zugehörige CSS-Code:
|
PHP-Quelltext |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.headmenu { background-color:#6194BC; width:600px; text-align:left; border: solid 1px #6194BC; white-space:nowrap; }
.headmenu a:link {
display: block;
background-color:#A3D6F5;
text-decoration:none;
font-weight:bold;
color:#6194BC;
width: 100px;
text-align:center;
border-left: solid 1px #6194BC; border-right: solid 1px #6194BC;}
.headmenu a:visited {
display: block;
background-color:#A3D6F5;
text-decoration:none;
font-weight:bold;
color:#6194BC;
width: 100px;
text-align:center;
border-left: solid 1px #6194BC; border-right: solid 1px #6194BC;}
.headmenu a:hover { background-color:#F0ECEB; }
|
ANTIFASCISTA
-siempre-
-siempre-
Mittwoch, 10. Januar 2007, 16:12
Zitat
Original von MartyMcFly
entweder das display:block rausnehmen bei den Links oder mit float:left probieren.
Marty
wenn ich "display:block" rausnehme, sind die Links zwar nebeneinander, jedoch habe ich nicht mehr den gewünschten Effekt, dass eben ein solcher "Block" als Link dargestellt wird...
Wenn ich "float:left" reinnehme, verschiebt sich das ganze Layout.
Edit:
Soo... hab das Problem jetzt selbst gelöst!
(endlich )Einfach statt "display:block;" "display:table-cell;" einsetzen!
ANTIFASCISTA
-siempre-
-siempre-
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »tomparis« (10. Januar 2007, 16:42)
Mittwoch, 10. Januar 2007, 19:05
Auf jede Frage gibt es eine Antwort, man muss nur lange genug danach suchen.
z.B. auf www.netscripter.de :-P
Mittwoch, 10. Januar 2007, 19:50
Im Prinzip kannste es so machen wie ich das FAB bei seiner Vokaline.ch Seite gezeigt habe:
HTML CODE FÜR DIE NAVIGATION
CSS CODE FÜR DIE NAVIGATION
Musste mal schauen wie du es anpassen kannst. habs aus dem thread gleich mal übernommen. Die Navigation wird Horiz. ausgerichtet.
Der René
HTML CODE FÜR DIE NAVIGATION
|
|
Quellcode |
1 2 3 4 5 6 7 8 |
<div id="navigation"> <ul> <li><a href="#" class="" target="">Link 1</a></li> <li><a href="#" class="" target="">Link 2</a></li> <li><a href="#" class="" target="">Link 3</a></li> <li><a href="#" class="" target="">Link 4</a></li> </ul> </div> |
CSS CODE FÜR DIE NAVIGATION
|
|
Quellcode |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
ul {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0;
}
div#navigation ul {
margin: 0;
padding: 0;
white-space : nowrap;
}
div#navigation ul li {
margin: 0;
padding: 0;
display: block;
float:left;
text-align: center;
border-right: 1px solid #333333;
}
div#navigation ul li a {
text-decoration : none;
font-weight: bold;
display: block;
border-style:none;
}
div#navigation ul li a:link, #navigation ul li a:visited {
background-color:#FFFFFF;
height: 100px;
width: 94px;
line-height: 26px;
padding-top: 4px;
color:#666666;
}
div#navigation ul li a:hover, #navigation ul li a:active {
background-color:#C2BCB4;
height: 100px;
width: 94px;
color:#fff;
}
div#navigation ul li.actief a:link, #navigation ul li.actief a:visited {
background-color:#C2BCB4;
height: 100px;
width: 94px;
color:#666666;
}
div#navigation ul li.actief a:hover, #navigation ul li.actief a:active {
background-repeat: no-repeat;
background-color:#C2BCB4;
height: 100px;
width: 94px;
color:#666666;
}
|
Musste mal schauen wie du es anpassen kannst. habs aus dem thread gleich mal übernommen. Die Navigation wird Horiz. ausgerichtet.
Der René
FWK-ART [media] - Fotos & Videos der schönsten und größten (Musik)Feuerwerke