PDA

View Full Version : HTML/CSS Questions



The Error Guy
19-12-2011, 09:30 PM
Having abandoned any learning of HTML and never attempting CSS properly for several years I'm back with a new project for myself.

So far most of it has come back to me, and with a bit of help from W3schools it all seems to be coming together, so far I have produced this: http:\\www.longsword.co.cc which is in a very alpha stage.

So far the "content tiles" (the square pictures) are laid out in the way I want, unfortunately the code behind them is terrible. I couldn't position the 2nd tile X px relative to its centre position (eg to the left or right of the center tile. Instead it appeared under the centre tile and the x px caused it to be translated a row down so I had to modify its position on both the horizontal and vertical eg 150 px left and 180px up. This was messy to start and after 4x rows it would be terrible!


HTML

<div id="content">

<h1><a href="R1C1.html" title="testing title"> R1C1</a>

<ul class="r1c2">
<r1c2><a href="R1C2.html" title="testing title"> R1C1 </a> </r1c2>
</ul>


CSS
#content h1 a
{
margin-left:auto;
margin-right:auto;
position:relative;
top:3px;
left:40px;
background-image: url(images/thumbs/cow.png);
background-repeat: no-repeat;
height=165px;
width=295px;
}

#content r1c2 a
{
margin-left:auto;
margin:-right:auto;
position:relative;
top:-147px;
left:-190px;
background-image: url(images/thumbs/mag.png);
background-repeat: no-repeat;
height=165px;
width=295px;
}


Right now I am working of a revised version using tables however I can't seem to work out how one would modify the distance between the cells because they end up rather large, no matter what % the table width is set at (http://longsword.co.cc/indexv2.html)
So the columns are quite far apart and the rows to close.

CSS is used to centre the table.



<table width="30%" border="1">

<tr align="left">

<th> <h1><a href="R1C1.html" title="testing title"> R1C1</a> </th>
<th> <h1><a href="R1C1.html" title="testing title"> R1C1</a> </th>
<th> <h1><a href="R1C1.html" title="testing title"> R1C1</a> </th>
<th> <h1><a href="R1C1.html" title="testing title"> R1C1</a> </th>

</tr>

<tr align="left">

<td> <h1><a href="R1C1.html" title="testing title"> R1C1</a> </td>
<td> <h1><a href="R1C1.html" title="testing title"> R1C1</a> </td>
<td> <h1><a href="R1C1.html" title="testing title"> R1C1</a> </td>
<td> <h1><a href="R1C1.html" title="testing title"> R1C1</a> </td>
</tr>

<tr align="top">

<th> <h1><a href="R1C1.html" title="testing title"> R1C1</a> </th>
<th> <h1><a href="R1C1.html" title="testing title"> R1C1</a> </th>
<th> <h1><a href="R1C1.html" title="testing title"> R1C1</a> </th>
<th> <h1><a href="R1C1.html" title="testing title"> R1C1</a> </th>

</table>


If someone could explain how to properly display these tiles that would be great. I could probably find an answer on google... I just don't know what to search for!

Cheers!

TEG

kahawai chaser
19-12-2011, 10:01 PM
I use tables for my sites/blogs - and always forget some of the code, e.g. for cell padding (which I think is what you want), borders, colour codes, etc. The easiest way is Google up html tables online, and play around with entries - and then borrow/study the code. There are many online table generators. Tables I find cumbersome and tricky to code manually when you have several data/images to insert in multiple columns and rows.

The Error Guy
19-12-2011, 10:32 PM
ahhh padding, that sounds about right.

Yup that seems a good place to start

Thanks.

hueybot3000
19-12-2011, 11:49 PM
There is also cellspacing which I would set to 0 and then pad it out to suit.