Home/ Questions/Q 8338727
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T04:41:03+00:00

I am trying to make a page with css with the little bit of

  • 0

I am trying to make a page with css with the little bit of skill I have been learning. I have the title at the top of the page and it looks good but when you resize the window the title over laps the image border I have. I just found out, that it doesn’t display well in firefox. How could I fix this? enter image description here

<!DOCTYPE HTML PUBLIC "-//W3C//DTM HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>This is my website</title>
</head>
<style type="text/css">
body{
    background-image:url('bg-body.jpg');
    background-repeat: repeat;
    width:967px;
}
h1 {
    font-size: 40px;
    position:absolute;
    top: 47px;
    left: 27%;
    color:red;
}   
.venus {
    position:absolute;
    top: 160px;
    left: 44%;
}
#menu {
    position:absolute;
    top: 400px;
    left: 130px;    
    color:blue;

    height:500px;
    width:290px;
    background-color:#DCE1CA;
    border-top: 12px outset silver;
    border-left: 12px outset silver;
    border-right: 5px outset silver;
    border-bottom: 5px outset silver;
}
li {
    line-height:200%;
    font-size: large;
    list-style-type:none;
    list-style-image:none;

}
#textarea {
    position:absolute;
    top: 400px;
    left: 425px;    
    color:blue;
    text-align:left;
    height:500px;
    width:1149px;
    background-color:#DCE1CA;
    border-top: 12px outset silver;
    border-left: 12px outset silver;
    border-right: 5px outset silver;
    border-bottom: 5px outset silver;
}
</style>
<body>
<img src="sidebar.png" width="100%" height="2000px" class="sidebar" />
<h1>Welcome to my HTML/CSS/JavaScript Page</h1>
<img src="venus.jpg" width="200px" height="200px" class="venus" />

<div id="menu">
<ul>
<li>Mix of CSS & JS</li>
<li>Your Full Name</li>
<li>How Many Apples</li>
<li>Many Questions</li>
<li>Background Color</li>
<li>My Family Event</li>
<li>Images, Images</li>
</ul>
</div>
<div id="textarea">
Here is my story: I have been learning JavaScript and on the side I have been learning some CSS/HTML.
</div>
</body>
</html>

enter image description here

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would advice you to set your ‘sidebar.png’ as a background image, rather then an actual <img> in the html. <img>in the html should only be used if it’s actual content, like your venus.jpg. The background is considered styling and not content.

    That beeing said i would try to do something like this:
    Fiddle

    I’ve put most of the explanation in the css code trying to make things clear. Perhaps it’s a bit avanced, but since you say you are learning css… 😉

    The advantage of working with this kind of ‘liquid’ design is that the corner images will not be distorted, as they are currently. Also will your problem of the title running over the image never occurs again, wich was the goal ulmtimatly.

    • 0