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

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

    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:

    *{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;}
    <!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>

  • #2
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

  • #3
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    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?

  • #4
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Custard7A View Post
    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...

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    Last edited by Excavator; 11-13-2012 at 04:35 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    crazyponytail (11-13-2012)

  • #6
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #7
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    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.
    Last edited by Custard7A; 11-13-2012 at 04:35 PM.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by crazyponytail View Post
    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?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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!

  • #10
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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.
    Last edited by crazyponytail; 11-13-2012 at 04:40 PM.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by crazyponytail View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by crazyponytail View Post

    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by crazyponytail View Post
    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.
    Last edited by Excavator; 11-13-2012 at 04:48 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    crazyponytail (11-13-2012)

  • #14
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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!


  •  

    Posting Permissions

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