4 Replies - 996 Views - Last Post: 26 March 2013 - 02:07 PM

#1 codeblocks23   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 25-March 13

Image positioning in dreamweaver

Posted 26 March 2013 - 11:28 AM

Hello I have a site made in dreamweaver but, I am having trouble with the positioning of the images I can't seem to align the image the way I want. I have 3 images and I want to move the small image that is under the other small image under the larger image.

PS. I am new at html and webdesign so sorry if I didn't include all the info needed if you need anymore info let me know thanks for the help!! :shuriken:

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Image positioning in dreamweaver

#2 Koyume   User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 89
  • Joined: 19-February 13

Re: Image positioning in dreamweaver

Posted 26 March 2013 - 01:13 PM

We would need your HTML coding as well as CSS Coding, if it's attached to any classes or IDs.
Was This Post Helpful? 0
  • +
  • -

#3 codeblocks23   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 25-March 13

Re: Image positioning in dreamweaver

Posted 26 March 2013 - 01:51 PM

Ok here is the html code


<!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" lang="en" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="css/index.css" media="screen" />
		<title>Lancaster Custom Computers - Home</title>
</head>
	<body>
		<div id="wrapper">
			<div id="header">
				<div id="logo">
					<h1><a href="index.html">Lancaster Custom Computers</a></h1>
				</div>
				<div class="clr"></div>
			</div>
			<div class="content">
				<ul id="menu">
					<li><a class="current" href="Index.html">Home</a></li>
					<li><a href="services.html">Services</a></li>
					<li></li>
					<li><a href="aboutus.html">About Us</a></li>
					<li><a href="builds.html">Builds</a></li>
				</ul>
                <div class="article">
                <h2>Most Recent Builds</h2>
                </div>
				 <p>&nbsp;</p>
			  <p>&nbsp;</p>
				 <div class="col">
			       <h4>Yvonne Rodriquez</h4>
					<p>&nbsp;</p>
				</div>
				<div class="col">
					<h4>Mark Waid</h4>
				</div>
				<div class="col last">
					<h4>&nbsp;</h4>
					<p>&nbsp;</p>
				</div>
				<div class="clr"></div>
			</div>
			<div id="main">
				<div class="col">
					<h3>All Buildsni</h3>
					<div class="article">
					  <p class="date">&nbsp;</p>
						<h4 align="center">
						<div align="right"><img src="images/yvonnepc3.jpg" width="100" height="146" alt="yvonnepc" /><img src="images/yvonnepc.jpg" width="50" height="50" alt="ypc2" />&nbsp;<img src="images/yvonnepc2.jpg" width="50" height="50" alt="top" />
				      </div>
						<h4>Yvonne Rodriquez</h4>
						<p align="right" class="short">Quisque scelerisque purus quis eros sollicitudin gravida. Aliquam erat volutpat. Donec a sem consequat. <a href="#">&raquo;</a></p>
					</div>
                    <div class="article">
                    <h3>All Builds</h3>
                    <p> &raquo;</p>
                    </div>
					<div class="article">
						<p class="date">February, 2010</p>
						<h4><a href="http://www.mccabelawoffices.com/">Car Accident Lawyers</a></h4>
						<p class="short">Quisque scelerisque purus quis eros sollicitudin gravida. Aliquam erat volutpat. Donec a sem consequat. <a href="#">&raquo;</a></p>
					</div>
				</div>
				<div class="clr"></div>
			</div>
			<div id="footer">
				<p id="links">
					<a href="#">Privacy Policy</a>
					<a href="#">Terms of Use</a>
				</p>
				<p>
					<a href="index.html">Home</a>
					<a href="services.html">Services</a><a           href="aboutus.html">About Us</a>
					<a href="builds.html">Builds</a></p>
				<p>Copyright &copy; 2013 &middot; Lancaster Custom Computers<a href="http://www.lawyermarketinggroup.com/"></a></p>
			</div>
		</div>
	</body>
</html>


Here is the CSS code

