Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]Wyśrodkowanie menu
aas92
post
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%);}
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
aas92
post
Post #2





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





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.
Go to the top of the page
+Quote Post

Posty w temacie
- aas92   [CSS]Wyśrodkowanie menu   13.11.2015, 14:31:57
- - mar1aczi   Działa Ci sam CSS bez HTMLa? Czapki z głów   13.11.2015, 14:35:39
- - aas92   Zapomniałem napisać HTML. Ale kodu nie jest dużo i...   13.11.2015, 15:35:25
- - mar1aczi   Co do pierwszego, użyj "text-align". ...   13.11.2015, 15:42:44
- - aas92   I nie działa. Zobacz http://aas92.cba.pl/home.html...   13.11.2015, 21:46:55
|- - mar1aczi   Cytat(aas92 @ 13.11.2015, 21:46:55 ) ...   13.11.2015, 23:00:40
- - aas92   Z media queries to ja też do końca nie rozumiem. D...   13.11.2015, 23:16:06
- - mar1aczi   Masz już background dla elementu #tresc. Umieszcza...   13.11.2015, 23:26:10
- - aas92   Divu o nazwie "Tresc" nie ruszamy. Chce ...   14.11.2015, 16:05:57

« 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: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

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

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