Can’t get the layout right...(Noob)

crazyponytail · 11-13-2012, 12:44 PM

Hello, im trying to make this layout with css and html5.

The problem is that the 250 px section is overlapping the other sections. What should I position the layout to?

At the moment I am positioning everything to the "allt" div container.

Can someone please help me sort this out and show me the method on how to make this layout that Iv painted.

Thanks in advance and here is the html5 and css code:

Quote:

*{margin: 0px; padding: 0px;}
h1{font: bold 20px Tahoma;}
h4{font: bold 11px Tahoma;}
center{text-align:center;}
header, section, footer, aside, nav, article, hgroup{display:block;}
body{text-align:center; background:brown;}
article{background:white; padding:20px; margin-bottom: 15px;}
article footer{text-align:right;}

#allt{border:1px solid black; background:white; width:800px; margin:20px auto; text-align:left; position:relative;}
#right_header{height: 200px; width:600px; background:blue; border: 1px solid blue; position:absolute; top:0px; right:0px;}
#top_header{height: 200px; width:200px; border: 1px solid blue;}
#top_meny{background:white; height:40px; border:1px solid black;}
#top_meny li{display:inline-block; list-style:none; padding: 5px; font: bold 14px Tahoma;}
#main_section{float:left; width:550px; border:1px solid black;}
#side_news{width: 250px; background:white; border:1px solid black; position:absolute; top:240px; right:0px;}
#the_footer{clear:both; text-align:center; padding: 20px; border-top: 2px solid green;}

a{color:black;}
a:hover{color: aqua; text-decoration:underline;}

Quote:

<!DOCTYPE html>

<html>

<head>
<link rel="stylesheet" href="style.css" />
<title>cowsnpigz</title>
<meta charset="utf-8" />
<meta name="author" content="Jens Danielsson">
<meta name="description" content="cows">
<meta name="keywords" content="pigs">
<meta name="generator" content="notepad++">
</head>

<body>

<div id="allt">

<header id="top_header">
Logga
</header>

<header id="right_header">
hora osv.
</header>

<nav id="top_meny">
<ul>
<li><a href="index.html" title="Main Page">Home</a></li>
<li><a href="photopage.html" title="cow">cows</a></li>
<li><a href="videopage.html" title="pig">pigs</a></li>
</ul>
</nav>

<section id="main_section">

<article>
<header>

<hgroup>
<h1>Welcome!</h1>
<h4>cows</h4>
</hgroup>
</header>

<p>blablablablablablablalblablablblablablblbl mr freeman</p>.

<footer>
<p>pigs</p>
</footer>
</article>
</section>

<aside id="side_news">
<h4>News</h4>
COWS!
</aside>

<footer id="the_footer">
Copyright to all pigs
</footer>
</div>

</body>
</html>

crazyponytail · 11-13-2012, 01:48 PM

HERE IS THE LINK TO THE IMAGE: http://imageshack.us/photo/my-images...utpicture.jpg/

Custard7A · 11-13-2012, 02:31 PM

It's nice to imagine that would work, but it just doesn't behave that nicely.

If you make the "main_section" of less width, do they sit beside each-other OK?

crazyponytail · 11-13-2012, 03:19 PM

Quote:

Originally Posted by Custard7A

It's nice to imagine that would work, but it just doesn't behave that nicely.

If you make the "main_section" of less width, do they sit beside each-other OK?

If I change it to 547px in width. It fits, only thing is that I got these instructions for school. And they told me to make them according to these widths.

Im kind of stuck now...

Excavator · 11-13-2012, 03:31 PM

Hello crazyponytail,
It always seems like the box model is the hardest concept for new coders to grasp. See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

When you add that 1px border to 550px wide section#main_section, you make it 552px wide.
If you need those borders for the final product, you will need to adjust your widths. If you are just using borders to make your elements visible during development, a different background color on each element works much better since the color will not affect the width.

There is no need for positioning in your layout yet. I would suggest using using floats instead.

crazyponytail · 11-13-2012, 03:33 PM

Another problem that I just encountered as well is that I want the both boxes, #side_news and #main_section to both go down until the footer.

