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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20

Thread: menu alignment

  1. #1
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts

    menu alignment

    I'm ring to kp my menu left but close to edge. My content div dropped. hw do i get moved back up and keep menu to the let edge.

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



    Code:
    body {
    	background-color: white;
    	background-image: url(../images/background.jpg);
    	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;
    }
    
    
    .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
    }
    
    /*MENU STARTS*/
    
    /*Gt Stylesheet */
    
    #cssmenu > ul{
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	vertical-align: baseline;
    	line-height: 1;
    }
    
    /* The container */
    
    #cssmenu > ul {
    	display: block;
    	position: relative;
    	width: 150px;
    }
    
    	/* The list elements which contain the links */
    	#cssmenu > ul li {
    		display: block;
    		position: relative;
    		margin: 0;
    		padding: 0;
    		width: 150px;	
    	}
    
    		/* General link styling */
    
    		#cssmenu > ul li a {
    			/* Layout */
    			display: block;
    			position: relative;
    			margin: 0;
    			border-top: 1px dotted #fff;
    			border-bottom: 1px dotted #d9d9d9;
    			padding: 11px 20px;
    			width: 110px;
    
    
    			/* Typography */
    
    			font-family:  Helvetica, Arial, sans-serif;
    			color: #3dafea;
    			text-decoration: none;
    			text-transform: uppercase;
    			text-shadow: 0 1px 0 #fff;
    			font-size: 13px;
    			font-weight: 300;
    
    			/* Background & effects */
    
    			background: #eaeaea;
    		}
    
    		/* Rounded corners for the first link of the menu/submenus */
    
    		#cssmenu > ul li:first-child>a {
    			border-top-left-radius: 4px;
    			border-top-right-radius: 4px;
    			border-top: 0;
    		}
    
    		/* Rounded corners for the last link of the menu/submenus */
    
    		#cssmenu > ul li:last-child>a {
    			border-bottom-left-radius: 4px;
    			border-bottom-right-radius: 4px;
    			border-bottom: 0;
    		}
    
    		/* The hover state of the menu/submenu links */
    
    		#cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
    			color: #fff;
    			text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
    			background: #54cdf1;
    			background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3);
    			background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3); 
    			background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3);
    			background: -o-linear-gradient(bottom, #54cdf1, #74d7f3);
    			border-color: transparent;
    		}
    
    		/* The arrow indicating a submenu */
    
    		#cssmenu > ul .has-sub>a::after {
    			content: '';
    			position: absolute;
    			top: 16px;
    			right: 10px;
    			width: 0px;
    			height: 0px;
    
    			/* Creating the arrow using borders */
    
    			border: 4px solid transparent;
    			border-left: 4px solid #3dafea; 
    		}
    
    		/* The same arrow, but with a darker color, to create the shadow effect */
    
    		#cssmenu > ul .has-sub>a::before {
    			content: '';
    			position: absolute;
    			top: 17px;
    			right: 10px;
    			width: 0px;
    			height: 0px;
    
    			/* Creating the arrow using borders */
    
    			border: 4px solid transparent;
    			border-left: 4px solid #fff;
    		}
    
    		/* Changing the color of the arrow on hover */
    
    		#cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
    			border-left: 4px solid #fff;
    		}
    
    		#cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
    			border-left: 4px solid rgba(0, 0, 0, .25);
    		}
    
    
    		/* THE SUBMENUS */
    
    		#cssmenu > ul ul {
    
    			position: absolute;
    			left: 150px;
    			top: -9999px;
    			padding-left: 5px;
    			opacity: 0;
    
    			/* The fade effect, created using an opacity transition */
    
    			-webkit-transition: opacity .3s ease-in;
    			-moz-transition: opacity .3s ease-in;
    			-o-transition: opacity .3s ease-in;
    			-ms-transition: opacity .3s ease-in;
    		}
    
    		/* Showing the submenu when the user is hovering the parent link */
    
    		#cssmenu > ul li:hover>ul {
    			top: 0px;
    			opacity: 1;
    		}
    		
    		/*MENU ENDS*/

    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">
    		
    	</div>
    	
    
    
    	<div class="header2">
    		
    	</div>
    	
    	
        
        <div id='cssmenu'>
    
    <ul>
    
    <li><a href='#'><span>Home</span></a></li>
    
    <li><a href='#'><span>Products</span></a></li>
    
    <li><a href='#'><span>Menu 1</span></a></li>
    
    <li><a href='#'><span>Menu 2</span></a></li>
    
    <li><a href='#'><span>About</span></a></li>
    
    <li><a href='#'><span>Contact</span></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>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Why did you put the footer in the content div? IMHO I'd make footer a separate div.

    To get the cssmenu div and the content div to display on your terms remove position: relative; from the cssmenu and maybe float it left. Add padding-left to give it some white space on the left side.
    Then float: left; added to the content div

  • #3
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts
    there is a couple position relative in the css, what one do i want to change?

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Lets see, were working with two divs cssmenu div and the content div, That would narrow the choice unless you thought removing position: relative; from the .header h1 { rules would do the trick.

  • #5
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is why I ask the question.

    Code:
    /*Gt Stylesheet */
    
    #cssmenu > ul{
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	vertical-align: baseline;
    	line-height: 1;
    }
    
    /* The container */
    
    #cssmenu > ul {
    	display: block;
    	position: relative;
    	width: 150px;
    }

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    I only see one position: relative; in what you are showing. In the css section I see two rules named #cssmenu > ul. Why did you do that? It is confusing they should be together:

    Code:
    #cssmenu > ul{
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	vertical-align: baseline;
    	line-height: 1;
    	display: block;
    	//position: relative;
    	width: 150px;
    	float: left;
    //ADD PADDING HERE
    }
    And now you have the answer, I think.

  • #7
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Yes. it works great.

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

    is there away that when i scroll on the page, the menu floats with out moving. if that makes sense.

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there charisma44,

    this is how I would code your page...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>Accessible Destinations - Home</title>
    
    <style type="text/css">
    body {
        margin:10px;
        background-color:#fff;
        background-image:url(http://www.cjwebconsulting.com/project/images/background.jpg);
        background-attachment:fixed;
        background-position:center top;
     }
    #container {
        width:1000px;
        margin:auto;
     }
    #content {
        position:relative;
        float:right;
        width:760px;
        min-height:300px;
        padding:50px 10px 10px;
        margin:auto;
        background-color:#fff;
     }
    #cssmenu {
        position:fixed;
        width:150px;
        top:50px;
     }
    #cssmenu h3 {
        text-align:center;	
     }
    #cssmenu  ul{
        margin:0;
        padding:0;
        list-style-type:none;
     }
    #cssmenu  a {
        display:block;
        border-top:1px dotted #fff;
        border-bottom:1px dotted #d9d9d9;
        padding:11px 20px;
        font-family:helvetica,arial,sans-serif;
        font-size:13px;
        font-weight:300;
        color:#3dafea;
        text-decoration:none;
        text-transform:uppercase;
        text-shadow:0 1px 0 #fff;
        background-color:#eaeaea;
     }
    #cssmenu a:hover {
        color:#fff;
        text-shadow:0 1px 0 rgba(0,0,0,0.3);
        background-color:#54cdf1;
        background:-webkit-linear-gradient(bottom,#54cdf1,#74d7f3);
        background:-ms-linear-gradient(bottom,#54cdf1,#74d7f3); 
        background:-moz-linear-gradient(bottom,#54cdf1,#74d7f3);
        background:-o-linear-gradient(bottom,#54cdf1,#74d7f3);
        border-color:transparent;
     }
    #header1 {
        background-image:url(http://www.cjwebconsulting.com/project/images/destinations.jpg);
        height:100px;
        width:780px;
        float:right;
     }
    #header2 {
        background-image:url(http://www.cjwebconsulting.com/project/images/beachbanner.jpg);
        height:150px;
        width:780px;
        float:right;
     }
    #footer {
        clear:both;
        float:right;
        width:780px;
        padding:50px 0 20px;
        text-align:center;
     }
    #footer a {
        margin-left: 10px;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="cssmenu">
    
    <h3>MAIN MENU </h3>
    
    <ul>
     <li><a href='#'>Home</a></li>
     <li><a href='#'>Products</a></li>
     <li><a href='#'>Menu 1</a></li>
     <li><a href='#'>Menu 2</a></li>
     <li><a href='#'>About</a></li>
     <li><a href='#'>Contact</a></li>
    </ul>
    
    </div><!-- end #cssmenu -->
    
    <div id="header1"></div>
    <div id="header2"></div>
    
    <div id="content">
    
    </div><!-- end #content -->
    
    <div id="footer">
    Website designed by<a href="http://www.cjwebconsulting.com">CJ Web Consulting</a>
    </div>
    
    </div><!-- end #container -->
    
    </body>
    </html>
    coothead

  • #9
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much.

  • #10
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts
    do i replace all of my css with yours?

  • #11
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there charisma44,
    You need to use both the HTML and the CSS.

    coothead

  • #12
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, That I knew. I was referring to taking your CSS code and put it into my CSS file. As of now you have CSS and HTML in one file.

  • #13
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there charisma44,

    Of course you may put the CSS in an external file.

    As I was posting the code rather than using an attachment, I could not use that option.

    coothead

  • #14
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Cool. Thanks

  • #15
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts

    No problem, you're very welcome.

    coothead


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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