docWygeneruj PDF do wydruku
download 
Reklamacja Transkrypt
Wygeneruj PDF do wydruku
Subject: Dynamiczne wyśrodkowanie obrazka
Posted by czater on Sun, 31 Jan 2010 09:09:33 GMT
View Forum Message <> Reply to Message
Witam
Chciałbym dynamicznie ustawić na stronie 3 obrazki o wymiarach 359x269, na chwile
obecną ustawiłem "statycznie" dobierając do wymiarów mojego monitor. Szukam sposobu
na ustawienie środkowego obrazka 5 px od dolnej krawędzi tak żeby niezależnie od
szerokości ekranu obrazek był zawsze wyśrodkowany. Czy Ktoś wie jak to zrobić.
<a href="img_3613.html" target="new" style="target-name: new; target-new: tab;">
<img src="images/3613.jpg" alt="position: absolute; left: 5px; bottom: 5px"
style="position: absolute; left: 5px; bottom: 5px" /> </a>
<a href="dsc0011.html" target="new" style="target-name: new; target-new: tab;">
<img src="images/11.jpg" alt="position: absolute; left: 390px; bottom: 5px"
style="position: absolute; left: 390px; bottom: 5px" /></a>
<a href="dsc00004.html" target="new" style="target-name: new; target-new: tab;">
<img src="images/4.jpg" alt="position: absolute; right: 5px; bottom: 5px"
style="position: absolute; right: 5px; bottom: 5px" /> </a>
Subject: Odp: Dynamiczne wyśrodkowanie obrazka
Posted by hwast on Sun, 31 Jan 2010 14:19:35 GMT
View Forum Message <> Reply to Message
<div id="container">
<div id="images-block">
<img class="obrazek" src="..." />
<img class="obrazek" src="..." />
<img class="obrazek" src="..." />
<div class="clear"></div>
</div>
</div>
body {
margin: 0;
padding: 0;
}
Page 1 of 5 ---- Generated from
Linuksowe by FUDforum 2.8.1
Linuksowo.pl - Linux forum - Polskie Forum
.clear {
clear: both;
}
.obrazek {
float: left;
width: 200px;
height: 200px;
background: green;
margin: 5px;
}
#container {
position: absolute;
bottom: 5px;
width: 100%;
}
#images-block {
margin: 0 auto;
width: 630px;
}
Mało eleganckie rozwiązanie ale działa.
Gdybyś pokazał projekt, albo powiedział coś więcej, to może dałoby się to bardziej
elegancko wykonać, na razie wiadomo mi jedynie o pustej stronie z 3 obrazkami na dole (wiesz
że mogą przysłonić ci treść?).
Pamiętaj, że jeśli gdziekolwiek ustawiasz wymiary elementu na 100%, to jego rodzic
będzie miał szerokość ekranu + marginesy i paddingi wszystkich elementów
znajdujących się w modelu DOM pomiędzy nimi i oczywiście do tego własne paddingi.
Dlatego ustawiłem dla body marginesy i spady na 0 - w innym wypadku będzie się
pojawiał poziomy scrollbar. Zrobienie tego w inny sposób, np poprzez overflow-x: hidden jest
nieelegeanckie, bo 1 będziesz miał nierówne marginesy (z lewej jest, z prawej nie ma), a
stronę i tak będzie można przewijać (kursory na kawiaturze numerycznej, opcja
przewijania w poziomie w myszce).
Zdravim
Subject: Odp: Dynamiczne wyśrodkowanie obrazka
Page 2 of 5 ---- Generated from
Linuksowe by FUDforum 2.8.1
Linuksowo.pl - Linux forum - Polskie Forum
Posted by czater on Fri, 05 Feb 2010 21:53:28 GMT
View Forum Message <> Reply to Message
Przepraszam niedokładnie opisałem o co mi chodzi, a mianowicie mam stronę na której
jest umieszczony teks od górnej krawędzi do ok połowy wysokości strony, w dolnej
części strony chcę umieścić 3 obrazki które będą linkami do otwarcia każdego
obrazka w nowej karcie ( to zrobiłem ). Zależy mi na takim rozmieszczeniu tych trzech
obrazków o wymiarach 359x269px w dolnej połowie strony żeby na różnych
rozdzielczościach były w równych odstępach od siebie tzn.
<!DOCTYPE HTML
PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html14/loose.dtd" >
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="styl.css">
</HEAD>
<BODY>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<center><h3>TEKST</h3>
</center>
<a href="img_3613.html" target="new" style="target-name: new; target-new: tab;">
<img src="images/3613.jpg" alt="position: absolute; left: 5px; bottom: 5px"
style="position: absolute; left: 5px; bottom: 5px" /> </a>
<a href="dsc0011.html" target="new" style="target-name: new; target-new: tab;">
<img src="images/11.jpg" alt="position: absolute; left: 390px; bottom: 5px"
style="position: absolute; left: 390px; bottom: 5px" /></a>
<a href="dsc00004.html" target="new" style="target-name: new; target-new: tab;">
<img src="images/4.jpg" alt="position: absolute; right: 5px; bottom: 5px"
style="position: absolute; right: 5px; bottom: 5px" /> </a>
</BODY>
</HTML>
Page 3 of 5 ---- Generated from
Linuksowe by FUDforum 2.8.1
Linuksowo.pl - Linux forum - Polskie Forum
Subject: Odp: Dynamiczne wyśrodkowanie obrazka
Posted by hwast on Fri, 05 Feb 2010 23:29:02 GMT
View Forum Message <> Reply to Message
Umieść obrazki w kontenerze, który przykleisz do dołu strony (patrz #container),
następnie umieść w nim 3 divy, z floatingiem, a po nich 1 div z clear ustawionym na both.
Ustaw tym 3 divom szerokość w procentach - tj po 33% (możesz nawet do 32% dobić albo
mniej, wyśrodkujesz wszystko jak w moim przykładzie wyżej). Wewnątrz każdego z 3
bloczków umieść wyśrodkowane obrazki - w ten sposób uzyskasz równe odstępy.
BTW - HTML umarł, teraz stosuje się XHTML.
Zdravim
Subject: Odp: Dynamiczne wyśrodkowanie obrazka
Posted by zlomierz on Sat, 17 Apr 2010 10:44:44 GMT
View Forum Message <> Reply to Message
hwast napisał(a) dnia sob, 06 luty 2010 12:29
BTW - HTML umarł, teraz stosuje się XHTML.
mylisz siÄ™... to xhtml umiera
patrz w3c ...
xhtml 2 nie będzie
ale będzie html5 - który ostatecznie i tak ma być nie mniej funkcjonalny, a mniej restrykcyjny
ponadto - kiedy robi się strony w ieksząści przypadków trzeba mieć na uwadze
użytkowników ie, a to wyklucza xhtml (chyba żę chcemy się zadowolić traktowaniem
xhtml jako błędnego html)
Subject: Odp: Dynamiczne wyśrodkowanie obrazka
Posted by hwast on Sun, 18 Apr 2010 18:47:57 GMT
View Forum Message <> Reply to Message
zlomierz napisał(a) dnia sob, 17 kwiecień 2010 12:44ie, a to wyklucza xhtml (chyba żę
chcemy się zadowolić traktowaniem xhtml jako błędnego html)
Cytuj:mylisz siÄ™... to xhtml umiera
XHTML NIE JEST NOWYM HTML!
W3C zadecydowało o kontynuowaniu linii XHTML/1.0 i HTML 4 jako XHTML 1.1 i HTML 5.
Kiedyś mówiono jakoby XHTML2 miał być następcą HTML, jednak z powodów które
Page 4 of 5 ---- Generated from
Linuksowe by FUDforum 2.8.1
Linuksowo.pl - Linux forum - Polskie Forum
sam wymieniłeś (XHTML to próba "zXMLowania" HTML4, co zaowocowało brakiem
wstecznej kompatybilności) W3C postanowiło aby rozwijać 2 osobne gałęzie.
I co jest najśmieszniejsze - organizacja odpowiedzialna za wprowadzanie standardów,
jednolitości i rpzejrzystości nie może podejmowac prawie żadnych działań ze względu
na monopol IE, przywiązania użytkowników i lekceważenie sprawy standardów przez
MS.
Napisałem HTML umarł, ponieważ obecnie to standard XHTML panuje w internecie. Nie
znam nikogo z branży kto by klepał w HTML4. Możliwe że się to zmieni w momencie
wprowadzenia HTML5, jednak póki co W3C nie śpieszy się, czyli "zmiana warty" nastąpi
za co najmniej 5 lat.
Zdravim
Page 5 of 5 ---- Generated from
Linuksowe by FUDforum 2.8.1
Linuksowo.pl - Linux forum - Polskie Forum
