Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Oct 2004
    Posts
    3
    Member #
    7993
    Hey guys, I'm sort of an HTML/CSS newbie, and I can't seem to figure this out.

    CSS:
    Code:
    body {
    	font-family : Arial, Helvetica, sans-serif;
    	font-weight : normal;
    }
    
    h1, h2, h3, h4, h5, h6 {
    	font-family : "Trebuchet MS", Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif; 
    	font-weight : normal; 
    }
    
    a {
    	color : #000000;
    }
    
    a:link {
    	text-decoration : none;
    }
    
    a:visited {
    	text-decoration : none;
    }
    
    a:hover {
    	text-decoration : none;
    }
    
    .topbox {
    	border : 1px solid #000000;
    	background-color : #d0e1f5;
    	color : #000000;
    	padding: 5px 5px 0 5px;
    }
    
    .topnav {
    	display : block;
    	background-color : #98c2f0;
    	color : #ffffff;
    	border : solid #000000;
    	border-width: 0px 1px 1px 1px;
    	padding-top : 3px;
    	padding-bottom : 0;
    }
    
    .topnav a:hover {
    	color : #ffffff;
    }
    
    .head {
    	font-weight : bold; 
    	text-decoration : none; 
    	font-size : 80%; 
    	font-family : Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
    }
    
    .topmenu {
    	float : right;
    }
    
    .topmenu a:link a:visited a:hover {
    	display : inline;
    	padding : 5px 0 5px 0;
    	border-style : solid;
    	border-width : 0 0 0 1px;
    	text-align : center;
    	color : #ffffff;
    	border : #000000;
    }
    
    .topmenu a:link a:visited {
    	background-color : #79fc4;
    }
    
    .topmenu a:hover {
    	background-color : #4d75a0;
    }

    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
    	<head>
    		<title>Main Frame</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    		<link rel="stylesheet" href="new_style.css" type="text/css" />
    	</head>
    	<body>
    		<div class="topbox">
    			<h2>TopBox text</h2>
    		</div>
    		<div class="topnav">
    			<span class="head">
    				<a target="_top" href="#">Head link</a>
    			</span>
    			<span class="topmenu">
    				<a target="_top" href="#" title="Topmenu Link1">
    					&nbsp;::Topmenu Link1::&nbsp;
    				</a>
    				<a target="_top" href="#" title="Topmenu Link2">
    					&nbsp;::Topmenu Link2::&nbsp;
    				</a>
    			</span>
    		</div>
    	</body>
    </html>
    I want to create a top caption (div.topbox) and a small menu box (div.topnav) attached underneath that spans then entire width and contains a link that is aligned to the left side of the box (span.head) and some links that are aligned to the right side (span.topmenu).


    I would think that the div.topnav would enclose both the span.head and span.topmenu in its box, but when I make the topmenu span float right using CSS, it comes outside the box, and if I remove the float right on topmenu, the links I want on the right are not displayed on the right. I've also tried floating span.head left and floating span.topmenu right, and then they both appear in the box, but on different lines. I want them to be on the same line.

    Anyone have any ideas how to achieve my desired results? I have a feeling I'm thinking about this whole div and span thing incorrectly.

    Thanks, Greg

  2.  

  3. #2
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    hmmm... i'm confused! could you maybe give us a screenshot of what's it's suppose to look like and what it's looking like now?!?
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  4. #3
    Junior Member
    Join Date
    Oct 2004
    Posts
    3
    Member #
    7993
    screenshots

    Quote Originally Posted by karinne
    hmmm... i'm confused! could you maybe give us a screenshot of what's it's suppose to look like and what it's looking like now?!?
    I've attached an image of what it looks like now. What I want changed is for the "Topmenu Link1" and "Topmenu Link2" to be moved inside the box with "Head link".
    Attached Images Attached Images

  5. #4
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    ok... add a float: left; to .head {...} and a height to .topnav {...}
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  6. #5
    Junior Member
    Join Date
    Oct 2004
    Posts
    3
    Member #
    7993
    Quote Originally Posted by karinne
    ok... add a float: left; to .head {...} and a height to .topnav {...}
    Yep, that fixes it. Thanks.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:36 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com