HTML / CSS issues

BloodrayneZA

Well-Known Member
Joined
May 2, 2020
Messages
2,822
Location
Helheim
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.

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:

html.jpg

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.
 

scudsucker

Well-Known Member
Joined
Jun 16, 2020
Messages
1,517
Don't use W3Schools for anything.

These two could be:

<div style="clear:both"></div>
<div style="clear:both"></div>
instead of
<div id="clear:both"></div>

but should not.

You don't need two `clear` elements; one will do fine - and in any case you should use a CSS class name not an ID to apply rules to multiple (even 2) elements.

My HTML/CSS has become very rusty with all these newfangled JS frameworks, so let me just re-iterate: do not use W3Schools for anything.



also:
p.clear{
clear: both;
}

will only affect <p> tags, not the <div> tags you are looking at
 

Papa Smurf

Well-Known Member
Joined
Mar 20, 2020
Messages
2,132
Location
3rd Rock From The Sun
Image result for fly over my head gif


I use to program in BASIC
then Turbo Pascal
then Delphi
then Javascript
I speak batch files fluently in DOS

This new language you speak of is foreign. Sorry
 

BloodrayneZA

Well-Known Member
Joined
May 2, 2020
Messages
2,822
Location
Helheim
LOL @Papa Smurf :ROFLMAO: :ROFLMAO: :ROFLMAO:

I got some information from a Discord server - floats are no longer reliable and there is this solution that may work better for me

 

Johnatan56

Well-Known Member
Joined
Jun 22, 2020
Messages
1,530
Location
Vienna
My HTML/CSS has become very rusty with all these newfangled JS frameworks, so let me just re-iterate: do not use W3Schools for anything.
They redid pretty much everything at one point, they're actually mostly okay/good now, still some errors here and there.
MozDocs is where proper dev goes.
 

BloodrayneZA

Well-Known Member
Joined
May 2, 2020
Messages
2,822
Location
Helheim
They redid pretty much everything at one point, they're actually mostly okay/good now, still some errors here and there.
MozDocs is where proper dev goes.
Correct. That’s where I’ve been advised to relearn my coding- so far I’m enjoying it. They (Discord coding members) told me to stay away from W3Schools and go there.

it’s amazing how much changes and the newer code is better, easier to work with.
 

Y2K

Well-Known Member
Joined
May 3, 2020
Messages
1,169
Location
Earth C137
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.

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:

View attachment 11009

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.
Are you hosting your website online yet?
 
Top