[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 238
  • Last Modified:

Text over background displayed wrong

Hello,

My HTML / CSS validates however it does not work the way I want it to.

I want the text to ALWAYS be overlayed over the grey box.

How can I fix this?

TheKyle told me how to do this for another website:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_22872185.html

but I can't figure out how to use his solution on this one:

Thanks!


----------------------------------------


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Concept</title>
<style type="text/css">
body, html {
padding: 0px;
margin: 0px;
}

body {
background: #010101 url(http://upload.imgspot.com/u/07/276/10/cbg.jpg) no-repeat scroll top center;
}

#main {
  left: 50%;
  position: relative;
  width: 778px;
  height: 688px
}

#mainContent {
  position: absolute;
  top: 250px;
  left: 5px;
  margin-left -389:
  width: 200px;
  height: 285px;
  overflow: auto;
  color: #eee;
  font: normal normal 300 9px/11px;
  font-family: Arial;
  padding: 0px 7px 4px 7px;
}

</style>
</head>
<body>
<div id="main">
<div id="mainContent">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec lorem. Suspendisse ultrices gravida elit. Vivamus suscipit. Sed aliquet ullamcorper turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris sodales, nibh ac lobortis laoreet, nibh sem semper dui, id sollicitudin nisi felis ac velit. Praesent eu purus non dui commodo condimentum. Nam sapien odio, feugiat non, hendrerit ac, dignissim ultrices, purus. Aenean arcu dolor, luctus pretium, posuere porttitor, facilisis varius, sapien. Donec risus. In hac habitasse platea dictumst. Aliquam sem purus, adipiscing at, faucibus sed, scelerisque et, felis. Proin a magna id lacus egestas malesuada. Donec eu dolor.
</p><p>
Quisque at enim a leo ullamcorper pellentesque. Pellentesque in ante sed odio sollicitudin tempus. Fusce gravida luctus arcu. Proin tristique lacinia ligula. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque nisl nunc, iaculis ac, auctor vel, sodales vitae, lectus. Aliquam luctus. Aenean lectus elit, mattis id, accumsan viverra, viverra ut, nulla. Sed metus ligula, sodales sit amet, fermentum a, bibendum ac, ligula. Cras tincidunt mattis dolor. Phasellus felis mi, rutrum ut, lacinia dignissim, suscipit nec, leo. Fusce laoreet lorem vitae urna. In volutpat vulputate nisl. Phasellus eu eros faucibus sem adipiscing vehicula. Donec nisl neque, laoreet in, placerat sed, ultrices a, dolor. In et massa quis nibh adipiscing euismod. Aenean tellus elit, euismod sed, aliquam at, placerat at, eros. Vivamus eros massa, vulputate id, viverra sit amet, gravida pharetra, magna. Fusce sit amet nulla.
</p>
</div>

</div>
</body>
</html>
0
hankknight
Asked:
hankknight
  • 4
  • 2
  • 2
1 Solution
 
Mark StegglesWeb DeveloperCommented:
Hello hankknight,

change your css to this

<style type="text/css">
body, html {
padding: 0px;
margin: 0px;
}

body {
background: #010101 url(http://upload.imgspot.com/u/07/276/10/cbg.jpg) no-repeat scroll top center;
}

#main {
  position: relative;
  width: 778px;
  height: 688px;
  margin:0px auto;
}

#mainContent {
  position: absolute;
  top: 240px;
  left: 305px;
  width: 250px;
  height: 285px;
  overflow: auto;
  color: #eee;
  font: normal normal 300 9px/11px;
  font-family: Arial;
  padding: 0px 7px 4px 7px;
}

</style>


Regards,

Steggs
0
 
TheKyleCommented:
The first problem is that you're missing a colon in your margin-left rule...

#mainContent {
  position: absolute;
  top: 250px;
  left: 5px;
  margin-left: -389:
  width: 200px;
  height: 285px;
  overflow: auto;
  color: #eee;
  font: normal normal 300 9px/11px;
  font-family: Arial;
  padding: 0px 7px 4px 7px;
}
0
 
TheKyleCommented:
Nevermind... Steggs got it.  :)
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Mark StegglesWeb DeveloperCommented:
8D
0
 
hankknightAuthor Commented:
Thanks, but I am feeling dense today and still don't understand.

If I change #main to this:

#main {
  position: relative;
  width: 600px;
  height: 400px;
  margin:0px auto;
}

What else do I have to change?
0
 
Mark StegglesWeb DeveloperCommented:
The style block that I posted... just paste it over yours.

Just so you know... the negative margin was not needed... and I tinkered with the positioning

#mainContent {
  position: absolute;
  top: 240px;
  left: 305px;
  width: 250px;
  height: 285px;
  overflow: auto;
  color: #eee;
  font: normal normal 300 9px/11px;
  font-family: Arial;
  padding: 0px 7px 4px 7px;
}
0
 
Mark StegglesWeb DeveloperCommented:
You dont need to change the width and height of #main
0
 
hankknightAuthor Commented:
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now