Bear with me because I'm completely new to HTML, having just picked up a book and started playing around with it. I'm toying with a new site and using DIV layers rather than tables. As you can see, what I have so far is a title banner, a left navigation panel and a content panel. There will me more going to the right of all this in time.
I did the panels by making GIFs for the top and the bottom of the panels, where the corners curve, and then I set as a layer background a GIF of one pixel height which spans the width of the panels, having a section of the outline on either side (it's a soft outline from Fireworks, didn't want to just use a CSS border)
So I set up the DIVs using CSS - the title banner is just normal flow, the nav panel is absolutely positioned, as is the content panel. I've put some random content in there to size it out.
So the content of the nav and the main content panel is basically a GIF for the top of the panel, followed by the content, followed by a GIF for the bottom of the panel. I didn't know how else to do it. It actually looks 100% perfect in Firefox, but as you can see from these screenshots, IE kinda screws it up. It fails to put the bottom GIF right at the bottom of the panel so the background image for the panel - the one pixel high width slice - continues for a few more pixels below. You can see what I mean. This is driving me nuts. Is it because I should have used tables? Or does it have something to do with the absolute positioning? The actual positions of the panels are fine - it's just the bottom of them which are screwed up.
Here are the screenshots, one of the top of the screen and another of the bottom of the white panel to show it happening there too...
Here's the bottom:
Here is the CSS:
And here is my HTML:
I did the panels by making GIFs for the top and the bottom of the panels, where the corners curve, and then I set as a layer background a GIF of one pixel height which spans the width of the panels, having a section of the outline on either side (it's a soft outline from Fireworks, didn't want to just use a CSS border)
So I set up the DIVs using CSS - the title banner is just normal flow, the nav panel is absolutely positioned, as is the content panel. I've put some random content in there to size it out.
So the content of the nav and the main content panel is basically a GIF for the top of the panel, followed by the content, followed by a GIF for the bottom of the panel. I didn't know how else to do it. It actually looks 100% perfect in Firefox, but as you can see from these screenshots, IE kinda screws it up. It fails to put the bottom GIF right at the bottom of the panel so the background image for the panel - the one pixel high width slice - continues for a few more pixels below. You can see what I mean. This is driving me nuts. Is it because I should have used tables? Or does it have something to do with the absolute positioning? The actual positions of the panels are fine - it's just the bottom of them which are screwed up.
Here are the screenshots, one of the top of the screen and another of the bottom of the white panel to show it happening there too...
Here's the bottom:
Here is the CSS:
Code:
body {background-color:#99CC33;}
div.banner {
height:150;
width:760;
margin-bottom:10px;
}
div.nav {
position:absolute;
left:9px;
top:165px;
width:150px;
margin-top:10px;
margin-bottom:0px;
background-image: url(mid.gif);
}
div.navtext {
padding:2px;
text-align:center;
font-size:12px;
font-family: arial, verdana, sans-serif;
margin-bottom:0px;
}
div.lesson {
position:absolute;
left:170px;
top:165px;
width:600px;
background-image: url(lessonmid.gif);
margin-top:10px;
}
div.lessontext {
padding-top:0px;
padding-left:30px;
padding-right:30px;
text-align:justify; font-size:14px;
font-family:arial, verdana, sans-serif;
}
img.tab {
margin-top:30px;
margin-bottom:0px;
}And here is my HTML:
Code:
<!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=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style1.css"
</head>
<body>
<div class="banner">
<img src="titlebanner.jpg">
</div>
<div class="nav">
<img src="top.gif" />
<div class="navtext">
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
</div>
<img src="bottom.gif" />
</div>
<div class="lesson">
<img src="lessontop.gif" />
<div class="lessontext">
CAPUT 1
Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae tuae non est numerus. et laudare te vult homo, aliqua portio creaturae tuae, et homo circumferens mortalitem suam, circumferens testimonium peccati sui et testimonium, quia superbis resistis: et tamen laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum, donec requiescat in te. da mihi, domine, scire et intellegere, utrum sit prius invocare te an laudare te, et scire te prius sit an invocare te. sed quis te invocat nesciens te? aliud enim pro alio potest invocare nesciens. an potius invocaris, ut sciaris? quomodo autem invocabunt, in quem non crediderunt? aut quomodo credent sine praedicante? et laudabunt dominum qui requirunt eum. quaerentes enim inveniunt eum et invenientes laudabunt eum. quaeram te, domine, invocans te, et invocem te credens in te: praedicatus enim es nobis. invocat te, domine, fides mea, quam dedisti mihi, quam inspirasti mihi per humanitatem filii tui, per ministerium praedicatoris tui.
CAPUT 2
Et quomodo invocabo deum meum, deum et dominum meum, quoniam utique inme ipsum eum invocabo, cum invocabo eum? et quis locus est in me, quoveniat in me deus meus? quo deus veniat in me, deus, qui fecit caelum et terram? itane, domine deus meus, est quiquam in me, quod capiat te?an vero caelum et terra, quae fecisti et in quibus me fecisti, capiuntte? an quia sine te non esset quidquid est, fit, ut quidquid est capiat te? quoniam itaque et ego sum, quid peto, ut venias in me, quinon essem, nisi esses in me? non enim ego iam in inferis, et tamen etiam ibi es. nam etsi descendero in infernum, ades. non ergo essem, deus meus, non omnino essem, nisi esses in me. an potius non essem, nisi essem in te, ex quo omnia, per quem omnia, in quo omnia? etiam sic, domine, etiam sic. quo te invoco, cum in te sim? aut unde venias in me? quo enim recedam extra caelum et terram, ut inde in me veniat deus meus, qui dixit: caelum et terram ego impleo?
<img class="tab" src="score.gif" />
CAPUT 3
Capiunt ergone te caelum et terra, quoniam tu imples ea? an imples et restat, quoniam non te capiunt? et quo refundis quidquid impleto caeloet terra restat ex te? an non opus habes, ut quoquam continearis, qui contines omnia, quoniam quae imples continendo imples? non enim vasa, quae te plena sunt, stabilem te faciunt, quia etsi frangantur non effunderis. et cum effunderis super nos, non tu iaces, sed erigis nos,nec tu dissiparis, sed colligis nos. sed quae imples omnia, te toto imples omnia. an quia non possunt te totum capere omnia, partem tui capiunt et eandem partem simul omnia capiunt? an singulas singula et maiores maiora, minores minora capiunt? ergo est aliqua pars tua maior, aliqua minor? an ubique totus es et res nulla te totum capit?
<img class="tab" src="score.gif" />
CAPUT 4
Quid est ergo deus meus? quid, rogo, nisi dominus deus? quis enim dominus praeter dominum? aut quis deus praeter deum nostrum? summe, optime, potentissime, omnipotentissime, misericordissime et iustissime, secretissime et praesentissime, pulcherrime et fortissime,stabilis et inconprehensibilis, inmutabilis, mutans omnia, numquam novus, numquam vetus, innovans omnia; in vetustatem perducens superboset nesciunt; semper agens, semper quietus, colligens et non egens, portans et implens et protegens, creans et nutriens, perficiens, quaerens, cum nihil desit tibi. amas nec aestuas, zelas et securus es; paenitet te et non doles, irasceris et tranquillus es, opera mutasnec mutas consilium; recipis quod invenis et numquam amisisti; numquaminops et gaudes lucris, numquam avarus et usuras exigis. supererogaturtibi, ut debeas, et quis habet quicquam non tuum? reddens debita nullidebens, donans debita nihil perdens. et quid diximus, deus meus, vita mea, dulcedo mea sancta, aut quid dicit aliquis, cum de te dicit? et vae tacentibus de te, quoniam loquaces muti sunt.
</div>
<img class="tab" src="lessonbottom.gif" />
</div>
</body>
</html>