Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2012
    Location
    Under a Roof
    Posts
    14
    Thanks
    2
    Thanked 1 Time in 1 Post

    Question Css dropdown menu on top of 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

    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
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,685
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Hello TPCR,
    Your markup is invalid. Your ul#nav should only contain list items (<li>) and that logo.png does not belong there. #lavalamp does not belong in your ul either.

    You've left some empty ul's in your #nav that are messing up a dropdown.

    Your header is 70px high but you're trying to put 175px high logo.png in it. See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

    There is no such thing as the float: top; you use in your menu.css. See float here.

    Checking your code with the validators makes it easy to catch little mistakes like these. Have a look at the links about validation in my signature line.

    Here's a start on fixing your code -
    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" />
    <style type="text/css">
    img {  /*I just added this for testing since I don't have your images*/
    	display: block;
    	background: #f00;
    }
    </style>
        </head>
        <body>
    	<header>
    			<img src="css/logo.png" alt="description" width="1000" height="175">
    		<ul id="nav">
    			<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">
    					<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>
    			</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>      
    		</ul>          
    			<div id="lavalamp"></div>                  
    	</header>
    <h1>Windows 8 Keyboard Shortcuts</h1> 
    <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>
    </div>
    </div>
    </body>
     </html>
    layout.css
    Code:
    * {
    	margin: 20;
    	padding: 0;
    }
    body {
    	font: 14px/1.3 Arial, sans-serif;
    	background-color: #212121;
    }
    header {
    	width: 100%;
    	position: relative;
    	background: #212121;
    	box-shadow: 0 -1px 2px #111111;
    	color: #fff;
    	/*
    	display: block;
    	height: 70px;
    	*/
    }
    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 {
    	list-style: none;
    	margin: 20;
    	padding: 0;
    }
    ul#nav {
    	height: 58px;
    	width: 957px;
    	padding: 0 0 0 9px;
    	position: absolute;
    	top: 0; /*adjust here to sit over or under your logo.png*/
    	z-index: 1;
    	background: url('menu_bg.png') no-repeat scroll 0 0 transparent;
    	font-size: 12px;
    }
    #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 {
    	height: 16px;
    	width: 64px;
    	position: absolute;
    	top: 175px; /*adjust here*/
    	left: 13px;
    	background: #0f0 url('lavalamp.png') no-repeat;
    	-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; }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    TPCR (03-21-2013)

  • #3
    New Coder
    Join Date
    Oct 2012
    Location
    Under a Roof
    Posts
    14
    Thanks
    2
    Thanked 1 Time in 1 Post
    I have validated the markup and css as best I can

    The markup

    Line 47, Column 35: Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
    <div id="lavalamp"></div>
    Contexts in which element div may be used:

    if I alter it in any way then the menu fails to work.

    The css

    URI : TextArea
    54 Property -moz-border-radius is an unknown vendor extension
    55 Property -webkit-border-radius is an unknown vendor extension
    67 Property -moz-border-radius is an unknown vendor extension
    68 Property -webkit-border-radius is an unknown vendor extension


    after placing the image above the id tag then defeats the objective of havinh the menu at the top of the image but also over the image as if it is part of it.

    i have now centralised everything but the logo image still refuses to get to the center.

    as you never had the images before I am uploading it all in a zip file

    you will see index2 where you will see the moving image above the logo where I would ideally want it to go with them menu just underneath it over the top of the logo image, which would also be centered.

    Sorry the index2 seems to center the logo image

    The file is to big for the forum default file manager for me to upload, so providing an alternative https://dl.dropbox.com/u/48948362/la...own%20menu.zip

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,685
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    So I've been messing with this for a bit and I've got something that's close. It's not done yet but it's much better than the tutorial you were following (I googled it).

    This is the first time I've messed around with the new CSS3 pseudo-classes. We've had first/last child for a while now but the nth stuff is new to me so you'll have to pardon the learning curve.

    A couple things I really didn't like with that tutorial you had was the invalid code and the way the arrow only followed the :hover. That arrow definitely need to point at the parent li while your viewer is looking around the site, it's like he didn't finish the menu.

    Anyway, still a work in progress but you can have a look at it here -
    demo here

    Hope this helps a little.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    TPCR (04-21-2013)

  • #5
    New Coder
    Join Date
    Oct 2012
    Location
    Under a Roof
    Posts
    14
    Thanks
    2
    Thanked 1 Time in 1 Post
    Hi Excavator

    You have seemed to hit the nail on the head so to speak

    Nothing to pardon tbh as Web Design is a constant learning curve which keeps us on our toes or butts if we are sitting down lol

    I agree the code was invalid and definitely seems unfinished from the original source and am kicking myself for not validating it before posting it.

    I really need to get into a routine of validating the coding.

    you seem to grasp this nth stuff quite quick which I am still struggling with.

    A great big thank you for all you have achieved in such a short time so far
    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,

    I have made a start but still a way to go :)

  • #6
    New Coder
    Join Date
    Oct 2012
    Location
    Under a Roof
    Posts
    14
    Thanks
    2
    Thanked 1 Time in 1 Post
    First of all I would like to thank Excavator for pointing me in the right direction, and also to apologise for not sorting this out and replying sooner.

    Here is where I am at with the code so far, I have a new issue that is I would like a full rounded corner black border around the outside of the table whilst maintaining the horizontal and vertical lines as default.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset=utf-8>
        <meta name="author" content="http://www.nopeople.com/design/">
        <meta name="description" content="Updated on Sunday  21 April 2013">
    <title>Home</title>
        <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <link href="css/layout.css" rel="stylesheet" type="text/css" />
    <link href="css/menu.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    
    #include, imgs {
        padding: 110px 0 25px;
        display: block;
        width: 1000px;
        height: 175px;
    }
    .bg {margin-bottom: 25px;}
    </style>
    </head>
    
            <header>
                            <ul id="nav">
                    <li><a href="http://torfaenpcrepair.com" target="_blank">Home</a></li>
                    <li><a href="gallery.html">Gallery</a>
                        <ul class="subs">
                            <li><a href="http://torfaenpcrepair.com/blog" target="_blank">Blog</a></li>
                            <li><a href="http://torfaenpcrepair.webs.com">Our&nbsp;Original&nbsp;Site</a></li>
                        </ul>
                    </li>
                    <li><a href="http://torfaenpcrepair.com/forum" target="_blank">Forum</a></li>
                    <li><a href="shortcuts.html">Shortcuts</a>
                        <ul class="subs">
                            <li><a href="XP-Shortcuts.html" target="_blank">XP</a></li>
                            <li><a href="vista-Shortcuts.html" target="_blank">Vista</a></li>
                            <li><a href="win-7-shortcuts.html" target="_blank">Windows 7</a></li>
                            <li><a href="win-8-shortcuts.html" target="_blank">Windows 8</a></li>
                            <li><a href="Mac-OSx-Shortcuts.html" target="_blank">Mac</a></li>
                            <li><a href="Photoshop-Shortcuts.html" target="_blank">PhotoShop</a></li>
                            <li><a href="Dreamweaver-Shortcuts.html" target="_blank">Dreamweaver</a></li>
                            <li><a href="Brackets-Shortcuts.html" target="_blank">Brackets</a></li>
                        </ul>
                    </li>
                    <li><a href="Guestbook.html" target="_blank">Guestbook</a></li>
                    <li> <a href="links.html">Links</a>
                        <ul class="subs">
                            <li><a href="out-and-about.html" target="_blank"> Out&nbsp;and&nbsp;About </a></li>
                            <li><a href="Services.html" target="_blank">Services</a></li>
                            <li><a href="links.html" target="_blank">Useful Links</a></li>
                            <li><a href="contact.html" target="_blank">Contact Us</a></li>
                        </ul>
                    </li>
                    <li id="pointer"></li>
                                </ul>
                </header>
         <div id="marquee">
     <marquee behavior="slide" direction="right" scrollamount="10">Welcome to Torfaen PC Repair, thank you for taking the time to visit us</marquee>
        </div>
    
    
    
    <table border=''>
    <tr>
        <th colspan="2">Descriptive title goes here</th>
    </tr>
     <tr>
     <td>Example of the table tag</td>
     <td>Can you tell this yet :p lol</td>
     </tr>
     <tr>
     <td> what you mean no</td>
     <td>Let me show you again lmao</td>
     </tr>
     </table>
    
     <blockquote>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
    
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
    
    Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend</blockquote>
    
    
    
    
    
    <footer> <a href="http://jigsaw.w3.org/css-validator/check/referer">
            <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>&copy; Copyright all rights Reserved &copy;
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
            alt="Valid CSS!" />
    </a>     </footer>
        <!--end container--></html>
    Code:
    ul#nav,
    ul#nav ul {
        margin: 0;
        padding: 0;
        list-style: none outside none;
        font-size: .9em;
    }
    ul#nav ul {
        position: absolute;
        left: -9999px;
        overflow: hidden;
        background: #222;
        border-radius: 0 5px 5px 5px;
        border-width: 0 1px 1px;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    }
    
        ul#nav li {
        line-height: 2.3em;
        float: left;
        position: relative;
        background: url(../images/menu_line.png) no-repeat left center;
        }
            ul#nav li:first-child {background-color:inherit;}
                ul#nav li a {
                    color: #fff;
                    display: block;
                    float: left;
                    font-weight: bold;
                    padding: 0 30px;
                    text-decoration: none;
                    text-shadow: 1px 1px 1px #000000;
                }
                ulul#nav li:hover > a {color: #00b4ff;}
        ul#nav li:hover,
        ul#nav a:focus,
        ul#nav a:hover,
        ul#nav a:active {
            background: #212121;
            outline: 0 none;
        }
        ul#nav li:hover ul.subs {
            left: 0;
            top: 25px;
        }
            ul#nav ul li {
                background: none;
                width: 100%;
            }
                ul#nav ul li a {float: none;}
                ul#nav ul li:hover > a {
                    background: #121212;
                    color: #0ff;
                }
    ul#nav li#pointer {
        height: 16px;
        width: 64px;
        position: absolute;
        top: -4px;
        background: url(../images/lavalamp.png);
    
    
        transition: all 300ms ease;
    }
                    body#home li#pointer {left: 36px;}
                    body#gallery li#pointer {left: 108px;}
                    body#forum li#pointer {left: 205px;}
                    body#shortcuts li#pointer {left: 312px;}
                    body#guestbook li#pointer {left: 423px;}
                    body#links li#pointer {left: 525px;}
    ul#nav li#pointer:hover {
    
        -o-transition-duration: 3000s;
    
        transition-duration: 3000s;
    }
    ul#nav li:nth-of-type(1):hover ~ li#pointer {left: 16px;}
    ul#nav li:nth-of-type(2):hover ~ li#pointer {left: 114px;}
    ul#nav li:nth-of-type(3):hover ~ li#pointer {left: 218px;}
    ul#nav li:nth-of-type(4):hover ~ li#pointer {left: 326px;}
    ul#nav li:nth-of-type(5):hover ~ li#pointer {left: 448px;}
    ul#nav li:nth-of-type(6):hover ~ li#pointer {left: 563px;}
    Code:
    p {width: 50%;
        padding: 30px 30px 30px 30px;
        background-color: #0FF;
        text-align: center;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        border-collapse:separate; border-spacing: 1em;
        border-collapse:collapse; border-spacing: 1em;
        border-style: outset;
        border-color: black;
        border-radius: 1em;
    }
    #container {
        width: auto;
        margin: 30px auto;
        border: 2px solid #ccc;
        border-radius: 0 5px 5px 5px;
        border-width: 0 1px 1px;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
        background-color: #0FF;
    }
    html, body {
    
    /* IE10 Consumer Preview */
        background-image: -ms-linear-gradient(to left, gray, silver #212121);
        background: linear-gradient(to left, gray, silver, #212121);
    
    }
    body#home #container {
        margin-bottom: auto;}
    
         /*===============================================*/
         /*         Start of the Main Header Section      */
         /*      Where the Logo and Links are required    */
         /* ==============================================*/
    
    header {
        height: 160px;
    position: relative;
            margin: 30px 5px 0px 120px;
        background:url(../images/logo.png) no-repeat scroll 0  0 transparent;
        width: 1500px;
        border-radius: 1em;
    }
    
         /*===============================================*/
         /*         End of the Main Header Section      */
         /*      Where the Logo and Links are required    */
         /* ==============================================*/
    
    #content {
        padding: 10px;}
    h1 {
        width: 500px;
        margin: 15px auto;
        padding: 10px 10px;
        background: #0FF;
        text-align: center;
        font-weight: bold;
        text-shadow: 0px 0px 0px #666666;
        border: outset;
        border-color: black;
        border-radius: 1em;
    }
    h2 {
        width: auto;
        margin: 15px auto;
        padding: 10px 10px;
        background: #0FF;
        text-align: center;
        font-weight: bold;
        text-shadow: 0px 0px 0px #666666;
        border: outset;
        border-color: black;
        border-radius: 1em;
    }
    h3 {
        width: 350px;
        margin: 15px auto;
        padding: 10px 10px;
        background: #0FF;
        text-align: center;
        font-weight: bold;
        text-shadow: 0px 0px 0px #666666;
        border: outset;
        border-color: black;
        border-radius: 1em;
    }
    h4 {align-content: center;
        width: 680px;
    padding: inherit;
    }
    
     /*===================================*/
     /* Start of the Ordered List Section */
     /* ==================================*/
    ol {
        text-align: inherit;
    font-weight: bold;
        color: #0FF;
    background-color: inherit;
        padding: 30px 30px 30px;
        border-radius: 1em;
    }
     /*=================================*/
     /* End of the Ordered List Section */
     /* ================================*/
    #marquee {
        width: 480px;
        margin: 15px auto;
        padding: 10px 10px;
        background: #0FF;
        text-align: center;
        font-weight: bold;
        text-shadow: 0px 0px 0px #666666;
        border: outset;
        border-color: black;
        border-radius: 1em;
    
    }
     /*===================================*/
     /* Start of the Main Content Section
     /*    Where Table is not required    */
     /* ==================================*/
    
    blockquote {
        float: left;
        text-align:left;
        width: 550px;
        height: auto;
        margin-left: 170px;
        padding: 30px 30px 30px 30px;
        background-color: #0FF;
        border-style: outset;
        border-color: black;
        border-radius: 1em;
    }
    
    #a {
        width: 900px;
        margin: 0px auto;
        padding: 15px 15px;
        background: #0FF;
        text-decoration-color: red;
        text-align: left;
        font-weight: normal;
        text-decoration: none;
        text-shadow: 0px 0px 0px #666666;
        border: outset;
        border-color: black;
        border-radius: 1em;
    }
    #h {
        font-family: sans-serif;
        width: 300px;
        height: auto;
        margin: 10px 10px 20px 150px;
        padding: 15px 15px 15px 15px;
        background: #0FF;
        text-align: center;
        font-weight: bolder;
        color: red;
        text-shadow: 0.2em 0.5em 0.1em #600,  -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006;
        border: outset;
        border-color: black;
        border-radius: 1em;
    }
    
     /*===================================*/
     /* End of the Main Content Section
     /*    Where Table is not required    */
     /* ==================================*/
    
    /* ====================== */
    /* Start of Table section */
    /* ====================== */
    
    table {
    
        width: 900px;
        margin: 15px auto;
        background-color: #0FF;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        border-radius: 1em;
        border-collapse:separate; border-spacing: 1em;
        border-collapse:collapse; border-spacing: 1em;
        border-style: solid;
    }
    tr {
            text-align: center;
        vertical-align: middle;
        font-weight: normal;
    }
    th {
        text-align:center;
            vertical-align: middle;
            font-family: serif;
            font-size: 28px;
        font-weight: bold;
    }
    td {
        text-align: center;
        column-width: 50%;
    }
    /* ==================== */
    /* End of Table section */
    /* ==================== */
    
    /* ======================================= */
    /* Start of imageless button made with CSS */
    /* ======================================= */
    .top_button {
        margin-left: 900px;
    
        box-shadow:inset 0px 1px 0px 0px #bee2f9;
        background-color: lightcyan;
        border-radius:23px;
        border:3px solid black;
        display:inline-block;
        color:#0d141c;
        font-family:Georgia, sans-serif;
        font-size:12px;
        font-weight:bold;
        padding:6px 23px;
        text-decoration:none;
        text-shadow:none;
    }.top_button:active {
        position:relative;
        top:1px;
    }
    /* ===================================== */
    /* End of imageless button made with CSS */
    /* ===================================== */
    
    
    /*=============================-*/
    /* Start of the Content Section */
    /* =============================*/
    .horizontalcontainer {
        display: table;
    margin-right: 0;
    margin-left: 0;
    padding:right: 10px;
    }
    .horizontalwrapper {
        float: right;
        margin-right: 120px;
        width: 278px;
        position:relative;
        margin-top: 0;
        padding: 0 0 0 0 ;
        align-content:center;
    }
    
     /*============================*/
     /* End of the Content Section */
     /* ===========================*/
    
     /*=============================*/
     /* Start of the Footer Section */
     /* ============================*/
    
     footer {
        clear:both;
        align-self:stretch;
        width: auto;
        margin-top: 0px;
        float: inherit;
        text-align: center;
        color: #0FF;
    
    }
    
    
    /*============================*/
     /* End of the Footer Section */
     /* ==========================*/
    Last edited by TPCR; 04-21-2013 at 12:43 PM.
    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,

    I have made a start but still a way to go :)


  •  

    Tags for this Thread

    Posting Permissions

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