Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: odstęp miedzy krawędzią tabelki, a tłem
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Marrbacca
Witam,
otóż mam problem smile.gif. Mam sobie stronę opartą na tabelkach i menu mają zadeklarowane tło w arkuszu styli. Wygląda to tak: www.lo1elk.lh.pl
Co zrobić, żeby zawartość tej komórki z menu i jej tła była "odsunięta" od krawędzi komórki? Żeby to wyglądało mniej, więcej tak: www.lo1elk.lh.pl/szkola2.jpg
vieri_pl
padding-left: ILEŚpx

A tak w ogóle to tworzysz strone na dicahc czy tabelach questionmark.gif bo widze to i to dry.gif
Zajec
To jest szablon tabelkowy z wykorzystaniem menu z aliastpart :-) A szkoda, bo wykonanie takiego szablonu na blokach byłoby naprawę prościutkie, a korzyści duże.
Marrbacca
niestety padding-left nie działa. Teraz można zobaczyć, jak to wygląda z wartością 15px. Tło zostaje na miejscu, odsuwa się tylko zawartość komórki.
A co do divów. Chciałem ich użyć, ale niestety nie wiedziałem jak zrobić szablon w takim stylu. Wiedziałem tylko jak zrobić z jednym menu, z dwoma nijak nie chciało mi wyjść...
vieri_pl
A było ostatnio na forum, jak zrobić szablon który ma dwie kolumny, były adresy sron internetowych itp. Poszukaj
Marrbacca
ale jak zrobić z dwoma kolumnami ja wiem. Nie wiem jak zrobić z trzema kolumnami (2 menu, tresc, logo, stopka).
Zajec
http://zajec.no-ip.com/marrbacca

Pobaw się tylko marginesami swoich menu oraz dopasuj tła, bo nie wiem za bardzo jaką miałeś wizję pod tym względem.
Marrbacca
już prawie wszystko wyszło, dzięki. Tylko mam jeszcze problem z wysokością dla kolumn. Wiem, że problem może rozwiązać faux-columns i przeczytałem artykuł na A List Apart, ale w dalszym ciągu nie wiem jak mam to zastosować. Za każdą pomoc będę bardzo wdzięczny
revyag
Jak to jak zastosować ? Tak jak napisali na ala smile.gif
- robisz jedengo diva (szerokości dwóch divów które maja w nim być)
- wsadzasz w niego te dwa których wysokości mają być zależne od siebie
- dla tego głównego robisz obrazkowe tło - pasek o wysokości 1px, podzielony na 2 części
- robisz kolory dla tych części takie jak kolory divów które tworzą kolumny

i tyle.

css dla nadrzędnego diva:
Kod
div#parent {
    width:sumaryczna_szerokość_divów;
    background-image: url(obrazek_o_szerokości_diva_i_wysokości_1px);
    background-repeat:repeat-y;
}
Zajec
Dodaj jeszcze
padding: 0;
dla body { }, bo w w Operze stronka wygląda mało estetycznie :-)


Do wypowiedzi revyag'a dodam jeszcze tylko, że w Twoim przypadku <div id="parent"> powinien obejmować trzy div'y: nav, nav2, tresc. I nawet nie musisz deklarować mu width, bo wystarczy że przyjmie maksymalną (780px). A to akurat zrobi domyślnie.
Marrbacca
hmm, na Eksplorerze już działa, tylko menu z lewej strony się nie wydłuża, ale to już mogłoby zostać. Natomiast na Operze i FF jest jak było. Czyli wysokość automatyczna.
Aha i dodałem to padding: 0;
Zajec
Nie rozumiem... Cos jest jeszcze nie tak, jakbyś chciał?

U mnie w Operze, FF i IE wygląda tak samo.
Marrbacca
angrysmiley.gif mad.gif argh!!!
Po prostu nie wytrzymam. Żeby to wyglądało w FF i Operze musiałem ustawić wysokość diva na stałe atrybutem height. I wszystko było w porządku... dopóki treść nie jest wyższa... Na IE wszystko działa pięknie, kolor tła uzupełnia się jeśli zawartość jest wysoka, a jeśli jest jej mało to dostosowuje się do wysokości menu, nawet jeśli nie ma atrybutu height. Ale nie w FF i Operze!!!!! Tam wszystko dostosowuje się do wysokości diva tresc! A jak mu ustawić na sztywno wysokość to po jej przekroczeniu znowu nie podstawia właściwego koloru... Zaraz się załamię i znowu przejdę do tabelek sad.gifsad.gif A było tak pięknie :/
sztosz
Nie wiem jak to miało wyglądać bo link nie działał ale domyslanm się ze o coś takiego?
Kod
div#parent {
   width: 780px;
   height: auto;
   min-height: 600px;
   background-image: url(tlo.jpg);
   background-repeat: no-repeat;
   background-color: #476984;
}
Marrbacca
tak! dzięki! działa!
wcześniej też ustawiałem ten atrybut min-height, ale nie wiedziałem, że musi być on zastosowany równocześnie z wysokością ustawioną na auto.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.