Nie jesteś zalogowany.
Jeśli nie posiadasz konta, zarejestruj je już teraz! Pozwoli Ci ono w pełni korzystać z naszego serwisu. Spamerom dziękujemy!
Prosimy o pomoc dla małej Julki — przekaż 1% podatku na Fundacji Dzieciom zdazyć z Pomocą.
Więcej informacji na dug.net.pl/pomagamy/.
Witam
problem moż okazać się durny ;D ,jak wykonać taką ramke : http://www.fotosik.pl/pokaz_obrazek/5c408422e675c2a1.html ?
za pomocą div i css ?
Offline
<html> <head> <style type="text/css"> /* <![CDATA[ */ #rama { border:1px solid gray; /* obramowanie szare linia ciągła 1px */ color:#000000; /* kolor czcionki elementu */ width:250px; /* szerokosc w px (moze byc w %) */ height:350px; /* wysyokosc w px (moze byc w %) */ padding: 5px; /* odleglosc textu i elementow od krawedzi diva */ overflow-y: scroll; /* to cudo pokazuje pasek przewijania */ } /* ]]> */ </style> </head> <body> <div id="rama"> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> test <br /> </div> </body> </html>
Ostatnio edytowany przez TaZz (2010-01-12 22:07:09)
Offline
Prosze. Pamiętaj że usunięcie overflow spowoduje, że tekst wyjdzie Ci poza ramke
Offline
działa naprawdę swietnie ;)
zdobiłem sobie podział strony na div'ach :
body { background-color: #fff; font-family: Helvetica,Arial; font-size:11px; color: #000; margin: 0; padding: 0; } #top { width: 1024px; padding-top: 20px ; vertical-align: top; } #NAGLOWEK { background-color: #888; } #MENU { width: 200px; float: right; overflow: hidden; background-color: #ccc; } #INFORMACJE { width: 200px; float: left; overflow: hidden; } #TRESC { width: 600px; height: 450px; float: left; overflow: hidden; background-color: #fff; } #STOPKA { clear: both; width: 100%; background-color: #888; }
i jako głowny div w którym umieszczona jest ramka to : #top przyznam z CSS cienki jestem ,chciałbym całość wypośrodkować w przegladarce względem boków ,czytałem ze znaczników <center></center> nie zaleca się stosować ,jak można to wykonac inacej ?
dodam że stosowanie text-align:center nic nie daję :((
Offline
#top { width: 1024px; padding-top: 20px ; vertical-align: top; margin-left:auto; margin-right:auto; }
powinno pomóc;)
edit.
#NAGLOWEK {
background-color: #888;
kolor określaj 6 cyframi bo validator uzna Ci to za błąd
#NAGLOWEK { background-color: #888888;
Ostatnio edytowany przez TaZz (2010-01-13 12:50:01)
Offline
szewczyk napisał(-a):
Kod:
body { font-size:11px; }
Nigdy, ale to przenigdy nie podawaj wielkości pisma w pikselach. Nigdy. Używaj względnych rozmiarów fontów (ten artykuł jest tłumaczeniem tekstu sprzed 8 lat, więc jakieś dywagacje o Netscape 4 czy IE 5 można olać ciepłym moczem. Za to informacja dlaczego używać względnych rozmiarów jest jak najbardziej aktualna i zawsze taka pozostanie).
TaZz napisał(-a):
Kod:
#top { width: 1024px; padding-top: 20px ; vertical-align: top; margin-left:auto; margin-right:auto; }powinno pomóc;)
Kiedyś Riddle spłodził świetny tekst o centrowaniu w Cssie.
TaZz napisał(-a):
edit.
#NAGLOWEK {
background-color: #888;kolor określaj 6 cyframi bo validator uzna Ci to za błąd
Kod:
#NAGLOWEK { background-color: #888888;
Ciekawe że specyfikacja (dla CSS3 tak samo) na to pozwala.
Gorsze od olewania wyników walidatora jest tylko ślepe stosowanie się do wyników walidatora.
Offline
o kolory narazie sie nie przejmuję chcę na początek sam szkielet ułożyć
co do wypośrodkowania ,niestety nie działa , o to kod html :
<div id="top"> <div id="NAGLOWEK">NAGLOWEK</div> <div id="INFORMACJE">sssss</div> <div id="TRESC"> tresc tresc tresc tresc tresc tresc ssss <div id="rama">sssssssssssssssssss<br></div> </div> <div id="MENU">meny</div> <div id="STOPKA">stopka</div> </div>
Offline
Nie podajesz całego kodu HTML. Wkleiłem to co Ty przed chwilą, wyżej między <style> a </style> wrzuciłem zawartość CSS-a (z modyfikacją TaZza) i blok z treścią perfekcyjnie się wycentrował w przeglądarce.
Jakiej rozdzielczości używasz? Jaka przeglądarka?
Offline
cały kod to css który jest wyżej + divy które zamieściłem ,poost wyżej
przeglądarka Opera 9.62 , IE , Mozila na wszystkich tak samo :/
Offline
<style> body { background-color: #fff; font-family: Helvetica,Arial; font-size:11px; color: #000; margin: 0; padding: 0; } #top { width: 1024px; padding-top: 20px ; vertical-align: top; margin-left:auto; margin-right:auto; } #NAGLOWEK { background-color: #888; } #MENU { width: 200px; float: right; overflow: hidden; background-color: #ccc; } #INFORMACJE { width: 200px; float: left; overflow: hidden; } #TRESC { width: 600px; height: 450px; float: left; overflow: hidden; background-color: #fff; } #STOPKA { clear: both; width: 100%; background-color: #888; } </style> <div id="top"> <div id="NAGLOWEK">NAGLOWEK</div> <div id="INFORMACJE">sssss</div> <div id="TRESC"> tresc tresc tresc tresc tresc tresc ssss <div id="rama">sssssssssssssssssss<br></div> </div> <div id="MENU">menu</div> <div id="STOPKA">stopka</div> </div>
U mnie działa a u Ciebie nie? Wątpliwe.
Nie napisałeś jaką masz ustawioną rozdzielczość monitora.
Offline
1280 x 800 ,całą tabele nie mam na środku lecz przesuniętą do lewej strony (nie całkowicie przesuniętą )
Minio użyłem Twojego kodu i chodzi ;) dzieki !
Ostatnio edytowany przez szewczyk (2010-01-13 16:37:34)
Offline
Tylko „mój” kod jest dokładnie tym samym kodem który Ty wrzucałeś kolejno o 12:18:16 i 14:58:12...
Offline
przy tych manewracjach zgubiłem jednego div'a ;) dlatego tak gupio wyszło
Offline
czy tys jest bootem
ze za cytuje ravena
Offline
szewczyk napisał(-a):
przy tych manewracjach zgubiłem jednego div'a ;) dlatego tak gupio wyszło
Na windowsa polecam Notepad++ a na linucha sam nie znam dobrego odpowiednika:p on ładnie pokazuje który div nalezy do którego </div'a>
Offline
pracuję pod MS :/ ,ale fajny program znalazłem phpdesinger ,automatycznie uzupełnia składnie i pokazuję braki i ewentualne błedy w skladni ;)
Ostatnio edytowany przez szewczyk (2010-01-13 23:21:53)
Offline
hmm nie widzę sensy aby pisać kolejny temat więc napiszę tu :
bawiąc sie jquery chce zrobic za pomoca przenikania div'ow wykonać dodawanie komentarzy więc napisałem css dla div'ów :
#box
{
display: none;
position: absolute;
float: left;
clear: none;
width: 100%;
margin-left: -10px;
margin-top: -30px;
height: 100%;
color: #4B4B4B;
text-align: center;
border: 1px solid #8F9D11;
background-color: #D4FF55;
-moz-opacity: 0.6;
opacity: 0.6;
}
#coment
{
margin-top: 150px;
background-color:#FFFFFF;
clear:both;
width:400px;
height:300px;
margin-left:auto;
margin-right:auto;
-moz-opacity: 1;
opacity: 1;
}
<div id="box">ssss <div id="coment">Dodaj komentarz : <br> <textarea name=comment rows=15 ></textarea> <input type=button name=save value="Dodaj"> </div> </div>
obsługa ajaxa sama w sobie działa ,lecz nie mogę poradzić sobie z tym że id="coment" jest również "półprzezroczysty" a tego nie chcę :((
Offline
Potomek elementu jakkolwiek przezroczystego nie może być mniej przezroczysty niż swój rodzic dowolnego rzędu.
Innymi słowy — tak długo jak #box będzie miał opacity, tak długo każdy z jego elementów potomnych (w tym #coment) ma opacity nie większe niż on. Musisz zmienić strukturę dokumentu.
Offline
tak juz doszłem do tego ;) ,udało się za pomoca elemetu jquery wykonac ten manewr
Offline