Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS]Pozycjonowanie - błąd
Wolfie
post 11.04.2009, 16:07:34
Post #1





Grupa: Zarejestrowani
Postów: 686
Pomógł: 0
Dołączył: 10.11.2008
Skąd: Łódź

Ostrzeżenie: (20%)
X----

Witam, napisalem sobie stronke z menu poziomym, pod nim znajduje sie formularz do wypelnienia.....niestety cos jest nie tak, poniewaz formularz wyswietla sie po lewej stronie menu zamias pod nim

Oto plik html:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Dodaj zdjecie</title>
  4. <link rel="Stylesheet" type="text/css" href="css/style.css" />
  5. </head>
  6. <body>
  7.     <?php require("header.html"); ?>
  8.     <form name="form1" method="post" action="check_image.php" enctype="multipart/form-data">
  9.     <div class="form">
  10.         <label class="form">Tytuł obrazka:</label>
  11.         <input name="image_caption" type="text" id="item_caption" size="55" maxlength="255">
  12.         <em>Przykład: Do mnie mówisz?</em>
  13.     </div>
  14.     <div class="form">
  15.         <label class="form">Nazwa użytkownika</label>
  16.         <input name="image_username" type="text" id="imege_username" size="15" maxlength="255">
  17.     </div>
  18.     <div class="form">
  19.         <label class="form">Umieszczany obraz:</label>
  20.         <input name="image_filename" type="file" id="image_filename">
  21.     </div>
  22.     <div class="form">
  23.         <em>Przyjmowane są obrazy w formatach: GIF, JPG/JPEG i PNG.</em>
  24.     </div>
  25.     <div class="form">
  26.         <input type="submit" name="Submit" value="Wyślij">
  27.         <input type="reset" name="Submit2" value="Wyczyść">
  28.     </div>
  29. </form>
  30. </body>
  31. </html>
[HTML] pobierz, plaintext


A tutaj plik css :
[HTML] pobierz, plaintext 
  1. BODY {
  2.         background-color:#6495ED;
  3.         margin:0px;
  4. }
  5.  
  6. div.menu {
  7.         position:absolute;
  8.         left:50%;
  9.         margin-left:-325px;
  10. } 
  11.  
  12. label .form{    
  13.         display:block;
  14.         float:left;
  15.         width:150px;
  16.         height:40px;
  17.         padding-right:10px;
  18.         text-align:left;
  19. }
  20.  
  21. div.form {
  22.         clear: left;
  23.         text-align: left;
  24. }
  25.  
  26. ul, ul li {
  27.         display:block;
  28.         list-style:none;
  29.         margin:0;
  30.         padding:0;
  31. }
  32.  
  33. ul li {
  34.         float:left;
  35. }
  36.  
  37. ul a:link, ul a:visited {
  38.         text-decoration:none;
  39.         display:block;
  40.         width:150px;
  41.         text-align:center;
  42.         background-color:#6495ED;
  43.         color:#000;
  44.         border:2px outset #008B8B;
  45.         padding:5px;
  46. }
  47.  
  48. ul a:hover {
  49.         border-style:inset;
  50.         padding:7px 3px 3px 7px;
  51. }
[HTML] pobierz, plaintext


No i cos jest nie tak z pozycjonowaniem elementow...moze ktos podpowiedziec jak to poprawic ?
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 11)
drake88
post 11.04.2009, 16:55:43
Post #2





Grupa: Zarejestrowani
Postów: 283
Pomógł: 15
Dołączył: 22.03.2009
Skąd: Bytów

Ostrzeżenie: (0%)
-----

Ustaw margin-left, margin-right oraz margin-top i margin-bottom w body (css)


--------------------
Oferuję tworzenie stron internetowych, instalację oprogramowania oraz jego konfigurację.
Go to the top of the page
+Quote Post
kantek
post 11.04.2009, 21:12:26
Post #3





Grupa: Zarejestrowani
Postów: 73
Pomógł: 15
Dołączył: 2.04.2009
Skąd: koszalin

Ostrzeżenie: (0%)
-----

Proszę rozwiązanie do twojego przykładu z uwagami:

w css body:
width:650px; - mniemam bo dałeś 50% -325px chciałeś wyśrodkować
margin:0 auto; - tak właśnie środkujesz

linki mają 160px; width + padding
(a nawet linki border mają)
czyli trochę źle dobrane bo 3 w jednej linii i przenosi na dół kolejne
czyli 3*160 = 480px i zostaje 650 - 480 = 170px wolnego

nie wiem jak wygląda u Ciebie to menu ale z css domyślam się

div class="menu" dałem inline - bug ie6
niestety wyjechałem na święta i tu nie mam i6 więc nie sprawdzę czy jest ok ale na ie7 i ff operze gra
jak to tylko możliwe unikaj pozycjonowania absolute exclamation.gif!

plik css - tez troszkę pozminiałem smile.gif ale można go jeszcze popoprawiać
block - wystarczą linki

[HTML] pobierz, plaintext 
  1. body {
  2. background-color:#6495ED;
  3. margin:0 auto;
  4. width:650px;
  5. }
  6.  
  7. label .form{
  8. display:block;
  9. float:left;
  10. width:150px;
  11. height:40px;
  12. padding-right:10px;
  13. text-align:left;
  14. }
  15.  
  16. .menu
  17. {
  18. display:inline;
  19. }
  20.  
  21. div.form {
  22. clear: left;
  23. text-align: left;
  24. }
  25.  
  26. ul,li {
  27. display:block;
  28. list-style:none;
  29. margin:0;
  30. padding:0;
  31. }
  32.  
  33. li {
  34. float:left;
  35. }
  36.  
  37. ul a{
  38. text-decoration:none;
  39. display:block;
  40. width:150px;
  41. text-align:center;
  42. background-color:#6495ED;
  43. color:#000;
  44. border:2px outset #008B8B;
  45. padding:5px;
  46. }
  47.  
  48. ul a:hover {
  49. border-style:inset;
  50. padding:7px 3px 3px 7px;
  51. }
[HTML] pobierz, plaintext


kod html - w tagach php aby widać było wcięcia
doctype daje bo tego wymaga ie bez tego nie środkuje smile.gif
(popraw sobie ścieżkę href do style.css)

[PHP] pobierz, plaintext 
  1. <?php
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  3.   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  4. <html>
  5. <head>
  6.     <title>Dodaj zdjecie</title>
  7.     <link rel="Stylesheet" type="text/css" href="style.css" />
  8. </head>
  9. <body>
  10. <div class="menu">
  11.  
  12.     Twoje menu z header.html
  13.     <ul>
  14.         <li><a href="index.html">Opcja</a></li>
  15.         <li><a href="index.html">Opcja</a></li>
  16.         <li><a href="index.html">Opcja</a></li>
  17.         <li><a href="index.html">Opcja</a></li>
  18.         <li><a href="index.html">Opcja</a></li>
  19.     </ul>
  20. </div>
  21.  
  22. <form name="form1" method="post" action="check_image.php" enctype="multipart/form-data">
  23. <div class="form">
  24. <label class="form">Tytu&#322; obrazka:</label>
  25. <input name="image_caption" type="text" id="item_caption" size="55" maxlength="255">
  26. <em>Przyk&#322;ad: Do mnie mówisz?</em>
  27. </div>
  28. <div class="form">
  29. <label class="form">Nazwa u&#380;ytkownika</label>
  30. <input name="image_username" type="text" id="imege_username" size="15" maxlength="255">
  31. </div>
  32. <div class="form">
  33. <label class="form">Umieszczany obraz:</label>
  34. <input name="image_filename" type="file" id="image_filename">
  35. </div>
  36. <div class="form">
  37. <em>Przyjmowane s&#261; obrazy w formatach: GIF, JPG/JPEG i PNG.</em>
  38. </div>
  39. <div class="form">
  40. <input type="submit" name="Submit" value="Wyślij">
  41. <input type="reset" name="Submit2" value="Wyczyść">
  42. </div>
  43. </form>
  44. </body>
  45. </html>
  46. ?>
[PHP] pobierz, plaintext



Pozdrawiam

Ten post edytował kantek 11.04.2009, 21:35:24


--------------------
kantek.com.pl
Go to the top of the page
+Quote Post
Wolfie
post 14.04.2009, 21:23:53
Post #4





Grupa: Zarejestrowani
Postów: 686
Pomógł: 0
Dołączył: 10.11.2008
Skąd: Łódź

Ostrzeżenie: (20%)
X----

moze podrzuce plik html wraz z meniu bez funkcji require co ulatwi sprawe poniewaz wyszlo troche nie tak jak powinno,
Otoz nad menu znajduje sie image logo, ktory jest szerszy niz menu, w zasadzie powinien rozszerzac sie na cala szerokosc body i tak wlasnie jest w moim przypadku bo dobralem go zgodnie z moja rozdzielczoscia ekranu i ma kolo 1300px szerokosci.

W rozwiazaniu ktore przedstawiles kantek lewa krawedz obrazka logo pokrywa sie z lewa krawedzia menu wiec sam obrazek nie jest wysrodkowany.

Poza tym nie rozumiem Twoich obliczen zwiazanych z linkami.....

Przedstawiam plik html: (w znaczniku php zeby byl czytelniejszy)

[PHP] pobierz, plaintext 
  1. <?php
  2. <html>
  3. <head>
  4. <title>Dodaj zdjecie</title>
  5. <link rel="Stylesheet" type="text/css" href="css/style.css" />
  6. </head>
  7. <body>
  8.     <div>
  9.     <img src="images/logo.jpg">
  10.     </div>
  11.  
  12.     <div class="menu">
  13.         <ul class="menu">
  14.             <li><a href="index.php">Strona g&#322;ówna</a></li>
  15.             <li><a href="addImage.php">Dodaj Zdj&#281;cie</a></li>
  16.             <li><a href="editImage.php">Edytuj Zdj&#281;cie</a></li>
  17.             <li><a href="contact.html">Kontakt</a></li>
  18.         </ul>
  19.     </div>
  20.     <form name="form1" method="post" action="check_image.php" enctype="multipart/form-data">
  21.     <div class="form">
  22.         <label class="form">Tytu&#322; obrazka:</label>
  23.         <input name="image_caption" type="text" id="item_caption" size="55" maxlength="255">
  24.         <em>Przyk&#322;ad: Do mnie mówisz?</em>
  25.     </div>
  26.     <div class="form">
  27.         <label class="form">Nazwa u&#380;ytkownika</label>
  28.         <input name="image_username" type="text" id="imege_username" size="15" maxlength="255">
  29.     </div>
  30.     <div class="form">
  31.         <label class="form">Umieszczany obraz:</label>
  32.         <input name="image_filename" type="file" id="image_filename">
  33.     </div>
  34.     <div class="form">
  35.         <em>Przyjmowane s&#261; obrazy w formatach: GIF, JPG/JPEG i PNG.</em>
  36.     </div>
  37.     <div class="form">
  38.         <input type="submit" name="Submit" value="Wyślij">
  39.         <input type="reset" name="Submit2" value="Wyczyść">
  40.     </div>
  41. </form>
  42. </body>
  43. </html>
  44. ?>
[PHP] pobierz, plaintext



Rozumiem ze wystarczy wysrodkowac obrazek ale czy to rozwiazanie bedzie optymalne ?

Ten post edytował Wolfie 14.04.2009, 21:25:51
Go to the top of the page
+Quote Post
kantek
post 14.04.2009, 23:34:09
Post #5





Grupa: Zarejestrowani
Postów: 73
Pomógł: 15
Dołączył: 2.04.2009
Skąd: koszalin

Ostrzeżenie: (0%)
-----

Proszę. Zacznę od uwag potem kod:

1) obliczenia rzeczywiste width obiektu jest obliczane width+padding
czyli jeżeli obiekt mam mieć szerokość:170px, a dałeś np. padding:5px; -czyli +5px z każdej strony(góra, dół, lewa, prawa)
width odnosi się do szerokości więc +5px z lewej +5px z prawej =10px czyli width:160px;
- jak dajesz bordery to też należy brać je pod uwagę

2) 650px tak ustawiłem bo myślałem że taka szerokość strony,
jak chcesz mieć stronę 1300px bo taki jest największy jej elemnt to
body {width:1300px;} no i margin:0 auto; - i masz stronkę na środku

3) masz css nie stosuj
[HTML] pobierz, plaintext 
  1. <div>
  2. <img src="images/logo.jpg">
  3. </div>
[HTML] pobierz, plaintext

tylko np. div class/id="logo" i w stylu background:url(twoje_logo);


nie mam takiej rozdziałki więc zrobię przykład dla 1200px; pomijam forma sobie zrobisz

dla pliku logo swoja sciezke daj i przelicz sobie na 1300

1. przypadek - menu(4*120=480) mnijsze niż logo(1200)
4 * (linki szerokie 120px wiec [width:106 + 2 border lewa +2 prawa + padding 2*5])
[HTML] pobierz, plaintext 
  1. body 
  2. {
  3. background-color:#6495ED;
  4. margin:0 auto;
  5. width:1200px;
  6. }
  7.  
  8. .logo
  9. {
  10. height:40px;
  11. width:1200px;
  12. background:url('./logo.jpg');
  13. }
  14.  
  15. .menu
  16. {
  17. display:inline;
  18. }
  19.  
  20. ul.menu
  21. {
  22. padding:0;
  23. margin:0 auto;
  24. width:480px;
  25. display:block;
  26. list-style-type:none;
  27. }
  28.  
  29. li 
  30. {
  31. float:left;
  32. }
  33.  
  34. ul.menu a{
  35. text-decoration:none;
  36. display:block;
  37. width:106px;
  38. text-align:center;
  39. background-color:#6495ED;
  40. color:#000;
  41. border:2px outset #008B8B;
  42. padding:5px;
  43. }
  44.  
  45. ul.menu a:hover {
  46. border-style:inset;
  47. padding:7px 3px 3px 7px;
  48. }
[HTML] pobierz, plaintext


2. przypadek menu długie jak logo 1200px;
(linki 4*300 wiesz jak liczyć:) )
zmieniasz tlko w css: 
[HTML] pobierz, plaintext 
  1. ul.menu
  2. {
  3. padding:0;
  4. margin:0 auto;
  5. width:1200px;
  6. display:block;
  7. list-style-type:none;
  8. }
  9.  
  10. ul.menu a{
  11. text-decoration:none;
  12. display:block;
  13. width:286px;
  14. text-align:center;
  15. background-color:#6495ED;
  16. color:#000;
  17. border:2px outset #008B8B;
  18. padding:5px;
  19. }
[HTML] pobierz, plaintext


dla obu ten sam html - o to chodzi zmmieniasz css i zmienia się wygląd strony
tagi php - aby bylo widać wcięcia
[PHP] pobierz, plaintext 
  1. <?php
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  3.   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  4. <html>
  5. <head>
  6. <title>Dodaj zdjecie</title>
  7. <link rel="Stylesheet" type="text/css" href="style.css" />
  8. </head>
  9. <body>
  10.    <div class="logo"></div>
  11.    <div class="menu">
  12.        <ul class="menu">
  13.            <li><a href="index.php">Strona glowna</a></li>
  14.            <li><a href="addImage.php">Dodaj Zdjecie</a></li>
  15.            <li><a href="editImage.php">Edytuj Zdjecie</a></li>
  16.            <li><a href="contact.html">Kontakt</a></li>
  17.        </ul>
  18.    </div>
  19.  
  20. </form>
  21. </body>
  22. </html>
  23. ?>
[PHP] pobierz, plaintext


Pozdrawiam

Ten post edytował kantek 14.04.2009, 23:38:01


--------------------
kantek.com.pl
Go to the top of the page
+Quote Post
Wolfie
post 16.04.2009, 15:43:48
Post #6





Grupa: Zarejestrowani
Postów: 686
Pomógł: 0
Dołączył: 10.11.2008
Skąd: Łódź

Ostrzeżenie: (20%)
X----

A nie lepiej zamknac caly formularz w jeszcze jednego div-a i ustawic tego diva posrodku strony i dac mu padding-top zeby nie nakladal sie na menu ? Czy to bedzie dobre rozwiazanie i poprawnie bedzie sie wyswietlac w innych rozdzielczosciach ? (szczegolnie chodzi mi o wyzsze bo mam mala rozdzielczosc w lapku i nie moge sprawdzic.. )


I jeszcze jedno pytanie:
Czy div i label moga miec taka sama nazwe klasy class="form", pytam bo majac css label.form {} niestety nie chce sie pozycjonowac nie mam pojecia dlaczego , czyzby to kolidujace nazwy klas ?

I niestety w firebugu nie widac tej czesci css:
[PHP] pobierz, plaintext 
  1. <?php
  2. label .form{    
  3.         display:block;
  4.         float:left;
  5.         width:150px;
  6.         height:40px;
  7.         padding-right:10px;
  8.         text-align:left;
  9. }
  10. ?>
[PHP] pobierz, plaintext


Czyli jednym slowem nie dziala ten kod , a po sprawdzeniu go w osobnym skrypcie wszystko dziala....

Poprawka...dziala wtedy gdy usune .form, czy label moze miec klase ?

Ten post edytował Wolfie 16.04.2009, 15:55:51
Go to the top of the page
+Quote Post
erix
post 16.04.2009, 16:06:31
Post #7





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Może mieć, ale spacja między dwiema frazami w selektorze zupełnie zmienia działanie.

