Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]tworzenie strony - nakładanie się jednego elementu na drugi
Forum PHP.pl > Forum > Przedszkole
tomekx86
5.01.2015, 19:04:19
Witam,
Tworzę stronę www, używam ccs oczywiście. Póki co mam menu z lewej strony i tekst po środku. Po przeładowaniu/odświeżeniu strony np F5 tekst po środku potrafi wleźć na menu - dosłownie. Nie zawsze tak jest, ale co któreś odświeżenie, tym bardziej jak szybko odświeżam. Wygląda to tak: http://zapodaj.net/f10518ea42423.gif.html
Kod wygląda tak:
[HTML] pobierz, plaintext 
  1. <?xml version="1.1" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W#C//DTD XHTML 1.1//EN"
  3.  "http://www.w3.org/tr/xhtml11//Dtd/xhtml11.11dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  5. <head>
  6.     <meta name="keywords" content="" />
  7.     <meta name="description" content="" />
  8.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9.     <meta name="language" content="pl" />
  10.     <link href="style.css" rel="stylesheet" type="text/css" />
  11. <style type="text/css"></style>
  12. <title>Roznoszenie ulotek</title>
  13.  <body>
  14.   <div id="pole1">
  15.   <img src="pole1.png" width="350" height="90"/></div>
  16.   <div id="pole2">
  17.   <img src="pole2.png" width="700" height="200"/></div>
  18.   <div id="pole3">
  19.   <img src="pole3.png" width="60" height="37"/></div>
  20.   </div>
  21.  
  22.   <div id="menu">
  23.    <ul style="color:red"type="square">
  24.  
  25.  
  26. <a href="index.html"><li style='text-decoration:none; border-bottom:2px solid grey; width:150px';>O nas</a></li>
  27. <a href="oferta.html"><li style='text-decoration:none; border-bottom:2px solid grey; width:150px';>Oferta</a></li>
  28. <a href="cennik.html"><li style='text-decoration:none; border-bottom:2px solid grey; width:150px';>Cennik</a></li>
  29. <a href="kontakt.html"><li style='text-decoration:none; border-bottom:2px solid grey; width:150px';>Kontakt</a></li>
  30. <a href="praca.html"><li style='text-decoration:none; border-bottom:2px solid grey; width:150px';>Praca</a></li>
  31.  
  32.  
  33.  
  34. </ul>
  35.  
  36.  
  37.             </div>
  38.  
  39.  
  40. <div id="srodek">
  41. <h4>Oferta</h4>
  42. <div class="box">
  43. Dystrybucja:ulotek, gazetek reklamowych
  44. </div></div>
  45.  
  46.  
  47. </body>
  48.  
  49.  
  50. </head>
  51.  
  52. </html>
[HTML] pobierz, plaintext


A css:

[HTML] pobierz, plaintext 
  1. @charset "UTF-8";
  2. *#pole1 {
  3. position: absolute;
  4. top: 0px;
  5. left: 0px;
  6. }
  7. #pole2 {
  8. position: absolute;
  9. top: 90px;
  10. left: 350px;
  11. }
  12. #pole3 {
  13. position: absolute;
  14. top: 290px;
  15. left: 350px;
  16. }
  17. #menu {
  18. position: relative;
  19. top: 80px;
  20. left: 57px;
  21. width: 495px;
  22. height: 36px;
  23. font-size: 18px;
  24. font-family:Arial;
  25. line-height:203%;
  26. }
  27. a {
  28. color: red;
  29. text-decoration: none;
  30. }
  31. #srodek {
  32. position: static;
  33. padding: 175 100 90 410;
  34. width:550px;
  35. color:red;
  36. font-size:18px;
  37. }
[HTML] pobierz, plaintext


Co robię nie tak? Gdzie jest błąd? sad.gif
bialko0019
8.01.2015, 22:52:26
Czesc Kolego, nie używaj aż tylu absolutów, jeśli już to w ostateczności ;-) Spójrz, rozpisz sobie model taki pudełkowy, nawet na kartce - jak byś pudełka ustawił - pudełko menu, pudełko treść i kolejne pudełko menu ;-)

Zrób tak - zrób jeden duży div i nazwij go kontener.

W nim zrób dwa divy i nazwij je np. left-side oraz content. Daj tym klasom wyświetlanie jako element liniowo-blokowy ( display: inline-block; ) oraz by w pionie wyświetlały się do góry, czyli vertical-align: top; Nadaj np. szerokość 30% oraz 70% ( ew. mniej i daj marginesy ). W ten sposób masz układ dwu-kolumnowy.

Do lewej kolumny włóż dwa divy i nazwij je menu, oczywiście klasy nie identyfikatowy. W nich wpisz sobie listy <ul> i ostyluj dowolnie.

