Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
[css] Wyrownanie elementow i inne pytania od laika
#1
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 Smile

Grzesiek

Odpowiedz
#2
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 Smile np

Kod:
<div position:relative>
   <p>
      <span position:absolute></span>
   </p>
</div>
Span będzie pozycjonowany względem div. Gdzie umieścisz div to już twoja sprawa (bo przecież relatywne pozycjonowanie domyślnie nie zmienia rozmieszczenia Smile)
Odpowiedz
#3
@Kartofelek
Dziekuje "superhero" Smile.

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 Smile

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 Smile

3) No ale podales mi przyklad pozycjonowania bezwzglednego w ramach wzglednego, a pytalem czy mozna bezwzgledne w bezwzglednym Smile
cos takiego:

Kod:
<div position:absolute;>
   <p>
      <span position:absolute;></span>
   </p>
</div>
Odpowiedz
#4
Oczywiscie ze mozna Smile
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 Smile
Odpowiedz
#5

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

Odpowiedz
#6
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ą Big Grin
Odpowiedz
#7
Jak bylo ie6 to wystarczylo
<center>
<table>
...
</table>
</center>
zrobic
Odpowiedz
#8
Możliwe ale inline-block to jest jedna z najlepszych rzeczy. Spróbuj bez tego zrobić paginację na środku strony Smile (oczywiście z dowolną liczbą elementów)
Odpowiedz
#9
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.
Odpowiedz
#10
Odpowiedz


Podobne wątki…
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  dodawanie elementow do strony z odstepem czasowym Arnimarl 0 1,934 21-06-2014, 23:18
Ostatni post: Arnimarl
  wyrównanie do prawej menu Heyek 4 3,917 05-02-2013, 20:32
Ostatni post: Heyek
  Hiden i show dla wielu elementów Marys 5 3,781 05-07-2012, 15:33
Ostatni post: Marys
  Wyrownanie diva bez pozycjonowania grzesiek77 7 5,393 23-05-2012, 23:01
Ostatni post: Moody
At Deklaracja - Kodowanie - Styl linkow - 3 proste pytania fate 10 6,632 07-04-2012, 03:43
Ostatni post: Kamyk

Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości
Sponsorzy i przyjaciele
SeoHost.pl