...

View Full Version : Align vertical images



SteveH
07-29-2010, 02:56 PM
Hello

I am working on a site here:

http://www.proofreading4students.com

The site uses, among other code, the following in the ASP file:



<body>

<div id="container">

<div class="halfmoon">
</div>


<div id="newBox">
<img src="./images/.gif>
</div>

<h3 class="features3">features</h3>
<div id="features">

<p class="main">Text here</p></div>

<h3 class="privacy"></h3>
<div id="privacy"></div>

</div>

</body>


and the following CSS code:


{ margin: 0;
padding: 0;
border: 1;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

body {
background: #fff;
margin:1.5em 0;
color: #1A2841;
font: 75%/1.5 Verdana, Arial;
}

p.main {text-align:justify;}

table { border-collapse: separate; border-spacing: 0;}
caption, th, td { text-align: left; font-weight:400;}
blockquote:before, blockquote:after, q:before, q:after { content: "";}
blockquote, q { quotes: "" "";}
a img { border: none; }
a { color: #607293; text-decoration: none; }
a:hover { color: #354158;}


#container { width: 500px; margin: auto; padding-top: 30px; padding-bottom: 50px;}


#container #logo { background: url(../img/logo.gif) no-repeat top left; height: 44px; padding-bottom: 5px; border-bottom: 1px solid #797979; margin-bottom: 20px;}
#container #logo h1 { text-indent: -9999px;}



#newBox

{
width:160px
height: 254px;
margin: 0 0 0 0;
/*float:left*/
}




#footer {
width:750px;
margin: 40px 0 0 0;
clear:both;
background: #000;
color: #08088A;
font-size: 11px;
}


.nav { float: right; margin-top: -15px;}
h2{ font-size: 2.2em; margin: 0; border-bottom: 1px solid #797979; margin-bottom: 5px; color: #354158;}


h3 {
margin: 30px 0 10px;
border-bottom: 1px solid #797979;
font-size: 1.8em;
color: #607293;
clear: both;
}



h4{ font-weight: bold;}
.home .menuItem h3 { font-size: 1.8em; line-height: 1.0em; float: none; position: relative; display: block; border-bottom: none; margin: 0;}
.home .menuItem p {margin-left: 0px; margin-bottom: 0px; position: relative; display: block; border-bottom: none; }
.home .menuItem {display: block; position: relative; padding-bottom: 5px; padding-top: 5px; color: #797979; outline: none; cursor: pointer; height: 40px; border-bottom: 1px solid #797979;}
.home .menuItem:hover { background-color: #f1f1f1;}
.home h2 { color: #354158; margin-bottom: 0px;}
.arrow { font-size: 4em; position: absolute; right: 0px; top: -16px; color: #b9b9b9;}
.home .menuItem:hover .arrow { right: -4px;}
.home h2 { background: url(../img/mootools-plugins.gif) no-repeat top left; width: 500px; height: 40px; text-indent: -9999px;}


h3.privacy { background: url(../img/privacy.gif) no-repeat top left; height: 30px; text-indent: -9999px;}


h3.check {
background: url(../../img/check.gif) no-repeat scroll left top transparent;
height: 30px;
text-indent: -9999px;
margin-top:20px;
}



h3.track {
background: url(../../img/track.gif) no-repeat scroll left top transparent;
height: 35px;
text-indent: -9999px;
}




h3.features3 {
background: url(../img/our_work.gif) no-repeat scroll left top transparent;
height: 30px;
text-indent: -9999px;
margin-top:20px;
}

h3.example { background: url(../img/heading-example.gif) no-repeat top left; height: 30px; text-indent: -9999px;}


h3.features { background: url(../img/heading-features.gif) no-repeat top left; height: 30px; text-indent: -9999px;}


h3.features1 { background: url(../img/simple.gif) no-repeat top left; height: 30px; text-indent: -9999px;}
h3.features2 { background: url(../img/detailed.gif) no-repeat top left; height: 30px; text-indent: -9999px;}
h3.compatibility { background: url(../img/heading-browser.gif) no-repeat top left; height: 30px; text-indent: -9999px;}
h3.compatibility1 { background: url(../img/editing.gif) no-repeat top left; height: 30px; text-indent: -9999px;}
ul { margin-left: 15px;} dt { float: left;}
dd { margin-left: 150px; margin-bottom: 10px;}
#usage p { margin: 10px 0px 5px 0px;}

I think I am right in saying that the 500px which I have highlighted, governs the width of the page.

I would like to keep this width, but how would I go about using the white space down the left-hand side if I wished to place one or two vertically aligned images there?

Thanks for any advice.

Steve

tjoyce0909
08-03-2010, 07:51 PM
well you could place 2 divs outside of the container div. so maybe something like this:


<div id="left-img"><img src="myLeftImg.jpg"></div>
<div id="right-img"><img src="myRightImg.jpg"></div>
<div id="container">
.....
......
</div>


and then the css would be similar to...


#left-img{
float:left;
}

#right-img{
float:right;
}

SteveH
08-04-2010, 11:02 AM
Hello tjoyce0909

Many thanks for your reply.

I see, so you sort of 'sidestep' the main container in that way.

I'll give it a go and post back!

Thanks again.

Steve

SteveH
08-05-2010, 04:41 PM
Hello

With this in the CSS file:


#left-img{
float:left;
}

#right-img{
float:right;
}

I get one image to the left of my 500px centred container, and another image opposite it on the right-hand side of the container.

So I have changed it to this (because I am aiming at vertically aligned images (as if they were stacked on top of one another as in a column):


#left-img{
float:left;

}

#left1-img{
float:left;
}

The problem with this is that while the two images are positioned down the left-hand side as I wanted, they are not vertically alligned (they are sitting next to one another).

Thanks again.

Steve



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum