Quantcast CSS DIV styling to center a vertical image? - digitalFAQ Forum
  #1  
11-20-2012, 05:28 AM
Dusty.Doddridge Dusty.Doddridge is offline
Premium Member
 
Join Date: Oct 2012
Posts: 9
Thanked 3 Times in 2 Posts
Quick question and I'm sure the answer is easy…but…

Am trying to place some vertical images in my table which we styled like this to create space between the images.
HTML Code:
<div style="margin-top:30px;"></div>
Is there a way to individually center a vertical image? Right now, it's pushed to the left of the table cell.
Reply With Quote
Someday, 12:01 PM
admin's Avatar
Ads / Sponsors
 
Join Date: ∞
Posts: 42
Thanks: ∞
Thanked 42 Times in 42 Posts
  #2  
11-20-2012, 05:33 AM
kpmedia's Avatar
kpmedia kpmedia is offline
Site Staff | Web Hosting, Photo
 
Join Date: Feb 2004
Posts: 4,242
Thanked 354 Times in 332 Posts
Yep, it is an easy one.

What we had setup is a single table column, and inside it used HTML for doing two things: CSS spacing and calling images. It alternated down the page: space, image, space, image, space, image. (For anybody else reading, the CSS was inline to keep it easy for the end-user to copy/paste, and have the ability to alter, without having to edit any style sheet.)

Instead of DIV then IMG, let's wrap the IMG in a DIV.

Old:
HTML Code:
<div style="margin-top:30px;"></div><img src="path/to/image.jpg">
New:
HTML Code:
<div style="margin:30px auto 0;"><img src="path/to/image.jpg"></div>
There's no "center" command in CSS -- stupid, yes -- but the workaround is to "auto" with margins. (The only downside to this is that only the top and left margins can then be specified. However, it's not a problem for this specific usage. The workaround to that workaround is to double wrap a DIV inside another DIV. Isn't CSS fun! )

Anyway, that simple nesting of the IMG tag inside the DIV should do exactly what you want.


____________


Need a good web host? — Read our 2018 Review of the Best Web Hosts
Quite often, problems with web sites are caused by having a rotten web host. Worse yet, many hosts try to blame you (the customer) for the problems! So dump that lousy company. Say goodbye to slow sites, unresponsive support techs, and downtime. Find yourself a new host today. Whether you need shared, reseller, VPS, semi-dedicated, cloud, or dedicated hosting, something on our list should be a good upgrade for you.


- Did my advice help you? Then become a Premium Member and support this site.
- Please Like Us on Facebook | Follow Us on Twitter

- Need a good web host? Ask me for help! Get the shared, VPS, semi-dedicated, cloud, or reseller you need.
Reply With Quote
  #3  
11-20-2012, 08:16 PM
Dusty.Doddridge Dusty.Doddridge is offline
Premium Member
 
Join Date: Oct 2012
Posts: 9
Thanked 3 Times in 2 Posts
Hey Chief--

Thanks for the advice. Looks like the fly is still in the CSS ointment? Or maybe the table style ointment?

Here's the code, I'll adjust the link later:
HTML Code:
<a href="http://dustydoddridge.photoshelter.com/gallery-image/Canyonlands-of-the-Southwest/G000036j5XZFn1.4/I0000pRjGloU38LU" target="_blank"></a>
<div style="margin:30px auto 0;"><img src="http://focalpointacademy.com/wp-content/uploads/2012/11/dd_20121109_9376_master.jpg"></div>
link so you can see the result:
http://focalpointacademy.com/photo-w...hwest-usa.html
Reply With Quote
  #4  
11-21-2012, 08:06 AM
kpmedia's Avatar
kpmedia kpmedia is offline
Site Staff | Web Hosting, Photo
 
Join Date: Feb 2004
Posts: 4,242
Thanked 354 Times in 332 Posts
Your code is in the wrong order.
What you're trying to do in that code is make a DIV have a link -- and that's not going to work.

This is the proper order:
HTML Code:
<div style="margin:30px auto 0;">
<a href="http://dustydoddridge.photoshelter.com/gallery-image/Canyonlands-of-the-Southwest/G000036j5XZFn1.4/I0000pRjGloU38LU" target="_blank">
<img src="http://focalpointacademy.com/wp-content/uploads/2012/11/dd_20121109_9376_master.jpg">
</a>
</div>
In plain English, the code can be interpreted as such:
  • DIV = Open a box, put my content (linked image) in it.
  • MARGIN 30px = Also make the box have breathing room above it.
  • MARGIN AUTO = center it
  • A HREF = Link my content (image) to some other webpage. Anything after this, but before the /A, is linked to it.
  • TARGET _BLANK = Open my link in a new window.
  • IMG SRC = Put my image here.
  • /A = Done linking content.
  • /DIV = Close the box.
If it's not done in the proper order, it won't work right. Like trying to put peanut butter on bread before sticking it in the toaster.

Easy.

- Did my advice help you? Then become a Premium Member and support this site.
- Please Like Us on Facebook | Follow Us on Twitter

- Need a good web host? Ask me for help! Get the shared, VPS, semi-dedicated, cloud, or reseller you need.
Reply With Quote
  #5  
11-21-2012, 12:23 PM
Dusty.Doddridge Dusty.Doddridge is offline
Premium Member
 
Join Date: Oct 2012
Posts: 9
Thanked 3 Times in 2 Posts
Thanks chief--

Still not behaving so maybe there is some peanut butter in the toaster...

Code as it appears in the table:
HTML Code:
<div style="margin:30px auto 0;"> <a href="http://dustydoddridge.photoshelter.com/gallery-image/Canyonlands-of-the-Southwest/G000036j5XZFn1.4/I0000pRjGloU38LU" target="_blank"> </a><img src="http://focalpointacademy.com/wp-content/uploads/2012/11/dd_20121109_9376_master.jpg"> </div>
Reply With Quote
  #6  
11-21-2012, 12:43 PM
lordsmurf's Avatar
lordsmurf lordsmurf is offline
Site Staff | Video
 
Join Date: Dec 2002
Posts: 8,488
Thanked 1,393 Times in 1,225 Posts
This one, right?

ddphoto.jpg

There may be some competing CSS going on, between the theme, the tables plugin, and the manual CSS. And it may be uncorrectable. Or at very least, hard as hell to adjust, without entirely rewriting lots and lots of CSS.

- Perhaps don't use verticals?
- Or simply live with it being left justified? (I think it looks fine that way.)



- Did my advice help you? Then become a Premium Member and support this site.
- Find television shows, cartoons, DVDs and Blu-ray releases at the TVPast forums.
Reply With Quote
  #7  
11-21-2012, 03:59 PM
Dusty.Doddridge Dusty.Doddridge is offline
Premium Member
 
Join Date: Oct 2012
Posts: 9
Thanked 3 Times in 2 Posts
Thanks lordSmurf--

Yep, will probably not use verticals in the end. Could also do a workaround in PS but not worth the time. Will probably just stick with the horziontals...

--DD
Reply With Quote
Reply




Similar Threads
Thread Thread Starter Forum Replies Last Post
Vertical stripe caused by TBC on Panasonic AG-1980 - why? moxiecat Capture, Record, Transfer 3 08-15-2011 02:10 PM
Need help with blue vertical lines max_cady Restore, Filter, Improve Quality 3 05-03-2011 04:24 AM
Vertical or horizontal for storing an external hard drive & best enclosures ? Sossity Computers 1 12-09-2010 07:26 PM
Quality of Media Center PC vs regular Digital TV...? musiclover7 Videography: Cameras, TVs and Players 12 12-11-2009 02:04 PM

Thread Tools



 
All times are GMT -5. The time now is 02:31 AM