...

View Full Version : What tag to wrap img with second border?



hotwheelharry
04-26-2011, 11:36 AM
What can I wrap an img tag in to give it a double border effect and center it without introducing the hassles of div tags? Span and anchor don't work cause they only show up on the bottom of the image and not wrapped around it.

---------------------------------------------
|...................(V centered V).....................|
|...........________________________...........|
|...........|..........2nd border............|..........|
|...........|...___________________...|..........|
|...........|...|.............................|..|..........|
|...........|...|......IMG..................|..|..........|
|...........|...|.............................|..|..........|
|...........|...|__________________|..|..........|
|...........|_______________________|..........|
|............................................................|
--------------------------------------------|

bullant
04-26-2011, 11:39 AM
One option is to wrap the image in a div and then use javascript to size the div according to the dimensions of the image.

You can then use css positioning to put the image wherever you like within the div.

oesxyl
04-26-2011, 11:43 AM
What can I wrap an img tag in to give it a double border effect and center it without introducing the hassles of div tags? Span and anchor don't work cause they only show up on the bottom of the image and not wrapped around it.

---------------------------------------------
|...................(V centered V).....................|
|...........________________________...........|
|...........|..........2nd border............|..........|
|...........|...___________________...|..........|
|...........|...|.............................|..|..........|
|...........|...|......IMG..................|..|..........|
|...........|...|.............................|..|..........|
|...........|...|__________________|..|..........|
|...........|_______________________|..........|
|............................................................|
--------------------------------------------|
a p tag? did you tried to put display: block to span or anchor?

best regards

hotwheelharry
04-26-2011, 11:52 AM
I don't want to have to use javascript on the page. Too messy just to accomplish centering image.

I tried span and a tag with display:block and margin:auto;.
If they are not display block, they are centered but they do not size to fit the image. When they are block, they fit the image height-wise but then expand to fill the div width-wise and effectively not centered.

What is this nonsense?

My code is as simple as can be...




//----------css----------

.visualDissapointmentIndicator
{
padding-top: 40px;
text-align: center;
}
.visualDissapointmentIndicator .photoBorders
{
padding: 5px;
background-color: #eeeeee;
border: 1px solid black;
height: 100%;
display: block;
margin: auto;
}
.visualDissapointmentIndicator .photoBorders img
{
padding: 0px;
border: 1px solid #989898;
}

//-------------html--------

<div class="visualDissapointmentIndicator">
<center>
<a class="photoBorders">
<img src="hack img/unacceptable/penguin.png" width="300" height="350"/>
</a>
</center>
</div>

bullant
04-26-2011, 12:02 PM
block level elements take up 100% of their parent element's width by default.

If you need to centre an element within it's parent, it needs to be assigned a width and then assign auto to its left and right margins.

To centre elements vertically, there are plenty of examples on the interweb.

abduraooft
04-26-2011, 12:04 PM
I'd do it as follows

<a class="photoBorders" href="#">
<img src="hack img/unacceptable/penguin.png" width="300" height="350"/>
</a>

.photoBorders
{
text-align:center;
background-color: #eeeeee;
border: 1px solid black;
display: block;
padding: 20px;
}
.photoBorders img
{
border: 1px solid #989898;
}

oesxyl
04-26-2011, 12:11 PM
I don't want to have to use javascript on the page. Too messy just to accomplish centering image.
i didn't suggest to use javascript and i don't think you need it, :)

is better if we can see a test page online, if you can post a link.

a guess:


a.photoBorders {
display: block;
width: 300px; /* or ajust to fit as you need */
margin: 0 auto;
}

//-------------html--------

<div class="visualDissapointmentIndicator">
<a class="photoBorders">
<img src="hack img/unacceptable/penguin.png" width="300" height="350"/>
</a>
</div>


best regards

hotwheelharry
04-26-2011, 12:24 PM
Here, take a look at what I have. I got it centered.

How can I make the span around the image actually surround the whole image.

http://blackops.infinimous.com/res/paper.html

oesxyl
04-26-2011, 12:28 PM
Here, take a look at what I have. I got it centered.

How can I make the span around the image actually surround the whole image.

http://blackops.infinimous.com/res/paper.html



.visualDissapointmentIndicator .photoBorders {
background-color:#EEEEEE;
border:1px solid black;
display:block;
padding:5px;
text-align:center;
width:312px; /* img width + 2* (padding + border) */
}


best regards

hotwheelharry
04-26-2011, 12:39 PM
Do I really need to calculate the width with borders to be able to do this... it seems so inflexible.

I have similar code on many webpages and i can't recalculate all their widths if I change images.

You would think by now you could do this real easy with some simple css like..

container{shrink-fit:true; position: x-center;} /* DONE! */

...if only. W3C stinks.

oesxyl
04-26-2011, 12:57 PM
Do I really need to calculate the width with borders to be able to do this... it seems so inflexible.

I have similar code on many webpages and i can't recalculate all their widths if I change images.
i don't know if you can avoid to compute width, is needed to center the element.
how you can determine if is centered if you don't know the width.
if the content is generated somehow maybe you can automate the process, i don't know, :)

best regards

bullant
04-26-2011, 12:59 PM
you can use a quick and simple javascript function to size the divs automatically according to the actual dimensions of the images within them.

just create a new Image object for each image and the object's width and height properties are the actual size of the image in px. Then set the height and width of the div to whatever you like based on the Image object's width and height values.

hotwheelharry
04-26-2011, 01:07 PM
Ok, ill just use javascript then. Thanks for the help guys.

bullant
04-26-2011, 01:10 PM
no problem :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum