8 replies [Last post]
turco
turco's picture
Offline
Regular
Hungary
Last seen: 6 years 3 weeks ago
Hungary
Timezone: GMT+2
Joined: 2008-11-17
Posts: 28
Points: 14

Hi,

So finally i found a better way, i downloaded template from a css design and start playing on it, i think its better understanding for the beginners about CSS.

I want to place an image right next to the 1st heading with margins 10px from 4 sides. Image will stay on the left. I could make a div id for the image under the "preamble" div but i couldnt put some margin between the pic and first heading.

Thanks in advance

css

html {
	margin: 0;
	padding: 0;
	}
body { 
	font: 75% georgia, sans-serif;
	line-height: 1.88889;
	color: #555753; 
	background: #fff url(blossoms.jpg) no-repeat bottom right; 
	margin: 0; 
	padding: 0;
	}
p { 
	margin-top: 0; 
	text-align: justify;
	}
h3 { 
	font: italic normal 1.4em georgia, sans-serif;
	letter-spacing: 1px;
	margin-bottom: 0; 
	color: #7D775C;
	}
a:link { 
	font-weight: bold; 
	text-decoration: none; 
	color: white;
	}
a:visited { 
	font-weight: bold; 
	text-decoration: none; 
	color: white;
	}
a:hover, a:active { 
	text-decoration: underline; 
	color: Black;
	}
acronym {
	border-bottom: none;
	}
 
 
 
#container { 
	background-color: black no-repeat top left; 
	padding: 0;
	margin-top: 50px;  
	margin-left: 250px;
	margin-right: 250px; 
	position: relative;
	min-width: 725px;
	}
 
#intro { 
 
	}
 
#pageHeader {
	background-color: #66CC33;
	height: 90px;
	}
 
#navbar {
	background-color: #FF9900;
}
 
#preamble {
	position: relative;
	clear: right; 
	padding-left: 10px;
	padding-right: 10px;
}
 
#supportingText {	
	padding-left: 10px;
	padding-right: 10px; 
	margin-bottom: 40px;
	}
 
#footer { 
	text-align: center; 
	}
#footer a:link, #footer a:visited { 
	margin-right: 20px; 
	}
 
 
#extraDiv1 {
	background: transparent url(cr2.gif) top left no-repeat; 
	position: absolute; 
	top: 40px; 
	right: 0; 
	width: 148px; 
	height: 110px;
	}
.accesskey {
	text-decoration: underline;
	}

Html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<title>Test</title>
 
	<script type="text/javascript"></script>
 
	<style type="text/css" media="all">
		@import "sample.css";
	</style>
 
</head>
 
 
<body>
 
<div id="container">
	<div id="intro">
		<div id="pageHeader">
			<h1><span>Banner will go here</span></h1>
		</div>
 
		<div id="navbar">
			<a href="http://www.studentlife.hu">Home</a> &nbsp;
			<a href="http://forum.studentlife.hu">Forum</a> &nbsp;
			<a href="http://www.studentlife.hu/link">Link</a> &nbsp;
			<a href="http://www.studentlife.hu/contact">Contact</a> &nbsp;
 
		</div>
 
		<div id="preamble">
			<h3><span>First Heading</span></h3>
			<p class="p1"><span>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</span></p>
			<p class="p2"><span>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</span></p>
			<p class="p3"><span>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</span></p>
		</div>
	</div>
 
	<div id="supportingText">
		<div id="explanation">
			<h3><span>Second Heading</span></h3>
			<p class="p1"><span>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</span></p>
			<p class="p2"><span>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</span></p>
		</div>
 
		<div id="participation">
			<h3><span>Third Heading</span></h3>
			<p class="p1"><span>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</span></p>
			<p class="p2"><span>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</span></p>
			<p class="p3"><span>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</span></p>
		</div>
 
		<div id="benefits">
			<h3><span>Fourth Heading</span></h3>
			<p class="p1"><span>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</span></p>
		</div>
 
		<div id="footer">
			<a href="#">AAA</a> &nbsp; 
			<a href="#">BBB</a> &nbsp; 
			<a href="#">CCC</a> &nbsp;
			<a href="#">DDD</a> &nbsp;
			<a href="#">EEE</a>
		</div>
 
	</div>
 
 
</div>
 
<!-- These extra divs/spans may be used as catch-alls to add extra imagery. -->
<!-- Add a background image to each and use width and height to control sizing, place with absolute positioning -->
<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>
 
</body>
</html>

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 9 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

d

do you want an image before all the headings text (h3)? or just the first one?

turco
turco's picture
Offline
Regular
Hungary
Last seen: 6 years 3 weeks ago
Hungary
Timezone: GMT+2
Joined: 2008-11-17
Posts: 28
Points: 14

Hi Toe, It will like a

Hi Toe,

It will like a news/blog so i just want to put it right next to the first heading and 3 paragraphs.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 9 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

okay

add a class to the h3's

XHTML

<h3 <span style="font-weight:bold">class="imageLeftBG"</span>><span>First Heading</span></h3>

create the CSS

CSS

.imageLeftBG {background:url(xxx) no-repeat top left;}
.imageLeftBG span {margin-left: 20px;}

You may have to add height: xxxpx; to the .imageLeftBG, depending on how large the image is.

turco
turco's picture
Offline
Regular
Hungary
Last seen: 6 years 3 weeks ago
Hungary
Timezone: GMT+2
Joined: 2008-11-17
Posts: 28
Points: 14

Hi Toe, Btw what is your

Hi Toe,

Btw what is your real name, you happen to answer every question of mine man Smile

I did the following before you posted and it worked, was checking some posts. Trying the whole day Smile

You think this is a good way to do it as well?

Thanks once again

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<title>Test</title>
 
	<script type="text/javascript"></script>
 
	<style type="text/css" media="all">
		@import "sample.css";
	</style>
 
</head>
 
 
<body>
 
<div id="container">
	<div id="intro">
		<div id="pageHeader">
			<h1><span>Banner will go here</span></h1>
		</div>
 
		<div id="navbar">
			<a href="http://www.studentlife.hu">Home</a> &nbsp;
			<a href="http://forum.studentlife.hu">Forum</a> &nbsp;
			<a href="http://www.studentlife.hu/link">Link</a> &nbsp;
			<a href="http://www.studentlife.hu/contact">Contact</a> &nbsp;
 
		</div>
 
		<div id="preamble">
 
			<img src="#" width="320" height="240" align="left" id="image">
			<h3><span>First Heading</span></h3>
			<p class="p1"><span>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</span></p>
			<p class="p2"><span>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</span></p>
			<p class="p3"><span>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</span></p>
		</div>
	</div>
 
	<div id="supportingText">
		<div id="explanation">
			<h3><span>Second Heading</span></h3>
			<p class="p1"><span>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</span></p>
			<p class="p2"><span>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</span></p>
		</div>
 
		<div id="participation">
			<h3><span>Third Heading</span></h3>
			<p class="p1"><span>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</span></p>
			<p class="p2"><span>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</span></p>
			<p class="p3"><span>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</span></p>
		</div>
 
		<div id="benefits">
			<h3><span>Fourth Heading</span></h3>
			<p class="p1"><span>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</span></p>
		</div>
 
		<div id="footer">
			<a href="#">AAA</a> &nbsp; 
			<a href="#">BBB</a> &nbsp; 
			<a href="#">CCC</a> &nbsp;
			<a href="#">DDD</a> &nbsp;
			<a href="#">EEE</a>
		</div>
 
	</div>
 
 
</div>
 
<!-- These extra divs/spans may be used as catch-alls to add extra imagery. -->
<!-- Add a background image to each and use width and height to control sizing, place with absolute positioning -->
<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>
 
</body>
</html>

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 9 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Umm,

Your way works. My way makes the image "part of" the . Screenreaders will not read my image, as they will yours. I try to hide things that are meaningless to screenreaders. People who use them, only care about the content. its easyer to style that way. Also, my way keeps all styling (ie: width="320" height="240" align="left")out of the XHTML. It's best to keep then apart. My way is just more "ninja". lol

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

CupidsToejam wrote:I try to

CupidsToejam wrote:

I try to hide things that are meaningless to screenreaders. People who use them, only care about the content.

It is good practice, too, to put decoration images in the background, not have them as specific content. If the image is needed to communicate information then it should be specifically included with the "IMG" tag, but if not it shouldn't be.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 9 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

[quote=Ed SeedhouseIt is

Ed Seedhouse wrote:

It is good practice, too, to put decoration images in the background, not have them as specific content. If the image is needed to communicate information then it should be specifically included with the "IMG" tag, but if not it shouldn't be.

Nicely put House :thumbsup:

turco
turco's picture
Offline
Regular
Hungary
Last seen: 6 years 3 weeks ago
Hungary
Timezone: GMT+2
Joined: 2008-11-17
Posts: 28
Points: 14

Thanks toe for your help, to

Thanks toe for your help, to you too Guru

cheers