Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Menu jako DIV o podanym obramowaniu
Forum PHP.pl > Forum > Przedszkole
_chris_
Witam ponownie
Jako że już uzyskałem dzisiaj idealną odpowiedź na moje jedno z pytań, proszę was o poradę. Mam w szablonie php-fusion (tabelka) zrobione panele w taki sposob:


Przerabiam szablon na joomle. Chciałbym aby menu widoczne po prawej i po lewej wlasnie tak wygladaly. Wiadomo ze moga miec różne długości i rozmiary. Posiadam obrazki każdego rogu i każdego boku czyli w sumie 8. Tu jest oryginał strony: http://chris.vot.pl Nie proszę koniecznie o rozwiązanie, ale chociaż o wskazanie właściwej drogi smile.gif

Z góry dzięki!
Condictor
Możesz zainstalować sobie wtyczkę Firebug do przeglądarki
i zobaczyć jakie style CSS zostały dodane na podanej przez
Ciebie stronie. Później wykorzystać z nich to co potrzebujesz.

W niektórych boksach masz za szerokie obrazki i Ci się rozjeżdżają.
_chris_
Wiem że się rozjeżdżają dlatego też chcę to poprawić teraz tak żeby było ok!

Firebuga mam zainstalowanego często korzystam, no jednak nie bardzio wiem jak przenieść tabelke na diva. Tam jest tabelka i powkładane tła. Przecież nie będę 9 divów zamieszczał biggrin.gif
Condictor
Cytat
Wiem że się rozjeżdżają dlatego też chcę to poprawić teraz tak żeby było ok!


Jak zmniejszysz obrazki, które masz w tych boksach to może przestana się rozjeżdżać?
_chris_
No nieważne. Tak czy inaczej przerabiam to na joomle. W sumie zrobiłem już tak że mam rogi i w środku treść. ale w joomli moduły dodają się jako np. ul class=.menu i jako class menu zrobilem cssa który wstawia 4 rogi. No ale nie mam jak teraz zrobić obramowania na bokach i góra dół;/
zdemotywowany
Ja tam widzę 3 div'y. Jeden z nagłówkiem, drugi z treścią, z trzeci 'ze stopką'.
_chris_
No ale jak zrobisz zmienną szerokość jeśli nagłówek będzie miał stały obraz?

rozwiązałem sprawę, może niezbyt profesjonalnie, ale działa i jest ok:)

najpierw wsadzam diva:

.border-menu{
background: url(../images/side.png) repeat-x left top, url(../images/sideb.png) bottom left repeat-x, url(../images/border-left.png) left top repeat-y, url(../images/border-right.png) right top repeat-y;
background-color: #EEEEEE;
height: 100%;
}

Obrazki w tym divie to sa powtarzalne krawędzie. Po tym divie wstawiam:
.menu-side{
background: url(../images/side-left.png) left top no-repeat, url(../images/side-right.png) right top no-repeat, url(../images/sideb-left.png) left bottom no-repeat, url(../images/sideb-right.png) right bottom no-repeat;
min-height:100px;
width: 100%;
height: 100%;
}

Tutaj obrazkami sa rogi. Działa, ładnie wygląda:) Tak samo rozwiązałem problem z artykułami. W tej chwili prawie już cała strona wygląda jak na oryginale http://chris.vot.pl

rozwiązałem sprawę, może niezbyt profesjonalnie, ale działa i jest ok:)

najpierw wsadzam diva:

.border-menu{
background: url(../images/side.png) repeat-x left top, url(../images/sideb.png) bottom left repeat-x, url(../images/border-left.png) left top repeat-y, url(../images/border-right.png) right top repeat-y;
background-color: #EEEEEE;
height: 100%;
}

Obrazki w tym divie to sa powtarzalne krawędzie. Po tym divie wstawiam:
.menu-side{
background: url(../images/side-left.png) left top no-repeat, url(../images/side-right.png) right top no-repeat, url(../images/sideb-left.png) left bottom no-repeat, url(../images/sideb-right.png) right bottom no-repeat;
min-height:100px;
width: 100%;
height: 100%;
}

Tutaj obrazkami sa rogi. Działa, ładnie wygląda:) Tak samo rozwiązałem problem z artykułami. W tej chwili prawie już cała strona wygląda jak na oryginale http://chris.vot.pl
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.