I am new to both stackoverflow and web development, so your patience is greatly appreciated. :)All of the HTML and CSS minus certain irrelevant parts can be found at the very bottom.
When styling HTML elements with CSS, I encountered a problem with floating elements and their parent element. The divs with the ids nav and main are contained within the div of the id content. The nav contains an unordered list, which will serve as a basic navigation bar of sorts, while main contains paragraphs and "meat" of the page. I wanted the paragraphs to sit on the right side of the navigation bar, so I decided to float them both. The CSS below was applied to these elements.
#nav {
width: 100px;
float: left;
}
#nav ul {
list-style-type: none;
padding: 0px;
}
#main {
width: 600px;
float: right;
}
When I run my code in a browser, everything looks fine. The elements are positioned in their proper places. However, under closer examination using an examiner tool, my parent element with the id content has collapsed.
I unfortunately cannot post the image due to my lack of reputation. Hopefully this is enough information.
I have already searched the web for the problem, and it seems quite common among newbies such as myself. I read an article on css-tricks.com, and I attempted their methods for solving this problem. Unfortunately, this was to no avail. After further searching, I have been left confused. I would like to apologize for the broadness of this question. Thank you all for your time and knowledge.Here is the HTML..
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="../css/refreshstyle.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>My Website</h1>
</div>
<div id="content">
<div id="nav">
<h3>Navigation</h3>
<ul>
<li><a class="home" href="">Home</a></li>
<li><a class="about" href="">About</a></li>
<li><a class="contacts" href="">Contact</a></li>
</ul>
</div>
<div id="main">
<h2>Home Page</h2>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
<div id="footer">
Copyright ©2014
</div>
</div>
</body>
Below is the CSS...
body {
background-image: url('congruent_pentagon.png');
}
#container {
background-color: white;
width: 800px;
margin-left: auto;
margin-right: auto;
border: 2px solid #a1a1a1;
border-radius: 25px;
}
#header {
background-color: #66CCFF;
color: white;
text-align: center;
padding: 10px;
border-bottom: 2px solid #a1a1a1;
border-top-right-radius:23px;
border-top-left-radius: 23px;
}
h1, h2, h3 {
margin:0;
}
#nav {
width: 100px;
float: left;
}
#nav ul {
list-style-type: none;
padding: 0px;
}
a {
text-decoration: none;
color: #66CCFF;
}
#nav .home {
font-weight: bold;
}
#main {
width: 600px;
float: right;
}
#content {
padding: 10px;
}
#footer {
clear: both;
background-color: #B1F6CB;
padding: 10px;
margin: 0px;
text-align: right;
border-top: 2px solid #a1a1a1;
border-bottom-right-radius: 23px;
border-bottom-left-radius: 23px;
}
In this case you can use the css clearfix class. Define the clearfix class in your css:
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* ie 6/7 */
}
Use the clearfix class on the parent element, in your case on the #content element:
<div id="content" class="clearfix">
[...]
</div>
Find more infos about clearing floats in this blog post.
Btw: welcome on stackoverflow :)
Related
I'm trying to replicate the footer of this website as part of a school project.
So far, I've figured out that my divs should be structured like this:
<div class="wrapper">
<div class="top-side">...</div>
<div class="content">...</div>
<div class="footer">
<div class="footer-col">
<h4>Column header</h4>
<ul>
<li>list item1</li>
<li>list item2</li>
</ul>
</div>
</div>
</div>
And the css I've used is:
.wrapper .footer {
bottom:0;
width:100%;
margin: 5px;
color: #FFFFFF;
background-color: black;
}
.footer .footer-col {
display: block;
float: left;
margin: 0 20px 0 0;
width: 20%;
}
.footer .footer-col ul {
list-style: none;
display: inline;
overflow: hidden;
}
.wrapper .footer .clear {
clear: both;
}
This is my entire code so far. I can't figure out what more should be added to my css for this to work as it was desired meaning, left alignment of every element in each column and bold headers for each column. (I've solved this part with <h4>)
Any tips?
If you want to replicate the same footer of the website you've said, I think a good way to do it is to replicate a similar HTML structure as well.
In that case, inspect the code with the browser inspector and you will se it's 5 groups of heading h4 + ul lists.
Here's a hint to do it in a JSFiddle I've made.
CSS
.container {overflow: hidden; background: #000; color: #fff; }
.footer-tab { float: left; width: 20%; font-family: Arial; }
ul { padding-left: 0; }
ul li { list-style: none; margin: 10px 0; font-size: 12px; }
ul li a { font-weight: bold; }
I didn't make all the code but you can see, I think, a better structure to achieve it.
I want to give a top-margin value to the element p inside the #footer, but the clearfix does not work and the margin keep collapsing outside its parent element, why? code below, the #fotter and the clearfix class is at the final of the code thx.
<!DOCTYPE html>
<html>
<head>
<title>CSS Challenge 1</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Shakespear.net</h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Writings</li>
<li>Sonnets</li>
<li>Life Story</li>
<li>About Shakespear.net</li>
</ul>
</div>
<div id="sidebar">
<h2>Sonnet Index</h2>
<ul>
<li>Sonnet #1</li>
<li>Sonnet #6</li>
<li>Sonnet #11</li>
<li>Sonnet #15</li>
<li>Sonnet #18</li>
</ul>
</div>
<div id="content">
<h1>Shakespeare's Sonnet #18</h1>
<p>This is one of the most famous of the sonnets. It is referenced
in the film Dead Poets Society and gave names to the band The
Darling Buds and the book and television series The Darling Buds
of May. Read it and weep!</p>
<ul>
<li>Shall I compare thee to a summer's day?</li>
<li>Thou art more lovely and more temperate:</li>
<li>Rough winds do shake the darling buds of May,</li>
<li>And summer's lease hath all too short a date:</li>
</ul>
</div>
<div id="footer" class="clearfix">
<p class="copyright">See the
<a href="http://en.wikipedia.org/wiki/Shakespeare%27s_Sonnets">
Shakespeare's sonnets</a> Wikipedia article for more information
</p>
</div>
</div>
</body>
</html>
CSS
html, body, #wrap {
height: 100%;
}
ul {
margin: 0;
padding: 0;
}
#wrap {
max-width: 450px;
margin: auto;
}
/************ header ************/
#header {
background-color: #B5B67D;
height: 16%;
}
#header h1{
margin: 58px 34px 0;
float: right;
font-size: 21px;
}
/************ nav ************/
#nav {
background-color: #689D59;
min-height: 4%;
border-bottom: 2px dashed white;
box-sizing: border-box;
}
#nav li{
display: inline-block;
list-style: none;
font-size: 10px;
margin: 0 4px 0 14px;
}
#nav a{
text-decoration: none;
}
/************ sidebar ************/
#sidebar {
float: right;
background-color: #B5B67D;
width: 23%;
min-height: 70%;
}
#sidebar h2 {
font-size: 8px;
margin-left: 5px;
}
#sidebar li {
font-size: 10px;
margin-left: 20px;
}
/************ content ************/
#content {
float: right;
background-color: #506449;
width: 77%;
min-height: 70%;
}
#content h1{
font-size: 19px;
margin: 18px 0 0 10px;
}
#content p{
font-size: 9px;
margin: 10px
}
#content li{
list-style: none;
font-size: 12px;
text-align: center;
}
/************ footer ************/
#footer {
background-color: #689D59;
min-height: 10%;
clear: both;
font-size: 12px;
}
#footer p{
text-align: center;
margin-top: 351px;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
Your clearfix puts the clear after the footer. You want the clear before it. What you have now will only prevent the margin of the next element collapsing.
Place the clearfix on the last element that should obey the floats. In your case, this will work:
<div id="content" class="clearfix">
Please try this:
Use padding instead of margin:
#footer p{
text-align: center;
padding-top:20px
}
A clearfix approach is meant to clear an element's children. You are trying to apply it to the footer element, which is not what is floated. You can try a few things:
Wrap the sidebar and content sections in their own div and apply clearfix to THAT div.
https://jsfiddle.net/va9q1mw8/1/
Scrap the clearfixes altogether and add <div style="clear:both"></div> immediately after the content div, but before the footer
https://jsfiddle.net/va9q1mw8/
I have made two separate sections with two separate backgrounds. Why aren't these two divs showing up.
I am trying to have the Navbar on the top, and then another section not connected to the Navbar below it but it's just not even showing up at all, and I'd like to know why. Thanks guys!
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Hair by Michelle
</title>
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>
<div class="all">
<div class="navbar">
<ul> <h1>Hair By Michelle</h1>
<li class="home">home</li>
<li class="about">about</li>
<li class="availability">appointments</li>
<li class="contact">contact</li>
</ul>
</div>
<img class="pic1" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7" alt="Photo of Michelle">
</div>
<div class="hours">
<h1>Hours</h1>
</div>
</div>
CSS
body {
background: gray;
background-image: url("http://i.jootix.com/r/abstract-hair-design-abstract-hair-design-1920x1080.jpg")
}
.navbar {
text-align: center;
background-color: #323232;
position: fixed;
width: 100%;
z-index:100;
}
.navbar h1 {
text-align: center;
text-shadow: -2px 1px 13px;
color: white;
}
.navbar li {
display: inline;
border-right: 2px solid black;
margin: 10px;
padding-right: 25px;
color: white;
}
.navbar li:last-child {
border-right:none;
}
.navbar li a{
text-decoration: none;
text-shadow: 2px;
}
.navbar li a:link {
color: white;
}
.navbar li a:visited {
color: white;
}
.navbar li a:active {
color: green;
}
.navbar li a:hover {
color: brown;
}
.pic1 {
width: 200px;
height: 200px;
border-radius: 100%;
margin-top:5px;
position: absolute;
z-index: 200;
}
.hours h1 {
background-color: #323232;
z-index: 300;
}
It's there but it's hidden behind your navbar and picture. You have set the navbar and image to position: fixed and position: absolute so they are removed from the flow of the DOM. The <h1> is sitting at the top because it is IN the flow of the DOM and is basically the first element as far as that's concerned. If you set the padding: "150px" you can at least see it.
You should probably think about restructuring a bit. Check out this for some good info on positioning.
The position: fixed style of the navbar is preventing the second H1 from appearing, for in this way it lays under the navbar. If you want the navbar always visible independently of the vertical scrolling state of the rest of the page, maybe adding a vertical padding to the hours div would do:
.hours {
padding-top: 100px;
}
At First, your have to improve your typesetting, which make yourself figure out nested html easily.
For Example.
<html>
<head>
</head>
<body>
<div class="all"></div>
<div class="hours">
<h1>Hours</h1>
</div>
</body>
</html>
you can realize the nested relation with a glance.
After typesetting, we can find the extra , I'm not sure if it is beneath < img > or < h1 >hours< /h1 >
Finally, I think you mean you want to show the hours under navbar. Add things below,
.all {
position: relative;
}
.hours {
position: relative;
top:120px;
}
it may match your requirement.
I'm trying to vertically stretch my vertical side banners to the bottom of the page, and make the footer in the bottom left be in the bottom center. I've been looking for a solution to this issue, but am unable to find it as of yet. I am doing this for a school assignment, and thus, am still in the learning process. Please explain what needs to be done to fix this too if you can. Thanks!
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="headers_t">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240" />
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
</span>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers_t{
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
margin: 0px;
padding-top: 191px;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h, img{
display: block;
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
This is what the problem in the site looks like:
Image of Problem http://i.tinyuploads.com/cwPP9R.jpg
Jokan welcome! Its typical for front end questions like this to be mocked up on a site like jsfiddle.com, that way other users can easily see what your talking about and help you find a solution.
If I understood you correctly, heres your solution in a fiddle. You just want the banner to be the height of the browser window right?
I just set the height of .banner_h to 100% like so:
.banner_h {height:100%;}
#footer {width:100%; text-align: center;}
This may help you, ammend your following css style to-
.banner_l{
float: left;
border:thin solid #000;
width:200px;
position:fixed;
height:auto;
min-height:380px;
margin-top:-20px;
}
.banner_r{
float: right;
border:thin solid #000;
margin-top:-20px;
width:200px;
min-height:380px;
height:auto;
}
#footer {
width:100%;
height:30px;
background:#090;
float:left;
position:fixed;
padding:5px;
bottom:0px;
text-align:center;
}
change position style to relative or absolute as u need.
I have a practice website set up, but the sidebar keeps going under the footer or mixing with it. Here is all the code (at least for one page) and the css later. I just need a quick help, I know a fair share but not much, so please help.
<!doctype html>
<html>
<head>
<meta charset-"utf-8">
<title>Polyverse</title>
<link rel="stylesheet" href="style.css">
</head>
<!--main part-->
<!--header-->
<body>
<div id="container">
<div>
<body background="images/bg.jpg"></div>
<div id="header">
<h1><center><img src="images/header.png" width="960" height="120" alt=">/center></h1>
<!--navbar-->
<nav id="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Articles</li>
<li>Downloads</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<!--main content-->
<div id="sidebar">
<p>And my sidebar stuff here.</p>
</div>
<div id="main">
<h1><p>About</p></h1>
<article><p>All my text goes here</p></article>
</div>
<!--footer-->
<div id="footer">
<address><p align=right>Last updated the 24th of July 2013<br> Polyverse copyright</p>
</address>
</div>
</div>
</body>
</html>
and the css:
html,
#body {
width: 960px;
margin: 25px auto;
padding-left: 1em;
font-family: Oswald, "Times New Roman",
Times, sans-serif;
height:100%;
}
#container {
position: relative;
padding-bottom: 50px;
min-height: 100%;
margin: 0 auto 0 auto;
}
#navbar {
width: 960px;
}
#navbar ul {
margin: 0;
padding: 5px;
list-style-type: none;
text-align: center;
background-color: #000;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
#navbar ul li a:hover {
color: #000;
background-color: #fff;
}
#main {
float: left;
width: 600px;
}
#sidebar {
float: right;
width: 200px;
}
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted
}
p {
width: 800px;
margin: 25px auto;
}
#footer: {
height: 50px;
width: 960px;
position: absolute;
bottom: 0;
}
So I was just wondering, how would I fix it?
Well, besides the fact that your HTML is full of errors, I would recommend making container a class and add it after the top container. And yes clear your floats
Like so ... (also cleaned up your HTML) ... http://jsfiddle.net/feitla/TC73U/
<div class="container">
<div id="footer" class="clearfix"> <address><p align="right">Last updated the 24th of July 2013<br/> Polyverse copyright</p>
</address>
</div>
</div>
If you can get away with removing position: absolute all you'll need to do is clear your footer:
#footer {
clear: both;
}
both will prevent elements from floating either left (such as #main) or right (such as #sidebar).
If you just wanted to clear #sidebar and not #main, use clear: right;
I'd recommend fixing all the errors in the HTML code before proceeding with fixing the CSS.