W prawą kolumną włóż div i daj mu margines wewnętrzny. I w niego wpisz tekst - wszystko ładnie pięknie Ci się ułoży ;-) Jak byś miał problem - pisz, pomożemy ;-)
tomekx86
9.01.2015, 17:33:29
Coś takiego mam:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W#C//DTD XHTML 1.1//EN"
  2.  "http://www.w3.org/tr/xhtml11//Dtd/xhtml11.11dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  4. <head>
  5.     <meta name="keywords" content="" />
  6.     <meta name="description" content="" />
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  9.     <meta name="language" content="pl" />
  10.     <link href="style.css" rel="stylesheet" type="text/css" />
  11. <style type="text/css"></style>
  12. <title>Roznoszenie ulotek</title>
  13.  <body>
  14.  <div id="kontener">
  15.    <div id="left-side">
  16.      <div class="menu">
  17.        <div id="pole1">
  18.        <img src="pole11.jpg" width="350" height="90"/>
  19.        <ul style="color:red"type="square">
  20.        <a href="index.html"><li style='text-decoration:none; border-bottom:2px solid gray; width:150px';><b>O nas</b></a></li>
  21.        <a href="oferta.html"><li style='text-decoration:none; border-bottom:2px solid gray; width:150px';><b>Oferta</b></a></li>
  22.        <a href="cennik.html"><li style='text-decoration:none; border-bottom:2px solid gray; width:150px';><b>Cennik</b></a></li>
  23.        <a href="kontakt.html"><li style='text-decoration:none; border-bottom:2px solid gray; width:150px';><b>Kontakt</b></a></li>
  24.        <a href="praca.html"><li style='text-decoration:none; border-bottom:2px solid gray; width:150px';><b>Praca</b></a></li></ul>
  25.        </div></div></div>
  26.    <div id="content"> 
  27.      <div class="srodek">Strona główna
  28.        <div id="pole2">
  29.        <img src="pole2.jpg" width="917" height="200"/></div>
  30.        <div id="pole3">
  31.        <img src="pole11.jpg" width="100" height="38"/></div>
  32.        <div id="konsultant">
  33.        <img src="konsultant.jpg" width="135" height="90"/></div>
  34.        <div id="linia">
  35.        <img src="linia.jpg" width="817" height="1,5"/></div>
  36. </div></div>
  37.  
  38.  
  39.  
  40.  
  41.  
  42.  
  43.  
  44.  
  45. </body>
  46.  
  47.  
  48. </head>
  49.  
  50. </html>
  51.  
[HTML] pobierz, plaintext


i css:
[HTML] pobierz, plaintext 
  1. @charset "UTF-8";
  2. *#pole1 {
  3.     position: absolute;
  4.     top: 0px;
  5.     left: 100px;
  6. }
  7. #pole2 {
  8.     position: absolute;
  9.     top: 90px;
  10.     left: 350px;
  11. }
  12. #pole3 {
  13.     position: absolute;
  14.     top: 290px;
  15.     left: 350px;
  16. }
  17. #linia {
  18.     position: absolute;
  19.     top: 314px;
  20.     left: 350px;
  21. }
  22. #konsultant {
  23.     position: absolute;
  24.     top: 0px;
  25.     left: 1005px;
  26. }
  27. #menu {
  28.     position: relative;
  29.     top: 80px;
  30.     left: 100px;
  31.     width: 495px;
  32.     height: 36px;
  33.     font-size: 18px;
  34.     font-family:Consolas;
  35.     line-height:200%;
  36. }
  37. a {
  38.     color: red;
  39.     text-decoration: none;
  40. }
  41. #srodek {
  42.     position: absolute;
  43.     top: 286px;
  44.     left: 465px;
  45.     width: 550px;
  46.     color:black;
  47.     font-size: 12px;
  48.     font-family: Arial;
  49. }
  50. #tekst {
  51.     position: absolute;
  52.     top: 340px;
  53.     left: 465px;;
  54.     width:550px;
  55.     color:black;
  56.     font-size:16px;
  57.     font-family:Arial;
  58. }
  59. #left-side{
  60.     display:inline-block;
  61.     vertical-align:top;
  62.     width: 495px;
  63.     height: 36px;
  64.     font-size: 18px;
  65.     font-family:Consolas;
  66.     line-height:200%;
  67.     margin-top: 100px;
  68.     margin-left: 50px;
  69. }
  70. #content{
  71.     display:inline-block;
  72.     vertical-align:top;
  73.     width: 495px;
  74.     height: 36px;
  75.     font-size: 18px;
  76.     font-family:Consolas;
  77.     line-height:200%;
  78.     margin-top: 190px;
  79.     margin-left: 0px;
  80. }
[HTML] pobierz, plaintext


Chyba nadal fatalnie to wygląda oczywiście dzięki mnie, prawda? sad.gif Jak zmieniam odległości umieszczenia menu czy content to nic nie przesuwa się.
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.