Jump to content

CSS and layout problems


mikaelbrun

Recommended Posts

I'm trying to learn some html,CSS and jQuery, and doing so step by step. First I look at the html and CSS :-)

I have made a layout design, but it doesn't appeare the way I want it to, and I don't know what I'm doing wrong.

 

First of all I get unwanted space around my sections. I have tried to set both the padding and margin to 0px, but it doesn't dissapeare.

 

Second problem is the border at the r-section, and the background-color at the l-section. I want those to go down to the bottom and stop at the footer-section.

 

Third problem is the item5 and item 6 at the nav-section. I want those to be at the same line as the rest of the items.

 

Can anyone go through my html and CSS, and tell me what I have done wrong here?

<!DOCTYPE html><html><head>	<title>myTitle</title>	<meta charset="UTF-8" lang="nb">	<link rel="stylesheet" type="text/css" href="style2.css">	<script type="text/javascript" src="jquery"></script>	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>	<script type="text/javascript" src="script2.js"></script></head><body>	<!-- <div id="container"> -->	<div id="t-section">		<h1>myHeading</h1>		<p><em>t-section</em><p>	</div>	<div id="nav"> <!--Navigation bar-->	<ul><em>nav-section</em>		<li>item1</li>		<li>item2</li>		<li>item3</li>		<li>item4</li>				<div>		<ul style="text-align:right">			<li>item5</li>			<li>item6</li>		</ul>		</div>	</ul>	</div>		<div id= "l-section"> <!--Left navigation bar/ section-->		<ul><em>l-section</em>			<li id="heading">heading1</li>			<div class="sub1"> 				<ul>					<li>item1</li>					<li>item2</li>					<li>item3</li>					<li>item4</li>					<li>item5</li>					<li>item6</li>				</ul>			</div>			<br>			<li id="heading">heading2</li>			<div class="sub2">				<ul>					<li>alphabetic navigation</li>				</ul>			</div>			<br>			<li id="heading">heading3</li>			<div class="sub3">				<ul>					<li>item1</li>					<li>item2</li>					<li>item3</li>				</ul>			</div>		</ul>	</div>		<div id= "r-section"> <!--Right section-->		<br>		<br>		<p><em>r-section</em>		<p>Something something something</p>	</div>		<div id="aticle"> <!--Main section at center of screen-->		<br>		<br>		<p><em>main-section</em></p>		<p>Text text text text</p>	</div>	<div id="footer"> <!--Footer at bottom of page-->		<ul><em>footer-section</em>			<li>info1</li>			<li>info2</li>			<li>info3</li>		</ul>	</div> 	<!--</div>--></body> </html>
/* Styling for element selectors */html, body{	background-color: #fff;	font-family: "Helvetica", "Courier", "Arial";}h1 {}h2 {}h3 {}p {}a {}ul {}li {}div {}/* Styling for id selectors *//*#container {	min-height: 100%;	position: relative;}*//* Title section */#t-section {	background-color: #ffdf92;	height: 100px;	width: 100%;	text-align: center;	padding: 0;	margin: 0;}/* Navigation bar */#nav {	background-color: #272727;	text-align: center;	color: #fff;	padding: 0;	margin: 0;}	/* Navigation bar elements */	#nav ul {		list-style-type: none;	}	#nav li {		display: inline;	}/* Left section */#l-section {	width: 200px;	background-color: #7B6B4A;	color: #FFD685;	float: left;	height: 100%;}	/* Left section elements */	#l-section ul {		list-style-type: none;	}/* Right section */#r-section {	border-left: solid 2px #C4BEB1;	width: 300px;	float: right;	height: 100%;}	/* Right section elements *//* Article section */#article {	margin-left: 250px;	padding-left: 1em;	/*float: left;*/	height: 100%;}	/* Article section elements */	#article p {	padding-left: 15px;	}/* Footer section */#footer {	width: 100%;	/*height: 1em;*/	text-align: center;	font-weight: bold; 	font-size: 0.8em;	position: absolute;	bottom: 0;	background-color: #272727;	color: #fff;}	/* Footer section elements */	#footer ul{	list-style-type: none;	}		#footer li{	display: inline;	}	#heading {	background-color: purple;}/* Class */.sub1 {	background-color: red;	display: none;}.sub2 {	background-color: blue;	display: none;}.sub3 {	background-color: green;	display: none;}

If I have posted this wrong, please let me know :-)

