Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Tworzenie szablonu. Ustawienie elementów na stronie.
Forum PHP.pl > Forum > Przedszkole
matuszewski97
21.03.2013, 16:38:36
Witam.
Mam mały kłopocik, w związku z tym, że robię swój pierwszy szablon mam pewien problem z ustawieniem elementów na stronie.

[XML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Wirtualny Aeroklub Włocławski</title>
  6. <link rel="stylesheet" type="text/css" href="michal.css" />
  7. </head>
  8.  
  9.  
  10. <body>
  11. 	<div class"pasek">
  12. 		<img src="images/pasek.gif" alt="pasek" />
  13.     </div>
  14. 		<img src="images/tlo.png" alt="tlo" />
  15.  
  16.     	<img src="images/newsh.gif" alt="news" />
  17.  
  18.  
  19.  
  20. </body>
  21. </html>
[XML] pobierz, plaintext


@charset "utf-8";
/* Autorem kody XHTML i pliku CSS jest
Michał Matuszewski */

/* Kontakt : @ : matuszewski.michal.1@hotmail.com */


body {
width: 1306px;
margin: 0 auto;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
background: url(images/tlo.png);
background-position: center;
background-repeat: no-repeat
}

.pasek {
background-image: url(images/pasek.gif);
width: 1306px;
height: 5px;
}

.newsh {
background-image: url(images/newsh.gif);
width: 537px;
height: 314px;
float: hidden;
margin: 145px 0px 0px 571px;
}

To są moje kody (pierwszy index.html i drugi michal.css) Teraz na czym polega problem, powinno być tak:


a jak jest :


Ktoś wie co mogę zrobić żeby było tak jak w projekcie?
krzysiekk
21.03.2013, 17:23:35
hi


nie ma takiej wartośći "float: hidden;" jesli już to overflow:hidden

nie wiem czy o to ci chodzi 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Wirtualny Aeroklub Włocławski</title>
  6. <link rel="stylesheet" type="text/css" href="michal.css" />
  7. <style type="text/css">
  8.  
  9.  
  10.  
  11. body {
  12. font-family: Tahoma, Geneva, sans-serif;
  13. font-size: 11px;
  14. background:#ccc url(images/tlo.png) no-repeat top center;
  15.  
  16. }
  17.  
  18. #wrapper{margin:0 auto; width:1306px; border:1px solid #c00;}
  19. .pasek {height:5px; width:1306px; background:#f00;}
  20. .pasek img{float:right;}
  21. #content {overflow:hidden;margin-top:30px;}
  22. #content .img {float:right:}
  23.  
  24. }
  25. </style>
  26. </head>
  27.  
  28.  
  29. <body>
  30. <div id="wrapper">
  31. 	<div class="pasek">
  32. 		<img src="images/pasek.gif" alt="pasek" />
  33.     </div>
  34.  
  35. 	<div id="content">
  36.  
  37. 	<img src="images/tlo.png" alt="tlo" />
  38.  
  39.     	<img src="images/newsh.gif" alt="news" />
  40.     </div>
  41. </div>	
  42.  
  43. </body>
  44. </html>
  45.  
[HTML] pobierz, plaintext



moze jeszcze lepiej tak 


[HTML] pobierz, plaintext 
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Wirtualny Aeroklub Włocławski</title>
  7. <link rel="stylesheet" type="text/css" href="michal.css" />
  8. <style type="text/css">
  9.  
  10.  
  11.  
  12. body {
  13. font-family: Tahoma, Geneva, sans-serif;
  14. font-size: 11px;
  15. background:#ccc url(images/tlo.png) no-repeat top center;
  16.  
  17. }
  18.  
  19. #wrapper{margin:0 auto; width:1306px; border:1px solid #c00;}
  20. #pasek {height:5px; background:#f00;border:1px solid #fff;} 
  21. #content {overflow:hidden;margin-top:30px;}
  22. #content #left {float:right;width:200px;height:300px;border:1px solid #fff;}
  23. #content #right {float:right;width:500px;height:300px;border:1px solid #0f0;}
  24. #footer {height:20px; background:#232323;}
  25.  
  26. }
  27. </style>
  28. </head>
  29.  
  30.  
  31. <body>
  32. <div id="wrapper">
  33. 	<div id="pasek"></div>		
  34.  
  35. 	<div id="content">
  36. 		<div id="left">1</div>
  37. 		<div id="right">2</div>	
  38.     </div>
  39.  
  40. 	<div id="footer">ff</div>
  41. </div>	
  42.  
  43. </body>
  44. </html>
[HTML] pobierz, plaintext
!*!
21.03.2013, 17:37:48
matuszewski97 - jak już umieszczasz kod, pokaż też wersje online http://forum.php.pl/index.php?showtopic=15...mp;#entry896036
matuszewski97
21.03.2013, 17:38:04
Chodzi mi o to żeby wyglądało jak na rysunku w temacie.
Na tych chmurach ma być to niebieskie okienko.
Da się tak zrobić?
krzysiekk
21.03.2013, 19:54:04
Cytat(!*! @ 21.03.2013, 17:37:48 ) *
matuszewski97 - jak już umieszczasz kod, pokaż też wersje online http://forum.php.pl/index.php?showtopic=15...mp;#entry896036

odpowiadając na Twoje pytanie d tak da sie tak zrobić .


jesli oczekujesz pomocy to tak jak pisał kolega powyżej, w przeciwnym razie to wróżenie ...
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.