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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trouble with alignment/float/inline

    So I'm trying to create a nice(ish) navigation to my website, but also want the span/h4 to be in vertical alignment with it, this is what it currently looks like.



    This is the current markup:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    	
    	<head>
    
    		<title>Matthew Noskiw's website</title>
    
    		<link rel='stylesheet' type='text/css' href='./inc/CSS/styles/default.css' />
    		<link rel='stylesheet' type='text/css' href='./inc/CSS/static/navigation.css' />
    
    	</head>
    
    	<body>
    
    		<div id='Container'>
    
    			<div id='Header'>
    
    				<div style='float: right'>
    
    					<ul id='Navigation'>
    
    						<li id='NavButton' class='active'><a href='./'>Home</a></li>
    						<li id='NavButton'><a href='./about'>About</a></li>
    						<li id='NavButton'><a href='./blog'>Blog</a></li>
    						<li id='NavButton'><a href='./contact'>Contact</a></li>
    
    					</ul>
    
    				</div>
    
    				<span>noskiw.co.uk</span>
    
    			</div>
    
    			<!--<hr />-->
    
    		</div>
    
    	</body>
    
    </html>
    More specifically, it's this section:

    Code:
    <div id='Container'>
    
    			<div id='Header'>
    
    				<div style='float: right'>
    
    					<ul id='Navigation'>
    
    						<li id='NavButton' class='active'><a href='./'>Home</a></li>
    						<li id='NavButton'><a href='./about'>About</a></li>
    						<li id='NavButton'><a href='./blog'>Blog</a></li>
    						<li id='NavButton'><a href='./contact'>Contact</a></li>
    
    					</ul>
    
    				</div>
    
    				<span>noskiw.co.uk</span>
    
    			</div>
    
    			<!--<hr />-->
    
    		</div>
    This is the navigation CSS:

    Code:
    #Navigation
    {
    	display: inline;
    	list-style-type: none;
    }
    
    #NavButton
    {
    	display: inline-block;
    	width: 70px;
    	margin-left: 3px;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    }
    
    #NavButton a
    {
    	text-align: center;
    	display: block;
    	padding: 6px;
    	color: #000000;
    	text-decoration: none;
    	font-weight: bold;
    }
    
    #NavButton a:hover
    {
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    	background-color: #E8E8EE;
    }
    
    .active
    {
    	background-color: #1C75D4;
    }
    
    .active a
    {
    	color: #FFFFFF !important;
    }
    
    .active a:hover
    {
    	background-color: #1C75D4 !important;
    }
    And this is the CSS for the body and divs etc:

    Code:
    body
    {
    	font-family: arial;
    	font-size: 14px;
    	color: #000000;
    }
    
    #Container
    {
    	width: 800px;
    	border: 1px solid #000000;
    	margin: 0 auto;
    	padding: 3px;
    }
    
    #Header
    {
    	overflow: hidden;
    	padding: 5px;
    }
    Absolutely and help/input would be masively appreciated.

    Thank you.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,438
    Thanks
    23
    Thanked 630 Times in 629 Posts
    Something to look at. Added a new selector to the CSS My changes to the CSS are not indented. Changes to the HTML are apparent.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Matthew Noskiw's website</title>
    <link rel='stylesheet' type='text/css' href='./inc/CSS/styles/default.css' />
    <link rel='stylesheet' type='text/css' href='./inc/CSS/static/navigation.css' />
    </head>
    
    <body>
    <div id='Container'>
    	<div id='Header'>noskiw.co.uk</div>
    	<div id="nav_block">
    		<ul id='Navigation'>
    			<li id='NavButton' class='active'><a href='#'>Home</a></li>
    			<li id='NavButton'><a href='./about'>About</a></li>
    			<li id='NavButton'><a href='./blog'>Blog</a></li>
    			<li id='NavButton'><a href='./contact'>Contact</a></li>
    		</ul>
    	</div>
    </div>
    </body>
    </html>
    The CSS:
    Code:
    body
    {
    	font-family: arial;
    	font-size: 14px;
    	color: #000000;
    }
    
    #Container
    {
    	width: 800px;
    height: 28px;
    	border: 1px solid #000000;
    	margin: 0 auto;
    	padding: 3px;
    }
    
    #Header
    {
    	overflow: hidden;
    	padding: 5px;
    width:100px;
    float: left;
    }
    #nav_block{
    width:350px;
    float: right;
    }
    #Navigation
    {
    	display: inline;
    	list-style-type: none;
    }
    
    #NavButton
    {
    	display: inline-block;
    	width: 70px;
    	margin-left: 3px;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    }
    
    #NavButton a
    {
    	text-align: center;
    	display: block;
    	padding: 6px;
    	color: #000000;
    	text-decoration: none;
    	font-weight: bold;
    }
    
    #NavButton a:hover
    {
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    	background-color: #E8E8EE;
    }
    
    .active
    {
    	background-color: #1C75D4;
    }
    
    .active a
    {
    	color: #FFFFFF !important;
    }
    
    .active a:hover
    {
    	background-color: #1C75D4 !important;
    }
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply, but part of the problem is with that, and I know I'm sounding picky, is that I really don't want to have to specify a height parameter, I want it to inherit from the elements contained within.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,438
    Thanks
    23
    Thanked 630 Times in 629 Posts
    You inherit from the parent not the child.
    Remove the #Container height and see what happens to your border.

    The two divs in Container, #Header and #nav_block, don't have a height. Add one and see what happens.

    And I see no reason that you would want this in the first place.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

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