Link to comment
Share on other sites

You are ot going to get any of that solved when your HTML is invalid and structurally unstable.

 

run the code through http://validator.w3.org/ and fix the errors. The browser cannot be expect to render correctly when the code full of errors.

Edited by COBOLdinosaur
Link to comment
Share on other sites

Here is the valid html:<!DOCTYPE html><html><head><title>myTitle</title><meta charset="UTF-8" lang="nb"><link rel="stylesheet" type="text/css" href="style2.css"><script type="text/javascript" src="jquery"></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script type="text/javascript" src="script2.js"></script></head><body><!-- <div id="container"> --><div id="t-section"><h1>myHeading</h1><p>t-section<p></div><div id="nav"> <!--Navigation bar--><ul><li>nav-section</li><li>item1</li><li>item2</li><li>item3</li><li>item4</li></ul><ul style="text-align:right"><li>item5</li><li>item6</li></ul></div><div id= "l-section"> <!--Left navigation bar/ section--><ul><li>l-section</li><li id="heading">heading1</li><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li><li class="heading">heading2</li><li>alphabetic navigation</li><li class="heading">heading3</li><li>item1</li><li>item2</li><li>item3</li></ul></div><div id= "r-section"> <!--Right section--><br><p><em>r-section</em><p>Something something something</p></div><div id="aticle"> <!--Main section at center of screen--><p><em>main-section</em></p><p>Text text text text</p></div><div id="footer"> <!--Footer at bottom of page--><ul><li>footer-section</li><li>info1</li><li>info2</li><li>info3</li></ul></div><!--</div>--></body></html>

Link to comment
Share on other sites

The reason for spacing problem is known as collapsing margins, any child elements with top margin whose parent container has a zero margin or less than the child element causes the childs top margin to seep beyond top edge of parent, and essentially give the parent its use of margin instead, this can usually counteracted by using overflow: hidden; a border, padding, i usually prefer using overflow: hidden;

 

It looks like you had the correct way of including a sticky footer, but gone with using position: absolute; instead, this is not ideal position absolute should not be used for layout purposes, where margin, padding can be used instead.

 

You can't really make the columns reach to footer, but you give the illusion they can by using content:"";

 

The menu problem is sorted by using normal tried and tested method of using position: relative; for li, and position: absolute; (ideal for this situation) for child ul.

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>http://w3schools.invisionzone.com/index.php?showtopic=53363</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">        </script>        <style type="text/css">            /* Styling for element selectors */            html, body{                background-color: #fff;                font-family: "Helvetica", "Courier", "Arial";                /*added by dsonesuk*/                margin:0; padding:0; height:100%;            }html { overflow-y: scroll; }            h1 {            }            h2 {            }            h3 {            }            p {            }            a {            }            ul {            }            li {            }            div {            }            /* Styling for id selectors */            #main_container { }            #container, #footer,  #container > * {overflow:hidden;} /* removes spacing caused by collapsed margins*/            #main_container {overflow: visible;} /* allow background color and border to extend beyond this container outer edge*/            #container {                min-height: 100%;                /*position: relative; removed by dsonesuk*/            } /**/            #l-section, #article, #r-section {padding-bottom: 100px;  position:relative; z-index: 10; /*added by dsonesuk same height as footer */}            #footer {position: relative; z-index:20;}            /* Title section */            #t-section {                background-color: #ffdf92;                height: 100px;                /*  width: 100%; is block element not required*/                text-align: center;                padding: 0;                margin: 0;            }            /* Navigation bar */            #nav {                background-color: #272727;                text-align: center;                color: #fff;                padding: 0;                margin: 0;                overflow:visible;            }            #nav nav {height: 30px;}            #nav nav li {position: relative; line-height: 30px; padding: 0 10px;}            #nav nav li>ul {position:absolute;                            top: 29px;                            left:0;                            width: 200px;                            background-color: red;                            z-index: 100;                            display: none;            }            #nav nav ul li li {display: block; text-align: left;}            /* Navigation bar elements */            nav ul, nav li {                list-style-type: none;                padding:0;                margin:0;            }            nav li {                display: inline-block;            }            /* left and right section styling for background and border to fill available height in parent */            #l-section:after, #r-section:after {                bottom: -1000%;                content: "";                left: 0;                position: absolute;                right: 0;                top: 0;                z-index: -1;            }            /* Left section */            #l-section, #l-section:after {background-color: #7B6B4A;}            #l-section {                width: 200px;                color: #FFD685;                float: left;                height: 100%;            }            /* Left section elements */            #l-section nav ul > li.heading {display: block;}            #l-section nav {margin: 10px;}            /* Right section */            #r-section {                width: 300px;                float: right;                height: 100%;            }            /* Right section elements */            #r-section:after {border-left: solid 2px #C4BEB1;}            /* Article section */            #article {                /* margin-left: 250px; removed dsonesuk */                padding-left: 1em;                /*float: left;*/                /* height: 100%; removed dsonesuk */                overflow: auto;            }            /* Article section elements */            #article p {                padding-left: 15px;            }            /* Footer section */            #footer {                /* width: 100%; removed - not required dsonesuk */                /*height: 1em;*/                text-align: center;                font-weight: bold;                font-size: 0.8em;                /*position: absolute;  do not use for layout  removed dsonesuk                bottom: 0;*/                background-color: #272727;                color: #fff;                /*added by dsonesuk;*/                margin-top: -100px;                height: 100px;            }            /* Footer section elements */            #footer ul{                list-style-type: none;            }            #footer li{                display: inline;            }            .heading {                background-color: purple;            }            /* Class */            .sub1 > ul {                background-color: red;                display: none;            }            .sub2 >ul {                background-color: blue;                display: none;            }            .sub3 > ul {                background-color: green;                display: none;            }            #l-section nav ul li {display:block; }            #nav nav li:hover >  ul {                display:block;                color:#000;            }            #l-section nav li:hover >  ul{                display:block !important;                color:#000;            }        </style>    </head>    <body>        <div id="container"><!--  -->            <div id="t-section">                <h1>myHeading</h1>                <p><em>t-section</em><p>            </div>            <div id="nav"> <!--Navigation bar-->                <nav>                    <ul><li><em>nav-section</em></li>                        <li>item1</li>                        <li>item2</li>                        <li>item3</li>                        <li>item4</li>                        <li>item5 w sm                            <ul style="text-align:right">                                <li>item5</li>                                <li>item6</li>                            </ul>                        </li>                    </ul>                </nav>            </div>            <div id="main_container">                <div id= "l-section">                    <nav><!--Left navigation bar/ section-->                        <ul><li><em>l-section</em></li>                            <li class="heading">heading1</li>                            <li class="sub1"> sub1                                <ul>                                    <li>item1</li>                                    <li>item2</li>                                    <li>item3</li>                                    <li>item4</li>                                    <li>item5</li>                                    <li>item6</li>                                </ul>                            </li>                            <li class="heading">heading2</li>                            <li class="sub2">Sub2                                <ul>                                    <li>alphabetic navigation</li>                                </ul>                            </li>                            <li class="heading">heading3</li>                            <li class="sub3">Sub3                                <ul>                                    <li>item1</li>                                    <li>item2</li>                                    <li>item3</li>                                </ul>                            </li>                        </ul>                    </nav>                </div>                <div id= "r-section"> <!--Right section-->                    <p><em>r-section</em>                    <p>Something something something</p>                </div>                <div id="article"> <!--Main section at center of screen-->                    <p><em>main-section</em></p>                    <p>Text text text text</p>                </div>            </div>        </div><!---->        <div id="footer"> <!--Footer at bottom of page-->            <ul><li><em>footer-section</em><li>                <li>info1</li>                <li>info2</li>                <li>info3</li>            </ul>        </div>    </body></html>

EDIT: add css to force vertical scrollbar, this prevent jumping right to left when content exceed height of browser viewport.

Edited by dsonesuk
Link to comment
Share on other sites

You are ot going to get any of that solved when your HTML is invalid and structurally unstable.

 

run the code through http://validator.w3.org/ and fix the errors. The browser cannot be expect to render correctly when the code full of errors.

That was a helpfull tips.

I had multiple errors, mostly the same errors, containing my use of <em>. Du I have to put this in a paragraph? Is that the reason I get theese errrors?

Fruther, I get this error: Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

What does this say? Do I have to put every div outside a ul, and use something like <li id="something"></li> inside the ul?

Link to comment
Share on other sites

If you are struggling at this level, I would suggest that you might benefit from investing a little bit of time going through some of the tutorials and reference materials here at w3schools. You don't have to remember everything, but if you know where to look for information it will save you a lot of frstration as you advance you development skills.

Link to comment
Share on other sites

The reason for spacing problem is known as collapsing margins, any child elements with top margin whose parent container has a zero margin or less than the child element causes the childs top margin to seep beyond top edge of parent, and essentially give the parent its use of margin instead, this can usually counteracted by using overflow: hidden; a border, padding, i usually prefer using overflow: hidden;

 

It looks like you had the correct way of including a sticky footer, but gone with using position: absolute; instead, this is not ideal position absolute should not be used for layout purposes, where margin, padding can be used instead.

 

You can't really make the columns reach to footer, but you give the illusion they can by using content:"";

 

The menu problem is sorted by using normal tried and tested method of using position: relative; for li, and position: absolute; (ideal for this situation) for child ul.

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>http://w3schools.invisionzone.com/index.php?showtopic=53363</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">        </script>        <style type="text/css">            /* Styling for element selectors */            html, body{                background-color: #fff;                font-family: "Helvetica", "Courier", "Arial";                /*added by dsonesuk*/                margin:0; padding:0; height:100%;            }html { overflow-y: scroll; }            h1 {            }            h2 {            }            h3 {            }            p {            }            a {            }            ul {            }            li {            }            div {            }            /* Styling for id selectors */            #main_container { }            #container, #footer,  #container > * {overflow:hidden;} /* removes spacing caused by collapsed margins*/            #main_container {overflow: visible;} /* allow background color and border to extend beyond this container outer edge*/            #container {                min-height: 100%;                /*position: relative; removed by dsonesuk*/            } /**/            #l-section, #article, #r-section {padding-bottom: 100px;  position:relative; z-index: 10; /*added by dsonesuk same height as footer */}            #footer {position: relative; z-index:20;}            /* Title section */            #t-section {                background-color: #ffdf92;                height: 100px;                /*  width: 100%; is block element not required*/                text-align: center;                padding: 0;                margin: 0;            }            /* Navigation bar */            #nav {                background-color: #272727;                text-align: center;                color: #fff;                padding: 0;                margin: 0;                overflow:visible;            }            #nav nav {height: 30px;}            #nav nav li {position: relative; line-height: 30px; padding: 0 10px;}            #nav nav li>ul {position:absolute;                            top: 29px;                            left:0;                            width: 200px;                            background-color: red;                            z-index: 100;                            display: none;            }            #nav nav ul li li {display: block; text-align: left;}            /* Navigation bar elements */            nav ul, nav li {                list-style-type: none;                padding:0;                margin:0;            }            nav li {                display: inline-block;            }            /* left and right section styling for background and border to fill available height in parent */            #l-section:after, #r-section:after {                bottom: -1000%;                content: "";                left: 0;                position: absolute;                right: 0;                top: 0;                z-index: -1;            }            /* Left section */            #l-section, #l-section:after {background-color: #7B6B4A;}            #l-section {                width: 200px;                color: #FFD685;                float: left;                height: 100%;            }            /* Left section elements */            #l-section nav ul > li.heading {display: block;}            #l-section nav {margin: 10px;}            /* Right section */            #r-section {                width: 300px;                float: right;                height: 100%;            }            /* Right section elements */            #r-section:after {border-left: solid 2px #C4BEB1;}            /* Article section */            #article {                /* margin-left: 250px; removed dsonesuk */                padding-left: 1em;                /*float: left;*/                /* height: 100%; removed dsonesuk */                overflow: auto;            }            /* Article section elements */            #article p {                padding-left: 15px;            }            /* Footer section */            #footer {                /* width: 100%; removed - not required dsonesuk */                /*height: 1em;*/                text-align: center;                font-weight: bold;                font-size: 0.8em;                /*position: absolute;  do not use for layout  removed dsonesuk                bottom: 0;*/                background-color: #272727;                color: #fff;                /*added by dsonesuk;*/                margin-top: -100px;                height: 100px;            }            /* Footer section elements */            #footer ul{                list-style-type: none;            }            #footer li{                display: inline;            }            .heading {                background-color: purple;            }            /* Class */            .sub1 > ul {                background-color: red;                display: none;            }            .sub2 >ul {                background-color: blue;                display: none;            }            .sub3 > ul {                background-color: green;                display: none;            }            #l-section nav ul li {display:block; }            #nav nav li:hover >  ul {                display:block;                color:#000;            }            #l-section nav li:hover >  ul{                display:block !important;                color:#000;            }        </style>    </head>    <body>        <div id="container"><!--  -->            <div id="t-section">                <h1>myHeading</h1>                <p><em>t-section</em><p>            </div>            <div id="nav"> <!--Navigation bar-->                <nav>                    <ul><li><em>nav-section</em></li>                        <li>item1</li>                        <li>item2</li>                        <li>item3</li>                        <li>item4</li>                        <li>item5 w sm                            <ul style="text-align:right">                                <li>item5</li>                                <li>item6</li>                            </ul>                        </li>                    </ul>                </nav>            </div>            <div id="main_container">                <div id= "l-section">                    <nav><!--Left navigation bar/ section-->                        <ul><li><em>l-section</em></li>                            <li class="heading">heading1</li>                            <li class="sub1"> sub1                                <ul>                                    <li>item1</li>                                    <li>item2</li>                                    <li>item3</li>                                    <li>item4</li>                                    <li>item5</li>                                    <li>item6</li>                                </ul>                            </li>                            <li class="heading">heading2</li>                            <li class="sub2">Sub2                                <ul>                                    <li>alphabetic navigation</li>                                </ul>                            </li>                            <li class="heading">heading3</li>                            <li class="sub3">Sub3                                <ul>                                    <li>item1</li>                                    <li>item2</li>                                    <li>item3</li>                                </ul>                            </li>                        </ul>                    </nav>                </div>                <div id= "r-section"> <!--Right section-->                    <p><em>r-section</em>                    <p>Something something something</p>                </div>                <div id="article"> <!--Main section at center of screen-->                    <p><em>main-section</em></p>                    <p>Text text text text</p>                </div>            </div>        </div><!---->        <div id="footer"> <!--Footer at bottom of page-->            <ul><li><em>footer-section</em><li>                <li>info1</li>                <li>info2</li>                <li>info3</li>            </ul>        </div>    </body></html>

