 [CSS]Wyśrodkowanie menu |
  |
| [CSS]Wyśrodkowanie menu |
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 61 Pomógł: 0 Dołączył: 6.02.2009 Ostrzeżenie: (0%) 
 |
Pomoże mi ktoś wyśrodkować to menu. W sensie text:
CSS: Kod #menu_wrap
{ position:relative; margin-top:0px; padding:0; padding-right:0px; width:100%;height:49px; list-style-type:none; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.2); -moz-box-shadow:0 1px 3px rgba(0,0,0,.2); box-shadow:0 1px 3px rgba(0,0,0,.2) } .button a { cursor:pointer; text-align:center; font:15px/100% Georgia, "Times New Roman", Times, serif; font-weight:bold; position:relative; min-width:50px; height:20px; float:left; text-align:left; padding:10px; padding-top:14.5px; padding-bottom:14.5px; text-decoration:none; text-shadow:0 1px 1px rgba(0,0,0,.3) } .Orange,.Orange .button a{ color:#fef4e9; background: #f9bc59; border-right:solid 1px #f27c21; background: -webkit-linear-gradient(top, #f9bc59 0%,#f27c21 100%); background: -o-linear-gradient(top, #f9bc59 0%,#f27c21 100%); background: -ms-linear-gradient(top, #f9bc59 0%,#f27c21 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9bc59', endColorstr='#f27c21',GradientType=0 ); background: linear-gradient(top, #f9bc59 0%,#f27c21 100%);} .Orange .button a:hover,.Orange .button a:focus { background: #f88e11; background: -moz-linear-gradient(top, #f88e11 0%, #e25300 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f88e11), color-stop(100%,#e25300)); background: -webkit-linear-gradient(top, #f88e11 0%,#e25300 100%); background: -o-linear-gradient(top, #f88e11 0%,#e25300 100%); background: -ms-linear-gradient(top, #f88e11 0%,#e25300 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f88e11', endColorstr='#e25300',GradientType=0 ); background: linear-gradient(top, #f88e11 0%,#e25300 100%);} .Orange .button a:active { color:#fcd3a5; background: #f47a20; background: -moz-linear-gradient(top, #f47a20 0%, #faa51a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f47a20), color-stop(100%,#faa51a)); background: -webkit-linear-gradient(top, #f47a20 0%,#faa51a 100%); background: -o-linear-gradient(top, #f47a20 0%,#faa51a 100%); background: -ms-linear-gradient(top, #f47a20 0%,#faa51a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f47a20', endColorstr='#faa51a',GradientType=0 ); background: linear-gradient(top, #f47a20 0%,#faa51a 100%);} |
 |
 
|
|
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 731 Pomógł: 141 Dołączył: 9.05.2011 Skąd: śląskie Ostrzeżenie: (0%)
|
Działa Ci sam CSS bez HTMLa? Czapki z głów (IMG:style_emoticons/default/Lkingsmiley.png)
|
|
|
|
|
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 61 Pomógł: 0 Dołączył: 6.02.2009 Ostrzeżenie: (0%)
|
Zapomniałem napisać HTML. Ale kodu nie jest dużo i użycie znacznika <center> nic nie daje:
HTML: Kod <ul id="menu_wrap" class="Orange"> <li class="button"><a href="#">Strona Główna</a></li> <li class="button"><a href="#">Realizacje</a></li> <li class="button"><a href="#">Oferta</a></li> <li class="button"><a href="#">Kontakt</a></li> </ul> Menu sie wtedy rozjedza. Robi się lista. A buttony powinny być koło siebie. A tak apropo. Jak zrobić żeby zdjęcie bacground było na śrdoku strony i żeby był odstęp od lewej i prawej strony? Chciałbym żeby w środku tego backgorunda znajdował się tekst na środku. CSS: Kod #tresc
{ width:100%; opacity:0.55; background:url(images/backgroud_content.png); } |
|
|
|
|
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 731 Pomógł: 141 Dołączył: 9.05.2011 Skąd: śląskie Ostrzeżenie: (0%)
|
Co do pierwszego, użyj "text-align". "<center>" jest przestarzałe. Proszę: http://jsfiddle.net/9edzn22o/. Jeśli o to Ci chodziło.
Co do drugiego: http://www.w3schools.com/cssref/pr_background-position.asp Ten post edytował mar1aczi 13.11.2015, 15:54:22 |
|
|
|
|
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 61 Pomógł: 0 Dołączył: 6.02.2009 Ostrzeżenie: (0%)
|
I nie działa. Zobacz http://aas92.cba.pl/home.html. Chodzi mi o to żeby ten backgroud na środku nie był na cała stronę do tego to menu trochę jest za szeroko. Bo robi na dole sroll
HTML: Kod <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Greefies Css Template</title> <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'> <link rel="stylesheet" type="text/css" href="style.css" media="screen"> </head> <body> <div id="main_container"> <div id="header"> <div id="slider"> <figure> <img src="images/1.jpg" alt=""> <img src="images/2.jpg" alt=""> <img src="images/1.jpg" alt=""> <img src="images/2.jpg" alt=""> <img src="images/1.jpg" alt=""> </figure> </div> <ul id="menu_wrap" class="Orange"> <li class="button"><a href="#">Strona Główna</a></li> <li class="button"><a href="#">Realizacje</a></li> <li class="button"><a href="#">Oferta</a></li> <li class="button"><a href="#">Kontakt</a></li> </ul> <div id="tresc"> <center><br><p>text</p> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br> </div> </div> <!--end of main content--> </div> <!--end of main container--> </div> </body></html> CCS: Kod header {width:120%}
header img {width:100%;} @keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } } div#slider { overflow:hidden; } div#slider figure img { width:20%; float:left; } div#slider figure { position: relative; width: 500%; height:30%; margin: 0; left: 0; text-align: left; font-size: 0; animation: 30s slidy infinite; } body { background-color: #3c3a3d; margin:0px; padding:0px; font: 10px verdana, arial, helvetica; font-family:Helvetica, sans-serif; font-size:1.3em; } p { color:#ffffff; padding:15px; } #main_container { width:100%; height:auto; } #header { width:100%; height:auto; } /*----------------------menu-------------------------*/ #menu_wrap { position:relative; margin-top:0px; padding:0; width:100%; height:49px; list-style-type:none; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; } #menu_wrap li { display: inline-block; } #menu_wrap { position:relative; text-align: center; margin-top:0px; padding:0; padding-right:0px; height:49px; list-style-type:none; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.2); -moz-box-shadow:0 1px 3px rgba(0,0,0,.2); box-shadow:0 1px 3px rgba(0,0,0,.2) } .button a { display: inline-block; cursor:pointer; text-align:center; font:15px/100% Georgia, "Times New Roman", Times, serif; font-weight:bold; position:relative; min-width:50px; height:20px; text-align:left; padding:10px; padding-top:14.5px; padding-bottom:14.5px; text-decoration:none; text-shadow:0 1px 1px rgba(0,0,0,.3) } .Orange,.Orange .button a{ color:#fef4e9; background: #f9bc59; border-right:solid 1px #f27c21; background: -webkit-linear-gradient(top, #f9bc59 0%,#f27c21 100%); background: -o-linear-gradient(top, #f9bc59 0%,#f27c21 100%); background: -ms-linear-gradient(top, #f9bc59 0%,#f27c21 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9bc59', endColorstr='#f27c21',GradientType=0 ); background: linear-gradient(top, #f9bc59 0%,#f27c21 100%);} .Orange .button a:hover,.Orange .button a:focus { background: #f88e11; background: -moz-linear-gradient(top, #f88e11 0%, #e25300 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f88e11), color-stop(100%,#e25300)); background: -webkit-linear-gradient(top, #f88e11 0%,#e25300 100%); background: -o-linear-gradient(top, #f88e11 0%,#e25300 100%); background: -ms-linear-gradient(top, #f88e11 0%,#e25300 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f88e11', endColorstr='#e25300',GradientType=0 ); background: linear-gradient(top, #f88e11 0%,#e25300 100%);} .Orange .button a:active { color:#fcd3a5; background: #f47a20; background: -moz-linear-gradient(top, #f47a20 0%, #faa51a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f47a20), color-stop(100%,#faa51a)); background: -webkit-linear-gradient(top, #f47a20 0%,#faa51a 100%); background: -o-linear-gradient(top, #f47a20 0%,#faa51a 100%); background: -ms-linear-gradient(top, #f47a20 0%,#faa51a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f47a20', endColorstr='#faa51a',GradientType=0 ); background: linear-gradient(top, #f47a20 0%,#faa51a 100%);} /*-----------------------------content------------------*/ #tresc { opacity:0.55; background:url(images/backgroud_content.png); background-attachment: fixed; background-position: center; } /*-----------------------------footer------------------*/ #footer{ clear:both; width: auto; height:37px; color: #fff; background-color:#416271; } .copyright{ float:left; padding-left:10px; padding-top:10px; } .footer_links{ float:right; padding-right:15px; padding-top:13px; } .footer_links a{ text-decoration:none; color: #fff; padding-left:10px; } .footer_links a:hover{ text-decoration:underline; color: #fff; } @media (min-width: 1100px) { #main_container {width:100%;float:center;} #menu {width:100%;} #tresc{width:100%} } @media (max-width: 1100px) and (min-width: 1000px) { #main_container {width:100%;float:center;} #menu{width:100%;} #tresc{width:100%} } @media (max-width: 1000px) and (min-width: 800px) { #main_container {width:100%;float:center;} #menu{width:100%;} #tresc{width:100%} } @media (max-width: 800px) and (min-width: 500px) { #main_container {width:100%;float:center;} #menu {width:100%;} #tresc{width:100%} } @media (max-width: 500px) { #main_container {width:100%;float:center;} #menu{width:100%;} #tresc{width:100%} } |
|
|
|
|
Post
#6
|
|
|
Grupa: Zarejestrowani Postów: 731 Pomógł: 141 Dołączył: 9.05.2011 Skąd: śląskie Ostrzeżenie: (0%)
|
Cytat(aas92 @ 13.11.2015, 21:46:55 )  I nie działa. Działa dokładnie tak jak masz to zrobione. Cytat(aas92) Zobacz http://aas92.cba.pl/home.html. Chodzi mi o to żeby ten backgroud na środku nie był na cała stronę Niestey nie wiem który background masz na myśli. Cytat(aas92) do tego to menu trochę jest za szeroko. Bo robi na dole sroll Tak to zakodowałeś, to tak jest. Usuń "width: 100%;" z #menu_wrap" i scroll "zniknie". btw. Nie do końca rozumiem Twoje media queries skoro i tak we wszystkich jest dokładnie to samo. |
|
|
|
|
Post
#7
|
|
|
Grupa: Zarejestrowani Postów: 61 Pomógł: 0 Dołączył: 6.02.2009 Ostrzeżenie: (0%)
|
Z media queries to ja też do końca nie rozumiem. Dopiero uczę się pisać stronę. Ale bez nich ta strona na telefonie i tablecie się dobrze nie wyświetla. Już sobie poradziłem ze wszystkim. Teraz został mi ostatni problem. Jak dodać backgroud na całą stronę. Tylko żeby się nie dublował i był rozciągniety na całą stronę a najlepiej zaczynał się od menu. Pomożesz mi to zrobić? Backgroud'em ma być zdjęcie
|
|
|
|
|
Post
#8
|
|
|
Grupa: Zarejestrowani Postów: 731 Pomógł: 141 Dołączył: 9.05.2011 Skąd: śląskie Ostrzeżenie: (0%)
|
Masz już background dla elementu #tresc. Umieszczając tutaj odpowiednio duże zdjęcie uzyskasz tło, o którym piszesz.
|
|
|
|
|
Post
#9
|
|
|
Grupa: Zarejestrowani Postów: 61 Pomógł: 0 Dołączył: 6.02.2009 Ostrzeżenie: (0%)
|
Divu o nazwie "Tresc" nie ruszamy. Chce osobno dodać zdjęcie. Zdjęcie mam w rozmiarze powiedzmy 1000x800 (szerokosc x wysokosc). I nie wiem jak to zrobic zeby sie rozciagalo i dopasowywalo do wielkosci. Podasz mi moze jakis tutek lub gotowy kod a ja sobie zobaczę jak to się robi
Niestety tekst wychodzi za ten backgroud (Półprzezroczysty). Zobacz sobie: aas92.cba.pl/home.html HTML: Kod <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Greefies Css Template</title> <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'> <link rel="stylesheet" type="text/css" href="style.css" media="screen"> </head> <body> <div id="main_container"> <div id="header"> <div id="slider"> <figure> <img src="images/1.jpg" alt=""> <img src="images/2.jpg" alt=""> <img src="images/1.jpg" alt=""> <img src="images/2.jpg" alt=""> <img src="images/1.jpg" alt=""> </figure> </div> <ul id="menu_wrap" class="Orange"> <li class="button"><a href="#">Strona Główna</a></li> <li class="button"><a href="#">Realizacje</a></li> <li class="button"><a href="#">Oferta</a></li> <li class="button"><a href="#">Kontakt</a></li> </ul> <div id="tresc"> <br><p div="tresc">textsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdssssss ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssdsdsdsd</p> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br> </div> </div> <!--end of main content--> </br> <div id="footer"> <div class="copyright"> </div> </div> </div> <!--end of main container--> </div> </body></html> CSS: Kod header {width:120%} header img {width:100%;} @keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } } div#slider { overflow:hidden; } div#slider figure img { width:20%; float:left; } div#slider figure { position: relative; width: 500%; height:30%; margin: 0; left: 0; text-align: left; font-size: 0; animation: 30s slidy infinite; } body { background-color: #3c3a3d; margin:0px; padding:0px; font: 10px verdana, arial, helvetica; font-family:Helvetica, sans-serif; font-size:1.3em; } p { color:#ffffff; padding:15px; } #main_container { width:100%; height:auto; text-align:center; } #header { width:100%; height:auto; } /*----------------------menu-------------------------*/ #menu_wrap { position:relative; margin-top:0px; padding:0; width:100%; height:49px; list-style-type:none; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; } #menu_wrap li { display: inline-block; } #menu_wrap { position:relative; text-align: center; margin-top:0px; padding:0; padding-right:0px; height:49px; list-style-type:none; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.2); -moz-box-shadow:0 1px 3px rgba(0,0,0,.2); box-shadow:0 1px 3px rgba(0,0,0,.2) } .button a { display: inline-block; cursor:pointer; text-align:center; font:15px/100% Georgia, "Times New Roman", Times, serif; font-weight:bold; position:relative; min-width:50px; height:20px; text-align:left; padding:10px; padding-top:14.5px; padding-bottom:14.5px; text-decoration:none; text-shadow:0 1px 1px rgba(0,0,0,.3) } .Orange,.Orange .button a{ color:#fef4e9; background: #f9bc59; background: -webkit-linear-gradient(top, #f9bc59 0%,#f27c21 100%); background: -o-linear-gradient(top, #f9bc59 0%,#f27c21 100%); background: -ms-linear-gradient(top, #f9bc59 0%,#f27c21 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9bc59', endColorstr='#f27c21',GradientType=0 ); background: linear-gradient(top, #f9bc59 0%,#f27c21 100%);} .Orange .button a:hover,.Orange .button a:focus { background: #f88e11; background: -moz-linear-gradient(top, #f88e11 0%, #e25300 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f88e11), color-stop(100%,#e25300)); background: -webkit-linear-gradient(top, #f88e11 0%,#e25300 100%); background: -o-linear-gradient(top, #f88e11 0%,#e25300 100%); background: -ms-linear-gradient(top, #f88e11 0%,#e25300 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f88e11', endColorstr='#e25300',GradientType=0 ); background: linear-gradient(top, #f88e11 0%,#e25300 100%);} .Orange .button a:active { color:#fcd3a5; background: #f47a20; background: -moz-linear-gradient(top, #f47a20 0%, #faa51a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f47a20), color-stop(100%,#faa51a)); background: -webkit-linear-gradient(top, #f47a20 0%,#faa51a 100%); background: -o-linear-gradient(top, #f47a20 0%,#faa51a 100%); background: -ms-linear-gradient(top, #f47a20 0%,#faa51a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f47a20', endColorstr='#faa51a',GradientType=0 ); background: linear-gradient(top, #f47a20 0%,#faa51a 100%);} /*-----------------------------content------------------*/ #tresc { background:url(images/backgroud_content.png); background-repeat:no-repeat; background-position: center; background-size:75% 100%; margin:0 auto; overflow:hidden; opacity:0.55; width:100%; } /*-----------------------------footer------------------*/ #footer{ clear:both; width: auto; height:37px; color: #fff; background-color:#416271; } .copyright{ float:left; padding-left:10px; padding-top:10px; } .footer_links{ float:right; padding-right:15px; padding-top:13px; } .footer_links a{ text-decoration:none; color: #fff; padding-left:10px; } .footer_links a:hover{ text-decoration:underline; color: #fff; } @media (min-width: 1100px) { #main_container {width:100%;float:center;} #menu {width:100%;} } @media (max-width: 1100px) and (min-width: 1000px) { #main_container {width:100%;float:center;} #menu{width:100%;} } @media (max-width: 1000px) and (min-width: 800px) { #main_container {width:100%;float:center;} #menu{width:100%;} } @media (max-width: 800px) and (min-width: 500px) { #main_container {width:100%;float:center;} #menu {width:100%;} } @media (max-width: 500px) { #main_container {width:100%;float:center;} #menu{width:100%;} } Edit. Juz sobie poradziłem. Wystrczylo w body zrobić kolejność wyświetlania. Body wziąłem jako z-index:1 a główny kontener(całą reszte strony) na z-index:2 i działa. Tylko jak dopasować tekst który będę wpisywal w divie #tresc do backgrounda diva #tresc? |
|
|
|
|
|
Aktualny czas: 3.10.2025 - 21:48 |
