Solved

How can I center this?

Posted on 2011-09-21
9
229 Views
Last Modified: 2012-05-12
How can I center the crossloop widget on the page? I want it to be in the same spot, just centered instead of to the left? I was never good at doing divs.

Also if I want to have some text to the left or right how can I do that?

site is:
http://dantechmsp.com/flashsite/


Thank you
0
Comment
Question by:DantechIT
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
9 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36578175
add this style in your css

.contentpaneopen tbody tr td div div
{
  margin-right:0;
  margin-left:400px;
}
0
 
LVL 18

Expert Comment

by:Rartemass
ID: 36578296
While gurvinder's styling does centre the image, it may cause issues when scaling to different screen resolutions, windows sizes and phones.
I would suggest using percentages rather than pixels.
Setting a left margin to 40% instead of 400px centres the box, and will scale with size as it will be 40% of the available window.
This is why I also use either percentages or ems in CSS.
0
 

Author Comment

by:DantechIT
ID: 36578313
I made that change to the css file but I didn't see any change. Is there a way to do this in the html? It's a joomla site by the way.
0
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 

Author Comment

by:DantechIT
ID: 36578321
This is the div I want to center:

<div>
<script src="blahblahblah"></script>
</div>
0
 
LVL 18

Assisted Solution

by:Rartemass
Rartemass earned 500 total points
ID: 36578324
Seeing how you also want to add content to the left and right, you can do this another way.
You have a table for the moment.
If you place that table in a div (<div><table>...</table></div>) then you can control the table's position within that div.
To add in left and right content you can add in more divs.
<div id="outer">
   <div id="left">Left content</div>
   <div id="middle"><table>...</table></div>
   <div id="right">right content</div>
</div>

You can then float the divs left, middle, and right so they will flow with each other. Setting sizes (in ems or percentage) for each div inside the outer div will help ensure they each get the screen space they need. So if you set each inner div to a total width of 100%, they will fit fairly well.
This would change the CSS that has been provided by gurvinder however as the layout would be quite different with this modified layout.

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36578338
basically, the divs rendered by the script
https://www.crossloop.com/widgetjs/pro_contact_widget.js?accountid=1183293&bgcolor=black

is giving the margin-right: 761px;
so, you need to over-ride the same,

may you can update the CSS for that document after the document is ready
0
 

Accepted Solution

by:
DantechIT earned 0 total points
ID: 36578390
Ok I did this:

<div id="outer">
   <div id="left">Left content</div>
   <div id="middle"><table>...</table></div>
   <div id="right">right content</div>
</div>

and that centered it but how do I add the percentages?
0
 
LVL 18

Assisted Solution

by:Rartemass
Rartemass earned 500 total points
ID: 36578438
In the CSS you set the width to the desired percentage.
For example:
#outer {
width:100%
}
#left {
width:35%
}
#middle {
width:30%
}
#right {
width:35%
}
0
 

Author Closing Comment

by:DantechIT
ID: 36597838
Thank you!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question