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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Nov 2007
    Posts
    682
    Thanks
    319
    Thanked 1 Time in 1 Post

    Div tag next to each other?

    I am trying to make a menu system which will use text for the links and have a background image. But I can't make the div tags align next to each other as they all can't use float:left/right as there are 6 links, so some will overlap. I also want them to align to the center of the page.

    Here is my code, I did try to make the links using just <a href="#"></a> tags but that didnt work as I had to make the position absolute in order for the width and height to be used which makes the items overlap

    Code:
    <div class="topMenu">
    <center>
    	<div class="menu">
        	<div class="menuItem">
            <a href="#" class="menuLink">Home</a>
            </div>
        	<div class="menuItem">
            <a href="#" class="menuLink">About</a>
            </div>
            <div class="menuItem">
            <a href="#" class="menuLink">Gallery</a>
            </div>
            <div class="menuItem">
            <a href="#" class="menuLink">Downloads</a>
            </div>
            <div class="menuItem">
            <a href="#" class="menuLink">Contact</a>
            </div>
            <div class="menuItem">
            <a href="#" class="menuLink">Tutorials</a>
            </div>
            <!--
            <a class="test" href="#">Home</a>
            <a class="test" href="#">About Us</a>
            -->
        </div>
        </center>
    </div>
    CSS
    Code:
    /*Top Menu*/
    .topMenu {
    	width:100%;
    	background-color:#000000;
    	height:45px;
    	position:absolute;
    	z-index:1;
    }
    /*MENU*/
    .menu {
    	margin-top:22px;
    	color:#CCCCCC;
    }
    .menuItem {
    	background-image:url(../images/buttons/inactive.png);
    	background-repeat:no-repeat;
    	width:115px;
    	height:35px;
    	padding-top:0.6em;
    }
    .menuItem:hover {
    	background-image:url(../images/buttons/active.png);
    	background-repeat:no-repeat;
    }
    .menuLink {
    	font-family:calibri;
    	color:#CCCCCC;
    }
    /*MENU END*/
    /*Top Menu END

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    martynball (01-14-2010)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello martynball,
    Lots of menu examples here to choose from.


    Like ab says, you have divitis.
    <center> is deprecated.
    Your box model is off - You set .topMenu to 45px high, margin .menu down 22px and then put a 35px high .menuItem in it and add even more top padding to that. The math doesn't work out. The way the box model works, margin/padding/border all count when figuring total width or height.
    Last edited by Excavator; 01-14-2010 at 10:12 AM.
    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:

    martynball (01-14-2010)

  • #4
    Regular Coder
    Join Date
    Nov 2007
    Posts
    682
    Thanks
    319
    Thanked 1 Time in 1 Post
    Cheers, got it sorted. And I have gotten rid of afew div's. I am still a noob at coding, so I try and code the way I know Lol. I used to use tables, then changed too CSS and liquid design.

    Another thing, I want to have a bar along the top of the page, above the menu. But I can't seem to get the background image go in the middle and get the two images go at each side which give it curved corners.

    E.g.

    LeftImage | Middle section with background image | Right Image

    Here is my code at the moment:
    Code:
    <body>
    <div class="container">
    	<div class="topBar">
    		<img src="images/topBar/left.png"/> 
            <div style="background-color:#333333;">
            	<h1>Portfolio</h1>
                <h2>Martyn Lee Ball</h2>
            </div>
    		<img src="images/topBar/right.png"/> 
    	</div>
    	<div class="topMenu">
            <ul>
            	<li><a class="menuLink" href="#">Home</a></li>
                <li><a class="menuLink" href="#">About</a></li>
                <li><a class="menuLink" href="#">Gallery</a></li>
                <li><a class="menuLink" href="#">Downloads</a></li>
                <li><a class="menuLink" href="#">Contact</a></li>
                <li><a class="menuLink" href="#">Tutorials</a></li>
            </ul>
        </div>
    <div class="middleSection">
    
    	<div class="contentContainerBG">
    	</div>
    <img src="images/middleSection/background/martynlball.png"/>
    <img src="images/middleSection/background/bottomRight.png" style="right:0px; bottom:0px; position:absolute;">
    </div>
    <div class="bottomBar">
        <div class="bottomBarC">
          <div class="leftImage-bottom"/>
          <img src="images/topBar/left-bottom.png" class="hidden" /></div>
        <div class="rightImage-bottom"/>
        <img src="images/topBar/right-bottom.png" class="hidden" /> 
        </div>
    </div>
    </div>
    </body>
    CSS:
    Code:
    @charset "utf-8";
    /* CSS Document */
    body {
    	background-color:#242424;
    	margin:0;
    }
    h1, h2 {
    	color:#CCCCCC;
    	display:inline;
    	font-family:calibri;
    	font-size:13px;
    	padding:0px;
    	margin:0px;
    }
    h2 {
    	font-size:34px;
    	font-weight:normal;
    	letter-spacing:5px;
    }
    .container {
    	margin-top:8%;
    }
    a {
    	text-decoration:none;
    }
    /*Top Bar*/
    .topBar {
    	z-index:1;
    	padding:0px;
    	margin-bottom:-9px;
    }
    .leftImage {
    	background-image:url(../images/topBar/left.png);
    	background-repeat:no-repeat;
    	float:left;
    	z-index:1;
    }
    .rightImage {
    	background-image:url(../images/topBar/right.png);
    	background-repeat:no-repeat;
    	float:right;
    	z-index:1;
    }
    /*Top Bar END */
    
    /*Top Menu*/
    .topMenu {
    	width:100%;
    	background-color:#000000;
    	height:45px;
    	position:absolute;
    	z-index:1;
    }
    /*MENU*/
    .menu {
    	margin-top:22px;
    	color:#CCCCCC;
    }
    .menuItem {
    	background-image:url(../images/buttons/inactive.png);
    	background-repeat:no-repeat;
    	width:115px;
    	height:35px;
    	padding-top:0.6em;
    }
    .menuItem:hover {
    	background-image:url(../images/buttons/active.png);
    	background-repeat:no-repeat;
    }
    .menuLink {
    	font-family:calibri;
    	color:#CCCCCC;
    	display:block;
        margin:0 0 0 1px;
        padding:3px 10px;
        text-decoration:none;
        line-height:1.3em;
    	background-image:url(../images/buttons/inactive.png);
    	width:115px;
    	height:35px;
    	background-repeat:no-repeat;
    }
    .topMenu ul {
    	clear:left;
        float:left;
        list-style:none;
        margin:0;
        padding:0;
        position:relative;
        left:50%;
        text-align:center;
    }
    .topMenu ul li {
        display:block;
        float:left;
        list-style:none;
        margin:0;
        padding:0;
        position:relative;
        right:50%;
    }
    .menuLink:hover {
    	background-image:url(../images/buttons/active.png);
    }
    /*MENU END*/
    /*Top Menu END
    
    /*Middle Section*/
    .middleSection {
    	background-image:url(../images/middleSection/bg.gif);
    	background-repeat:repeat-x;
    	position:absolute;
    	height:430px;
    	width:100%;
    	margin-top:45px;
    	overflow:hidden;
    }
    .contentContainerBG {
    	position:absolute;
    	width:100%;
    	height:100%;
    	z-index:1;
    	background-color:#000000;
    	opacity:0.5;
    	filter: alpha(opacity = 50);
    	visibility:hidden;
    }
    /*Middle Section END*/
    
    /*Special Classes*/
    .hidden {
    	visibility:hidden;
    }
    /*Special Classes END*/
    
    .test {
    	position:absolute;
    	width:100%;
    	background-image:url(../images/topBar/middle.gif);
    }
    Last edited by martynball; 01-14-2010 at 10:27 AM.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Here is my code at the moment:
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Regular Coder
    Join Date
    Nov 2007
    Posts
    682
    Thanks
    319
    Thanked 1 Time in 1 Post
    It is only local at the moment, I am doing it at college. Lesson has just this minute finished. I will upload later on if I have time.

  • #7
    Regular Coder
    Join Date
    Nov 2007
    Posts
    682
    Thanks
    319
    Thanked 1 Time in 1 Post
    Here is the link, managed to get back onto a computer:

    http://martynleeball.x10hosting.com/portfolio/index.php

    Changed background colour, it is just temp. This monito on this computer is so dark I cannot make out the curved edges... can't get it any brighter, that means I am going to need change the colour scheme.
    Last edited by martynball; 01-14-2010 at 11:19 AM.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Your document is not valid! Add a DOCTYPE at the top first. I'd recommend
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    for your current markup. Then validate your markup to fix the other remaining errors.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Regular Coder
    Join Date
    Nov 2007
    Posts
    682
    Thanks
    319
    Thanked 1 Time in 1 Post
    I will fix the errors after I have got the main template complete. But cheers.

    But:
    I want to have a bar along the top of the page, above the menu. But I can't seem to get the background image go in the middle and get the two images go at each side which give it curved corners.

    E.g.

    LeftImage | Middle section with background image | Right Image


  •  

    Posting Permissions

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