Html Code Help

blogspotter

WF Premium Member
Jun 29, 2007
2,879
104
0
Interwebz
5dugxt.png


Need a simple HTML code temple where I can insert a 67X67 Image the a Headline, then Copy, then a Link.

There must be a better way by using "div" "Float" and such like so that i can just insert my Image link to the SRC and just the replace the headline and copy each time i want to change it.

Can someone take a look..
The below code will not keep the Image to the left and then the headline to right as in the image above.

<li><a href="http://www.domain.net/" ><img width="67" height="67" src="http://i33.tinypic.com/5dugxt.png" /></a>
<div>
<a href="http://www.domain.net" >Headline Link</a> <BR>Ad Copy.<BR><a href="http://www.domain.net/">» More from Domain.com</a></div></li>

PS: I can manage the dotted underlines. I just can't figure out how to allign the thumbnail and the copy.
 


something like this
HTML:
<style>
#adbox {
	width:300px;
	height:300px;
}
.ad {
	padding: 5px;
	height: 100px;
}
.adimage {
	float:left;
	width:70px;
}
.adtext {
	float:left;
	width:220px;
}
.headline {

}
.desc {

}
.link {

}
</style>

<div id="adbox">
	<div class="ad">
		<div class="adimage">
			<img src="http://imgsrc" alt=""/>
		</div>
		<div class="adtext">
			<span class="headline">Headline</span>
			<span class="desc">lorem ipsum gay lol lorem ipsum gay lol lorem ipsum gay lol</span>
			<span class="link">>> Spin on here</span>
		</div>
	</div>
	<div class="ad">
		<div class="adimage">
			<img src="http://imgsrc" alt=""/>
		</div>
		<div class="adtext">
			<span class="headline">Headline</span>
			<span class="desc">lorem ipsum gay lol lorem ipsum gay lol lorem ipsum gay lol</span>
			<span class="link">>> Spin on here</span>
		</div>
	</div>
	<div class="ad">
		<div class="adimage">
			<img src="http://imgsrc" alt=""/>
		</div>
		<div class="adtext">
			<span class="headline">Headline</span>
			<span class="desc">lorem ipsum gay lol lorem ipsum gay lol lorem ipsum gay lol</span>
			<span class="link">>> Spin on here</span>
		</div>
	</div>
</div>

not complete, not tested, i suck
 
This will work and I can test it no worries... Thx

is there no simpler way way though, by wrapping the Image and Ad copy using divs and such in a few lines? Just looking at alternatives as well as trying to understand HTML/CSS better

Your code is also neat.. Looks like a Blogger classic template :-)

something like this
HTML:
<style>
#adbox {
    width:300px;
    height:300px;
}
.ad {
    padding: 5px;
    height: 100px;
}
.adimage {
    float:left;
    width:70px;
}
.adtext {
    float:left;
    width:220px;
}
.headline {

}
.desc {

}
.link {

}
</style>

<div id="adbox">
    <div class="ad">
        <div class="adimage">
            <img src="http://imgsrc" alt=""/>
        </div>
        <div class="adtext">
            <span class="headline">Headline</span>
            <span class="desc">lorem ipsum gay lol lorem ipsum gay lol lorem ipsum gay lol</span>
            <span class="link">>> Spin on here</span>
        </div>
    </div>
    <div class="ad">
        <div class="adimage">
            <img src="http://imgsrc" alt=""/>
        </div>
        <div class="adtext">
            <span class="headline">Headline</span>
            <span class="desc">lorem ipsum gay lol lorem ipsum gay lol lorem ipsum gay lol</span>
            <span class="link">>> Spin on here</span>
        </div>
    </div>
    <div class="ad">
        <div class="adimage">
            <img src="http://imgsrc" alt=""/>
        </div>
        <div class="adtext">
            <span class="headline">Headline</span>
            <span class="desc">lorem ipsum gay lol lorem ipsum gay lol lorem ipsum gay lol</span>
            <span class="link">>> Spin on here</span>
        </div>
    </div>
</div>
not complete, not tested, i suck