1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

two menu blocks

Discussion in 'CSS' started by AfterHim.com, Apr 23, 2005.

  1. #1
    I have two menu blocks that I want one positioned 10px below the top one...how would I code that?

    This is what I have for the top menu block:

    #navBeta {
    	position:absolute;
    	width:150px;
    	top:100px;
    	right:20px;
    	border:2px;
    border-style: solid;
    border-color: #ff0000;
    	background-color:#cdcdcd;
    	padding:3px;
    	z-index:1;
    /* Again, the ugly brilliant hack. */
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	width:168px;
    	}
    /* Again, "be nice to Opera 5". */
    body>#navBeta {width:168px;}
    Code (markup):
    This is the second block:

    #navBeta2 {
    	position:absolute;
    	width:150px;
    	top:300px;
    	right:20px;
    	border:2px;
    border-style: solid;
    border-color: #ff0000;
    	background-color:#cdcdcd;
    	padding:3px;
    	z-index:1;
    /* Again, the ugly brilliant hack. */
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	width:168px;
    	}
    /* Again, "be nice to Opera 5". */
    body>#navBeta2 {width:168px;}
    Code (markup):
    These blocks are on the right.

    Obviously the second one is being measured from the top of the page down, instead of from the top box (top:300px;)

    This was a css page I got from a tutorial that I am trying to learn with.

    Thanks,

    Brandon
     
    AfterHim.com, Apr 23, 2005 IP
  2. CompressedAir

    CompressedAir Peon

    Messages:
    56
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Not sure if this works with your design, but it does what you wanted:

    #navBeta {
    	position:relative;
    	width:150px;
    	margin-top: 100px;
    	right:20px;
    	border: 2px solid #ff0000;
    	background-color:#cdcdcd;
    	padding:3px;
    	z-index:1;
    	clear: both;
    	float: right;
    /* Again, the ugly brilliant hack. */
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	width:168px;
    
    	}
    /* Again, "be nice to Opera 5". */
    body>#navBeta {width:168px;}
    #navBeta2 {
    	position:relative;
    	width:150px;
    	right:20px;
    	border: 2px solid #ff0000;
    	margin-top: 10px;
    	background-color:#cdcdcd;
    	padding:3px;
    	z-index:1;
    	border: 2px solid #ff0000;
    	float: right;
    	clear: both;
    /* Again, the ugly brilliant hack. */
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	width:168px;
    	}
    /* Again, "be nice to Opera 5". */
    body>#navBeta2 {width:168px;}
    
    Code (markup):
    Also, note how I defined border. It's usually better to use the one-line shortcuts for CSS; cuts down on the file size.
    Good luck!
     
    CompressedAir, May 9, 2005 IP