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 2 of 2
  1. #1
    Junior Member
    Join Date
    Nov 2013
    Posts
    1
    Member #
    37829

    Aside not rendering in layout

    I'm currently working on a design that I would like to be responsive. Among a mass of problems I am having, I am also not the best at writing code. My biggest problem right now is that my aside is not rendering at all, it's collapsing behind another element and I don't know why. Here is my code so far:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Toledo Pride</title>
    	<link rel="stylesheet" type="text/css" href="style.css">
    </head>
    
    <body>
    	<div id="wrapper">
    	<!--Header-->
    	
    		<header>
    		
    			<div id="logo">
    			</div>
    			
    			<nav>
    				<ul>
    		<li><a href="#">Home</a></li>
    		<li><a href="#">Tutorials</a>
    			<ul>
    				<li><a href="#">Photoshop</a></li>
    				<li><a href="#">Illustrator</a></li>
    				<li><a href="#">Web Design</a>
    					<ul>
    						<li><a href="#">HTML</a></li>
    						<li><a href="#">CSS</a></li>
    					</ul>
    				</li>
    			</ul>
    		</li>
    		<li><a href="#">Articles</a>
    			<ul>
    				<li><a href="#">Web Design</a></li>
    				<li><a href="#">User Experience</a></li>
    			</ul>
    		</li>
    		<li><a href="#">Inspiration</a></li>
    	</ul>
    			</nav>
    			
    		<header>
    		
    	<!--Close Header-->
    	<!--Article-->
    	
    		<article>
    			<div id="articleheader">
    				<h1> Features Articles </h1>
    			<div>
    			
    			<div id="aside">
    			</div>
    			
    			<div id="articleslider">
    			</div>
    		</article>
    		
    	<!--Close Content-->
    	
    	<!--Information-->
    	
    		<div id="information">
    			<div id="informationheader">
    				<h1> More Information </h1>
    			</div>
    		
    			<div id="columnone">
    			</div>
    		
    			<div id="columntwo">
    			</div>
    		
    			<div id="columnthree">
    			</div>
    		</div>
    		
    	<!--Close Information-->
    	
    	<!--Footer-->
    	
    		<footer>
    		</footer>
    		
    	<!--Close Footer-->
    	
    	</div>
    
    </body>
    </html>
    The navigation html is just a placeholder navigation as this website will be converted to php for a Wordpress theme.

    Below is the CSS

    Code:
    * {
    	margin:0;
    	padding:0;
    }
    
    body {background-image: url('images/white_wave.png');
    
         }
         
    div#wrapper { margin-right: auto;
    	          margin-left: auto;
    
    			}
    			
    #header { width: 100%;
     
     	    }
     	    
    div#logo {width: 38%;
     		  height: 10%;
     		  background-image: url('images/logo.png');
     		  float: left;
     		  padding: 1%;
    
             }
             
    #nav {width: 58%;
     	 height: 10%;
     	 float: right;
    
        }
        
    nav ul ul {
    	display: none;
    }
    
    	nav ul li:hover > ul {
    		display: block;
    	}
    
    nav ul {
    	background: #efefef; 
    	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
    	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    	padding: 0 20px;
    	border-radius: 10px;  
    	list-style: none;
    	position: relative;
    	display: inline-table;
    }
    	nav ul:after {
    		content: ""; clear: both; display: block;
    	}
    
    nav ul li {
    	float: left;
    }
    	nav ul li:hover {
    		background: #4b545f;
    		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    	}
    		nav ul li:hover a {
    			color: #fff;
    		}
    	
    	nav ul li a {
    		display: block; padding: 5px 10px;
    		color: #757575; text-decoration: none;
    	}
    
    nav ul ul {
    	background: #5f6975; border-radius: 0px; padding: 0;
    	position: absolute; top: 100%;
    }
    	nav ul ul li {
    		float: none; 
    		border-top: 1px solid #6b727c;
    		border-bottom: 1px solid #575f6a;
    		position: relative;
    	}
    		nav ul ul li a {
    			padding: 5px 10px;
    			color: #fff;
    		}	
    			nav ul ul li a:hover {
    				background: #4b545f;
    			}
    
    nav ul ul ul {
    	position: absolute; left: 100%; top:0;
    }
        
    #article { width: 90%;
    
    	    }
    	    
    div#articleheader { width: 73%;
     		            height: 6%;
    					float: left;
    					padding: 1%;
    					
     				  }
    
    div#aside { width: 22%;
     		height: 75%;
     		background-color: blue;
     		float: left;
     		padding: 1%
     		clear: both;
     		position: relative;
     		
    
    	  }
    	  
    div#articleslider{ width: 73%;
     		           height: 41%;
     		           float: left;
     		           background-color: white;
     		           padding: 1%;
     		          
    
                     }
    
    div#information {
    
    			    } 
    			    
    div#informationheader{ width: 73%;
    					   height: 5%
    					   float: left;
    					   padding: 1%;
    					 } 
    
    div#columnone { width: 23%;
    				height: 23%;
    				float: left;
    				background-color: orange;
    				display: inline;
    				padding: 1%;
    				clear: both;
    
    			  }      
    
    div#columntwo { width: 23%;
    				height: 23%;
    				float: left;
    				background-color: black;
    				padding: 1%;
    				display: inline;
    
    			  } 
    			  
    div#columnthree { width: 23%;
    				height: 23%;
    				float: left;
    				background-color: purple;
    				padding: 1%;
    				display: inline;
    
    			    } 
    			    
    #footer { width: 98%;
     		 height: 14%;
     		 background-color: green;
     		 padding: 1%;
    	   }
    The background colors don't mean anything to me, just there so I can see where the divs are sitting...it's not pretty.

  2.  

  3. #2
    Senior Member Zboost's Avatar
    Join Date
    Apr 2011
    Location
    Houston
    Posts
    246
    Member #
    27459
    Liked
    20 times
    This maybe?

    HTML Code:
    <!--Article-->
    <article><div id="articleheader"><h1> Features Articles </h1>
    <div><div id="aside"></div><div id="articleslider"></div></article><!--Close Content-->
    [[I even bold and underlined what "I" am completely guessing is what you are trying to figure out.]]
    EDIT: (Apparently I couldn't bold and underline these parts.)

    1. <article> is missing I.D.
    2. <div> missing closing tag
    3. <div> missing closing tag


    HTML Code:
    <!--Article-->
    <article id="article"><div id="articleheader"><h1> Features Articles </h1>
    <div><div id="aside"></div><div id="articleslider"></div></div></div></article><!--Close Content-->
    Maybe that's what you are looking for. I could be completely wrong though...
    Last edited by Zboost; Nov 27th, 2013 at 06:19 PM.


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
  •  

Tags for this Thread

All times are GMT -6. The time now is 01:45 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com