+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [css] Wyrownanie elementow i inne pytania od laika (/thread-css-wyrownanie-elementow-i-inne-pytania-od-laika)
Strony:
1
2
[css] Wyrownanie elementow i inne pytania od laika - grzesiek77 - 15-12-2011
Witajcie,
To moj pierwszy post na tym forum.
Na stare lata zachcialo mi sie uczyc CSS.
Mysle, ze Was pomecze. Dziekuje za cierpliwosc
Mam taka "strone" robiona przy okazji nauki:
Kod:
<body>
<div id="lewa">
<div class="menu"></div>
<div class="news"></div>
<div class="czysci"></div>
</div>
<div id="prawa">
<div class="naglowek"></div>
<div class="glowna"></div>
<div class="czysci"></div>
</div>
</body>i takie style
Kod:
#lewa {
position: absolute;
left: 100px;
top: 10px;
width: 300px;
height: 500px;
background: silver;
border: 1px solid black;
}
div.menu {
position: absolute;
width: 250px;
height: 300px;
top: 10px;
left: 10px;
background: red;
}
div.news {
position: absolute;
width: 250px;
height: 100px;
top: 350px;
left: 10px;
background: blue;
}
.czysci {
height: 0;
clear: both;
}
#prawa {
position: absolute;
left: 450px;
top: 10px;
width: 600px;
height: 600px;
background: silver;
border: 1px solid black;
}
div.naglowek {
position: absolute;
left: 10px;
top: 10px;
width: 550px;
height: 50px;
background: brown;
}
div.glowna {
position: absolute;
left: 10px;
top: 80px;
width: 550px;
height: 500px;
background: green;
}Chcialbym na przyklad .menu wysrodkowac w ramach #lewa. Probowalem
margin: 0 auto;
lub
margin-left: 50%; margin-right: 50%;
lub
align: center (ale to akurat chyba poza standardem)
i nie dzialalo
Drugie pytanie przy okazji:
- jesli nie znam wysokosci danego elementu, bo na przyklad jest on zmienny, po prostu nie okreslam jego parametru height, wtedy jego wysokosc automatycznie dopasowuje sie do aktualnej zawartosci. Tylko, ze jesli jest jakis element nadrzedny tak jak w przykladowym kodzie id=lewa dla .news to strona nie wyswietla background lewa, tak jakby go nie bylo. Gdy podam height tlo jest, ale wysokosc moze byc rozna...
Trzecia sprawa:
- czy mozna tak jak w kodzie jest wykorzystac pozycjowanie bezwzgledne w ramach innego elementu juz pozycjonowanego bezwzglednie? Walidator bledu mi nie pokazuje, ale chcialbym sie upewnic. Czytalem tylko o takim pozycjonowaniu gdzie warstwa nadrzedna jest pozycjonowania wzglednie, a te wewnetrzne sa bezwzglednie. Tylko, ze w takim przypadku nie moglbym ich ulozyc we wlasciwych miejscach na ekranie. I zwiazane z tym pytanie czy moge pozycjonowac glebiej tzn. w ramach .menu inne elementy, ktore beda uzaleznione od pozycji .menu itd.
Jak zauwazycie, ze mam zle nawyki na tym etapie to dajcie znac, wole uczyc sie bez glupich bledow
Grzesiek
RE: [css] Wyrownanie elementow i inne pytania od laika - Kartofelek - 15-12-2011
1) display:inline-block bez width - dla elemetnu dziecka; text-align:center - dla rodzica; margin:0 auto działa tylko dla block które ma określoną szerokość
2) overflow:hidden ci pomoże lub "css clearfix" (google)
3) mozna. To właściwie podstawa. Pozycjonowanie ZAWSZE odbywa się do pierwszego elementu nadrzędnego którey ma pozycjonowanie
npKod:
<div position:relative>
<p>
<span position:absolute></span>
</p>
</div>)
RE: [css] Wyrownanie elementow i inne pytania od laika - grzesiek77 - 15-12-2011
@Kartofelek
Dziekuje "superhero"
.1) Dlugo czekalem na odpowiedz, wiec dlubalem troche w kodzie i sprawdzilem, ze przy pozycjonowaniu absolutnym moge okreslic nie tylko odleglosc od lewej strony rodzica, lecz takze od prawej (przy wylaczonej szerokosci). Czyli zrobilem tak, ze dla
.menu
usunalem width: i dodalem right: takie samo jak left i wyszlo ze wysrodkowalem
2) Z overflow: hidden; probowalem, tzn. dla rodzica, ktory ma okreslone tlo usunalem wysokosc zeby nie byla sztywna, a byla taka jak wysokosci dzieci i dla wszystkich dzieci rodzica okreslilem wlasnie hidden;, ale niestety tlo rodzica sie nie wyswietla
clearfix jeszcze nie znam
3) No ale podales mi przyklad pozycjonowania bezwzglednego w ramach wzglednego, a pytalem czy mozna bezwzgledne w bezwzglednym
cos takiego:
Kod:
<div position:absolute;>
<p>
<span position:absolute;></span>
</p>
</div>RE: [css] Wyrownanie elementow i inne pytania od laika - Kartofelek - 16-12-2011
Oczywiscie ze mozna
Przykładem może być popularny lightbox czy popup. Tutaj o tym pisałem: http://doman.art.pl/kursjs/kurs/jquery/jquery_popup.html
(zwróć uwagę jak centruję kontener - to znana technika
RE: [css] Wyrownanie elementow i inne pytania od laika - grzesiek77 - 16-12-2011
Ciesze sie, ze upewniles mnie, ze mozna pozycjonowac bezwzglednie w elemencie juz pozycjonowanym bezwzglednie.
Odnosnie tego co pisales:
Cytat:1) display:inline-block bez width - dla elemetnu dziecka; text-align:center - dla rodzica; margin:0 auto działa tylko dla block które ma określoną szerokość
div to block i mial ustalona szerokosc, wiec dlaczgo margin: 0 auto; nie zadzialalo i nie wysrodkowalo wewnatrz rodzica?
a Twoj pomysl czyli text-align: center dla rodzica to chyba poza wszelkimi standardami, nie slyszalem zeby block centrowac text-align
RE: [css] Wyrownanie elementow i inne pytania od laika - Kartofelek - 16-12-2011
Kod:
<div text-align:center>
<div inline-block>
A ja nie potrzebuje width
</div>
</div>A ty wiesz jak się centrowało strony pod IE6? Właśnie taką techniką
RE: [css] Wyrownanie elementow i inne pytania od laika - grzesiek77 - 16-12-2011
Jak bylo ie6 to wystarczylo
<center>
<table>
...
</table>
</center>
zrobic
RE: [css] Wyrownanie elementow i inne pytania od laika - Kartofelek - 16-12-2011
Możliwe ale inline-block to jest jedna z najlepszych rzeczy. Spróbuj bez tego zrobić paginację na środku strony
(oczywiście z dowolną liczbą elementów)
RE: [css] Wyrownanie elementow i inne pytania od laika - Kartofelek - 16-12-2011
być nie może mości pani.
Spójrz na litery dokładnie. Spójrz na rozszerzenie pliku. Windows czesto daje je z duzych liter.
Jak wszystko będzie cacy, wtedy MUSI działać. Chyba że ten twój plik jest jakiś dziwny, wtedy dla testu spróbuj z innym.
RE: [css] Wyrownanie elementow i inne pytania od laika - asiaaniol - 16-12-2011