Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html][css] problem z paddiing-right
Forum PHP.pl > Forum > Przedszkole
Bakczki
27.10.2009, 21:51:27
Potrzebuję stworzyć prostą stronę z użyciem html. Żeby wszystko ładnie wyglądało zastosowałem css. Niestety tu pojawia się mój problem. Chcę umieścić przyciski "Strona główna" "Galeria" i "kontakt" po lewej stronie strony. Niestety funkcja padding-right nie chce mi zaskoczyć, za to padding-left, którego nie potrzebuję jak na złość działa prawidłowo.

link do strony:

www.bam.boo.pl

kod strony html:

[HTML] pobierz, plaintext 
  1.  
  2. <title>bam.boo.pl</title>
  3.  
  4. <head>
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  6. 	<link rel="stylesheet" href="style.css" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10.  
  11. <buttony>
  12. <a href="index.php"><img src="images/sg-button.png" alt="Strona główna" /></a>
  13. <a href="galeria.php"><img src="images/g-button.png" alt="Galeria" /></a>
  14. <a href="kontakt.php"><img src="images/k-button.png" alt="Galeria" /></a>
  15. </buttony>
  16.  
  17. <div id="goran"></div>
  18. <div id="naglowek">
  19.  
  20. Strona Główna
  21.  
  22. </div>
  23. <div id="doln"></div>
  24. <div id="strona">
  25. <div id="H1">
  26. PHP ? obiektowy, skryptowy język programowania zaprojektowany do generowania stron internetowych w czasie rzeczywistym. PHP jest najczęściej stosowany do uruchamiania skryptów po stronie serwera WWW, ale może być on również używany do przetwarzania danych z poziomu wiersza poleceń, a nawet do pisania programów pracujących w trybie graficznym (np. za pomocą biblioteki GTK+). Implementacja PHP wraz z serwerem WWW Apache oraz serwerem baz danych MySQL określana jest jako platforma AMP (w środowisku Linux - LAMP, w Windows - WAMP).
  27. </div>
  28. </div>
  29. <div id="dols"></div>
  30. </body>
  31.  
[HTML] pobierz, plaintext


Kod css:

[HTML] pobierz, plaintext 
  1.  
  2. body
  3.  
  4. {
  5. 		background: url(images/tlo.jpg) repeat;
  6.         background-color: #000000;
  7. 		width:664px;
  8. 		margin-top:140px;
  9. 		margin-left:auto;
  10. 		margin-right:auto;
  11. 		margin-bottom:40px;
  12. 		list-style: none;
  13. }
  14.  
  15. buttony
  16.  
  17. {
  18.  
  19. 		marign-top: 300px;
  20. 		padding-right: 100px;
  21.  
  22. }
  23.  
  24. #H1
  25.  
  26. {
  27.  
  28. 	font: Arial 10 px;
  29. 	color: white ;
  30.  
  31. }
  32.  
  33. #goran
  34.  
  35. {
  36.         background: url(images/gora.png) repeat;
  37.         height:10px;
  38. }
  39.  
  40. #naglowek
  41.  
  42. {
  43.         font: Arial 15px #FFF;
  44.         background: #000000 ;
  45.         height:200px;
  46. }
  47.  
  48. #doln
  49.  
  50. {
  51.         background: #000000 ;
  52.         height:11px;
  53. }
  54.  
  55. #strona
  56.  
  57. {
  58.         background: #000000 ;
  59. 	border-left-width: 30px;
  60. 		height:800px;
  61. }
  62.  
  63.  
  64. #dols
  65.  
  66. {
  67.         background: url(/images/dol.png) repeat ;
  68.         height:11px;
  69. 	marign-bottom:auto;
  70. }
  71.  
[HTML] pobierz, plaintext


Proszę o podpowiedź, gdzie znajduje się błąd.

Edit:

Mam jeszcze małe pytanko. Jak zrobić żeby tekst wyświetlał się w odstępach około 6 px od krawędzi strony ?

Edit2:

Nie mogę znaleźć nigdzie informacji jak zlikwidować ramkę, wokół linku obrazkowego. Zna ktoś na to kod ?
wookieb
27.10.2009, 22:02:51
Kompletnie źle podchodzisz do tematu
http://kurs.browsehappy.pl/

Co to za tag "buttony"? Nie używasz poprawnie tagów (nie ma doctype, title poza sekcja head) Uporządku je. Przejrzyj kurs. Buttony po lewej stronie tzn? Fajnie by było gdybyś np narysował nawet w paintcie gdzie chcesz je umieścić.

P.s. Temat powinien być przyklejony jako wzór dla głąbów którzy
1) nie dają kodu z którym mają problem
2) jak dają to zanim sobie go uruchomisz to tracisz 2 minuty
3) nie podają linku do strony, tylko kod
Gz dla ciebie bo wszystkie punkty ominąłeś smile.gif Wzorowy temat. I teraz nie ma tłumaczenia głąbów "jestem nowy" smile.gif
blade-mrn
27.10.2009, 22:18:06
Po pierwsze jak wyżej, skąd wziąłeś ten tag buttony ? Po drugie na CSS-ie nie znam się zbyt dobrze ale czy padding nie określa odległości danego elementu od marginesu strony (tak a pro po twojego drugiego pytania) questionmark.gif Więc jeśli mam racje to musisz te hiperłącza ustawić po prawej stronie i za pomocą padding-right ustalić sobie ich odległość od prawej krawędzi. Trochę pokrętnie to napisałem ale zamień tag <buttony> na coś takiego to zobaczysz o czym mówię:
[HTML] pobierz, plaintext 
  1. <div class="buttony"align="right">
  2. <a href="index.php"><img src="images/sg-button.png" alt="Strona główna" /></a>
  3. <a href="galeria.php"><img src="images/g-button.png" alt="Galeria" /></a>
  4. <a href="kontakt.php"><img src="images/k-button.png" alt="Galeria" /></a>
  5. </div>
[HTML] pobierz, plaintext

a w stylach daj kropkę przed buttony:
[CSS] pobierz, plaintext 
  1. .buttony { marign-top: 300px; padding-right: 300px; }
[CSS] pobierz, plaintext
Bakczki
27.10.2009, 22:44:05
Coś ze mną nie tak...

Strona którą chcę zrobić.



blade-mrn:

Poprawiłem już składnię, ale niestety problem dalej pozostał.
t4keda
27.10.2009, 22:45:04
Jeśli chodzi o obramowanie wokół buttonów. To w CSS stosuje się coś takiego jak zerowanie czyli na samym początku pliku CSS dajesz coś takiego:
[CSS] pobierz, plaintext 
  1. * {
  2. padding: 0;
  3. margin: 0;
  4. border: none;
  5. text-decoration: none;
  6. }
[CSS] pobierz, plaintext


Dalej, jeśli chcesz mieć menu po lewej stronie, to nie używaj padding, bo to raczej nie pomoże.

daj coś takiego:
[CSS] pobierz, plaintext 
  1. .buttony {
  2. float: left;
  3. }
[CSS] pobierz, plaintext

I na koniec: menu robi się na liście: http://www.kurshtml.boo.pl/css/pionowe_menu,menu.html
I wstaw poprawny doctype: http://www.kurshtml.boo.pl/html/ramy_dokumentu,zielony.html

Na chwilę obecną to powinno starczyć.
wookieb
27.10.2009, 23:01:56
Cytat(Bakczki @ 27.10.2009, 22:44:05 ) *
Wookieb:

Jeżeli oczy mnie nie mylą, to trafiłem dobrze do działu dla początkujących. Jeśli dostajesz padaczki na widok złej składni, to radzę Ci nie wchodź tutaj. Tak poza tym przeglądając forum zauważyłem, że potrafisz tylko ubliżać. Weź idź sobie pograj w Simsy czy coś, chociaż nie wiem czy to coś pomoże, bo z tego co widzę to jesteś raczej toksyczną osobą. Tak czy owak, lubisz nabijać posty bo nie pomogłeś mi ani trochę.

Specjalnie dla niedomyślnych ludzi takich jak ty sporządziłem projekt w paincie:

Człowieku wyluzuj. Przecież cię pochwaliłem a ty do mnie z zębami. Weź się opanuj i przeczytaj kurs, który ci podałem.
Jak ci zwracam uwagam na tagi to nie bo mi się nudzi (uwierz mi gdybym NIE CHCIAŁ pomóc to bym nie pisał, ale skoro CHCE to też czynię, więc daruj sobie takie teksty), tylko że taka jest prawda. Jak cię to nie interesuje to twój problem ale i tak będziesz musiał się tego nauczyć.

Poza tym ludzie jak mówią "po lewej stronie" to nawet nie zdajesz sobie sprawy co mają na myśli.
Nowy a już przejrzał wszystkie moje posty? Czyżby multikonto?
Bakczki
27.10.2009, 23:12:39
No dobra przepraszam jestem dzisiaj nie do życia, ale dzisiaj szukałem pomocy na innych forach i jestem jakoś przewrażliwiony na punkcie szukania pomocy w szukajce, w której nic nie można znaleźć, oraz składni której uczyłem się kilka dni bez przerwy. Jestem matołem i w ogóle sorry smile.gif



Poprawiłem wszystko i zastosowałem

float-left;

ale jakoś te przyciski mi nie chcą wskoczyć na właściwe miejsce.
wookieb
27.10.2009, 23:15:16
2 kolumnowy layout http://www.neuroticweb.com/recursos/2-columns-layout/ Trochę zmodyfikuj a w twoim przypadku przyda się padding-top dla "SIDE A" Header i bottom możesz wywalić. Do SIDE B wrzucasz swój top i content.
Bakczki
28.10.2009, 11:48:37
Dzięki za pomoc i cierpliwość, bardzo mi pomogliście.
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.