{Solved} Best way to put a pic into a div ?

8 replies [Last post]

Wed, 2008-11-19 21:25

turco

Offline

Regular

Hungary

Last seen: 9 years 32 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>

Tags:

Beginners CSS Questions

Wed, 2008-11-19 21:35

CupidsToejam

Offline

Guru

Florida

Last seen: 7 years 38 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?

Wed, 2008-11-19 21:39

turco

Offline

Regular

Hungary

Last seen: 9 years 32 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.

Wed, 2008-11-19 22:03

CupidsToejam

Offline

Guru

Florida

Last seen: 7 years 38 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.

Wed, 2008-11-19 22:09

turco

Offline

Regular

Hungary

Last seen: 9 years 32 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

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

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>

Wed, 2008-11-19 22:20

CupidsToejam

Offline

Guru

Florida

Last seen: 7 years 38 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

Wed, 2008-11-19 22:27

Ed Seedhouse

Offline

Guru

Victoria British Columbia

Last seen: 2 years 15 weeks 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.

Wed, 2008-11-19 22:36

CupidsToejam

Offline

Guru

Florida

Last seen: 7 years 38 weeks ago

Florida

Timezone: GMT-4

Joined: 2008-08-15

Posts: 2637

Points: 1556

[quote=Ed SeedhouseIt is

Ed Seedhouse wrote:

Nicely put House :thumbsup:

Thu, 2008-11-20 15:07

turco

Offline

Regular

Hungary

Last seen: 9 years 32 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

{Solved} Best way to put a pic into a div ?

d

Hi Toe, It will like a

okay

Hi Toe, Btw what is your

Umm,

CupidsToejam wrote:I try to

[quote=Ed SeedhouseIt is

Thanks toe for your help, to

User login

Navigation