http://www.w3.org/TR/CSS21/selector.html#q2


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
Wolfie
post 16.04.2009, 16:23:33
Post #8





Grupa: Zarejestrowani
Postów: 686
Pomógł: 0
Dołączył: 10.11.2008
Skąd: Łódź

Ostrzeżenie: (20%)
X----

Niestety, bez spacji tez nie dziala , jedyny dzialajacy przypadek wystepuje po usunieciu selektora klasy

Moze jakis drobny komentarz na ten temat ?

Ten post edytował Wolfie 16.04.2009, 18:15:32
Go to the top of the page
+Quote Post
kantek
post 16.04.2009, 20:57:31
Post #9





Grupa: Zarejestrowani
Postów: 73
Pomógł: 15
Dołączył: 2.04.2009
Skąd: koszalin

Ostrzeżenie: (0%)
-----

Wiatm. może chodzi Ci o to:

1.
css:
label.form{} - label, którego klasa to form
(obiekt.nazwa_klasy)

przykład:
[HTML] pobierz, plaintext 
  1. <label class="form"> bleble </label>
[HTML] pobierz, plaintext


2.
css:
.label form{} - form, który znajduje się w obiekcie np. divie którego klasa to label

po kolei:
.label
oznacz klasę label np. <div class=label>, <p class=label> więc nie jest ona przypisana konkretnie do taga html
a jak dasz
p.label - to odnosi się konkretnie do taga <p class="label">
a.superlink itp smile.gif

a jak dajesz .label form - to oznacza, że definiujesz wszystkie formy znajdujace się w 'czymś' czego class="label"
[HTML] pobierz, plaintext 
  1. <div class="label">
  2.   <form> ...</form>
  3.   </div>
[HTML] pobierz, plaintext



Pozdrawiam

Ten post edytował kantek 16.04.2009, 20:58:44


--------------------
kantek.com.pl
Go to the top of the page
+Quote Post
Wolfie
post 17.04.2009, 11:35:54
Post #10





Grupa: Zarejestrowani
Postów: 686
Pomógł: 0
Dołączył: 10.11.2008
Skąd: Łódź

Ostrzeżenie: (20%)
X----

Chodzi mi o to, ze mamy czesc kodu :

[PHP] pobierz, plaintext 
  1. <?php
  2. <form name="form1" method="post" action="check_image.php" enctype="multipart/form-data">
  3.     <div class="form">
  4.         <label class="form">Tytu&#322; obrazka:</label>
  5.         <input name="image_caption" type="text" id="item_caption" size="55" maxlength="255">
  6.         <em>Przyk&#322;ad: Do mnie mówisz?</em>
  7.     </div>
  8.     <div class="form">
  9.         <label class="form">Nazwa u&#380;ytkownika</label>
  10.         <input name="image_username" type="text" id="imege_username" size="15" maxlength="255">
  11.     </div>
  12. ?>
[PHP] pobierz, plaintext



Mamy tutaj label ktorego clasa to form

Ale niestety gdy definiuje css w ten sposob :
Cytat
label.form{
display:block;
float:left;
width:150px;
height:40px;
padding-right:10px;
text-align:left;
}


To niestety label o klasie form nie zmienia swoich wlasciowosci, dopiero po usunieciu ".form" label pozycjonuje sie prawidlowo i css dziala. Nie mam pojecia dlaczego.....
Go to the top of the page
+Quote Post
kantek
post 18.04.2009, 17:54:35
Post #11





Grupa: Zarejestrowani
Postów: 73
Pomógł: 15
Dołączył: 2.04.2009
Skąd: koszalin

Ostrzeżenie: (0%)
-----

A sprawdzałeś na innej nazwie classy, bo może form nie działa bo to słowo należące do htmla.

Jak dasz label{} w css to odnosi się do wszystkich labeli,
jeżeli wszystkie są jednego typu (byłyby tej samej klasy) to możesz tak zostawić.

Pozdrawiam

Ten post edytował kantek 18.04.2009, 17:58:24


--------------------
kantek.com.pl
Go to the top of the page
+Quote Post
Wolfie
post 21.04.2009, 15:34:06
Post #12





Grupa: Zarejestrowani
Postów: 686
Pomógł: 0
Dołączył: 10.11.2008
Skąd: Łódź

Ostrzeżenie: (20%)
X----

Wystawiam pomogl za ogolna pomoc smile.gif Dzieki !
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 13.08.2025 - 22:30
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn