vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB3 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=168)
-   -   Odd paddings/margins with images in ad_navbar_below (https://vborg.vbsupport.ru/showthread.php?t=181702)

kevinmanphp2 06-06-2008 03:39 PM
Odd paddings/margins with images in ad_navbar_below
 
I want to place 5 square graphics in the 'ad_navbar_below' template, so that they are inline and are butted up against each other (in other words, no padding or margins).

So in my 'ad_navbar_below' template, I have the following:

HTML Code:
<div>
  <img src="http://www.mysite.com/square1.gif" />
  <img src="http://www.mysite.com/square2.gif" />
  <img src="http://www.mysite.com/square2.gif" />
  <img src="http://www.mysite.com/square2.gif" />
  <img src="http://www.mysite.com/square2.gif" />
</div>
This works to display the images inline under the navbar, but there is about a 5-6 pixel right-padding on each of the images... essentially spacing them out 5 to 6 pixels from each other. Since I want them to touch each other, this is not working for me.

I have tried setting each <img> tag's style to have margin: 0px and padding: 0px with no luck... ex:

<img src="http://www.mysite.com/square1.gif" style="padding: 0px; margin: 0px;" />

This has no effect on getting rid of the gaps between the square images.

Anyone know what could be causing this? I'm using my Web Developer Toolbar in Firefox to highlight the Element Information to see what those extra gaps belong too... but they aren't being picked up by that either.

Looking for any guidance or help.. thanks so much.

Attitude5ire 06-08-2008 07:19 PM
Can you post a working example of this, there might be div properties interfering somewhere. But the code you wrote should pretty much stick everything together.

p.s use proper img code for validation <img src="" alt="" border="" />

Deepdog009 06-10-2008 05:11 AM
Quote:
Originally Posted by kevinmanphp2 (Post 1542404)
I want to place 5 square graphics in the 'ad_navbar_below' template, so that they are inline and are butted up against each other (in other words, no padding or margins).

So in my 'ad_navbar_below' template, I have the following:

HTML Code:
<div>
  <img src="http://www.mysite.com/square1.gif" />
  <img src="http://www.mysite.com/square2.gif" />
  <img src="http://www.mysite.com/square2.gif" />
  <img src="http://www.mysite.com/square2.gif" />
  <img src="http://www.mysite.com/square2.gif" />
</div>
This works to display the images inline under the navbar, but there is about a 5-6 pixel right-padding on each of the images... essentially spacing them out 5 to 6 pixels from each other. Since I want them to touch each other, this is not working for me.

I have tried setting each <img> tag's style to have margin: 0px and padding: 0px with no luck... ex:

<img src="http://www.mysite.com/square1.gif" style="padding: 0px; margin: 0px;" />

This has no effect on getting rid of the gaps between the square images.

Anyone know what could be causing this? I'm using my Web Developer Toolbar in Firefox to highlight the Element Information to see what those extra gaps belong too... but they aren't being picked up by that either.

Looking for any guidance or help.. thanks so much.
***********************************************

kevinmanphp2,,,
Use a bit of CSS to do the trick...

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS display Inline</title>
<style>
img {display: inline;
float:left;
}
</style>
</head>

<body>
<div>
  <img src="http://www.mysite.com/square1.gif" />
  <img src="
http://www.mysite.com/square2.gif" />
  <img src="http://www.mysite.com/square2.gif" />
  <img src="http://www.mysite.com/square2.gif" />
  <img src="http://www.mysite.com/square2.gif" />
</div>
</body>
</html>
Add this to your header area of template or Html file...>>>

HTML Code:
<style>
img {display: inline;
float:left;
}
</style>
Good Luck 2 Ya!!!


All times are GMT. The time now is 05:27 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01037 seconds
  • Memory Usage 1,736KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (4)bbcode_html_printable
  • (1)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (3)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete