Click to See Complete Forum and Search --> : [RESOLVED] Styling article
sharkey
01-18-2010, 11:14 AM
Hey guys, i was wondering if anyone knows how to get this desired effect. Here is my site here http://www.texaschainsawmassacre.co.uk/texas1.php
and getting it looking like something like this.
http://www.leatherface.com/
is this a padding issue to get the text to stay away from the image abit.
anyhelp is appreciated.
Cheers
sharkey
01-18-2010, 03:12 PM
padding or margin
thanks fang so what would be the best way to do this adding padding or margin to the image so that nothing can touch it or to the text from a semantic point of view.
cheers.
Give the image a class.imageSpacing {margin:5px;}
sharkey
01-19-2010, 05:01 AM
Give the image a class.imageSpacing {margin:5px;}
thanks fang appreciate the time, will give that a shot:).
sharkey
01-24-2010, 06:40 AM
i still cant seem to get the hang of this at all. Ive tried to simply it by going with this effect.
http://www.screamordie.co.uk/
and my site is here back to square one with just the image.
http://www.texaschainsawmassacre.co.uk/texas2.php
i have the imagespacing class on the image, what would be my best move now using floated paragraphs doesnt seem to work out.
any help is appreciated as always.
cheers
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {margin:0;padding:0;}
div {width:300px; border:1px solid;}
img {float:left; padding:10px;}
</style>
</head>
<body>
<div>
<img alt="" src="image.jpg" height="50" width="100">
<p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie.</p>
</div>
</body>
</html>
sharkey
01-24-2010, 08:49 AM
once again thanks for taking the time fang appreciate it:).
ok due to the pics dimensions and the content area size ive had to play about with the widths. Was looking fine until i took the image width values out.
What is giving it the little 2px margin at the top so its not inline with the image.
cheers again its near their and looking good been stuck for ages on this:).
p {margin-top:7px;}
Resetting the elements is often a good strategy.
Simple: * {margin:0 padding:0;}
A more thorough solution (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/), but you must understand the consequences of the changes.
sharkey
01-25-2010, 05:35 AM
thanks once again fang your a legend:).