GoldenLine
Zaloguj się
Konrad Karpieszuk

Konrad Karpieszuk WordPress Plugin
Compatibility
Assurance for WPML

Temat: 7 obrazkow obok siebie, na cala szerokosc okna

witam

mam takie zadanie: musze ustawic obok siebie 8 obrazkow, bez zadnych odstepow, w jednym rzedzie. obrazki maja siegac na cala szerokosc okna - i tu najwazniejsze - na szerokosc kazdego okna. czy ktos ma 1024px, czy ktos ma 780px - obrazki maja sie automatycznie przeskalowac by zawsze miescily sie

gdzie poczytam jak to zrobic?
Link do wypowiedziLink
Tomasz Wrotkowski

Tomasz Wrotkowski
www.wrotkowski.websi
te.pl

Temat: 7 obrazkow obok siebie, na cala szerokosc okna

Witam

Albo po łebkach, czyli:

div o szerokości 100%, margin;0 auto; a w nim 8 obrazków obok siebie, pierwszy szerokość 12% drugi 13% i tak na zmianę

Albo repsonsywnie, w css:

@media (min-width: 1024px) {
img { width:128px; }
}

i tak dalej dla każdej możliwej rozdzielczości, min-width, max-width etc.
Polecam wpisac w goglach 'responsive web design tutorial'.
Link do wypowiedziLink
Konrad Karpieszuk

Konrad Karpieszuk WordPress Plugin
Compatibility
Assurance for WPML

Temat: 7 obrazkow obok siebie, na cala szerokosc okna

ok, dzieki :) mysle ze wybiore pierwsze rozwiazanie, szybsze :) o media query wiem, ale nie chce mi sie kombinowac z kazda rozdzielczoscia, chce obsluzyc tez sytuacje, gdy user recznie przeskaluje okno o x pikseli
Link do wypowiedziLink
Konrad Karpieszuk

Konrad Karpieszuk WordPress Plugin
Compatibility
Assurance for WPML

Temat: 7 obrazkow obok siebie, na cala szerokosc okna

i moze przy okazji pytanie: jest jakis css framework, ktory sprawdza sie w designie, gdzie content ma 100% szerokosci okna? bardzo mi sie podoba foundation, ale ten lubi sie glownie z trescią wysrodkowaną. twitter bootstrap faktycznie radzi sobie z pelna szerokoscia, ale srednio mi sie podoba.
Link do wypowiedziLink
Adam Pawliczek

Adam Pawliczek Usability expert, UX
designer,
Interaction
specialist

Temat: 7 obrazkow obok siebie, na cala szerokosc okna

Responsive się do tego nie nadaje. Jedziesz tak:

Wrzucasz w diva 8 SPAN'ów, każdy musi być 
display: inline-block;

width: 12.5%;
a w każdego SPAN'a wrzucasz dany IMG z 
width: 100%
Pamiętaj aby pomiędzy zamknięciem i otwarciem SPAN'ów nie było żadnych nowych linii ani white-space'ów.
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: 7 obrazkow obok siebie, na cala szerokosc okna

Tak jak napisał Adam - wrzucić obrazki koło siebie z ustawioną procentowo szerokością tak by suma szerokości obrazków równała się 100%. Od siebie dodam, że dodatkowe span'y są tutaj zbędne i szerokość można ustawić bezpośrednio dla img (nie trzeba wtedy nadawać inline-block bo to domyślna wartość dla img). Poza tym by uniknąć konieczności otwierania tag'u bezpośrednio po zamknięciu poprzedzającego tagu (czy obejżcia tego za pomocą komentarzy czy innego hack'u) można grafiki wyświetlić blokowo i wyfloatować do lewej (starczy samo float: left; i przeglądarki będą wiedziały, że mają interpretować element jako blokowy) - http://jsfiddle.net/G7pTf/21/Ten post został edytowany przez Autora dnia 22.06.13 o godzinie 12:51
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

szerokosc okna wedlug js i ...




Wyślij zaproszenie do
Anuluj