...

View Full Version : Image Alignment



Byo476
11-01-2011, 04:25 AM
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?

teedoff
11-01-2011, 04:48 AM
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.

Byo476
11-01-2011, 07:16 AM
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.

Excavator
11-01-2011, 09:19 AM
Hello Byo476,
I think I would probably use ap for that. Give this a try -
<!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>

Arbitrator
11-01-2011, 11:43 AM
Any suggestions?Take two (with Excavator's code being "take one"):


<?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. :p

coothead
11-01-2011, 01:44 PM
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. :(


<!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

Byo476
11-01-2011, 04:56 PM
Thank you all but Arbitrator's version is the one that fits the most, I like the effects on yours, coothead :D

Arbitrator
11-04-2011, 08:40 AM
Please do not send private messages for help with requests that should remain within their respective threads.


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
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 (https://bugzilla.mozilla.org/show_bug.cgi?id=10209#c153), 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.


<?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>

codingwannabee
11-04-2011, 03:52 PM
I like the note in the code: "This is not the proper usage of HTML..." A coder with pride...nice

Byo476
11-04-2011, 06:03 PM
This helped a lot, thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum