5 Replies - 172 Views - Last Post: 09 June 2020 - 01:11 PM

#1 Israel   User is offline

  • D.I.C Addict
  • member icon

Reputation: 7
  • View blog
  • Posts: 833
  • Joined: 22-November 04

Unneeded Space in HTML/CSS

Posted 07 June 2020 - 10:06 PM

Wow, its been a couple years since I posted here. Switched from being a Linux Admin to Web Design recently. So I'll probably be around a lot more. I have one thing that is driving me crazy and I'm sure its super simple. I made a page with a container at the top, and image, then another container. The image touches the top container perfectly. With the bottom image there's like a pixel of space between it and the image. I've tried a lot of things, but can't seem to remove this extra, unneeded space. This is the code I'm using now:


HTML:
<!DOCTYPE html>
<head><title>Title</title>
<link rel="stylesheet" type="text/css" href="./css/unix.css">
</head>
<body>

<div class="split left">
  <div class="centered">
    <p>&nbsp;</p><br/>
    <span id="title"><strong><center>Title</center></strong></span>
  </div>
</div>

<img src="./images/background.png"/>

<div class="split right">
  <div class="centered">
    <p>&nbsp;</p>
  </div>
</div>

<script async src="https://static.addtoany.com/menu/page.js"></script>
</body>
</html>


CSS:
body {
  background-color: #D3D3D3;
}

img {
  max-width: 100%;
  height: auto;
}

div > div {
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #FF0000; 
  width: 100%;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}

div > div {
  margin: 0 0ex 0ex 0;
  float: left;
}


Any suggestions appreciated.
Thanks

Is This A Good Question/Topic? 0
  • +

Replies To: Unneeded Space in HTML/CSS

#2 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6901
  • View blog
  • Posts: 28,559
  • Joined: 12-December 12

Re: Unneeded Space in HTML/CSS

Posted 08 June 2020 - 12:32 AM

Your HTML and CSS don't appear to match up. There is no CSS for classes split, left, right nor centered, and there are not contain or cover classes. Is there different CSS you need to provide?

You should avoid nbsp, br tags, and the center tag, which no longer exists. Use CSS for spacing. You are also missing your opening html tag.
Was This Post Helpful? 0
  • +
  • -

#3 Israel   User is offline

  • D.I.C Addict
  • member icon

Reputation: 7
  • View blog
  • Posts: 833
  • Joined: 22-November 04

Re: Unneeded Space in HTML/CSS

Posted 08 June 2020 - 03:44 PM

Maybe I'm wrong, but I understood <!DOCTYPE html> was able to be used as an opening html tag. You're correct I shouldn't be using <center> and &nbsp. That was more of a temporary place holder until I had time to revise this. I went ahead and removed them from the code and added blocks for split_left and split_right in the CSS. I tried using top with split_right but move the bottom block, but it seems to have no effect. This is the code I have now:

HTML:
<!DOCTYPE html>
<head><title>Title</title>
<link rel="stylesheet" type="text/css" href="./css/unix.css">
</head>
<body>

<div class="split_left">
  <div class="centered">
    <p></p>
  </div>
</div>

<img src="./images/background.png"/>

<div class="split_right">
  <div class="centered">
    <p></p>
  </div>
</div>

<script async src="https://static.addtoany.com/menu/page.js"></script>
</body>
</html>


CSS:
body {
  background-color: #D3D3D3;
}

img {
  max-width: 100%;
  height: auto;
}

#split_left {

}

#split_right {
  top: 50%;
}

div > div {
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #FF0000; 
  width: 100%;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}

div > div {
  margin: 0 0ex 0ex 0;
  float: left;
}



Any thoughts on what css I should be using to remove that space with #split_right? I assume I need to move it, but this doesn't seem to work.

This post has been edited by Israel: 08 June 2020 - 03:44 PM

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6901
  • View blog
  • Posts: 28,559
  • Joined: 12-December 12

Re: Unneeded Space in HTML/CSS

Posted 08 June 2020 - 11:55 PM

split_left and right are classes, not id's, so in the CSS they are identified with a dot . rather than hash #.

Use your browser's developer tools to explore what CSS is effective (or overruled). Clear the browser's cache fairly often during development as well, so that you are always using the most recent version of the CSS and JS.

Quote

Maybe I'm wrong, but I understood <!DOCTYPE html> was able to be used as an opening html tag.


Not to my knowledge, you could check the specs! The closing html tag is definitely mismatched, though, it does not marry the DOCTYPE declaration.

(On a minor point I am also wary of leaving empty CSS rules in the file. I would even add a /* comment */ as placeholder.)
Was This Post Helpful? 0
  • +
  • -

#5 Israel   User is offline

  • D.I.C Addict
  • member icon

Reputation: 7
  • View blog
  • Posts: 833
  • Joined: 22-November 04

Re: Unneeded Space in HTML/CSS

Posted 09 June 2020 - 12:39 PM

Wow, I took out <!DOCTYPE html> and replaced it with <html> and the unneeded space disappeared. I'm going really judge the tutorials that suggested <!DOCTYPE html> now. Thank you!
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6901
  • View blog
  • Posts: 28,559
  • Joined: 12-December 12

Re: Unneeded Space in HTML/CSS

Posted 09 June 2020 - 01:11 PM

You shouldn't remove it.

What book or tutorial are you studying for basic HTML structure?

HTML5 template
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1