Forum PHP.pl > [CSS]Wyśrodkowanie menu

Pomoc - Szukaj - Użytkownicy - Kalendarz

aas92

13.11.2015, 14:31:57

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%);}

mar1aczi

13.11.2015, 14:35:39

Działa Ci sam CSS bez HTMLa? Czapki z głów

aas92

13.11.2015, 15:35:25

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);
}

mar1aczi

13.11.2015, 15:42:44

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

aas92

13.11.2015, 21:46:55

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>





</div> 

</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%}
}

mar1aczi

13.11.2015, 23:00:40

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.

aas92

13.11.2015, 23:16:06

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

mar1aczi

13.11.2015, 23:26:10

Masz już background dla elementu #tresc. Umieszczając tutaj odpowiednio duże zdjęcie uzyskasz tło, o którym piszesz.

aas92

14.11.2015, 16:05:57

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>



</br>

         <div id="footer">
         <div class="copyright">
        </div>

        </div>


    </div>





</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?

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.