• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 192
  • Last Modified:

Once again, centering objects in a div

Hello,

I have two items that I am trying to center in divs, but haven't had much luck.

I think the problem may be that I don't want to declare the overall width in pixels -- since this is a responsive design and I want it to look good in a cell phone.  But maybe I have no choice but to declare an overall width.

This is what I have so far -- for the video -- and is clearly "wrong":
div#media-item-container {
    width: 100%;
  margin-left: auto ;
  margin-right: auto ;
}

div.media-item-container {
    width: 100%;
  margin-left: auto ;
  margin-right: auto ;
}

Open in new window


I haven't tried any code so far for the amazon thing.

Anyway here's the URL of the development site:

http://www.rowbytesting.com

The two areas that I want to center are the both in the right side of the page.

1)  the video
2)  The amazon widget.

Looking forward to you suggestions -- and solution!

Thanks

Rowby
0
Rowby Goren
Asked:
Rowby Goren
  • 10
  • 7
  • 3
2 Solutions
 
Scott Fell, EE MVEDeveloperCommented:
For the video, add text-align-center to the div just above the iframe

<div class="media-item-full" id="media-item" style="width:100%;text-align: center;">
                    <iframe src="http://player.vimeo.com/video/77947145?title=0&amp;autoplay=false&amp;byline=0&amp;portrait=0" width="250" height="187.5" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="
    /* text-align: center; */
"></iframe>	
</div>

Open in new window


I am not sure I see the amazon widget
0
 
Scott Fell, EE MVEDeveloperCommented:
I see it.  At the bottom of your custom.css add this style

.amazon{text-align:center;}
0
 
Scott Fell, EE MVEDeveloperCommented:
While you are at it... http://www.rowbytesting.com/awards-honors-a-nominations make the table here a little narrower and again to your custom css add

td, th {vertical-align:text-top;} and that will keep it neat when it wraps.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Rowby GorenAuthor Commented:
Thanks Scott for helping me with this.

The video is a module where I can't easily add anything to the html.

However firebug reveals it has this in its html structure:
div class uk-panel uk-panel-box  sidebarVideo

Can we use css to control above -- instead of embedding it in the html?

I put .amazon{text-align:center;}  at the end of the custom.css but it does not seem to affect the amazon widget.

Thanks!

Rowby
0
 
Rowby GorenAuthor Commented:
td, th {vertical-align:text-top;} 

Open in new window


Added that. Yes, it works great!
0
 
Scott Fell, EE MVEDeveloperCommented:
You can't easily target the iframe.   But you can center the iframe by adding to your custom.css

.media-item-full{text-align:center;}

and that will target the div that contains the iframe.

<div class="media-item-full" id="media-item" style="width:100%;">
                    <iframe src="http://player.vimeo.com/video/77947145?title=0&autoplay=false&byline=0&portrait=0" width="250" height="187.5" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>      
                    </div>



For the amazon, it has changed since I last posted.  Remove the .amazon class in your css and instead edit the widget directly.   Add width:98% and margin-left:1%.  That will make the widget take up most of the width with a little bit of white space.  Or you can try 96% and 2%.

<div id="amzn_wdgt_t_8001_0" class="amzn_wdgt" style="color: rgb(234, 228, 147); background-color: rgb(74, 102, 118); width: 98%; padding-top: 0px; padding-bottom: 0px; background-position: initial initial; background-repeat: initial initial;margin-left: 1%;">
0
 
Rowby GorenAuthor Commented:
Hi

The video is nicely centered.  Thanks!

However the Amazon widget is delivered from amazon  

 The code that pulls in the amazon widget is
	<script charset="utf-8" src="http://ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&amp;MarketPlace=US&amp;ID=V20070822%2FUS%2Fgeorgschla-20%2F8001%2F4db30f9d-1c87-40a3-a239-dc548bf73da5" type="text/javascript"></script>
</p>
<noscript><a href="http://ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&amp;MarketPlace=US&amp;ID=V20070822%2FUS%2Fgeorgschla-20%2F8001%2F4db30f9d-1c87-40a3-a239-dc548bf73da5&amp;Operation=NoScript">Amazon.com Widgets</a>
</noscript>

Open in new window


Can the above be centered?  Or will amazon's served widget ignore any code I include....

Maybe right and left padding???
0
 
Scott Fell, EE MVEDeveloperCommented:
You need to go to your amazon account and change the width there.  Otherwise you run into the cross domain stuff.  If you have access to the widget, that would be the easiest.
0
 
Julian HansenCommented:
You could also try adding this to your stylesheet

.amzn_wdgt {
   margin: 0 auto;
}

Open in new window

0
 
Rowby GorenAuthor Commented:
I added a div and then was able to control margins with this css:

div#amazzonn {
    margin: 0 auto 5px 25px;
    padding-left: 5px;
    padding-right: 5px;
}

Open in new window


(I realize I probably overdid it with both margin and padding declarations)
Do you think there is any way to modify the above to center (without the margins/padding?

(I will probably go into Amazon later and finally make the module wider so it fills the area better -- but I still would like to have it centered, but may setting for just a little bit of padding/margins on the right and left and a little on the bottom...)
0
 
Julian HansenCommented:
Did you try the suggestion in my last post. Works in Firebug when you add the style ...
0
 
Rowby GorenAuthor Commented:
I thought i tried it but will try it again.
0
 
Scott Fell, EE MVEDeveloperCommented:
I would still make the thing wider.  I liked the look when it filled most of the space but not all.
0
 
Rowby GorenAuthor Commented:
Hi JulianH

I tried it but couldn't get it to work.  The actual css is located at amazon.com, not locally,  could that be the reason?

Could you check again?

Thanks

Rowby
0
 
Rowby GorenAuthor Commented:
I would still make the thing wider.  I liked the look when it filled most of the space but not all.

I agree.  I will finally make it wider.
0
 
Rowby GorenAuthor Commented:
Finally (or should I open a new question)

Why isn't this slideshow centered?

http://www.rowbytesting.com/laugh-in/laugh-in-pov
I have this css:

div#centeringwidgekits {
    width: 100% ;
  margin-left: auto ;
  margin-right: auto ;
  
}

Open in new window


????
0
 
Scott Fell, EE MVEDeveloperCommented:
Rowby, my bad for adding off topic info like the table.  You should really put that to another question.  Actually, instead of just this one item, think about using the bug finder (top right link) and place your site there.  

There are a number of issues that will come to light beyond just slider.  Just be prepared to do with those.   If you want to just stick to the slider, then a new question is fine.
0
 
Rowby GorenAuthor Commented:
Hi

I'll check out the bug finder -- sounds like a good idea.

In the meantime look for my question that I will post shortly.

Rowby
0
 
Julian HansenCommented:
I tried it but couldn't get it to work.  The actual css is located at amazon.com, not locally,  could that be the reason?

Where did you try?

If you add it to your style sheet and make it important it should do the trick.

.amzn_wdgt {
   margin: 0 auto !important;
}

Open in new window

0
 
Rowby GorenAuthor Commented:
Hi JulianH

I added your code.  I think it is working.  :)  Please confirm.

Thanks

Rowby
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 10
  • 7
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now