 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
Light
Joined: 23 Oct 2009
Posts: 13
Location: Ozarks
|
 Posted: Fri Nov 13, 2009 6:00 pm Table w/in table and Image on top of image: |
 |
|
|
| Hi, new project, concerned with styling. so have a two coloumn table with three rows using as many bang n whistles as I can think up. Place pic one side of table within cell (and have a border around that cell. Presently, am unable to place borders around other cells. I think I'm doing style sheet wrong. I also place image in one cell, that pic duplicated all throughout that cell, and unable to just have a single image. I dont understand why. Also, thought it would be interesting if I could put pic onto of pic. I saw someone else doing this in the CSS forum. So I haven't tried this yet. Need to solve my cell border and image issues first. I'm thinking float right on the bottom image, but unsure if this will work with the top pic. Then I will have content on the subject matter on the other side. Then perhaps on the table somewhere have drop down list and a button or two. pick on one side and content on the other. So why duplication of single image, and why cant CSS borders for each cell ect... |
|
sticks464
Joined: 31 Dec 2006
Posts: 2629
|
| Posted: Fri Nov 13, 2009 8:05 pm |
|
|
|
If you are using a stylesheet, why are you using tables?
| Quote: |
| I think I'm doing style sheet wrong. |
No one will ever know since no one can see it.
Post appropriate css and html to get prompt help. |
|
Light
Joined: 23 Oct 2009
Posts: 13
Location: Ozarks
|
| Posted: Sat Nov 14, 2009 2:52 pm Continuing New Project: Styling |
|
|
|
K, got your point style the table...dah. So, solved my duplicating images, solved my bordering of cells(well think I have anyway). Haveing trouble positioning image in top right of cell(so that I may put text content to the right within the cell)
Here's code:
<!-- Class style for exact location of corvette -->.Imag1 {
position:absolute;top:0px;left:0px
}
<body>
<tr>
<td colspan="2">
<td style="position:relative">
<alt= "red corvette" img src="Group20Project/movies/images/corvette.jpg" class="status">
</td>
</tr>
I've tried a few other things, but this gets me the closest, but doesn't work either.
Input? |
|
sticks464
Joined: 31 Dec 2006
Posts: 2629
|
| Posted: Sat Nov 14, 2009 3:46 pm |
|
|
|
Give this a try. Width and height need to be set on image. You can't add text next to the image in the same <td>, it will have to be in the next <td>.
| Code: |
<!-- Class style for exact location of corvette -->
.corvette {
position:relative;
top:0px;
left:0px
}
<body>
<tr>
<td colspan="2">
<td>
<img src="Group20Project/movies/images/corvette.jpg" class="corvette" alt= "red corvette" width="" height="">
</td>
</tr> |
If you want to add text in the same <td> as the image, set the image as a background for that <td>, add text in a <p> tag and enough left margin to escape the image.
| Code: |
<!-- Class style for exact location of corvette -->
.corvette {
background:url(Group20Project/movies/images/corvette.jpg) no-repeat top left;
}
.corvette p {
margin-left:110px;/*to clear image assuming image is 100px width*/
}
<body>
<tr>
<td colspan="2">
<td class="corvette">
<p>This is a red 1987 Corvette.</p>
</td>
</tr> |
or
| Code: |
<!-- Class style for exact location of corvette -->
.corvette img{
float:left;
margin:0 10px 0 0;
}
<body>
<tr>
<td colspan="2">
<td>
<p class="corvette"><img src="Group20Project/movies/images/corvette.jpg" alt="red corvette" width="" height="">This is a red 1987 Corvette.</p>
</td>
</tr> |
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
HTML Help Forum
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
