4 replies [Last post]
mizphit
mizphit's picture
Offline
newbie
Last seen: 9 years 5 weeks ago
Timezone: GMT-5
Joined: 2013-12-23
Posts: 4
Points: 5

I have a web page where the black background is below the actual banner area, and my bottom border is on top.

HTML code. The content paragraphs were just ripped from a game site that had alot of text. Needed a huge filler, so it means nothing Smile

<!DOCTYPE HTML>
<html>
 
	<head>
		<link href="css/Style.css" rel="stylesheet" type="text/css" media="screen">
		<title>Welcome To MIZPHIT.Com!</title>
	</head>
 
	<body>
 
		<div id="wrapper">
 
			<div id="banner">
				<div id="logo">
					<img src="images/logo.jpg">
				</div>
				<div id="bannerfill">
					<p>Advertise Here!</P>
					<img src="images/fillpic.jpg">
				</div>
			</div>
 
			<div id="navbar">
				<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="http://www.twitch.tv/mizphitgaming">Twitch Home</a></li>
				<li><a href="http://www.youtube.com/user/MizphitGaming">Youtube Home</a></li>
				<li><a href="FantasyGames/index.html">Fantasy Games Home</a></li>										
				</ul>				
			</div>
 
			<div id="content">
				<p>Though the modern revival of the RPG-lite beat-em-up has been centered mostly around downloadable services, the genre has also enjoyed the occasional new retail release: Some, like last year’s Code of Princess, clearly emulate certain games of the past but come up short in most aspects; Others manage to take the key aspects of their source material and expand on them to take advantage of modern trends and capabilities, and Dragon’s Crown definitely falls into the latter category. Wearing its inspiration from Capcom’s D&D arcade games proudly, it takes the distinct abilities of its ancestor’s playable characters and makes them even more distinct, and it develops the basic inventory system into a full equipment list ready to be filled with whatever gear you find on your adventures. Add in Vanillaware’s signature exaggerated oil paint art style, a quest system that enables leveling and encourages exploration of old levels while backtracking, and a quickly ramping difficulty curve and you’ve got a game that, while definitely rooted in the past, proves that the old formula still has room for growth and can be worked accordingly.</P>
			</div>
 
			<div id="content2">
				<p>Though the modern revival of the RPG-lite beat-em-up has been centered mostly around downloadable services, the genre has also enjoyed the occasional new retail release: Some, like last year’s Code of Princess, clearly emulate certain games of the past but come up short in most aspects; Others manage to take the key aspects of their source material and expand on them to take advantage of modern trends and capabilities, and Dragon’s Crown definitely falls into the latter category. Wearing its inspiration from Capcom’s D&D arcade games proudly, it takes the distinct abilities of its ancestor’s playable characters and makes them even more distinct, and it develops the basic inventory system into a full equipment list ready to be filled with whatever gear you find on your adventures. Add in Vanillaware’s signature exaggerated oil paint art style, a quest system that enables leveling and encourages exploration of old levels while backtracking, and a quickly ramping difficulty curve and you’ve got a game that, while definitely rooted in the past, proves that the old formula still has room for growth and can be worked accordingly.</P>
			</div>
 
			<div id="sidebar">
				<p>Though the modern revival of the RPG-lite beat-em-up has been centered mostly around downloadable services, the genre has also enjoyed the occasional new retail release: Some, like last year’s Code of Princess, clearly emulate certain games of the past but come up short in most aspects; Others manage to take the key aspects of their source material and expand on them to take advantage of modern trends and capabilities, and Dragon’s Crown definitely falls into the latter category. Wearing its inspiration from Capcom’s D&D arcade games proudly, it takes the distinct abilities of its ancestor’s playable characters and makes them even more distinct, and it develops the basic inventory system into a full equipment list ready to be filled with whatever gear you find on your adventures. Add in Vanillaware’s signature exaggerated oil paint art style, a quest system that enables leveling and encourages exploration of old levels while backtracking, and a quickly ramping difficulty curve and you’ve got a game that, while definitely rooted in the past, proves that the old formula still has room for growth and can be worked accordingly.</P>
			</div>
 
			<div id="footer">
				<img src="images/Logo1.png">
			</div>
 
		</div>
	</body>
 
</html>

This is the css minus the reset. I have taken out the reset and it didn't change.

#wrapper { width:1024px; margin:0px auto; background-color:#ffffff; }
 
#banner { width:100%; background-color:#000000; border-bottom:4px #9900CC solid;  }
 
#logo { float:left; margin:0px 0px 0px 10px; }
 
#bannerfill { float:right; margin:0 10px 0 0; }
#bannerfill p {color:#ffffff; font-size:11px; margin:4px 10px 4px opx; }
 
 
#navbar { background-color:#FFCC00;  clear:both; }
#navbar ul { width:100%; float:left; margin:0px; background-color:#FFCC00; }
#navbar ul li { display:inline; }
#navbar ul li a { float:left;  padding:10px 20px; }
 
#navbar a:link    {color:#ffffff; }
#navbar a:visited {color:#ffffff; }
#navbar a:active  {color:#ffffff; }
#navbar a:hover   {color:#ffffff; background-color:#CC00FF; }
#navbar a:focus   {color:#ffffff; }
 
#content { float:left; width:720px; padding:10px; margin:5px; background-color:#ffffff; border:1px #000000 solid; }
 
#content2 { float:left; width:720px; height:100%; padding:10px; margin:5px; background-color:#ffffff; border:1px #000000 solid; }
 
#sidebar { float:right; width:250px; padding:5px; margin:5px 5px 5px 0px; background-color:#ffffff; border:1px #000000 solid; }
 
#footer { width:100%; height:175px; padding:0px; text-align:center; background-color:#000000; }

Hope this is enough info for whomever helps. I have changed so many things and it has not once changed. so now am at a loss. I am still going to work on it. will post if I figure it out.

mizphit
mizphit's picture
Offline
newbie
Last seen: 9 years 5 weeks ago
Timezone: GMT-5
Joined: 2013-12-23
Posts: 4
Points: 5

link

my pic didn't get put in

mizphit
mizphit's picture
Offline
newbie
Last seen: 9 years 5 weeks ago
Timezone: GMT-5
Joined: 2013-12-23
Posts: 4
Points: 5

anyone?

started css from scratch. get same white box behind content and navbar.

somdcomputerguy
somdcomputerguy's picture
Offline
newbie
West Virginia
Last seen: 8 years 46 weeks ago
West Virginia
Timezone: GMT-4
Joined: 2012-01-27
Posts: 5
Points: 6

Take out the 'float: right;'

Take out the 'float: right;' from #bannerfill. Maybe that cancels out the 'float: left;' from #logo. I have no idea if that'll resolve this issue or not, just a shot in the dark..

mizphit
mizphit's picture
Offline
newbie
Last seen: 9 years 5 weeks ago
Timezone: GMT-5
Joined: 2013-12-23
Posts: 4
Points: 5

didn't help but thanks

That just moved my right side items close to left side banner. Thanks for responding though, and help could fix it. You know how code brainblock goes Smile

<#EDIT FIXED#>

My footer needed a clear:both; and my 2 contents needed a wrapper.