BloodrayneZA
Well-Known Member
I'm here yet again.
I'm relearning the HTML / CSS in my free time and thought why not work on the site that I did not finish years ago.
I am currently having issues separating my floats. Now my idea is to create a top float with an H3 headline, one left pane (for navigation) and one right pane (for reading), and then the bottom pane with stuff - the usual you see on a website.
I can't seem to separate the bottom from the left and right panes.
This code used to work, no longer works now. I am not sure what I am doing wrong. Please advise.
Googling and W3 Schools say to use this code in CSS:
Clearly this does not work either. I've seen some code snippets that were put in around the <p> tags. It does not solve the issue I'm having.
I'm using https://codepen.io/ as a platform.
This is my code - be kind, remember I'm starting over again from the files and editing stuff as I go along
My CSS: (granted I may have to update my CSS properties)
Result:
The guy that I used to learn tips from is on MyBB and I can't remember his name. He advised me to use the clear:both tags twice - now they no longer work so I am not sure what I am doing wrong.
I'm relearning the HTML / CSS in my free time and thought why not work on the site that I did not finish years ago.
I am currently having issues separating my floats. Now my idea is to create a top float with an H3 headline, one left pane (for navigation) and one right pane (for reading), and then the bottom pane with stuff - the usual you see on a website.
I can't seem to separate the bottom from the left and right panes.
This code used to work, no longer works now. I am not sure what I am doing wrong. Please advise.
Code:
<div id="clear:both"></div>
Googling and W3 Schools say to use this code in CSS:
Code:
p.clear {
clear:both;
}
Clearly this does not work either. I've seen some code snippets that were put in around the <p> tags. It does not solve the issue I'm having.
I'm using https://codepen.io/ as a platform.
This is my code - be kind, remember I'm starting over again from the files and editing stuff as I go along
Code:
<html>
<head><title>Test site with relearning HTML 5 and CSS3</title>
<link rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="navtop">
<h3 align="center">Testing Website Content with HTML 5 and CSS3</h3>
</div>
<div id="navleft">
<h3 align="center">HTML 5 and CSS 3 is easy</h3>
<ul>
<li>Choosing the right HTML tags</li>
<li>Choosing the right CSS properties</li>
<li>Making sure that everything works right</li>
</ul>
<h3 align="center">Common Mistakes</h3>
<ul>
<li>Common Mistakes</li>
<li>How to fix mistakes without having to start over again</li>
<li>Web coding for noobs</li>
</ul>
<p>Disclaimer: This is not intended for teaching others or any other purpose but a purpose and platform for me to relearn HTML / CSS in order to get back into the IT field again.</p>
</div>
<div id="navright">
<p>a whole load of CSS and HTML</p>
</div>
</div>
<div id="clear:both"></div>
<div id="clear:both"></div> /*** this is my issue - separating this from the two above
<div id="navbottom">
<h3 align="center">Copyright @BloodrayneZA</h3>
</div>
</div>
</body>
</html>
My CSS: (granted I may have to update my CSS properties)
Code:
body {
margin: 0, auto;
width: 800;
float: center;
background-color: #ffffff;
}
#container {
float: center;
width: 800;
background-color: #cccccc;
}
#navtop {
float: center;
width: 800;
outline-color: #ffffff;
outline-style: solid;
outline-width: thin;
background-color: #cccccc;
padding: 1;
}
#navleft {
float: left;
width: 400;
outline-color: #000000;
outline-style: solid;
outline-width: thin;
padding: 1;
}
#navright {
float: right;
width: 300;
outline-color: #000000;
outline-style: solid;
outline-width: thin;
padding: 1;
}
#navbottom {
float: center;
width: 800;
background-color: #333333;
outline-color: #000000;
outline-style: solid;
outline-width: thin;
padding: 1;
}
h1 {
font-family: Arial Verdana Tahoma;
font-size: 20pt;
font-weight: bold;
color: #000000;
background-color: #999999;
padding: 1;
}
h2 {
font-family: Arial Verdana Tahoma;
font-size: 18pt;
color: #000000;
font-weight: bold;
background-color: #999999;
padding: 1;
}
h3 {
font-family: Tahoma;
font-size: 16pt;
color: #000000;
font-weight: bold;
background-color: #999999;
padding:1;
}
li {
font-family: Tahoma;
font-size: 10pt;
font-weight: normal;
font-style: normal;
padding: 5;
}
p {
font-family: Tahoma;
font-size: 10pt;
font-weight: normal;
font-style: normal;
padding: 5;
}
a.hover {
color: #9933ff;
}
a.hover_visited {
color: #9933cc;
}
ul {
list-style-image: url("fish-icon.jpg");
}
iframe.new
{
margin: 0, auto;
width: 300;
float: center;
background-color: #ffffff;
}
p.clear{
clear: both;
}
Result:
The guy that I used to learn tips from is on MyBB and I can't remember his name. He advised me to use the clear:both tags twice - now they no longer work so I am not sure what I am doing wrong.