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:
[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
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
[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
Go to the top of the page
+Quote Post

Posty w temacie
- Wolfie   [HTML][CSS]Pozycjonowanie - błąd   11.04.2009, 16:07:34
- - vonEverest   Ustaw margin-left, margin-right oraz margin-top i ...   11.04.2009, 16:55:43
- - kantek   Proszę rozwiązanie do twojego przyk...   11.04.2009, 21:12:26
- - Wolfie   moze podrzuce plik html wraz z meniu bez funkcji r...   14.04.2009, 21:23:53
- - kantek   Proszę. Zacznę od uwag potem kod: 1) ob...   14.04.2009, 23:34:09
- - Wolfie   A nie lepiej zamknac caly formularz w jeszcze jedn...   16.04.2009, 15:43:48
- - erix   Może mieć, ale spacja między dwiema frazami w sele...   16.04.2009, 16:06:31
- - Wolfie   Niestety, bez spacji tez nie dziala , jedyny dzial...   16.04.2009, 16:23:33
- - kantek   Wiatm. może chodzi Ci o to: 1. css: label.f...   16.04.2009, 20:57:31
- - Wolfie   Chodzi mi o to, ze mamy czesc kodu : [PHP] pobier...   17.04.2009, 11:35:54
- - kantek   A sprawdzałeś na innej nazwie classy, bo...   18.04.2009, 17:54:35
- - Wolfie   Wystawiam pomogl za ogolna pomoc Dzieki !   21.04.2009, 15:34:06

« 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 · Przełącz na: Linearny+ · Drzewo

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

RSS Aktualny czas: 14.10.2025 - 15:38
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn