Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

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


A tutaj plik css :
  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. }


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
kantek
post
Post #2





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 (IMG:http://forum.php.pl/style_emoticons/default/exclamation.gif) !

plik css - tez troszkę pozminiałem (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) ale można go jeszcze popoprawiać
block - wystarczą linki

  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. }


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

  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. ?>



Pozdrawiam

Ten post edytował kantek 11.04.2009, 21:35:24
Go to the top of the page
+Quote Post

Posty w temacie


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

 



RSS Aktualny czas: 8.10.2025 - 16:37