www.webdeveloper.com
Results 1 to 4 of 4

Thread: Css dropdown menu over logo.png

  1. #1
    Join Date
    Dec 2012
    Posts
    8

    Lightbulb Css dropdown menu over logo.png

    Hi everyone

    I was wondering if any one can help

    I am not sure if this should be in the HTML thread ut suspect its more of a CSS issue,
    please move if required

    I have created a moving drop-down menu bar which at the moment sits underneath the logo.png banner.

    The movement runs an image along the top of the logo.png, which is where I would like it to stay, however I would ideally like the menu bar to sit underneath it as if it is part of the logo

    The drop-down menu was a template from http://www.script-tutorials.com

    The objective is to get menu to sit on the top left of the logo.png banner with a margin or padding of approx 10px; from the top of the logo.

    the other issue is the p tag heading above the content table disappears and the table refuses to centralise as does the logo and leaves a big gap before the footer

    index.html

    HTML Code:
    <!DOCTYPE html>
    <html lang="en" >
        <head>
            <meta charset="utf-8" />
            <title>Pure CSS3 LavaLamp Menu | Script Tutorials</title>
            <link href="css/layout.css" rel="stylesheet" type="text/css" />
            <link href="css/menu.css" rel="stylesheet" type="text/css" />
        </head>
        <body>
            <header>
            <ul id="nav">
    
        <img src="css/logo.png" width="1000" height="175">
      <li><a href="http://torfaenpcrepair.com" target="_blank">Home</a></li>
               <li><a href="http://gallery.torfaenpcrepair.com/#home" target="_blank">Gallery</a>
                 <ul class="subs">
                 </ul>
                 <li><a href="http://blog.torfaenpcrepair.com/" target="_blank">Blog</a></li>
               <li><a href="http://torfaenpcrepair.webs.com/" target="_blank">Our Original Site</a>
                 <ul class="subs">   
                        </ul>
                    </li>
                    <li><a href="http://torfaenpcrepair.com/forum" target="_blank">Forum</a></li>
               <li><a class="hsubs" href="#">Shortcuts</a>
                 <ul class="subs">
                   <li><a href="http://torfaenpcrepair.com/XP_Shortcuts.html" target="_blank">XP</a></li>
                   <li><a href="http://torfaenpcrepair.com/Vista_Shortcuts.html" target="_blank">Vista</a></li>
                   <li><a href="http://torfaenpcrepair.com/Win7_Hotkeys.html" target="_blank">Windows 7</a></li>
                   <li><a href="http://torfaenpcrepair.com/Win8_Hotkeys.html" target="_blank">Windows 8</a></li>
                   <li><a href="http://torfaenpcrepair.com/Mac_OSx_Shortcuts.html" target="_blank">Mac</a></li>
                   <li><a href="http://torfaenpcrepair.com/Photoshop_Shortcuts.html" target="_blank">PhotoShop</a></li>
                   <li><a href="http://torfaenpcrepair.com/Dreamweaver_Shortcuts.html" target="_blank">Dreamweaver</a></li>
                   <li><a href="http://torfaenpcrepair.com/Brackets_Shortcuts.html" target="_blank">Brackets</a></li>
                        </ul>
                    </li>
                     <li><a href="http://torfaenpcrepair.com/Guestbook.html?_cache=1348799726" target="_blank">Guestbook</a></li>
                      <li> <a class="hsubs" href="#">Links</a>
                 <ul class="subs">
     <li><a href="http://torfaenpcrepair.com/out-and-about.html" target="_blank">Out and About</a></li>
                   <li><a href="http://torfaenpcrepair.com/Services.html" target="_blank">Services</a></li>
                   <li><a href="http://torfaenpcrepair.com/links.html" target="_blank">Useful Links</a></li>
                   <li><a href="http://torfaenpcrepair.com/contacted.html" target="_blank">Contact Us</a></li>
                        </ul>
                    </li>               
                    <div id="lavalamp"></div>
                </ul>                   
    </header>
            </div>  
    <p>
    <h1>Windows 8 Keyboard Shortcuts</h1> 
    </p>
    <table border="">
    <tr>
      <th>Command</th>
      <th>Shortcut</th>
    </tr>
    <tr>
    <td>Ctrl + Mouse Scroll (In Desktop)</td>
    <td>Change Desktop Icon Size</td>
    </tr>
    <tr>
    <td>Ctrl + Shift+ N</td>
    <td>Create New Folder in Current Directory</td>
    </tr>
    </table>
    <div>
    </div>
    <div class="container">
    <div id="footer">
    <h6>&copy; All Rights Reserved &copy;</h6>
    
    </body>
     </html>
    layout.css

    Code:
    *{
        margin:20;
        padding:0;
    }
    body {
        font:14px/1.3 Arial,sans-serif;
        background-color:#212121;
    }
    header {
        background-color:#212121;
        box-shadow: 0 -1px 2px #111111;
        color:#fff;
        display:block;
        height:70px;
        position:relative;
        width:100%;
        z-index:100;
    }
    header h2{
        font-size:22px;
        font-weight:normal;
        left:50%;
        margin-left:-400px;
        padding:22px 0;
        position:absolute;
        width:540px;
    }
    header a.stuts,a.stuts:visited{
        border:none;
        text-decoration:none;
        color:#fcfcfc;
        font-size:14px;
        left:50%;
        line-height:31px;
        margin:23px 0 0 110px;
        position:absolute;
        top:0;
    }
    header .stuts span {
        font-size:22px;
        font-weight:bold;
        margin-left:5px;
    }
    .container {
        height: 571px;
        margin: 30px auto;
        width: 957px;
    }
    table {	border: inset; 
    	border-color: blue;
    
    	background-color:#FFF;
    	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif
    		/**rounded borders**/
    	-moz-border-radius: 20px;
    	-webkit-border-radius: 20x;
    	border-radius: 20px;
    	text-shadow: 0px 0px 0px #666;
    
    }
    th {
    	text-align: center;
    	width: 50%;
    	column-width: 50%;
    }
    td {
    	text-align: center;
    }
    
    
    h6 {
    	color: #00F;
    	font-weight: bolder;
    	font-size:x-large;
    menu.css

    Code:
    #nav,#nav ul {
    	float: top;
        list-style: none outside none;
        margin: 20;
        padding: 0;
    }
    #nav {
        background: url('menu_bg.png') no-repeat scroll 0 0 transparent;
        clear: both;
        font-size: 12px;
        height: 58px;
        padding: 0 0 0 9px;
        position: relative;
        width: 957px;
    }
    #nav ul {
        background-color: #222;
        border:1px solid #222;
        border-radius: 0 5px 5px 5px;
        border-width: 0 1px 1px;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
        left: -9999px;
        overflow: hidden;
        position: absolute;
        top: -9999px;
        z-index: 2;
    
        -moz-transform: scaleY(0);
        -ms-transform: scaleY(0);
        -o-transform: scaleY(0);
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
    
        /*-moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    
        -moz-transition: -moz-transform 0.1s linear;
        -ms-transition: -ms-transform 0.1s linear;
        -o-transition: -o-transform 0.1s linear;
        -webkit-transition: -webkit-transform 0.1s linear;
        transition: transform 0.1s linear;*/
    }
    #nav li {
        background: url('menu_line.png') no-repeat scroll right 5px transparent;
        float: left;
        position: relative;
    }
    #nav li a {
        color: #FFFFFF;
        display: block;
        float: left;
        font-weight: normal;
        height: 30px;
        padding: 23px 20px 0;
        position: relative;
        text-decoration: none;
        text-shadow: 1px 1px 1px #000000;
    }
    #nav li:hover > a {
        color: #00B4FF;
    }
    #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
        background: none repeat scroll 0 0 #121212;
        outline: 0 none;
    }
    #nav li:hover ul.subs {
        left: 0;
        top: 53px;
        width: 180px;
    
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    #nav ul li {
        background: none;
        width: 100%;
    }
    #nav ul li a {
        float: none;
    }
    #nav ul li:hover > a {
        background-color: #121212;
        color: #00B4FF;
    }
    #lavalamp {
        background: url('lavalamp.png') no-repeat scroll 0 0 transparent;
        height: 16px;
        left: 13px;
        position: absolute;
        top: 0px;
        width: 64px;
    
        -moz-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
        -o-transition: all 300ms ease;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease;
    }
    #lavalamp:hover {
        -moz-transition-duration: 3000s;
        -ms-transition-duration: 3000s;
        -o-transition-duration: 3000s;
        -webkit-transition-duration: 3000s;
        transition-duration: 3000s;
    }
    
    #nav li:nth-of-type(1):hover ~ #lavalamp {
        left: 13px;
    }
    #nav li:nth-of-type(2):hover ~ #lavalamp {
        left: 90px;
    }
    #nav li:nth-of-type(3):hover ~ #lavalamp {
        left: 170px;
    }
    #nav li:nth-of-type(4):hover ~ #lavalamp {
        left: 250px;
    }
    #nav li:nth-of-type(5):hover ~ #lavalamp {
        left: 330px;
    }
    #nav li:nth-of-type(6):hover ~ #lavalamp {
        left: 410px;
    }
    #nav li:nth-of-type(7):hover ~ #lavalamp {
        left: 490px;
    }
    #nav li:nth-of-type(8):hover ~ #lavalamp {
        left: 565px;
    }

  2. #2
    Join Date
    Dec 2012
    Posts
    8
    Well this forum is so good I never got a response
    My website http://torfaenpcrepair.com/ which is in need of a revamp as it was started with the hosts WYSWYG and needs to be converted to a full CSS built site.

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there TPCR,

    you may not place an "img element" between the "ul element" and the "li element".

    Instead use CSS to set a "background-image" to the "ul element".

    coothead

  4. #4
    Join Date
    Dec 2012
    Posts
    8
    Hi coothead

    Thank you for you reply

    How best would I do that and keep it centred with a full width of 1000px
    My website http://torfaenpcrepair.com/ which is in need of a revamp as it was started with the hosts WYSWYG and needs to be converted to a full CSS built site.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles