this is the page i'm working on
http://1614-douglas-road.com/spectrum.html
i want to get the generous space between the images in the table preferably
without borders
so i have been using cellpadding and/or cellspacing
the picture titles can be 2 lines, 'hammered small', so they seem to need
their own row to be
centered under the pic and the same padding/spacing as the row with the
images, so they line up
what i'm trying to do is have similar spacing to the way the page goes now,
but get the pic titles
closer to the actual pics
have tried all kinds of colspan, , separate tables for each row, etc
but getting nowhere fast
also not sure why table is not centering on page
any suggestions would be appreciated
bob
Re: table cell spacing
am 29.01.2008 01:54:59 von SigelsTankMage
you can use this code for centering with css
body {
margin:50px 0px; padding:0px;
text-align:center;
}
> images, so they line up
>
> what i'm trying to do is have similar spacing to the way the page goes now=
,
> but get the pic titles
> closer to the actual pics
>
> have tried all kinds of colspan, , separate tables for each row, etc
> but getting nowhere fast
>
> also not sure why table is not =A0centering on page
>
> any suggestions would be appreciated
> bob
Re: table cell spacing
am 29.01.2008 02:12:18 von SigelsTankMage
this took me less than five minutes so i went the extra mile. i used
code from blue robot and css listamatic since i thought it would be
better if you used lists for the images you had.
wow wish i was that fast,
thought about lists but obviously never got that far
will try all this soon and post back, with results
thanks
bob wrote in message
news:b266db03-3148-4b06-b003-c61031b26ea1@d4g2000prg.googleg roups.com...
> this took me less than five minutes so i went the extra mile. i used
> code from blue robot and css listamatic since i thought it would be
> better if you used lists for the images you had.
>
>
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>
>
>
>
>
>
[without quoting of the message he's replying to...]
> this took me less than five minutes so i went the extra mile.
How does boasting about the small amount of time you spent demonstrate
that you made any "extra" effort? Or is this some droll humor?
> i used
> code from blue robot and css listamatic since i thought it would be
> better if you used lists for the images you had.
>
>
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML is pointless. Stay with HTML 4.01, but use strict:
"http://www.w3.org/TR/html4/strict.dtd">
>
>
>
If you're going to pretend to provide the complete source, include the element.<br />
<br />
> </head><br />
> <body><br />
> <div id="content"><br />
> <div id="navcontainer"><br />
<br />
Not sure what makes this array of images a "nav" element.<br />
<br />
> <ul id="navlist"><br />
> <li><img src="img/40.jpg" width="40" heigh="40" /></li><br />
> <li><img src="img/40.jpg" width="40" heigh="40" /></li><br />
> <li><img src="img/40.jpg" width="40" heigh="40" /></li><br />
> <li><img src="img/40.jpg" width="40" heigh="40" /></li><br />
<br />
All of the instances of heigh will need to become height.<br />
<br />
> </ul><br />
> <br /><br />
> <ul id="navlist"><br />
<br />
Only one instance of an id per page, please. OP will need to validate <br />
all this code before spending much time with it. Might even have to <br />
spend *six* minutes on it. ;-)<br />
<br />
> <li><img src="img/40.jpg" width="40" heigh="40" /></li><br />
> <li><img src="img/40.jpg" width="40" heigh="40" /></li><br />
> <li><img src="img/40.jpg" width="40" heigh="40" /></li><br />
> <li><img src="img/40.jpg" width="40" heigh="40" /></li><br />
> </ul><br />
> </div><br />
> </div><br />
> </body><br />
> </html><br />
> <br />
> body {<br />
> margin:50px 0px; padding:0px;<br />
> text-align:center;<br />
> }<br />
> <br />
> #Content {<br />
<br />
Watch for case mismatch with "content".<br />
<br />
> width:500px;<br />
> margin:0px auto;<br />
> text-align:left;<br />
<br />
But you just gave body text-align:center.<br />
<br />
> padding:15px;<br />
> border:1px dashed #333;<br />
> background-color:#eee;<br />
> }<br />
> [...]<br />
<br />
> <br />
> #navlist a { padding: 3px 10px; }<br />
> <br />
> #navlist a:link, #navlist a:visited<br />
> {<br />
> color: #fff;<br />
> background-color: #036;<br />
> text-decoration: none;<br />
> }<br />
> <br />
> #navlist a:hover<br />
<br />
There aren't any <a> links in the suggested code. If there *were* any <br />
links, they wouldn't look like links.<br />
<br />
> {<br />
> color: #fff;<br />
> background-color: #369;<br />
> text-decoration: none;<br />
> }<br />
> <br />
> ul>li{<br />
<br />
So, you mean to affect list items which are *immediate children* of <ul> <br />
elements. You really mean it.<br />
<br />
> padding:0 0 0 100px;<br />
> }<br />
<br />
This code doesn't do the enlarge-on-hover trick I presumed the OP <br />
wanted, nor does it demonstrate captioned images in a grid.<br />
<br />
Etc.<br />
<br />
-- <br />
John<br />
Read about the UIP: http://improve-usenet.org/</p>
</article>
<footer>
<a href="/">Index</a> |
<a href="/impressum.php">Impressum</a> |
<a href="/datenschutz.php">Datenschutz</a> |
<a href="https://www.xodox.de/">XODOX</a>
</footer>
</main>
</body>
</html>
