Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML]Drugie tło na stronie
Forum PHP.pl > Forum > Przedszkole
-hahaha-
10.05.2008, 21:04:52
Mam taki problem:

Mam określone jedno główne tło

Kod
body {
    background-color: #191919;
    background-image: url(images/daa.png);
    background-repeat: repeat;
}
a {


I chciałbym zrobić taką wyśrodkowaną ramkę z innym tłem
po wpisaniu tego:

Kod
<td width="461" height="298" colspan="3" align="center" background="images/top_t.jpg">


na stronie mam parę takich zielonych pasków, ale jak to wszystko ładnie zrobić ?

.radex
10.05.2008, 21:08:05
chcesz rozciągnąć tło (w sensie te paski zielone) ?
hahaha
10.05.2008, 21:15:10
tzn. chciałbym zrobić taką dużą ramkę jak np. na wp.pl tylko że tam są takie małe ramki
a mi chodzi o taką dużą i by miała jedno tło które później można zmienić jak te co jest rozciągnięte na całej stronie

"background-image: url(images/daa.png); "
.radex
10.05.2008, 21:18:01
ueee? Nie za bardzo rozumiem. Czy potrafiłbyś wytłumaczyć to bardziej po ludzku biggrin.gif ?
hahaha
10.05.2008, 21:21:34
ok to inny przykład
na stronie http://forum.php.pl jest główne tło te po bokach
a na środku jest ( właśnie nie wiem dokładnie czy to jest ramka ) miejsce z białym tłem
a na nim jest całe forum

i właśnie chodzi mi o te białe tło tongue.gif
Danone
10.05.2008, 21:25:15
To proste. Robisz sobie jednego dużego diva koloru np czarnego, a drugi o mniejszych rozmiarach smile.gif

[HTML] pobierz, plaintext 
  1. <div id=color_black>
  2.       <div id=color_white>
  3.  
  4.       </div>
  5. <div>
[HTML] pobierz, plaintext
.radex
10.05.2008, 21:34:34
Jeszcze inaczej. Po prostu dajesz <div id="container"> na całą szerokość, a body nadajesz padding z każdej strony.
hahaha
10.05.2008, 21:36:13
mam mały problem z tym
bo jak wstawię
Kod
<div align="center"><div id=color_black>
mmmmmmmmmmmmmmm</div>

to tylko cały tekst jest wyśrodkowany i nie ma żadnej ramki

czy mógłby mi ktoś to ładnie wstawić ?
poniżej jest mój kod smile.gif



Kod
<!--
body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #CCCCCC;
}
body {
    background-color: #191919;
    background-image: url(images/BG.png);
    background-repeat: repeat;
}
a {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #999999;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #999999;
}
a:hover {
    text-decoration: none;
    color: #FFFFFF;
}
a:active {
    text-decoration: none;
    color: #999999;
}
.style1 {
    color: #C9D039;
    font-weight: bold;
}
.style4 {color: #CBDC1B}
.style7 {color: #EEEEEE}
.style8 {
    font-size: 14px;
    font-weight: bold;
}
-->
</style></head>
<body>
<!-- Start jaa -->
<div align="center"><div id=color_black>
mmmmmmmmmmmmmmm</div>
<div id=color_black>
<div id=color_white>

</div>
<div>
<table id="Table_01" width="1000" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <body bgcolor="blue">
<td width="461" height="298" colspan="3" align="center" background="images/top_t.jpg"><br /><br /><br /><br /><embed
src="Galeria/imagerotator.swf"
width="400"
height="150"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="height=150&width=400&file=Galeria/lista.xml&backcolor=0x000000"
/></td>
  </tr>
    <
</table>
<!-- Koniec jaa -->
</body>
</html>
Danone
10.05.2008, 21:39:18
Wrzuć sobie swój kod do tego diva i będziesz miał ramkę wyśrodkowaną koloru czarnego.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.  
  4. <head>
  5. <title>Tytuł strony</title>
  6. <style type="text/css">
  7. body{
  8. margin:0px;
  9. padding:25px 25px 25px 25px;
  10. }
  11.  
  12. #container{
  13. background:black;
  14. margin:0px;
  15. width: 100%;
  16. height:800px;
  17. }
  18.  
  19. </style>
  20. </head>
  21. <body>
  22.  
  23. <div id=container>
  24.  
  25. </div>
  26. </body>
  27. </html>
[HTML] pobierz, plaintext
hahaha
10.05.2008, 21:53:37
dzięki wielkie tongue.gif

tylko mam takie pytanie
jak wypozycjonować dany obiekt ?
chodzi mi o flash winksmiley.jpg
sniezny_wilk
10.05.2008, 21:57:40
Wrzucasz go w diva, albo ustawiasz przy osadzaniu.
hahaha
10.05.2008, 22:00:55
no właśnie wrzuciłem i jest po lewej stronie
i właśnie nie wiem jak określić w px gdzie się ma znaleźć smile.gif

to służy do tego ?
Kod
padding:25px 25px 25px 25px;
Danone
10.05.2008, 22:03:42
To jest odległość od zewnętrznych ścian strony

@sniezny_wilk Pośpieszyłem się smile.gif
sniezny_wilk
10.05.2008, 22:03:52
Cytat(hahaha @ 10.05.2008, 21:00:55 ) *
no właśnie wrzuciłem i jest po lewej stronie
i właśnie nie wiem jak określić w px gdzie się ma znaleźć smile.gif

to służy do tego ?
Kod
padding:25px 25px 25px 25px;


Też.. ale zrób diva, nadaj mu szerokość (koniecznie), oraz taki margines: margin: 0px auto;, będzie wyśrodkowany.

EDIT: @Danone text-align służy do środkowania obiektów ? ciekawe ciekawe...
hahaha
10.05.2008, 22:14:24
można jakiś cały przykład ? wstydnis.gif
sniezny_wilk
10.05.2008, 22:19:22
Cytat(Danone @ 10.05.2008, 21:03:42 ) *
To jest odległość od zewnętrznych ścian strony

@sniezny_wilk Pośpieszyłem się smile.gif


@Danone: Z tym też nie do końca trafiłeś.. winksmiley.jpg nie ścian strony , a ogólnie obiektów, nie zewnętrzny a wewnętrzny.. zewnętrzny to właśnie margin.

hahaha: Trochę kreatywności.. serio nie wiesz jak to zrobić ?


Na szybkiego:
[HTML] pobierz, plaintext 
  1. <div style="width: 300px; margin: 0px auto;">
  2. <!-- TU osadzenie flasha o szerokości jaką podaliśmy w divie -->
  3. </div>
[HTML] pobierz, plaintext
Danone
10.05.2008, 22:21:49
@sniezny_wilk zależy jak na to patrzeć smile.gif pozdrawiam kolegę, który raczy poprawiać błędy smile.gif

cały przykład...

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.  
  4. <head>
  5. <title>Tytuł strony</title>
  6. <style type="text/css">
  7. body{
  8. margin:0px;
  9. padding:25px 25px 25px 25px;
  10. }
  11.  
  12. #container{
  13. background:black;
  14. margin:0px;
  15. width: 100%;
  16. height:800px;
  17. }
  18.  
  19.  
  20.  
  21. </style>
  22. </head>
  23. <body>
  24.  
  25. <div id=container>
  26. <div style="margin: 0px auto; width:200px;">Twój kod z flash</div>
  27. </div>
  28. </body>
  29. </html>
[HTML] pobierz, plaintext
hahaha
10.05.2008, 23:13:57
a jak określić wysokość ?

daję
Kod
div style="margin: 0px auto; width:200px; height:100px;"><td width="461" height="298" colspan="3" align="center" background="images/top_t.jpg"><br /><br /><br /><br /><embed...
i nic to nie daję


to wcześniejsze
Kod
<div style="margin: 0px auto; width:400px;"><td width="461" height="298" colspan="3" align="center" background="images/top_t.jpg"><br /><br /><br /><br /><embed
sniezny_wilk
11.05.2008, 07:04:47
A po co Tobie te tabelki ? Tabele nie służą do budowania lay'ów, od tego są tylko div'y.
hahaha
11.05.2008, 07:41:16
Cytat(sniezny_wilk @ 11.05.2008, 08:04:47 ) *
A po co Tobie te tabelki ? Tabele nie służą do budowania lay'ów, od tego są tylko div'y.


to wiem tylko jak określić wysokość ?
.radex
11.05.2008, 08:01:18
Kod
width: 50px;


Danone - nie ucz kolegi złych nawyków. (mam na myśli to: <div id=container>)
Danone
11.05.2008, 10:22:37
@radex_pNie jestem specem od css, dlatego mogłem się mylić, a dlaczego uważasz, że używanie takiego zapisu to zły nawyk?
[HTML] pobierz, plaintext 
  1. <div id=container></div>
[HTML] pobierz, plaintext
hahaha
11.05.2008, 11:12:55
i mam jeszcze jedno pytanie
co mam zastosować by każdy element ( tło, tekst itd. )
był umieszczony całkowicie na środku by była odległość od góry, dołu itd. taka sama ? smile.gif
sniezny_wilk
11.05.2008, 11:47:44
Cytat(hahaha @ 11.05.2008, 10:12:55 ) *
i mam jeszcze jedno pytanie
co mam zastosować by każdy element ( tło, tekst itd. )
był umieszczony całkowicie na środku by była odległość od góry, dołu itd. taka sama ? smile.gif


google Twoim przyjacielem.. to jest naprawdę proste, poczytaj jakieś kursy HTML i CSS, zobacz definicje margin i padding, na pewno więcej się nauczysz niż na gotowcach.

@Danone nie robimy tak:
[HTML] pobierz, plaintext 
  1. <div id=container></div>
[HTML] pobierz, plaintext

tylko tak:
[HTML] pobierz, plaintext 
  1. <div id="container"></div>
[HTML] pobierz, plaintext

to po pierwsze, po drugie sądzę, że ~radex_p miał na myśli wrzucenie CSS'a w kod diva.. jeśli tak to jest to wrzucone z mojego przykładu, bo chciałem na szybko pokazać ~hahaha jak to działa.

radex_p jeśli chodzi Tobie o użycie w przykładzie id, to zarzuty są bezpodstawne smile.gif
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.