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 10 of 10

Thread: Image Alignment

  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    11
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Image Alignment

    I've been experimenting with many methods to try aligning five images into a cross. The middle image is the largest, and there are four surrounding squares that are smaller. But with everything I've tried, I was never able to align all five images perfectly, just like the poorly made illustration below. xD

    ........---
    .......|..|
    ...-----------
    ...|.........|
    ---|.........|---
    |..|.........|..|
    ---|.........|---
    ...|.........|
    ...-----------
    .......|..|
    ........---


    Any suggestions?

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Without a live test site or code showing what you've tried and images showing what they look like, it's hard for anyone to try and help.
    Teed

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    11
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I am quite aware of that. I'm only asking for what people suggest me to use for image alignments. I've tried a lot of things in CSS, but I want to know what everyone else uses, that's all.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,835 Times in 1,819 Posts
    Hello Byo476,
    I think I would probably use ap for that. Give this a try -
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #999;
    }
    #container {position: relative;}
    .big_box, .box {position: absolute;}
    .box {
    	height: 100px;
    	width: 100px;
    	background: #0f0;
    }
    #middle {
    	height: 400px;
    	width: 400px;
    	top: 110px;
    	left: 110px;
    	background: #0cf;
    }
    #top {
    	top: 5px;
    	left: 255px;
    }
    #right {
    	top: 255px;
    	left: 515px;
    }
    #bottom {
    	top: 515px;
    	left: 255px;
    }
    #left {
    	top: 255px;
    	left: 5px;
    }	
    </style>
    </head>
    <body>
        <div id="container">
            <div class="big_box" id="middle"></div>
            <div class="box" id="top"></div>
            <div class="box" id="right"></div>
            <div class="box" id="bottom"></div>
            <div class="box" id="left"></div>    
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Byo476 (11-01-2011)

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by Byo476 View Post
    Any suggestions?
    Take two (with Excavator's code being "take one"):

    Code:
    <?xml version="1.0"?>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
    	<head>
    		<title>Demo</title>
    		<style>
    			html { background-color: white; color: black; font-family: sans-serif; }
    			.box { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; text-align: center; }
    			.satellite, #center { box-shadow: 0.5em 0.5em palegoldenrod; }
    			.satellite { display: block; overflow-x: auto; background-color: slategray; color: white; line-height: 150px; }
    			#bounding_box { width: 700px; height: 700px; }
    			#top { bottom: auto; }
    			#left { right: auto; z-index: -1; }
    			#center { background-color: beige; line-height: 400px; }
    			#right { left: auto; z-index: 1; }
    			#bottom { top: auto; }
    		</style>
    	</head>
    	<body>
    		<div id="bounding_box" class="box">
    			<img id="top" class="box satellite" width="150" height="150" alt="Top Image" src=""/>
    			<img id="left" class="box satellite" width="150" height="150" alt="Left Image" src=""/>
    			<img id="center" class="box" width="400" height="400" alt="Center Image" src=""/>
    			<img id="right" class="box satellite" width="150" height="150" alt="Right Image" src=""/>
    			<img id="bottom" class="box satellite" width="150" height="150" alt="Bottom Image" src=""/>
    		</div>
    	</body>
    </html>
    This code is mainly different from Excavator's code in that it positions img elements and tries to avoid specifying of coordinates as much as possible. Plus I threw in a box shadow just for fun.
    Last edited by Arbitrator; 11-01-2011 at 11:46 AM. Reason: I forgot the |src| attributes.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    Byo476 (11-01-2011)

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,742
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there Byo476,

    here is a third example for you to try.

    I originally used images but because Opera does not render border-radius,
    as yet, for images, changed the coding to background-images.
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <base href="http://www.coothead.co.uk/images/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>images in cross formation</title>
    
    <style type="text/css">
    html,body {
        margin:0;
        height:100%;
        background-color:#f0f0f9;
     }
    body {
        min-height:408px;
     }
    #vertical {
        float:left;
        height:50%;
        margin-top:-204px;
     }
    #cross {
        clear:both;
        width:408px;
        margin:auto;     
     }
    #cross div {
        width:100px;
        height:100px;
        border:1px solid #66c;
        box-shadow:#000 20px 20px 80px;
        background-image:url(anim5.gif);
     }
    #cross #top {
        border-bottom:0;
        border-radius:51px 51px 0 0;
        margin:auto;
     }
    #cross #left {
        float:left;
        border-right:0;
        border-radius:51px 0 0 51px;
        margin-top:52px;
     }
    #cross #right {
        float:right;
        border-left:0;
        border-radius:0 51px 51px 0;
        margin-top:52px;
     }
    #cross #center {
        position:relative;
        z-index:4;
        width:200px;
        height:200px;
        border-width:3px;
        border-radius:53px;
        margin:auto;
        background-image:url(aaa.jpg);
     }
    #cross #bottom {
        clear:both;
        border-top:0;
        border-radius:0 0 51px 51px;
        margin:auto;
     }
    </style>
    
    </head>
    <body>
    
    <div id="vertical"></div>
    
    <div id="cross">
     <div id="top" title="top"></div>
     <div id="left" title="left"></div>
     <div id="right" title="right"></div>
     <div id="center" title="center"></div>
     <div id="bottom" title="bottom"></div>
    </div>
    
    </body>
    </html>
    
    coothead
    Last edited by coothead; 11-01-2011 at 01:46 PM.

  • Users who have thanked coothead for this post:

    Byo476 (11-01-2011)

  • #7
    New Coder
    Join Date
    Oct 2011
    Posts
    11
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thank you all but Arbitrator's version is the one that fits the most, I like the effects on yours, coothead

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Please do not send private messages for help with requests that should remain within their respective threads.

    Quote Originally Posted by Byo476
    The images are in a table on my page, but with your style it completely ignored that and simply stayed centered on the whole page, as if nothing was there. I tried removing
    Code:
    position: absolute;
    , it finally stayed inside the table, but it didn't stay a cross. Can you help me? Thanks.
    The code that I wrote is designed for alignment of boxes to the viewport; the viewport is the page rendering area in a browser in case you're unfamiliar with the term.

    The viewport is the default positioning context for elements with position: absolute;. If you want to make the positioning context a table cell, you need to use position: relative; on the relevant table cell element. If you want to make a whole table the positioning context, you need to use position: relative; on the relevant table element.

    As the below demo illustrates, Chrome 15 (beta channel), Opera 11.5, and Safari 5.1 have no problems with the aforementioned technique when used with both HTML- and CSS-based tables. However, as the below demo also illustrates, there are browser compatibility issues when using a table as a positioning context in other browsers.

    Internet Explorer 9 doesn't render the bottommost image in the correct location.

    Firefox 8 (beta 6) simply ignores position: relative; as a means for setting the positioning context when used on tables. Supposedly, the bug is as of September 29, but the fix is apparently not in the current beta build.

    I tried using a buffer element (i.e., an element between the table cell element and the content to be positioned) as the positioning context in the last two examples in hopes that that would allow one to bypass this problem in Firefox and Internet Explorer. This improved the rendering somewhat in Firefox because the positioned content is at least somewhat near where it's supposed to be, but the positioning remained incorrect. This made things worse in Internet Explorer and Opera when using a CSS-based table.

    Code:
    <?xml version="1.0"?>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
    	<head>
    		<title>Demo</title>
    		<style>
    			* { margin: 0; }
    			html { background-color: white; color: black; font-family: sans-serif; font-size: 50%; }
    			.box { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; text-align: center; }
    			.bounding_box { width: 350px; height: 350px; }
    			.satellite, .center { box-shadow: 0.5em 0.5em palegoldenrod; }
    			.satellite { display: block; overflow-x: auto; background-color: slategray; color: white; line-height: 75px; }
    			.top { bottom: auto; }
    			.left { right: auto; z-index: -1; }
    			.center { background-color: beige; line-height: 200px; }
    			.right { left: auto; z-index: 1; }
    			.bottom { top: auto; }
    			
    			table, td, .pseudo-table, .pseudo-table-cell { border: 0.5em solid silver; }
    			table, .pseudo-table { display: table; margin: 1em auto; border-spacing: 0; width: 400px; height: 400px; }
    			td, .pseudo-table-cell { display: table-cell; border-color: lightgray; }
    			.pseudo-table-row-group { display: table-row-group; }
    			.pseudo-table-row { display: table-row; }
    			.buffer_element { height: 100%; }
    			
    			.context_is_table, .context_is_table_cell, .context_is_buffer_element .buffer_element { position: relative; }
    		</style>
    	</head>
    	<body>
    		<table class="context_is_table">
    			<!-- Note: This is not proper usage of an HTML table; this table is not being used for data association. -->
    			<tbody>
    				<tr>
    					<td>
    						<div class="bounding_box box">
    							<img class="top box satellite" width="75" height="75" alt="Top Image" src=""/>
    							<img class="left box satellite" width="75" height="75" alt="Left Image" src=""/>
    							<img class="center box" width="200" height="200" alt="Center Image" src=""/>
    							<img class="right box satellite" width="75" height="75" alt="Right Image" src=""/>
    							<img class="bottom box satellite" width="75" height="75" alt="Bottom Image" src=""/>
    						</div>
    					</td>
    				</tr>
    			</tbody>
    		</table>
    		<div class="context_is_table pseudo-table">
    			<div class="pseudo-table-row-group">
    				<div class="pseudo-table-row">
    					<div class="pseudo-table-cell">
    						<div class="bounding_box box">
    							<img class="top box satellite" width="75" height="75" alt="Top Image" src=""/>
    							<img class="left box satellite" width="75" height="75" alt="Left Image" src=""/>
    							<img class="center box" width="200" height="200" alt="Center Image" src=""/>
    							<img class="right box satellite" width="75" height="75" alt="Right Image" src=""/>
    							<img class="bottom box satellite" width="75" height="75" alt="Bottom Image" src=""/>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    		<table class="context_is_table_cell">
    			<!-- Note: This is not proper usage of an HTML/XHTML table; this table is not being used for data association. -->
    			<tbody>
    				<tr>
    					<td>
    						<div class="bounding_box box">
    							<img class="top box satellite" width="75" height="75" alt="Top Image" src=""/>
    							<img class="left box satellite" width="75" height="75" alt="Left Image" src=""/>
    							<img class="center box" width="200" height="200" alt="Center Image" src=""/>
    							<img class="right box satellite" width="75" height="75" alt="Right Image" src=""/>
    							<img class="bottom box satellite" width="75" height="75" alt="Bottom Image" src=""/>
    						</div>
    					</td>
    				</tr>
    			</tbody>
    		</table>
    		<div class="context_is_table_cell pseudo-table">
    			<div class="pseudo-table-row-group">
    				<div class="pseudo-table-row">
    					<div class="pseudo-table-cell">
    						<div class="bounding_box box">
    							<img class="top box satellite" width="75" height="75" alt="Top Image" src=""/>
    							<img class="left box satellite" width="75" height="75" alt="Left Image" src=""/>
    							<img class="center box" width="200" height="200" alt="Center Image" src=""/>
    							<img class="right box satellite" width="75" height="75" alt="Right Image" src=""/>
    							<img class="bottom box satellite" width="75" height="75" alt="Bottom Image" src=""/>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    		<table class="context_is_buffer_element">
    			<!-- Note: This is not proper usage of an HTML/XHTML table; this table is not being used for data association. -->
    			<tbody>
    				<tr>
    					<td>
    						<div class="buffer_element">
    							<div class="bounding_box box">
    								<img class="top box satellite" width="75" height="75" alt="Top Image" src=""/>
    								<img class="left box satellite" width="75" height="75" alt="Left Image" src=""/>
    								<img class="center box" width="200" height="200" alt="Center Image" src=""/>
    								<img class="right box satellite" width="75" height="75" alt="Right Image" src=""/>
    								<img class="bottom box satellite" width="75" height="75" alt="Bottom Image" src=""/>
    							</div>
    						</div>
    					</td>
    				</tr>
    			</tbody>
    		</table>
    		<div class="context_is_buffer_element pseudo-table">
    			<div class="pseudo-table-row-group">
    				<div class="pseudo-table-row">
    					<div class="pseudo-table-cell">
    						<div class="buffer_element">
    							<div class="bounding_box box">
    								<img class="top box satellite" width="75" height="75" alt="Top Image" src=""/>
    								<img class="left box satellite" width="75" height="75" alt="Left Image" src=""/>
    								<img class="center box" width="200" height="200" alt="Center Image" src=""/>
    								<img class="right box satellite" width="75" height="75" alt="Right Image" src=""/>
    								<img class="bottom box satellite" width="75" height="75" alt="Bottom Image" src=""/>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    Byo476 (11-04-2011)

  • #9
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I like the note in the code: "This is not the proper usage of HTML..." A coder with pride...nice

  • #10
    New Coder
    Join Date
    Oct 2011
    Posts
    11
    Thanks
    7
    Thanked 0 Times in 0 Posts
    This helped a lot, thanks!


  •  

    Posting Permissions

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