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ę. 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
  1. <div>
  2. <img src="images/logo.jpg">
  3. </div>

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


2. przypadek menu długie jak logo 1200px;
(linki 4*300 wiesz jak liczyć:) )
zmieniasz tlko w css:
  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. }


dla obu ten sam html - o to chodzi zmmieniasz css i zmienia się wygląd strony
tagi php - aby bylo widać wcięcia
  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. ?>


Pozdrawiam

Ten post edytował kantek 14.04.2009, 23:38:01
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: 13.10.2025 - 07:23