In other words I want the content to order the height, but still empty I want both of them to touch the footer box.

I will of course google this now, to try to solve it my self but if anyone knows the answer please tell me ^^.

And yeah, the other problem is still hanging. How do I set them to 250px and 550px without any of them overlapping? What am I doing wrong here?

Custard7A · 11-13-2012, 03:33 PM

I don't know if this a good approach or not. You might try making the "main_section" the whole width, and floating the aside to the right inside that.

Edit: OK, everyone posts at once. Listen to Excavator he's smarter.

Excavator · 11-13-2012, 03:34 PM

Quote:

Originally Posted by crazyponytail

If I change it to 547px in width. It fits, only thing is that I got these instructions for school. And they told me to make them according to these widths.

Hmm, you didn't mention it was school work in your original post. This board has rules about doing homework.

Didn't your instructor mention the box model at all?

crazyponytail · 11-13-2012, 03:35 PM

Quote:

Originally Posted by Excavator

Hello crazyponytail,
It always seems like the box model is the hardest concept for new coders to grasp. See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

When you add that 1px border to 550px wide section#main_section, you make it 552px wide.
If you need those borders for the final product, you will need to adjust your widths. If you are just using borders to make your elements visible during development, a different background color on each element works much better since the color will not affect the width.

There is no need for positioning in your layout yet. Look at how easy it can be -

Thank you, I will analyze what you have done and learn something from it!

Again, thank you!

crazyponytail · 11-13-2012, 03:38 PM

Quote:

Originally Posted by Excavator

Hmm, you didn't mention it was school work in your original post. This board has rules about doing homework.

Didn't your instructor mention the box model at all?

Im doing a distance course, we dont have any classes. I have a book and thats it and the internet of course.

So well, its not really like I had the chance to be at a class that I didnt attend, this is my class. Trying to learn it myself. (And I dont like books so I rather use youtube guides, information on forums etc etc.)

And now you removed your code, so I cant analyze it.

Im really not trying to cheat here.

Well well, you pointed me into the right direction at least.

Excavator · 11-13-2012, 03:38 PM

Quote:

Originally Posted by crazyponytail

Another problem that I just encountered as well is that I want the both boxes, #side_news and #main_section to both go down until the footer.

In other words I want the content to order the height, but still empty I want both of them to touch the footer box.

I will of course google this now, to try to solve it my self but if anyone knows the answer please tell me ^^.

You should have a look at the Faux Columns method. I have a faux column demo here and you can google that for lots more examples.

Excavator · 11-13-2012, 03:41 PM

Quote:

Originally Posted by crazyponytail

And yeah, the other problem is still hanging. How do I set them to 250px and 550px without any of them overlapping? What am I doing wrong here?

Another approach for a two column layout is to set a width and float one column and margin the other over with no width. That lets the second column take all the room left that the floated column didn't use.

Does that make sense?

Here's a simple two column example that shows what I'm talking about.

Excavator · 11-13-2012, 03:46 PM

Quote:

Originally Posted by crazyponytail

Im doing a distance course, we dont have any classes. I have a book and thats it and the internet of course.

So well, its not really like I had the chance to be at a class that I didnt attend, this is my class. Trying to learn it myself. (And I dont like books so I rather use youtube guides, information on forums etc etc.)

And now you removed your code, so I cant analyze it.

Im really not trying to cheat here.

Well well, you pointed me into the right direction at least.

Sounds like the way I learned

Sorry for yanking that snippet. I'm not trying to be a jerk at all! I just didn't want it copy/pasted into your assignment and handed in without your understanding how it works.

Here it is again -

Code:

<!DOCTYPE html>
<html>
<head>
<title>cowsnpigz</title>
<meta charset="utf-8" />
<style type="text/css">
html, body {
	margin: 0;
	background: #d6d6d6;
	font: 100% Tahoma, Geneva, sans-serif;
}
#allt {
	width: 800px;
	margin: 20px auto;
	border: 1px solid #000;
	background: #fff;
	position: relative;
}
#top_header {
	height: 200px;
	width: 200px;
	float: left;
	background: #f00;
}
#right_header {
	height: 200px;
	width: 600px;
	float: right;
	background: #00f;
}
ul#top_meny {
	line-height: 40px;
	margin: 0;
	clear: both;
	background: #fff;
	border-top: 2px solid #000;
	border-bottom: 1px solid #000;
}
	ul#top_meny li {
		padding: 5px;
		display: inline-block;
		list-style: none;
		font: bold 14px Tahoma;
	}
#main_section {
	width: 550px;
	float: left;
	background: #f60;
}
#side_news {
	width: 250px;
	float: right;
	background: #9f0;
}
	#main_section, #side_news {height: 200px;} /*for demo only*/
#the_footer {
	padding: 20px;
	border-top: 2px solid green;
	clear: both;
	text-align: center;
}
</style>
</head>

<body>
    <div id="allt">
        <header id="top_header"> Logga </header>
        <header id="right_header"> hora osv. </header>
            <ul id="top_meny">
                <li><a href="index.html" title="Main Page">Home</a></li>
                <li><a href="photopage.html" title="cow">cows</a></li>
                <li><a href="videopage.html" title="pig">pigs</a></li>
            </ul>
        <section id="main_section">
        <!--end main_section--></section>
        <aside id="side_news">
        <!--end side_news--></aside>
        <footer id="the_footer"> Copyright to all pigs </footer>
    <!--end allt--></div>
</body>
</html>

A lot of info in this thread. I would suggest studying that box model and floats first. Like I said, the box model is very important and seems to usually be quite the stumbling block in the learning curve.

crazyponytail · 11-13-2012, 03:54 PM

Quote:

Originally Posted by Excavator

Sounds like the way I learned

Sorry for yanking that snippet. I'm not trying to be a jerk at all! I just didn't want it copy/pasted into your assignment and handed in without your understanding how it works.

Here it is again -

Code:

<!DOCTYPE html>
<html>
<head>
<title>cowsnpigz</title>
<meta charset="utf-8" />
<style type="text/css">
html, body {
	margin: 0;
	background: #d6d6d6;
	font: 100% Tahoma, Geneva, sans-serif;
}
#allt {
	width: 800px;
	margin: 20px auto;
	border: 1px solid #000;
	background: #fff;
	position: relative;
}
#top_header {
	height: 200px;
	width: 200px;
	float: left;
	background: #f00;
}
#right_header {
	height: 200px;
	width: 600px;
	float: right;
	background: #00f;
}
ul#top_meny {
	line-height: 40px;
	margin: 0;
	clear: both;
	background: #fff;
	border-top: 2px solid #000;
	border-bottom: 1px solid #000;
}
	ul#top_meny li {
		padding: 5px;
		display: inline-block;
		list-style: none;
		font: bold 14px Tahoma;
	}
#main_section {
	width: 550px;
	float: left;
	background: #f60;
}
#side_news {
	width: 250px;
	float: right;
	background: #9f0;
}
	#main_section, #side_news {height: 200px;} /*for demo only*/
#the_footer {
	padding: 20px;
	border-top: 2px solid green;
	clear: both;
	text-align: center;
}
</style>
</head>

<body>
    <div id="allt">
        <header id="top_header"> Logga </header>
        <header id="right_header"> hora osv. </header>
            <ul id="top_meny">
                <li><a href="index.html" title="Main Page">Home</a></li>
                <li><a href="photopage.html" title="cow">cows</a></li>
                <li><a href="videopage.html" title="pig">pigs</a></li>
            </ul>
        <section id="main_section">
        <!--end main_section--></section>
        <aside id="side_news">
        <!--end side_news--></aside>
        <footer id="the_footer"> Copyright to all pigs </footer>
    <!--end allt--></div>
</body>
</html>

A lot of info in this thread. I would suggest studying that box model and floats first. Like I said, the box model is very important and seems to usually be quite the stumbling block in the learning curve.

Thank you. I am not into the business of cheating. I will read the box model and floats. I had the feeling I was missing out on something.

and again, thanks!