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 14 of 14
  1. #1
    Regular Coder
    Join Date
    Jun 2008
    Posts
    102
    Thanks
    6
    Thanked 9 Times in 9 Posts

    What tag to wrap img with second border?

    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..................|..|..........|
    |...........|...|.............................|..|..........|
    |...........|...|__________________|..|..........|
    |...........|_______________________|..........|
    |............................................................|
    --------------------------------------------|

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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.

  • #3
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by hotwheelharry View Post
    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

  • #4
    Regular Coder
    Join Date
    Jun 2008
    Posts
    102
    Thanks
    6
    Thanked 9 Times in 9 Posts
    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...

    Code:
    //----------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>
    Last edited by hotwheelharry; 04-26-2011 at 12:54 PM.

  • #5
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I'd do it as follows
    Code:
    <a class="photoBorders" href="#">
    			<img src="hack img/unacceptable/penguin.png" width="300" height="350"/>
    		</a>
    Code:
    .photoBorders
    {
    	text-align:center;
    	background-color: #eeeeee;
    	border: 1px solid black;
    	display: block;
    	padding: 20px;
    }
    .photoBorders img
    {
    	border: 1px solid #989898;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by hotwheelharry View Post
    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:
    Code:
    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

  • #8
    Regular Coder
    Join Date
    Jun 2008
    Posts
    102
    Thanks
    6
    Thanked 9 Times in 9 Posts
    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

  • #9
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by hotwheelharry View Post
    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
    Code:
    .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

  • #10
    Regular Coder
    Join Date
    Jun 2008
    Posts
    102
    Thanks
    6
    Thanked 9 Times in 9 Posts
    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.

  • #11
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by hotwheelharry View Post
    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

  • #12
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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.
    Last edited by bullant; 04-26-2011 at 02:02 PM.

  • #13
    Regular Coder
    Join Date
    Jun 2008
    Posts
    102
    Thanks
    6
    Thanked 9 Times in 9 Posts
    Ok, ill just use javascript then. Thanks for the help guys.

  • #14
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    no problem


  •  

    Posting Permissions

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