The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Menu bar aligning
Tony .
post Apr 24 2015, 12:40 PM
Post #1


Member
***

Group: Members
Posts: 31
Joined: 4-February 15
Member No.: 22,145
Hello guys.. i downloaded this menu bar from here http://cssmenumaker.com/menu/flat-accented-dropdown-menu i put it, everything ok. But it is going on the top of the page.. i want it to be between the logo and the slider : htttp://www.tonimusic.ro how this old menu is here. ( that's my site too ) i only want to know how to put it beteween them.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 24 2015, 04:37 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
In the sample file it does not. So what did you change?

Maybe you can link to the document where you try to use the menu so we can see what goes wrong?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Tony .
post Apr 25 2015, 06:59 AM
Post #3


Member
***

Group: Members
Posts: 31
Joined: 4-February 15
Member No.: 22,145
Here we go : http://tonimusic.ro/indextest.html, i want the ToniMusic logo be on the top.. xD


CSS :
CODE
@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
/* Starter CSS for Menu */
#cssmenu {
  padding: 0;
  margin: 0;
  border: 0;
  width: auto;
}
#cssmenu ul,
#cssmenu li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu ul {
  position: relative;
  z-index: 597;
}
#cssmenu ul li {
  float: left;
  min-height: 1px;
  vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}
#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}
#cssmenu ul ul li {
  float: none;
}
#cssmenu ul ul ul {
  top: 0;
  left: 190px;
  width: 190px;
}
#cssmenu ul li:hover > ul {
  visibility: visible;
}
#cssmenu ul ul {
  bottom: 0;
  left: 0;
}
#cssmenu ul ul {
  margin-top: 0;
}
#cssmenu ul ul li {
  font-weight: normal;
}
#cssmenu a {
  display: block;
  line-height: 1em;
  text-decoration: none;
}
/* Custom CSS Styles */
#cssmenu {
  background: #333333;
  border-bottom: 4px solid #1b9bff;
  font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
  font-size: 12px;
}
#cssmenu > ul {
  *display: inline-block;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu ul {
  text-transform: uppercase;
}
#cssmenu ul ul {
  border-top: 4px solid #1b9bff;
  text-transform: none;
  min-width: 190px;
}
#cssmenu ul ul a {
  background: #1b9bff;
  color: #ffffff;
  border: 1px solid #0082e7;
  border-top: 0 none;
  line-height: 150%;
  padding: 16px 20px;
  font-size: 12px;
}
#cssmenu ul ul ul {
  border-top: 0 none;
}
#cssmenu ul ul li {
  position: relative;
}
#cssmenu ul ul li:first-child > a {
  border-top: 1px solid #0082e7;
}
#cssmenu ul ul li:hover > a {
  background: #4eb1ff;
  color: #ffffff;
}
#cssmenu ul ul li:last-child > a {
  -moz-border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -moz-box-shadow: 0 1px 0 #1b9bff;
  -webkit-box-shadow: 0 1px 0 #1b9bff;
  box-shadow: 0 1px 0 #1b9bff;
}
#cssmenu ul ul li:last-child:hover > a {
  -moz-border-radius: 0 0 0 3px;
  -webkit-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#cssmenu ul ul li.has-sub > a:after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -8px;
}
#cssmenu ul li:hover > a,
#cssmenu ul li.active > a {
  background: #1b9bff;
  color: #ffffff;
}
#cssmenu ul li.has-sub > a:after {
  content: '+';
  margin-left: 5px;
}
#cssmenu ul li.last ul {
  left: auto;
  right: 0;
}
#cssmenu ul li.last ul ul {
  left: auto;
  right: 99.5%;
}
#cssmenu a {
  background: #333333;
  color: #CBCBCB;
  padding: 0 20px;
}
#cssmenu > ul > li > a {
  line-height: 48px;
  font-size: 12px;
}


HTML :

CODE
<!DOCTYPE html>
<html lang="en">
    <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>ToniMusic</title>

        <meta charset="utf-8">
        <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
        <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen">
        <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
        <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen">  
        <script src="js/jquery-1.6.3.min.js" type="text/javascript"></script>
        <script src="js/cufon-yui.js" type="text/javascript"></script>
        <script src="js/cufon-replace.js" type="text/javascript"></script>
        <script src="js/Vegur_700.font.js" type="text/javascript"></script>
        <script src="js/Vegur_400.font.js" type="text/javascript"></script>
        <script src="js/FF-cash.js" type="text/javascript"></script>
        <script src="js/script.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/easyTooltip.js"></script>
        <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
        <script src="js/hover-image.js" type="text/javascript"></script>
        <script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
        <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/tms-0.3.js"></script>
        <script type="text/javascript" src="js/tms_presets.js"></script>
        <script type="text/javascript">
            $(window).load(function(){
                $('.slider')._TMS({
                    duration:800,
                    easing:'easeOutQuad',
                    preset:'diagonalFade',
                    pagination:false,
                    slideshow:6000,
                    banners:false,
                    waitBannerAnimation:false,
                    pauseOnHover:true
                });
                $("a[data-gal^='prettyVideo']").prettyPhoto({animation_speed:'normal',theme:'facebook',slideshow:false, autoplay_slideshow: false});
            });
        </script>        
        <!--[if lt IE 7]>
            <div style=' clear: both; text-align:center; position: relative;'>
                <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
                    <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
                </a>
            </div>
        <![endif]-->
        <!--[if lt IE 9]>
            <script type="text/javascript" src="js/html5.js"></script>
            <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
        <![endif]-->
        
    <!-- internal styles -->
    

        
    </head>
    <body id="page1">
        <div class="extra">
        

        
<!--==============================header=================================-->
            <header>
            
                <div class="main">
                
                    
                    <div class="bg-1">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

<div id='cssmenu'>
<ul>
   <li><a href='#'>Home</a></li>
   <li class='active has-sub'><a href='#'>Products</a>
      <ul>
         <li class='has-sub'><a href='#'>Product 1</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'>Product 2</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'>About</a></li>
   <li><a href='#'>Contact</a></li>
</ul>
</div>

                    
                        <h1><a href="index.html">ToniMusic</a></h1>
                        
                        
                        
                    </div>
                    
                    
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>





                    <div class="slider-wrapper">
                        <div class="slider  ">
                            <ul class="items">
                                <li><img src="images/slider-img1.jpg" alt=""  /></li>
                                <li>
                                    <img src="images/slider-img2.jpg" alt=""  />
                                </li>
                                <li>
                                    <img src="images/slider-img3.jpg" alt=""  />
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </header>
<!--==============================content================================-->
            <section id="content"><div class="ic">Bun venit la ToniMusic</div>
                <div class="main">
                    
                            
                                    
                    <div class="content-padding-2">
                        <div class="container_12">
                            <div class="wrapper">
                                <article class="grid_4">
                                    <div class="padding-grid-1">
                                        
                                        <div class="wrapper img-indent-bot1">
                                            
                                            <div class="extra-wrap">
                                                <div class="indent-top">
                                                    
                                                </div>
                                            </div>
                                        </div>
                                        <div class="wrapper">
                                            
                                            <div class="extra-wrap">
                                                <div class="indent-top">
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                                <article class="grid_4 alpha">
                                
                                <article class="grid_4 alpha">
                                    <div class="padding-grid-2">
                                    
                                        
                                    </div>
                                </article>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="block"></div>
            </section>
        </div>
<!--==============================footer=================================-->
        <footer>
            <div class="main">
                <div class="footer-bg">
                    <div class="container_12">
                        <div class="wrapper">
                            <div class="grid_12">
                                <div class="footer-padding">
                                    <div class="wrapper">
                                        
                                        </div>
                                    <div class="aligncenter">
                                        Copyright &copy; 2008 - 2015 <a rel="nofollow" href="index.html" target="_blank">ToniMusic</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <script type="text/javascript"> Cufon.now(); </script>
    </body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 25 2015, 07:33 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Easy peasy. You have the link button after the menu in the HTML. That's why they come in that order on the page. Change the order in the source and it will change on the page too. smile.gif

Also, using a string of BR tags to create space isn't a good idea at all. Depending on why you do it, use margin, padding or height instead.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Tony .
post Apr 25 2015, 07:47 AM
Post #5


Member
***

Group: Members
Posts: 31
Joined: 4-February 15
Member No.: 22,145
I didn't understood at all.. what i need exactly to do ? Do you need the CSS of the page too ? i put only the css of the menubar.
and i don't see a link button after the menu xD
and where i need to change the order ? What source ?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 25 2015, 08:14 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
The logo then. The button like thing labeled Toni Music. That's what you talk about, right? What you want at the top of the page?

Things that come first in the source will be at the top of the page if you don't use CSS to change that. You've placed the menu before the logo in the HTML so it will be before the logo on the page. Switch that around.


CODE
<!-- MENU IS BEFORE LOGO -->

<div id='cssmenu'>
<ul>
   <li><a href='#'>Home</a></li>
   <li class='active has-sub'><a href='#'>Products</a>
      <ul>
         <li class='has-sub'><a href='#'>Product 1</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'>Product 2</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'>About</a></li>
   <li><a href='#'>Contact</a></li>
</ul>
</div>

    

<!-- LOGO COMES AFTER -->    
            
                        <h1><a href="index.html">ToniMusic</a></h1>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Tony .
post Apr 25 2015, 08:18 AM
Post #7


Member
***

Group: Members
Posts: 31
Joined: 4-February 15
Member No.: 22,145
Wow so stupid i am i didn't even noticed that smile.gif)
Thanks man smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 25 2015, 08:25 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Welcome. happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Tony .
post Apr 25 2015, 09:03 AM
Post #9


Member
***

Group: Members
Posts: 31
Joined: 4-February 15
Member No.: 22,145
I have another problem. I don't know how to align that logo.. if you see it's not exactly in the middle.. xD you can see it well there : http://tonimusic.ro/audio.html

That's my CSS :
CODE
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block}
mark, rp, rt, ruby, summary, time {display:inline}
/* Global properties ======================================================== */
html {width:100%}
body

{background-image:url("../images/bg1.jpg");

background-repeat:repeat-y;

background-position:top center;

background-attachment:fixed;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
color:#a1a1a1;
min-width:920px;
}


.ic {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
.main {
    width:960px;     
    padding:0;
    margin:0 auto;
    font-size:0.8125em;
    line-height:1.5384em;
}
a {color:#93ceee; outline:none}
a:hover {text-decoration:none}
.col-1, .col-2 {float:left}
.wrapper {width:100%; overflow:hidden}
.extra-wrap {overflow:hidden}
p {margin-bottom:18px}
.p1 {margin-bottom:8px}
.p2 {margin-bottom:15px}
.p3 {margin-bottom:30px}
.p4 {margin-bottom:40px}
.p5 {margin-bottom:50px}
.reg {text-transform:uppercase}
.fleft {float:left}
.fright {float:right}
.alignright {text-align:right}
.aligncenter {text-align:center}
.title {margin-bottom:18px}
.it {font-style:italic}
.letter {letter-spacing:-1px}
.color-1 {color:#fff}
.color-2 {color:#000}
.color-3 {color:#666}
.relet {position:relative}

/*********************************boxes**********************************/
.margin-bot {margin-bottom:35px}
.margin-bot1 {margin-bottom:32px}

.spacing {margin-right:35px}

.indent {padding:0 0 0px 30px}
.indent2 {padding-left:50px}
.indent-bot {margin-bottom:20px}
.indent-bot1 {margin-bottom:29px}
.indent-bot3 {margin-bottom:45px}

.indent-top {margin-top:-3px}
.indent-top1 {margin-top:-10px}

.margin-none {margin-bottom:0px}

.img-indent-bot {margin-bottom:25px}
.img-indent-bot1 {margin-bottom:23px}
.img-indent-bot2 {margin-bottom:26px}

.img-indent {float:left; margin:0 20px 0px 0}    
.img-indent2 {float:left; margin:0 13px 0px 0}    
.img-indent-r {float:right; margin:0 0px 0px 40px}    

.prev-indent-bot {margin-bottom:10px}
.prev-indent-bot1 {margin-bottom:6px}
.prev-indent-bot2 {margin-bottom:4px}

.buttons a:hover {cursor:pointer}
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

.menu li a,
.list-1 li a,
.list-2 li a,
.link,
.button,
.logo {text-decoration:none}    

/*********************************header*************************************/
header {
    min-height:189px;
    width:100%;
    position:relative;
    z-index:2;
}

h1 {
    padding:39px 0 0 357px;
    position:relative;
}
h1 a {
    display:block;
    width:293px;
    height:83px;
    text-indent:-5000px;
    background:url(../images/logo.png) 0 0 no-repeat;
}

.menu {
    padding:10px 0 10px 0;
    width:100%;
    height:40px;
    overflow:hidden;
}
.menu li {
    float:left;
    position:relative;
    background:url(../images/menu-li-line.png) no-repeat left top;
    padding:5px 33px 0 34px;
}
.menu li.item {background:none; padding-left:46px}
.menu li.item-1 {padding-right:34px; padding-left:39px}
.menu li.last {padding-left:33px; padding-right:0px}
.menu li a {
    display:inline-block;
    font-size:14px;
    line-height:1.391em;
    text-transform:uppercase;
    padding:0;
    color:#fff;
    letter-spacing:-1px;
}
.menu li a.active,
.menu li a:hover {color:#93ceee}


/********Slider********/
.slider-wrapper {
    width:960px;
    height:368px;
    padding:0;
    background:none;
    position:relative;
    z-index:1;
    padding:0;
}
.slider {
    width:960px;
    height:368px;
}

.items {
    display:none;
}

/*********************************content*************************************/
#content {
    width:100%;
    padding:0;
    position:relative;
    z-index:1;
}
.content-padding-1 {padding:18px 0 37px 0}
.content-padding-2 {padding:23px 0 57px 0}
.padding-grid-1 {padding: 0 0 0 28px}
.padding-grid-2 {padding: 0 0 0 29px}
.padding-grid-3 {padding: 0 0 0 19px}
.padding-grid-4 {padding:3px 0 0 19px; line-height:24px}
h3 {
    font-size:25px;
    line-height:2em;
    margin:0 0 9px 0;
    color:#93ceee;
}
h3 strong {color:#fff}
h4 {
    font-size:20px;
    line-height:2em;
    color:#ffffff;
    letter-spacing:-1px;
    margin-bottom:-8px;
    }
h4 strong {color:#93ceee}
h4 a {text-decoration:none; display:inline-block; color:#fff}
h4 a:hover {color:#93CEEE}
h6 {
    font-size:13px;
    line-height:20px;
    color:#fff;
    }
.time {
    display:block;
    width:55px;
    height:54px;
    overflow:hidden;
    text-align:center;
    float:left;
    margin-right:16px;
    }
.time-stule-1 {background:url(../images/marker-text-1.png) no-repeat 1px top}
.time-stule-2 {background:url(../images/marker-text-2.png) no-repeat 1px top}
.time-stule-3 {background:url(../images/marker-text-3.png) no-repeat 1px top}
.text-1,
.text-3,
.text-5 {
    font-size:25px;
    line-height:2em;
    display:block;
    color:#fff;
    margin-top:-6px;
    padding-left:2px;
    }
.text-5 {color:#5ca8d2}
.text-2,
.text-4,
.text-6 {
    font-size:20px;
    line-height:2em;
    display:block;
    color:#a1a1a1;
    margin-top:-29px;
    letter-spacing:-1px;
}
.text-4 {color:#fff}
.text-6 {color:#4d4d4d}
.style-img {background:#3b3b3b; padding:1px}
.style-img-2 {border:1px solid #333333; padding:3px}
.list-1 li {
    font-size:13px;
    line-height:20px;
}
    .list-1 li a {
        display:inline-block;
        color:#fff;
    }
        .list-1 li a:hover {color:#93CEEE}
        
.list-2 {padding:5px 21px 0 0}
.list-2 li {
    position:relative;
    overflow:hidden;
    width:41px;
    min-height:20px;
    }
    .list-2 li span {
        display:inline-block;
        width:21px;
        background:url(../images/list-2-line.gif) no-repeat right -1px;
        margin-right:15px;
        float:left;
    }
    .list-2 li a {
        display:block;
        width:5px;
        height:10px;
        background:url(../images/list-2-marker.gif) no-repeat center -50px;
        float:right;
        }
    .list-2 li a.left-list {background-position:left 0; float:left}
    .list-2 li a.right-list {background-position:right 0; float:right}
        .list-2 li a.left-list:hover {background-position:left bottom}
        .list-2 li a.right-list:hover {background-position:right bottom}
.link-2 {
    display:block;
    width:73px;
    height:12px;
    background:url(../images/marker-1.png) left top;
    }
.link-2.link-style1 {background-position:-300px 0}
.link-2.link-style2 {background-position:-620px 0}
.text-width {width:66px; display:inline-block}
.list-3 li {
    font-size:13px;
    line-height:20px;
    background:url(../images/list-3-marker.gif) no-repeat left 12px;
    padding:5px 0 5px 12px;
}
    .list-3 li a {
        display:inline-block;
        color:#fff;
        text-decoration:none;
    }
        .list-3 li a:hover {color:#93CEEE}

.list-4 dt {padding-bottom:10px}
.list-4 dd a {margin-left:20px}


.link:hover {text-decoration:underline}

dl span {float:left; width:80px}
.inline {display:inline-block}
/* -- gallery  begin --*/
#js {
    position:relative;
    width:910px;
    overflow:hidden;
    padding:0 0 0 1px;
    height:720px;
    }
.js-padding {padding:0}
div.content {
    /* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
    display: none;
    width: 902px;
    height: 360px;
    margin:  0 0 40px 0;
    overflow: hidden;
    border:1px solid #333333;
    padding:3px;
}
div.content img {
    position: relative;
    z-index: 2;
}
div.content a, div.navigation a {
    color: #6c6c6c;
}
div.content a:focus, div.content a:hover, div.content a:active {
    text-decoration: underline;
}
div.controls {
}
div.controls a {
    padding: 0px;
}
div.ss-controls {
    float: left;
    display:none;
}
div.nav-controls {
    position:absolute;
    left:0px;
    width:100%;
    bottom:0px;
    z-index: 1;
}
#controls {
    width:100%;
    overflow:hidden;
    }
div.nav-controls a {
    font-family: 'Oswald', sans-serif;
    font-size:10px;
    text-transform:uppercase;
    display:block;
    line-height:2em;
    padding:6px 0;
    width:71px;
    height:31px;
    position:absolute;
    text-align:center;
    text-decoration:none;
    bottom:-31px;
    z-index:11;
    color:#f6f7f6;
    background:url(../images/button-bg.png) no-repeat left top;
}
div.nav-controls a.prev {left:18px;
}
div.nav-controls a.prev:hover {color:#FB4A16}
div.nav-controls a.next {right:34px; bottom:-51px; }
div.nav-controls a.next:hover {color:#FB4A16}
div.slideshow-container {
    position: relative;
    height: 479px; /* This should be set to be at least the height of the largest image in the slideshow */
    z-index:1;
    
}
div.loader {
    position: absolute;
    top: 0;
    left: 0;
    background-image:url(images/loader.gif);
    background-repeat: no-repeat;
    background-position: center;
    width: 592px;
    height: 470px; /* This should be set to be at least the height of the largest image in the slideshow */
}

div.slideshow span.image-wrapper {
    display: block;
    width:910px;
    height:479px;
    position:absolute;
    left:0;
    top:0;
}
div.slideshow a.advance-link {
    display: block;
    width: 874px;
    height: 660px; /* This should be set to be at least the height of the largest image in the slideshow */
    padding: 0;
    margin: 0;
}
div.slideshow a.advance-link img {
    padding:0;
    margin:0;
    display:block;
    position:absolute;
    left:0;
    top:0;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
    text-decoration: none;
}
div.slideshow img {
}
div.download {
    float: right;
}
div.caption-container {
    position: absolute;
    top: 680px;
    left: 60px;
    width: 600px;
    height: 100px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    line-height:18px;
    color:#000;
}
span.image-caption {
    display: block;
    position: absolute;
    width: 596px;
    height: 151px;
    top: 0;
    left: 0;
    z-index:10;
}
.text-gallery {
    line-height: 18px;
    font-size: 12px;
    color: #606060;
    padding:28px 0 0 8px;
    }
div.caption {
    width: 580px;
    height: 128px;
}
div.caption h5{
    line-height: 18px;
    font-size: 13px;
    color: #fd003f;
    text-transform:uppercase;
    font-weight:bold;
    text-decoration:none;
}
div.caption h6{
    line-height: 18px;
    font-size: 13px;
    color: #fff;
    font-weight:normal;
    margin: 0 0 18px 0
}
div.image-title {
}
div.image-desc {
}
div.navigation {
/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}
div#thumbs {
    width: 900px;
    overflow: hidden;
    padding: 0 0 4px 0;
    margin:0 auto;
}
ul.thumbs {
    margin:0 auto;
    padding:0px;
}
ul.thumbs li {
    float:left;
    margin: 0 50px 40px 0;
    overflow: hidden;
    padding:3px;
    vertical-align:top;
    border:1px solid #333333;
}
ul.thumbs li.last {margin-right:0px}
ul.thumbs li img {
    border: none;
}
a.thumb {display:block}
a.thumb:focus {
    outline: none;
}
div.pagination {
    clear: both;
    text-align:center;
    position:relative;
    z-index:10;
}
div.top.pagination {

    display:none;
}
div.navigation div.bottom {
     display:none;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
    padding:0 4px;
    font-weight:bold;
    color:#fff;
}
div.pagination a:hover {
    text-decoration: none;
    color:#ffeaa8;
}
div.pagination span.current {
    color:#ffeaa8;
}
div.pagination span.ellipsis {
    border: none;
    padding: 5px 0 3px 2px;
}
/* -- gallery end --*/
/***** prettyPhot *****/
.lightbox-image {
    position:relative;
    z-index:1;
    overflow:hidden;
    display:inline-block;
    cursor:pointer;
    }
    .lightbox-image img {
        position:relative;
        z-index:1;
    }
    .lightbox-image span {
        display:inline-block;
        position:absolute;
        left:0px;
        top:0;
        width:100%;
        height:100%;
        background:url(../images/magnify.png) no-repeat 50% 50%;
        z-index:2;
        padding:0;
    }



/***** Contact form *****/
#contact-form {
    position:relative;
    vertical-align:top;
    width:100%;
    z-index:1;
    }
    #contact-form fieldset {
        border:none;
        padding:0;
        width:100%;
        overflow:hidden;
        }            
            #contact-form label {display:block; min-height:40px; overflow:hidden}
            
            #contact-form input {
                width:479px;
                padding:6px 12px;
                margin:0;
                font-family:Arial, Helvetica, sans-serif;
                font-size:13px;
                line-height:1.25em;
                color:#a1a1a1;
                border:1px solid #333333;
                background:none;
                outline:none;
            }
            #contact-form .area .error { float:none}
            #contact-form textarea {
                height:184px;
                margin:0;
                width:479px;
                padding:6px 12px;
                margin:0;
                font-family:Arial, Helvetica, sans-serif;
                font-size:13px;
                line-height:1.25em;
                color:#a1a1a1;
                border:1px solid #333333;
                background:none;
                overflow:auto;
                outline:none;
            }
            #contact-form a {cursor:pointer}
            .name-input {
                display:block;
                float:left;
                width:75px;
                padding:5px 0 0 1px;
                }
        .link-form {text-align:right;padding:8px 20px 0 0}
        .link-margin {margin-right:20px}
        
/****************************footer************************/
footer {
    width:100%;
    padding:0;
    height:104px;
    position:relative;
    z-index:2;
    color:#fff;
    overflow:hidden;
}
.footer-bg {width:100%; background:url(../images/footer-bg.jpg) no-repeat -1px top; min-height:104px}
.footer-padding {padding:28px 80px 0 29px}
.footer-link {
    font-size:14px;
    line-height:24px;
    color:#fff;
    display:block;
    float:left;
    }
.footer-link span {display:block}
#easyTooltip{
    font-family:Arial, Helvetica, sans-serif;
    padding:7px 11px;
    font-weight:bold;
    border:1px solid #fff;
    background:#7fb2cd;
    color:#fff;
    font-size:12px;
    position:relative;
    z-index:3;
}
.list-services {float:right; padding:2px 0 0 0}
.list-services li {
        float:left;
        padding:0 4px 0 0px;    
    }
    
    .sm2-bar-ui {
font-size: 12px;
}
.sm2-bar-ui .sm2-main-controls,
.sm2-bar-ui .sm2-playlist-drawer {
background-color: #ff8000;
}
.sm2-bar-ui .sm2-inline-texture {
background: transparent;
}
    
        .list-services li a {
            display:inline-block;
            width:51px;
            height:51px;
            background:url(../images/list-services.png) no-repeat left top;
        }
        .list-services li a.n-1 {background-position:0 0px}
        .list-services li a.n-2 {background-position:-55px 0}
        .list-services li a.n-3 {background-position:-110px 0}
        .list-services li.last {padding-right:0px}
.block {height:104px}
.extra {
    min-height:100%;
    height:auto !important;
    height:100%;
    margin: 0 auto -104px;
    position:relative;
    overflow:hidden;
    z-index:1;
}
html, body {height:100%}


This post has been edited by Tony .: Apr 25 2015, 09:11 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 25 2015, 10:02 AM
Post #10


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Just add margin: 0 auto; to h1 a in the CSS.
And get rid of the left padding of 357px on h1; set that to 0 (zero).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 25 2015, 10:26 AM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
You've tried to center it by giving the H1 a left padding and miscalculated that. Remove that padding and center the A with auto margins instead. You can do that since you've made it display: block.


Change 357px to 0 here.
CODE
h1 {
    padding:39px 0 0 357px;
    position:relative;
}



And add this to the rule for h1 a.
CODE
h1 a  {
       /* your old stuff * /
       margin-left: auto; margin-right: auto
}



See CSS: centering things
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Tony .
post Apr 25 2015, 10:56 AM
Post #12


Member
***

Group: Members
Posts: 31
Joined: 4-February 15
Member No.: 22,145
U guys the best:) Thanks!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 25 2015, 11:13 AM
Post #13


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
We know. cool.gif tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 02:48 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC