www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] moving menu left and vertical

  1. #1
    Join Date
    Sep 2012
    Posts
    48

    resolved [RESOLVED] moving menu left and vertical

    how do i move my menu left to the side and vertical.

    http://www.cjwebconsulting.com/project/template.html

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    	<title>Accessible Destinations - Home</title>
    	<meta name="description" content="Free Web tutorials">
    	<meta name="keywords" content="HTML,CSS,XML,JavaScript">
    	<link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    
    <body>
    
    <div class="header1">
    		<h2>&nbsp;</h2>
    	</div>
    	
    
    
    	<div class="header2">
    		<h2>&nbsp;</h2>
    	</div>
    	
    	<div class="menu">
    		<ul class="clearfix">
    			<li><a href="index.html">Home</a></li>
    			<li><a href="about.html">About</a></li>
    			<li>
    				<a href="#">Services</a>
    				<ul>
    					<li><a href="areas.html">Areas of Focus</a></li>
    					<li><a href="practical.html">Practical Concerns</a></li>
    				</ul>
    			</li>
    			<li><a href="http://healingaxis.wordpress.com">Blog</a></li>
    			<li><a href="booking.html">Booking</a></li>
    			<li><a href="contact.html">Contact / Hours</a></li>
    		</ul>
    	</div>
    	
    	<div class="content">
    	  <div class="footer">Website designed by<a href="http://www.cjwebconsulting.com" target="_blank"> CJ Web Consulting</a></div>
          
    		
    </div>
    
    </body>
    </html>

    Code:
    body {
    	background-color: white;
    	margin: 10px;
    }
    .content h2 {
    	margin-top: 0;
    }
    
    .header1 {
    	background-image: url(../images/destinations.jpg);
    	height: 100px;
    	width: 780px;
    	margin: 0 auto;
    }
    
    .header2 {
    	background-image: url(../images/beachbanner.jpg);
    	height: 150px;
    	width: 780px;
    	margin: 0 auto;
    }
    .header h1 {
        color: white;
        float: right;
        font-size: 44px;
        font-style: italic;
        margin: 45px;
        position: relative;
        text-transform: uppercase;
        z-index: -1;
    }
    
    .menu {
    	background-color: #FFFFFF;
    	border: 1px solid black;
    	width: 780px;
    	margin: 0 auto;
    }
    .menu > ul {
    	
    	border: 1px inset black;
        list-style-type: none;
        margin: 2px;
        padding: 1px;
    }
    .menu > ul > li {
        float: left;
        margin-right: 0;
        width: 16.66%;
    	position: relative;
    }
    .menu ul li ul {
    	position: absolute;
    	background-color: white;
    	border: 1px solid black;
    	border-top: 2px solid white;
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    	width: 100%;
    	display: none;
    }
    .menu ul li:hover ul {
    	display: block;
    }
    .menu ul li ul li {
    	margin-top: 3px;
    }
    .menu a {
        color: black;
        display: block;
        text-align: center;
        text-decoration: none;
    }
    .menu a:hover {
        background-color: #000000;
        color: white;
    }
    
    .content {
    	background-color: white;
    	width: 760px;
    	margin: 0 auto;
    	min-height: 300px;
    	padding: 50px 10px 10px;
    }
    
    
    .eduTable {
    	width: 455px;
    	margin: 0 auto;
    	border: 0;
    	padding: 0;
    }
    .eduTable td {
    	vertical-align: top;
    	text-align: left;
    }
    .eduTable th:first-child, .eduTable td:first-child {
    	text-align: left;
    }
    .eduTable h4 {
    	margin: 0;
    }
    .eduTable ul {
    	margin-top: 0;
    	padding-left: 15px;
    	list-style-type: square;
    }
    
    .bio {
    	width: 455px;
    	margin: 0 auto;
    }
    
    .areas {
    	width: 455px;
    	margin: 0 auto;
    }
    
    .contact {
    	width: 550px;
    	margin: 0 auto;
    }
    
    .imageLeft {
    	float: left;
    	margin-right: 20px;
    	margin-bottom: 15px;
    }
    .imageRight {
    	float: right;
    	margin-left: 20px;
    	margin-bottom: 15px;
    }
    
    .clearfix:before, .clearfix:after { content: ""; display: table; }
    .clearfix:after { clear: both; }
    .clearfix { *zoom: 1; }
    
    .footer {
        text-align: center;
        margin-top: 50px;
    }
    
    .footer1 {
        text-align: center;
        margin-top: 50px;
    	color:#FFFFFF
    }

  2. #2
    Join Date
    Mar 2011
    Posts
    1,136
    I'd suggest two options: (1) you can search the web for CSS fly-out menus and replace what you have, or (2) take this as an opportunity to actually learn how CSS works.

    The CSS drop-down menu code you have now isn't that complicated and if you read the code with some understanding of the principles involved, it wouldn't be long before you could modify it yourself. If you're serious about being a web designer, you won't survive by simply cutting and pasting code from different sources. Sooner or later, you're going to need to understand the technology, so why not start now and save yourself endless hours of frustration. Good luck!
    Rick Trethewey
    Rainbo Design

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