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

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 - 17:39
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn