Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    Align vertical images

    Hello

    I am working on a site here:

    http://www.proofreading4students.com

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

    Code:
    <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:

    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

  • #2
    New Coder
    Join Date
    Aug 2010
    Posts
    19
    Thanks
    0
    Thanked 4 Times in 4 Posts
    well you could place 2 divs outside of the container div. so maybe something like this:
    Code:
    <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...
    Code:
    #left-img{
        float:left;
    }
    
    #right-img{
        float:right;
    }

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    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

  • #4
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello

    With this in the CSS file:

    Code:
    #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):

    Code:
    #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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •