[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

How can I center this?

Posted on 2011-09-21
9
Medium Priority
?
236 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: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
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.

 

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

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.

Question has a verified solution.

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

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 …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

656 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