Forum Moderators: not2easy
I am trying to make an html static page have the same look and feel as the blog that is also on the site. It has a page that has a beautiful shadow all around. I was given this code to make a 'box' but I cannot get any of the shadow gifs to show - all that shows is: 'the content of the box goes inside here' (the only text on the page)
This is the code I have put - all the images, with the correct names and file endings are in the images folder (the first one I have also added 'images/' to test, but that also still does not appear)
Could anyone throw some light on where I am going wrong please?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>The content of the box goes insi</title>
<style type="text/css">
div.box
.topleft { background: url(images/topleft.gif) top left no-repeat; }
.topright { background: url(topright.gif) top right no-repeat; }
.bottomleft { background: url(bottomleft.gif) top left no-repeat; }
.bottomright { background: url(bottomright.gif) top right no-repeat; }
.top {
background: url(topbox.gif) top repeat-x;
height: 15px; 30; /* Height of the border image goes here */
margin: 0 15px; 30; /* The width of the corner images goes here */
}
.bottom {
background: url(bottombox.gif) top repeat-x;
height: 15px; 30; /* Height of the border image goes here */
margin: 0 15px; 30; /* The width of the corner images goes here */
}
.left { background: url(leftbox.gif) left repeat-y; }
.right { background: url(rightbox.gif) right repeat-y; }
.main {
margin: 0 15px; 30; /* Width of left and right border images goes here */
}
</style>
</head>
<body>
<div class="box">
<div class="topleft">
<div class="topright">
<div class="top">
<!-- top of box -->
</div>
</div>
</div>
<div class="left">
<div class="right">
<div class="main">
The content of the box goes inside here.
</div>
</div>
</div>
<div class="bottomleft">
<div class="bottomright">
<div class="bottom">
<!-- bottom of box -->
</div>
</div>
</div>
</div>
</body>
</html>
height: 15px; 30; /* ...*/
I'm also not quite sure what the intention of
div.box
.topleft { ... }
.topright {...}
div.box .topleft { ... }
.topright {...}
I'm not sure what the borders look like, but that's a lot of code. I can imagine it getting a bit easier to download if it would use sliding windows/css sprites.
Perhaps this is better: I have made a top, a bottom, and a scolling repeat middle image and have put them in 3 separate tables, one underneath the other, as the 'background images'. (I'm using Frontpage btw, in case that is necessary to know.)
The page looks and works fine except for one, all important thing... I can't keep the left hand side of the tables in the right place and when I am working on the page these table sizes seem to change.
Is there a way of using a style css sheet to make the tables behave and all stay nicely lined up, and keeping their required exact width?
If there is, I would dearly love to know how to do it.
Also, is this basically a reasonably efficient way of making a page?
Thank you very much for your time - it's much appreciated.
As for the table question, in your CSS you can put
table {
width: 800px; /* used as an example */
}
As to lining them up nicely, put them in an outer <div> wrapper. In your CSS add
#wrap {
width: can set to same as tables;
margin: 0 auto; /* will center page in window */
padding: 0; /* a must if the div's width is the same as the tables */
}
HTML -
<div id="wrap">
<table>....
<table>....
</div>
Marshall
I had also read the other post you suggest, but do not know enough about css yet to know how/where to use what he has given ...I'm still at the beginning of the css learning curve. I've learned a lot the past 3 weeks from w3schools tutorials but still have a problem knowing how to make them stick to the right places in the code.
Many thanks for your time.