* { margin: 0; padding: 0; }
body {
	font: .74em Tahoma, Verdana, Sans-Serif, Arial;
	background: url(../images/body.gif) repeat;
	color: #999999;
}
h1 { font: normal 3.4em "Trebuchet MS", Helvetica, Arial; }
h2 { font: normal 1.8em "Trebuchet MS", Helvetica, Arial; color: #dfdfdf; margin: 0 0 15px; }
h3 {
	margin: 0 0 20px;
	font-family: "Trebuchet MS", Helvetica, Arial;
	font-size: 2em;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}
h4 {
	font: normal 1.2em "Trebuchet MS", Helvetica, Arial;
	color: #000000;
	margin: 0 0 4px;
}
p { margin: 0 0 15px; line-height: 1.6em; }
a { outline: 0; color: #304D6F; text-decoration: none; }
li { list-style: none; }
li a, img { display: block; }
img { outline: 0; border: 0; }
#wrapper { width: 984px; margin: auto; }
.clr { clear: both; }
#logo { float: left; padding: 30px 15px; }
	#logo h1 a { color: #fff; }
		#logo h1 a span { color: #808080; }
#menu { height: 44px; padding: 5px 0 0 4px; }
	#menu li { float: left; font-size: 1.3em; text-transform: uppercase; }
		#menu li a { color: #888; margin: 0 50px 0 0; }
			#menu li a.current, #menu li a:hover { color: #fff; }			
	#pitch { clear: both; background: url(../images/pitch.jpg) no-repeat; height: 228px; margin: 0 0 30px; padding: 60px 360px 0 30px; }
		#pitch h1 { font-size: 2.4em; color: #304D6F; margin: 0 0 20px; }
		#pitch em { font-size: 1.3em; font-weight: bold; line-height: 1.6em; }
.content { background: url(../images/content.gif) repeat; padding: 20px; }
.link { background: #304D6F; color: #fff; padding: 5px 10px; font-size: .9em; }
#main { padding: 20px; }
.col { float: left; width: 292px; margin: 0 30px 15px 0; }
	.col.last { float: right; margin-right: 0; }
	.case img {
	float: left;
	clear: left;
	margin: 0 10px 10px 0;

	background: build1
.jpg; 		padding: 3px;
}
	.short { padding: 0 0 15px 0; background: url(../images/line.gif) repeat-x left bottom; }
	.case a, .article a { color: #ddd; font-weight: bold; }
	.date { font-size: .84em; margin: 0 0 3px; }
#footer { clear: both; background: url(../images/line.gif) repeat-x; padding: 20px 20px 10px; font-size: .9em; }
	#footer a { color: #ccc; margin: 0 10px 0 0; border-bottom: 1px dotted #444; padding: 0 0 1px; }
	#links { float: right; }
		#links a { margin: 0 0 0 10px; }
	#footer p { margin: 0 0 8px; }
#wrapper .content .col.last h4 {
	color: #FFF;
}
#wrapper .content .col h4 {
	color: #FFF;
}
#wrapper #main .col .article h4 {
	color: #FFF;
}


Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,569
  • Joined: 12-December 12

Re: Image positioning in dreamweaver

Posted 26 March 2013 - 02:05 PM

You have an unclosed H4-tag: <h4 align="center"> which contains DIVs, which it shouldn't. I would fix this first.
Was This Post Helpful? 1
  • +
  • -

#5 Koyume   User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 89
  • Joined: 19-February 13

Re: Image positioning in dreamweaver

Posted 26 March 2013 - 02:07 PM

Couple of things. Your <h4 align="center"> is missing it's ending </h4> tag.

Secondly, you have it aligned right, but a space (&nbsp;) in there. Try removing that and see if it aligns up for you. if it is, then it's a width issue, which means you'll have to add a width to your div. (Which can be done inline (not recommended) or through your CSS and with an ID put on it.

EDIT: Crap, andrewsw posted the first part before me ;P

This post has been edited by Koyume: 26 March 2013 - 02:08 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1