Two problems with my layout in Netscape:
1) Boxes don't stretch to fit text.
2) The bottom third of the page (text) is moved up on the page and is superimposed on the text that's there.
It's okay in IE.
I know you may need to see the code, but as I am just learning CSS I figured someone could suggest a place to start and maybe I could go from there. If you need to see the code I will gladly zip it up here.Need to see the code... there's too many possibilities and my crystal ball just had a fatal error...
1) Likely, you've specified a width for the element that the text is in. If you have specified a width, the text won't stretch the element, but override it.
2) For this one, we will need to see the code, but it could be the result of using floats, but not clears.
-DanHere's the code.
Also, I want the CSS to be external - what do I save that file as? .css?
Thanks to you both!Try changing your CSS to this:
<style type="text/css">
img.left {
float:left;
margin:20px
}
img.right {
float:right;
margin:20px
}
.block {
width: 500px;
min-height: 200px;
background: #bdefeb;
font-family: arial;
margin: 16px;
padding: 16px
}
.block p.specs {
font-size: 12pt;
font-weight: bold;
text-decoration: underline;
margin: 10px;
}
.block p.category {
font-size: 12pt;
font-weight: bold;
margin: 10px 20px;
}
.block p {
margin: 0 40px;
text-align: justify;
font-family: times;
}
</style>
-Dan
**EDIT**
And to make your CSS external, save it into a .css file and put this in the head of your HTML document:
<link rel="stylesheet" type="text/css" media="screen" href=http://www.webdeveloper.com/forum/archive/index.php/"styles.css" />Okay, Dan, that fixed part of it. The problems that remain now are the top two images. The top image hangs below the box and the second from the top image looks like it's about 1 px from the bottom.
The above refers to NN - IE is okay..block {
width: 500px;
min-height: 200px;
background: #bdefeb;
clear: both;
font-family: arial;
margin: 16px;
padding: 16px
}
That should fix it.
-DanSorry, that made no difference.
Also, when I put the CSS code in its own file, what tags are necessary at the beginning and end to make it complete? My books don't say how to do that.Originally posted by myrrh
Also, when I put the CSS code in its own file, what tags are necessary at the beginning and end to make it complete? My books don't say how to do that.
You don't use any tags in a CSS file. Just the CSS itself. About the image problem, you will have to use an invisible clearing object. I have to go for supper right now, but I'll explain when I get back.Ok, I'm back. What you need to do is add this into your CSS:
.block div.clear {
clear: both;
width: 0;
height: 0;
padding: 0;
margin: 0;
}
Then, at the very bottom of every "block" div, you need to add this(right inside the bottom of the div):
<div class="clear"></div>
That should do the trick. Also, you can get rid of the clear attribute on the other element that I told you to put it in on.
-DanThat did it!
Thank you so much!No problem
1) Boxes don't stretch to fit text.
2) The bottom third of the page (text) is moved up on the page and is superimposed on the text that's there.
It's okay in IE.
I know you may need to see the code, but as I am just learning CSS I figured someone could suggest a place to start and maybe I could go from there. If you need to see the code I will gladly zip it up here.Need to see the code... there's too many possibilities and my crystal ball just had a fatal error...
1) Likely, you've specified a width for the element that the text is in. If you have specified a width, the text won't stretch the element, but override it.2) For this one, we will need to see the code, but it could be the result of using floats, but not clears.
-DanHere's the code.
Also, I want the CSS to be external - what do I save that file as? .css?
Thanks to you both!Try changing your CSS to this:
<style type="text/css">
img.left {
float:left;
margin:20px
}
img.right {
float:right;
margin:20px
}
.block {
width: 500px;
min-height: 200px;
background: #bdefeb;
font-family: arial;
margin: 16px;
padding: 16px
}
.block p.specs {
font-size: 12pt;
font-weight: bold;
text-decoration: underline;
margin: 10px;
}
.block p.category {
font-size: 12pt;
font-weight: bold;
margin: 10px 20px;
}
.block p {
margin: 0 40px;
text-align: justify;
font-family: times;
}
</style>
-Dan
**EDIT**
And to make your CSS external, save it into a .css file and put this in the head of your HTML document:
<link rel="stylesheet" type="text/css" media="screen" href=http://www.webdeveloper.com/forum/archive/index.php/"styles.css" />Okay, Dan, that fixed part of it. The problems that remain now are the top two images. The top image hangs below the box and the second from the top image looks like it's about 1 px from the bottom.
The above refers to NN - IE is okay..block {
width: 500px;
min-height: 200px;
background: #bdefeb;
clear: both;
font-family: arial;
margin: 16px;
padding: 16px
}
That should fix it.
-DanSorry, that made no difference.
Also, when I put the CSS code in its own file, what tags are necessary at the beginning and end to make it complete? My books don't say how to do that.Originally posted by myrrh
Also, when I put the CSS code in its own file, what tags are necessary at the beginning and end to make it complete? My books don't say how to do that.
You don't use any tags in a CSS file. Just the CSS itself. About the image problem, you will have to use an invisible clearing object. I have to go for supper right now, but I'll explain when I get back.Ok, I'm back. What you need to do is add this into your CSS:
.block div.clear {
clear: both;
width: 0;
height: 0;
padding: 0;
margin: 0;
}
Then, at the very bottom of every "block" div, you need to add this(right inside the bottom of the div):
<div class="clear"></div>
That should do the trick. Also, you can get rid of the clear attribute on the other element that I told you to put it in on.
-DanThat did it!
Thank you so much!No problem