Member Avatar for WigglesMcMuffin

I'm trying to create a website, and I'm currently having a little CSS trouble with getting the website to flow and respond well to resizing and different screen sizes.

Currently I have posted it at: my kodingen site

Anyway, if you go there you may notice that 1) my content section doesn't quite reach the right edge, or it displaces itself downwards, and 2) I set my info bar to absolute, just so I could get it to stay in the general vicinity that I wanted it. What I'd like to know is how can I resolve these two issues? I can post the code if needed (but I figured I didn't need to seeing as it's there on the site)

Any insight would be great, cause I'm still kinda new to HTML and CSS. Thanks!

P.S. Please don't mind the colours, this is still a rough concept and I was testing out what I liked, also I know that CSS is supposed to be separate, but kodingen doesn't seem to like the <link> tag too much (this isn't the final resting place of the site either)

  • 2 Contributors
  • 4 Replies
  • 180 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by WigglesMcMuffin
Member Avatar for almostbob

post the code, all of it, properly, dont waste the time of people you want to help you

Member Avatar for WigglesMcMuffin

Sorry, here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xlmns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Dark Empire Forum</title>
		<link rel="stylesheet" type="text/css" href="main.css" />
	</head>
	<body>
		<div id="header">
			<p>Will contain random features like the log in/out link, etc</p>
		</div>
		<div class="main">
			<div id="navigation">
				<img src="./imgs/forum-icon.png" width="120" height="90" alt="Basic logo" />
				<h1>Dark Empire</h1>
				<ul>
					<li>Signup link</li>
					<li>Homepage linkydink</li>
					<li>Search linkydink</li>
				</ul>
			</div>
			<div id="content">
				<img src="./imgs/squirrel-sith-lightning.jpg" width="400" height="300" alt="Random opening picture" />
				<img src="./imgs/squirrel-sith-lightning.jpg" width="400" height="300" alt="Random opening picture" />
				<img src="./imgs/squirrel-sith-lightning.jpg" width="400" height="300" alt="Random opening picture" />
				<img src="./imgs/squirrel-sith-lightning.jpg" width="400" height="300" alt="Random opening picture" />
				<img src="./imgs/squirrel-sith-lightning.jpg" width="400" height="300" alt="Random opening picture" />
			</div>
			<div id="info">
				<p>Useful information will hopefully go here</p>
				<p>Things like:</p>
				<ul>
					<li>Total user count</li>
					<li># of users on currently</li>
					<li>Total number of threads</li>
					<li>
						<SCRIPT>
							document.write(Date()+".")
						</SCRIPT>
					</li>
				</ul>
			</div>
		</div>
		<div id="footer">
			<p>This is the footer, not sure what'll go in here yet</p>
		</div>
	</body>
</html>

and the CSS

html{
	padding: 0;
	margin: 0;
}
body{
	float: left;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background: black;
	overflow-x: hidden;
}
#header{
	position: relative;
	float: left;
	color: yellow;
	text-align: center;
	width: 100%;
	background: transparent;
	z-index: 10;
}
#footer{
	position: relative;
	float: right;
	bottom: 0;
	padding: 1pt 0;
	color: yellow;
	text-align: center;
	width: 100%;
	background: transparent;
}
.main{
	margin-top: 3em;
	margin-right: 0;
	background: black;
	padding: 0;
	z-index: -3;
}
#content{
	position: relative;
	float: left;
	width: 80%;
	height: 100%;
	background: red;
	padding-left: 2em;
	padding-top: 2em;
	padding-bottom: 2em;
	margin-bottom: .1px;
	/*padding-right: 2em;*/
	border-top-left-radius: 25px;
	moz-border-radius-topleft: 25px;
	border-bottom-left-radius: 25px;
	moz-border-radius-bottomleft: 25px;
}
#info{
	position: absolute;
	right: 0;
	width: 12%;
	height: 100%;
	color: white;
	margin-top: 2em;
	padding: 3em 2em;
	background: black;
	border-top-left-radius: 25px;
	moz-border-radius-topleft: 25px;
	border-bottom-left-radius: 25px;
	moz-border-radius-bottomleft: 25px;
}
#navigation{
	position: relative;
	float: left;
	width: 13%;
	padding: 15px;
	height: 100%;
	color: white;
	background: transparent;
}

again, a lot of the 'content' in the HTML is just filler, so I can see what is where, and such.

Member Avatar for almostbob

I dont indent, I use a code highlight editor the whitespace added to the files that may double it is unnecessary,
Move the elements that you want to position outside of other positioned elements
else all dimensions are relative to the outer element, not to the window as you expect
css shoved in the header, just to single file it on my laptop, being lazy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xlmns="http://www.w3.org/1999/xhtml">
<head>
<title>Dark Empire Forum</title>
<style type='text/css'>
body{ /*float:left;*/ width:100%; height:100%; padding:0; margin:0; background:black; /*overflow-x: hidden;*/ }
#header{ position:fixed; /*float:left;*/ color:yellow; text-align:center; width:100%; background:transparent; z-index:10; }
#footer{ position:relative; float:right; bottom:0; padding:1pt 0; color:yellow; text-align:center; width:100%; background:transparent; }
.main{ margin-top:3em; margin-right:0; background:black; padding:0; z-index:-3; }
#content{ position:relative; float:left; width:80%; height:100%; background:red; padding-left:2em; padding-top:2em; padding-bottom:2em; margin-bottom:.1px; /*padding-right:2em;*/ border-top-left-radius:25px; moz-border-radius-topleft:25px; border-bottom-left-radius:25px; moz-border-radius-bottomleft:25px;} 
#info{ position:fixed; right:0; width:12%; height:100%; color:white; margin-top:2em; padding:3em 2em; background:black; border-top-left-radius:25px; moz-border-radius-topleft:25px; border-bottom-left-radius:25px; moz-border-radius-bottomleft:25px; }
#navigation{ position:relative; float:left; width:13%; padding:15px; height:100%; color:white; background:transparent; }
</style></head>
<body>
<div id="header">
<p>Will contain random features like the log in/out link, etc</p></div>

<div id="info">
<p>Useful information will hopefully go here</p>
<p>Things like:</p>
<ul>
<li>Total user count</li>
<li># of users on currently</li>
<li>Total number of threads</li>
<li><SCRIPT>document.write(Date()+".")</SCRIPT></li>
</ul>
</div>

<div class="main">
<div id="navigation">
<img src="./imgs/forum-icon.png" width="120" height="90" alt="Basic logo" />
<h1>Dark Empire</h1>
<ul>
<li>Signup link</li>
<li>Homepage linkydink</li>
<li>Search linkydink</li>
</ul>
</div>
<div id="content">
<img src="./imgs/squirrel-sith-lightning.jpg" width="400" height="300" alt="Random opening picture" />
<img src="./imgs/squirrel-sith-lightning.jpg" width="400" height="300" alt="Random opening picture" />
<img src="./imgs/squirrel-sith-lightning.jpg" width="400" height="300" alt="Random opening picture" />
<img src="./imgs/squirrel-sith-lightning.jpg" width="400" height="300" alt="Random opening picture" />
<img src="./imgs/squirrel-sith-lightning.jpg" width="400" height="300" alt="Random opening picture" />
</div>
</div>
<div id="footer">
<p>This is the footer, not sure what'll go in here yet</p>
</div>
</body>
</html>
Edited by almostbob because: n/a
Member Avatar for WigglesMcMuffin

Hey!

Finally got everything sorted, thanks for the help, and now I also know not to use whitespace anymore! :D

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.