Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS]Elementy w kontenerach
zomfire
post
Post #1





Grupa: Zarejestrowani
Postów: 33
Pomógł: 0
Dołączył: 3.12.2013

Ostrzeżenie: (0%)
-----

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

Ten post edytował zomfire 6.12.2013, 16:29:02
Go to the top of the page
+Quote Post
Turson
post
Post #2





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
zomfire
post
Post #3





Grupa: Zarejestrowani
Postów: 33
Pomógł: 0
Dołączył: 3.12.2013

Ostrzeżenie: (0%)
-----

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


Ten post edytował zomfire 6.12.2013, 18:05:00
Go to the top of the page
+Quote Post
Turson
post
Post #4





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----

Zrób je po prostu na ul li
http://www.kurshtml.edu.pl/css/poziome_menu,menu.html
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

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