CSS - centraowane w poziomie linki
Marek - 29-01-2010 14:31
CSS - centraowane w poziomie linki
Witam,
Czy da się jakoś ostylować linki zbudowane na strukturze:
<ul id="linki">
<li><a...>link 1</a></li>
<li><a...>link 2</a></li>
<li><a...>link N</a></li>
</ul>
Gdzie w uproszczeniu:
#id {
width:700px;
height: 100px;
overflow: auto;
}
Poszczególne elementy <li> mają zmienną i nieprzewidywalną szerokość. Gdy
zrobię float:left, to nie da się ich (chyba) wycentrować (na poziomie CSS).
Z kolei oblanie elementu <ul> innym tagiem w celu jego centrowania też
niewiele pomoże gdyż <ul> musiałby mieć narzuconą szerokość. Odpada
stosowanie display:table bo nie działa pod IE6, mógłbym spróbować ew.
przeforsować tą metodę gdyby pod IE7 działała. Czy ktoś z Was testował
"display:table" pod IE7?
Czy jest jakieś rozwiązanie dla centrowania w poziomie inne niż stosowanie
<table> do budowania layoutu?
kamyk - 29-01-2010 14:31
Użytkownik "Marek" <marek1967@spam.interia.pl> napisał w wiadomości
news:hi6vff$u4t$1@achot.icm.edu.pl...
> Czy jest jakieś rozwiązanie dla centrowania w poziomie inne niż stosowanie
> <table> do budowania layoutu?
Ja menu z plywajacymi li centruje tak:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Wyśrodkowany element blokowy o nieznanej szerokości</title>
<style type="text/css">
#container {width: 500px; margin: 10% auto; border:1px solid red;}
#container ul {float:left; position:relative; left:50%; list-style: none;
margin:0; padding:0;}
#container ul li {float:left; position:relative; left:-50%; border:1px solid
blue;}
</style>
</head>
<body>
<div id="container">
<ul>
<li>aaa</li>
<li>bb</li>
<li>cccccc</li>
</ul>
<div style="clear:both;"></div>
</div>
</body>
</html>
tutaj mozna podejrzec: http://pastehtml.com/view/5sva2x6.html
--
pozdrowionka
Kamyk
=?UTF-8?B?UGF3ZcWCIFBpc2tvcno=?= - 29-01-2010 14:31
On 2010-01-08 10:55, Marek wrote:
> Czy da się jakoś ostylować linki zbudowane na strukturze:
>
> <ul id="linki">
> <li><a...>link 1</a></li>
> <li><a...>link 2</a></li>
> <li><a...>link N</a></li>
> </ul>
>
> Gdzie w uproszczeniu:
>
> #id {
> width:700px;
> height: 100px;
> overflow: auto;
> }
>
[8<]
> Czy jest jakieś rozwiązanie dla centrowania w poziomie inne niż
> stosowanie <table> do budowania layoutu?
b2c6402d-2bc9-4933-8a10-19cea0c6d847...oglegroups.com
ul {
float: left;
position: relative;
left: 50%;
}
ul > li {
float: left;
position: relative;
right: 50%;
}
Marek - 29-01-2010 14:31
Dziękuję Wam za pomoc. Sprytne :-)