Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Odleglosc miedzy divami
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Dandelion
14.04.2006, 21:07:46
Mam taki kod

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html 
  2. PUBLIC "-//W3C//DTD XHTML 1.0//EN" 
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> 
  5. <head>
  6. <title>Tytuł strony</title>
  7. <link rel="stylesheet" href="style.css" type="text/css"/> 
  8. </head>
  9. <body>
  10.  
  11.  
  12.  
  13. <div id="logo">1</div> 
  14.  
  15. <div id="menu">
  16.       <form action="dodaj" method="POST" style="style.css" class="formularz">
  17.              <input type="image" VALUE="pokaz" src="images/podstawowa2.gif">
  18.              <input type="image" VALUE="szukaj" src="images/podstawowa2.gif">
  19.              
  20.       </form>
  21.       
  22.  
  23. <div id="menu2">
  24.       <form action="dodaj" method="POST" style="style.css" class="formularz2">
  25.  
  26. <div>
  27.             <textarea name="dodaj" cols="50" rows="10"></textarea>
  28. </div>
  29.             <input type="image" VALUE="wyslij" src="images/dodaj.gif">
  30.       </form>
  31.  
  32. </div>      
  33. </div>
  34.  
  35.  
  36.  
  37.  
  38. </body>
  39. </html>
[HTML] pobierz, plaintext


css

[HTML] pobierz, plaintext 
  1. body { 
  2. margin: 5px;
  3. padding: 5px;
  4. }
  5.  
  6.  
  7. div#logo { 
  8. background-color: white;
  9. height: 100px;
  10. }
  11.  
  12. div#menu { 
  13. width : 100%;
  14. height: 50px;
  15. text-align : center;
  16. background-color : #e6e6e6;
  17. }
  18.  
  19. div#menu2 { 
  20.  
  21. }
[HTML] pobierz, plaintext



Efekt jaki uzyskuje to



chcialbym natomiast zeby wygladalo to tak



na chlopski rozum dwa <p> zalatwiaja sprawe jednak nie podoba mi sie to rozwiazanie i chcialbym w pliku css ustalic odleglosc miedzy dwoma divami problem w tym ze nie wiem jak to zrobic winksmiley.jpg

kolejna sprawa to errory jakie dostaje w validatorze

http://validator.w3.org/

nie bede ich wklejal bo za duzo miejsca zajmuja jezeli ktos by mogl sprawdzic i nakierowac mnie czemu one wyskakuje bylbym bardzo wdzieczny


kolejna sprawa jak w css ustawic tlo przyciskow submit i reset w formularzu
vieri_pl
14.04.2006, 21:51:02
eh... css:

Kod
#menu {
width : 100%;
height: 50px;
text-align : center;
background-color : #e6e6e6;
margin-bottom: 10px;
}


co do reset i submit:

Kod
input {;
text-align : center;
background-color : #000;
color: #fff;
}


Co do errorow to pewnie chodzi o formularze tongue.gif masz je zle napisane...

polecam to:

http://www.sitepoint.com/article/style-web-forms-css/


pozdrawiam
Dandelion
14.04.2006, 22:08:15
dzieki za odpowiedz

co do mojego pytania o tlo, to mialem na mysli tlo graficzne faktycznie zle napisalem ;]

a co do marginesow to dalej nie dziala
Zajec
14.04.2006, 23:54:09
Cytat(Dandelion @ 2006-04-14 22:08:15)
a co do marginesow to dalej nie dziala

Może z powodu paddingu/margunesu elementu <form>?

Proponuję dodać na samym początku arkusza stylów
Kod
* { margin: 0; padding: 0; }


Osobiście bez takiego czegoś nie zaczynam pisać stron.
Dandelion
15.04.2006, 09:43:03
dodalem to na poczatku stylu

* {
margin: 0;
padding: 0;
}

potem

#menu {
width : 100%;
height: 50px;
text-align : center;
background-color : #e6e6e6;
margin-bottom: 10px;
}

no i nic chcialem sprawdzicy czy 10 px to przypadkiem nie za malo wiec dalem 100000px ale w dalszym ciagu nie ma zadnej zmiany w operze
ens0re
15.04.2006, 14:40:30
Wydaje mi się, że dzieje sie tak dlatego, gdyż diva #menu2 masz w divie #menu. Sprawdz tak:
[HTML] pobierz, plaintext 
  1. <div id="logo">1</div>
  2.  
  3. <div id="menu">
  4.      <form action="dodaj" method="POST" style="style.css" class="formularz">
  5.             <input type="image" VALUE="pokaz" src="images/podstawowa2.gif">
  6.             <input type="image" VALUE="szukaj" src="images/podstawowa2.gif">
  7.            
  8.      </form>
  9.      </div>
  10.  
  11. <div id="menu2">
  12.      <form action="dodaj" method="POST" style="style.css" class="formularz2">
  13.  
  14. <div>
  15.            <textarea name="dodaj" cols="50" rows="10"></textarea>
  16. </div>
  17.            <input type="image" VALUE="wyslij" src="images/dodaj.gif">
  18.      </form>
  19.  
  20. </div>      
  21.  
  22.  
  23.  
  24. </body></html>
[HTML] pobierz, plaintext
Dandelion
15.04.2006, 21:52:40
przy tym kodzie wogole znika textarea
ens0re
15.04.2006, 21:57:53
Dziwneeee... blink.gif Mam taki kod:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head><title>Mój pierwszy layout</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
  6. <link rel="stylesheet" type="text/css" media="all" href="style.css">
  7. </head>
  8. <body>
  9. <div id="logo">1</div>
  10.  
  11. <div id="menu">
  12.     <form action="dodaj" method="POST" class="formularz">
  13.            <input type="image" VALUE="pokaz" src="images/podstawowa2.gif">
  14.            <input type="image" VALUE="szukaj" src="images/podstawowa2.gif">
  15.          
  16.     </form>
  17.     </div>
  18.  
  19. <div id="menu2">
  20.     <form action="dodaj" method="POST" class="formularz2">
  21.  
  22. <div>
  23.           <textarea name="dodaj" cols="50" rows="10"></textarea>
  24. </div>
  25.           <input type="image" VALUE="wyslij" src="images/dodaj.gif">
  26.     </form>
  27.  
  28. </div>      
  29.  
  30.  
  31.  
  32. </body></html>
[HTML] pobierz, plaintext

I style.css
[HTML] pobierz, plaintext 
  1. * { margin: 0; padding: 0; }
  2.  
  3. body {
  4. margin: 5px;
  5. padding: 5px;
  6. }
  7.  
  8.  
  9. div#logo {
  10. background-color: white;
  11. height: 100px;
  12. }
  13.  
  14. #menu {
  15. width : 100%;
  16. height: 50px;
  17. text-align : center;
  18. background-color : #e6e6e6;
  19. margin-bottom: 10px;
  20. }
  21.  
  22. div#menu2 {
  23.  
  24. }
[HTML] pobierz, plaintext


I pod tym szarym paskiem gdzie jest 'pokaz' i 'szukaj' wyswietla sie textarea..
Dandelion
16.04.2006, 00:04:17
ens0re dzieki za pomoc

posiedzialem troche przy dokumentacji css i znalazlem rozwiazanie oczywiscie banalne

zamieniamy

Kod
div#menu2 {

}


na

Kod
#menu2 {
margin-top: 15px;
text-align : center;
}


cala sprawe rozwiazuje margin-top czyli margines gorny :]

dalej jednak nie moge znalezc rozwiazania jak wstawic w button typu submit lub reset pliku graficznego

jedyny pomysl jaki mialem to np

<button type"submit"><img src="sciezka"></button>

jednak nie wiem jak ustawic szerokosc i wysokosc przycisku zeby byl identyczny jak obrazka
ens0re
16.04.2006, 10:04:22 
[HTML] pobierz, plaintext 
  1. background: url('tlo.png');
[HTML] pobierz, plaintext

?
Dandelion
16.04.2006, 12:32:19
sprawdzalem to na samym poczatku i nie dziala
ens0re
16.04.2006, 13:01:18 
[HTML] pobierz, plaintext 
  1. <input type="submit" VALUE="wyslij">
[HTML] pobierz, plaintext

i style.css
[HTML] pobierz, plaintext 
  1. input {
  2. background-image: url('tlo.jpg');
  3. }
[HTML] pobierz, plaintext

I już masz dany obrazek jako tło submita. Musi działać smile.gif
Dandelion
16.04.2006, 17:41:56
zwracam honor musialem zle cos wczesnie probowac teraz dziala. Trzeba jeszcze ustawic border inputow na 0 wtedy przycik bedzie mial wymiary dokladnie jak obrazek
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.