fate
14.03.2012, 20:30:37
Witam
Głowie się i kombinowalem szukalem czytalem na 100 sposobow i lipa.
Jak zrobic: 4 male obrazki linki w lewym gornym rogu obok siebie, na srodku obrazek duzy logo i prawy gorny rog tez 4 male obrazki linki wszystko w linii przy gornej krawedzi?
o tak:
|o o o o logo wysrodkowane o o o o|
Calosc w srodku diva id baner. XHTML + skrypty java i php. Mozilla
Problem w tym ze jak centruje logo schodzi ono linijke nizej z/w na element blokowy tak przypuszczam (text-align dziala jak znaczniki center i w spanie nie dziala wcale)
Ponadto nie moge przeksztalcic elementow wewnatrz diva zeby dzialaly inline gdyz wtedy nie dziala text-align.
Jakas alternatywa dla text-align bo tu juz wyczerpalem chyba wszytskie mozliwosci?
inne pomysly oprocz html4 i img align?
kodu nie wklejam gdyz jest skomplikowany z/w na skrypty chyba wszystko zrozumiale opisalem, bylbym wdzieczny za pomoc
Jedyny sposob ktory wymyslilem to pozycjonowanie relatywne o te -20px tyle maja male obrazki + nie wiem ile odleglosc blokow (pewnie rozna w roznych przegladarkach tu jest ból) - ale czy jest jakis prostszy konkretny sposob?
Tabel tez sie chyba obecnie nie stosuje w budowaniu struktury..
może jeszczce cos z marginesami pokombinuje
KG
prowseed
14.03.2012, 20:54:26
to ma byc na cala szerokosc strony?
dla lewych pozycji robisz float:left, dla prawych float:right, a menu dajesz:
position:absolute;
left:50%;
margin-left: 50px; /* polowa szerokosci logo */
fate
14.03.2012, 21:02:43
Dzieki za expres odpowiedz. Narazie jest plan na cała szerokość aczkolwiek to chyba trudniejsza opcja choc bardziej dla hobby ta stronka ale moze w koncu ktoras dokoncze troche bardziej sie teraz przykladam niz zwykle:) Kminilem cos z floatami ale chyba na etapie bez blokow, stestuje
Pozdrawiam
prowseed
15.03.2012, 09:40:48
ups, margin-left: -50px;
to musi byc margines ujemny, zapedzilem sie ; )
poza tym pamietaj, ze przy float:right odwroci Ci sie kolejnosc pozycji.
Najlepiej, to wrzuc to co masz gdzies on-line, byc moze potrzeba Ci tylko jednej linijki, by gralo tak jak chcesz.
fate
15.03.2012, 16:10:37
nie bede sie chwalil bo narazie burdel nie strona choc jest juz online i to z domena .pl:)
udalo mi sie uzyskac zamierzony efekt tym sposobem innego kolegi Krzysztofa-94
CODE
<style>
.header {
position: relative;
text-align: center;
}
.left {
position: absolute;
text-align: left;
top: 0px;
left: 0px;
}
.right {
position: absolute;
text-align: rigth;
top: 0px;
right: 0px;
}
</style>
<div class="header">
<div class="left"></div>
<img class="logo" />
<div class="right"></div>
</div>
Pozdrawiam
cudny
15.03.2012, 22:21:15
Kod
<style>
body {
margin: 0;
padding: 0;
}
div.header {
display: inline;
background-color: red;
text-align: center;
}
</style>
<body>
<div class="header" style="float: left; width: 33%;">a</div>
<div class="header" style="float: left; width: 34%;">b</div>
<div class="header" style="float: left; width: 33%;">c</div>
<div style="clear: both;"></div>
</body>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę
kliknij tutaj.