[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How can I center this?

Posted on 2011-09-21
9
Medium Priority
?
244 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
  • 4
  • 3
  • 2
9 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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 2000 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:Gurvinder Pal Singh
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 2000 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

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.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

872 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