EDIT: add css to force vertical scrollbar, this prevent jumping right to left when content exceed height of browser viewport.

 

I see you have added a main container. Is the main container everything below the Title bar and navigation bar, while the container is the complete layout?

EDIT: #container, #footer, #container > * What does the > * say? and why have you put # container two times?

Edited by mikaelbrun
Link to comment
Share on other sites

If you are struggling at this level, I would suggest that you might benefit from investing a little bit of time going through some of the tutorials and reference materials here at w3schools. You don't have to remember everything, but if you know where to look for information it will save you a lot of frstration as you advance you development skills.

 

I have done a lot of tutorials both here, and at the Codeacademy, and I thought I understood, but I didn't :-) Most of the time, I find the w3schools helpfull, but I guess I strugle with the basic html setup. I know the meaning of most of the codes, but I don't always understand where to use them. Practice makes perfect :-D

Link to comment
Share on other sites

The container is used for sticky footer design to hold everything but the footer, its styling makes sure it fits the at a minimum total height of browser window, the footer uses -margin of its height to bring it into view overlapping bottom edge of container.

 

Looking at it again you should be able to remove main_container and use

 

#container, #footer, #container > * {overflow:hidden;}

#l-section, #r-section{overflow: visible;} /*added by dsonesuk under above a MUST */

 

it should work the same.

 

Generally i like to keep them in set individual containers, with your layout:

 

top and horz nav would be in header container

 

left/right side panels, content in main container (can depend on design layout)

 

footer as you guessed it the footer container section.

 

If you place all in one container, and you use float for instance, they can start merging together, where if they are confined to there individual containers its less likely to happen.

Edited by dsonesuk
Link to comment
Share on other sites

#container > *'>‘ is selector ref to 1st level direct children of the parent, '*' is universal selector for all elements, it basically applies overflow: hidden to all direct child elements preventing the need of having to list them individually.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...