Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Elementy w kontenerach
Forum PHP.pl > Forum > Przedszkole
zomfire
6.12.2013, 16:22:36
Tworzę swoja pierwszą stronę na zaliczenie do szkoły. Zacząłem od ustalenia tematu i projektu. Rozmyśliłem sobie jej plan, a później orientacyjnie wyrysowałem i zabrałem się do roboty. Wtedy pojawiły się schody. Otóż Chciałem dodać nagłówek u góry na całą szerokość strony, a w niej dodać kilka elementów - logo oraz buttony i żeby było równo postanowiłem zawrzeć to w elemencie nachodzącym na nagłówek tyle, że jego szerokość ma wynosić 70%. W tym elemencie zawarte ma być logo - wycentrowane do lewej, i buttony do prawej. Proszę o pomoc.

Plan strony: https://drive.google.com/file/d/0B93nnLCy70...dit?usp=sharing
HtML

[HTML] pobierz, plaintext 
  1. <body>
  2. <div id="naglowek"><div id="logo"><div id="logoimg"><img src="images/Gmina_zagnansk_flaga.png"></img><div id="logotxt1">Nasz Kajetanów<div id="logotxt2">Twój portal informacyjny</div></div></div></div><div id="menu"><a class="button1" href=""></a><a class="button2" href=""></a><a class="button3" href=""></a><a class="button4" href=""></a><a class="button5" href=""></a></div></div>
  3. <div id="stopka1"></div>
  4. <div id="stopka2"></div>
  5.  
  6.  
  7. <!--Tresc-->
  8. </body>
[HTML] pobierz, plaintext


CSS

[HTML] pobierz, plaintext 
  1. /*Parametry calego szablonu*/
  2. body{
  3. 	background-color:white;
  4. 	margin-left:auto;
  5. 	margin-right:auto;
  6. 	margin-top:auto;
  7. 	margin-bottom:auto;
  8. 	width:100%;
  9.  
  10. }
  11. /*Parametry poszczegolnych elementow*/
  12. #naglowek{
  13. background-color:#313a43;
  14. height:100px;
  15. position:relative;
  16. }
  17.  
  18. #naglowek #menu{
  19. display: block;
  20. position: fixed;
  21. }
  22. #naglowek #logo{
  23. padding: 0px 400px;
  24. position:absolute;
  25. }
  26. #naglowek #logoimg{
  27. padding: 0px 0px;
  28. position:absolute;
  29. }
  30. #naglowek #logotxt1{
  31. padding: -53px 145px;
  32. position:absolute;
  33. }
  34. #naglowek #logotxt2{
  35. padding: 0px 0px;
  36. position:absolute;
  37. }
  38. #slajder{
  39.  
  40. }				
  41. #tresc1{
  42. text-align: center;
  43. }	
  44. #tresc2{
  45. text-align: center;
  46. }	
  47. #tresc3{
  48. text-align: center;
  49. }
  50. #mapa{
  51.  
  52. }
  53. #stopka1{
  54. background-color:#494B54;
  55. height:10px;
  56. }	
  57. #stopka2{
  58. background-color:#2e3741;
  59. height:200px;
  60. }	
  61. /*Nowe Fonty*/
  62.  
  63. @font-face {
  64.   font-family: 'Flex';
  65.   src: url('font/FlexDisplay-Thin.otf');
  66. }
[HTML] pobierz, plaintext


Edit probowalem to na paddingach pozycjonować, ale nawet ta sztuka nie wychodziła
Turson
6.12.2013, 17:24:25
Dla nagłówek
[CSS] pobierz, plaintext 
  1. .naglowek{
  2. width:100%
  3. }
[CSS] pobierz, plaintext

kontener
[CSS] pobierz, plaintext 
  1. .kontener{
  2. width:70%;
  3. margin:0px auto;
  4. }
[CSS] pobierz, plaintext

logo
[CSS] pobierz, plaintext 
  1. .logo{
  2. float:left;
  3. }
[CSS] pobierz, plaintext

button
[CSS] pobierz, plaintext 
  1. .button{
  2. float:right
  3. }
[CSS] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <div class="naglowek">
  2. 	<div class="kontener">
  3. 		<div class="logo">
  4. 			logo
  5. 		</div>
  6. 		<div class="button">
  7. 			button
  8. 		</div>
  9. 	</div>
  10. </div>
[HTML] pobierz, plaintext
zomfire
6.12.2013, 18:03:31
Dziękówka! Ale jest jeszcze jeden problem, te buttony są pod sobą zamiast być obok siebie: https://drive.google.com/file/d/0B93nnLCy70...dit?usp=sharing

html

[HTML] pobierz, plaintext 
  1. <div class="button">
  2. 			<a class="button1" href=""></a><a class="button2" href=""></a><a class="button3" href=""></a><a class="button4" href=""></a><a class="button5" href=""></a>
  3. 		</div>
[HTML] pobierz, plaintext


css

[HTML] pobierz, plaintext 
  1. .button{
  2. float:right;
  3. display:inline-block;
  4.  
  5. }
[HTML] pobierz, plaintext


przykladowy button

[HTML] pobierz, plaintext 
  1. a.button1
  2. {
  3. background: url(images/home_button1.png) no-repeat;
  4. display:block;
  5. height:100px;
  6. overflow:hidden;
  7. width:80px;
  8. }
  9. a.button1:hover
  10. {
  11. background-position: 0px -100px;
  12. }
  13. a.button1 span
  14. {
  15. display:block;
  16. text-indent: -9999px;
  17. }
[HTML] pobierz, plaintext
Turson
6.12.2013, 19:18:36
Zrób je po prostu na ul li
http://www.kurshtml.edu.pl/css/poziome_menu,menu.html
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.