PDA

View Full Version : Images not aligning properly within the content div.


Joshuacacavas
05-28-2012, 03:59 PM
Hey guys,

I am almost finishing up on a University website assignment...

I only have one problem...and it's an odd one. Whenever I put my images (http://forums.adobe.com/thread/1012902#) into the content <div> they seem all aligned within the Dreamweaver preview option...yet, once previewed online...they, all-of-a-sudden, become misaligned and askew.

I have made some mock up wireframes via photoshop to give a decent description of what I am talking about. http://forums.adobe.com/4.5.6/images/emoticons/happy.gif

Here is the outcome once viewed in Adobe Dreamweaver...Note: It's all aligned accordingly.

http://www.filedump.net/index.php?pic=quickmockup1338210617.jpg

Here is the outcome once it has been viewed on Firefox:

http://www.filedump.net/index.php?pic=mockupwireframe21338210617.jpg


If it's not too much...I have posted the HTML and CSS code, Below:


HTML Coding:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/textstyles.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="wrapper">

<div class="header">


</div>

<div class="nav">

<ul>

<li><a href="contact.html">Contact</a></li>

<li><a href="foundation.html">Foundation</a></li>

<li><a href="photos.html">Photos</a></li>

<li><a href="bands.html">Bands</a></li>

<li><a class="current" href="home.html">Home</a></li>

</ul>

</div>



<div class="content">

<div class="leftcol">

<img src="images/Clarkefield Music Festival Photos/CMF photo for home page 1 Edit.jpg" width="300" height="212" alt="cmf1" />

<div class="rightcol">

<img src="images/Clarkefield Music Festival Photos/CMF Photo For Home page 2 edit.jpg" width="300" height="212" alt="cmf2" />

<div class="rightcol2">

<img src="images/Clarkefield Music Festival Photos/CMF Photo for home page 3 edit.jpg" width="300" height="212" alt="cmf3" />

<div class="leftcol2">

<img src="images/Clarkefield Music Festival Photos/CMF Photo for home page (http://forums.adobe.com/thread/1012902#) 4 edit.jpg" width="300" height="212" alt="cmf4" />


</div>
</div>
</div>
</div>
</div>




<div class="footer">

<img src="images/images/footer.gif" width="827" height="77" alt="footer" />

</div>

<!-- A single paragraph to be added into the footer.-->


<!--close wrapper-->



</body>

</html>


CSS Coding:

@charset "UTF-8";
/* CSS Document (http://forums.adobe.com/thread/1012902#) */

body{
margin:0;
padding:0;
background-image: url(file:///H|/EXTRA%20RMIT%20FILES/Clarkefield%20Website%20Site/imag es/Clarkefield%20Festival%20Background.jpg)
}


.header{
width: 827px;
height: 579px;
margin-left: auto;
margin-right: auto;
background-image: url(../images/Clarkefield%20Header2.jpg);
background-repeat:no-repeat;
background-position:center;
}

.wrapper{
width: 827px;
margin-left: auto;
margin-right: auto;
}



.nav{
width: 679px;
height: 78px;

margin-left: auto;
margin-right: auto;
}



.content {
width: 827px;
margin-left: auto;
margin-right: auto;
height: 750px;
background-color: #225b6f;
padding-bottom: 10px;
}

.leftcol {
float: left;
margin-left: 60px;
margin-top: 100px;

}

.rightcol {

float: right;

margin-left: 405px;

margin-bottom: auto;

margin-top: -213px;

}


.rightcol2 {

float: right;

margin-left:auto;

margin-right:auto;

margin-top: 130px;

}

.leftcol2 {

float: left;

margin-left:-409px;

margin-right: auto;

margin-top: -210px;

}



<!--more details to be added-->




.footer {

margin-bottom: auto;
margin-left: auto;
margin-right:auto;
position: fixed;

}


.nav ul{

list-style-type:none;

margin:0;

padding:0;

width:100%;/*This will make it the full width of the container */


}

.nav li{

float:left;

margin: 3.5px;

padding: 0px;

}

.nav li a{

display: block;

margin-top: auto;

font-family:Arial, Helvetica, sans-serif;

font-size:16px;

text-decoration:none;

text-align: center;

line-height: 70px;

font-weight: bolder;

background:url(../images/button.gif) no-repeat top left;

width:128px;/*Enter width here */

height: 77px; /*Enter height here */

color: #FFF;/*Enter text color here */

}





Kindest Regards!

- Joshua.

gentleone
05-28-2012, 09:45 PM
You go wrong in the HTML and in the CSS with those images.

You close the left and right col divs not properly in the HTML and in the CSS you float them, but noticed that that didn't do what you wanted and decided to shift them into place with negative margins. This is asking for display problems.

Of course I don't know what you want more in the content div, but for those images there is no need to wrap them individually in a div. You just can position the img tag itself through CSS. So all you need to get those images as the mock-up is only the content div and give the left images a class 'even' and the right images a class 'odd' (for instance). To finish it off a little bit of CSS to position them.

I made an example for you and to view the CSS and HTML, you can click on 'CSS' and 'HTML' at the top:
http://dabblet.com/gist/2821276

Joshuacacavas
05-29-2012, 07:09 AM
Hey mate, thank you so much! You've helped me, as-well as, TAUGHT me heaps! It looks much neater! As-well as, having great work-functionality!

Once again, thanks heaps!

Kind Regards,

- Joshua.

davidj
05-29-2012, 08:20 AM
To Add...

This CSS directive won't work...

background-image: url(file:///H|/EXTRA%20RMIT%20FILES/Clarkefield%20Website%20Site/imag es/Clarkefield%20Festival%20Background.jpg)

You need a relative path through your web server

background-image: url(images/Clarkefield%20Festival%20Background.jpg)

Also you should adopt a better naming convention strategy I.E dont use spaces when naming files or images for the web.

gentleone
05-29-2012, 06:35 PM
Hey mate, thank you so much! You've helped me, as-well as, TAUGHT me heaps!
Great... you're welcome! I really hope you've learned from this. I've just used the normal flow of the document. If you would make the content div wider and don't set margins, then the third image and even the fourth will line up next to 1 and 2. Now the content div is not wide enough for that, so there's no room and therefore they'll drop automatically below 1 and 2. With the margins you can sort of fake a grid like gallery now.

If you understand the basics of CSS then it all makes sense and you will be able to lay out any mock-up.
Basics:
a) normal document flow
b) CSS box model
c) know difference between inline and block-level elements
d) CSS positioning with margins, padding and floats