Solved

How can I center this?

Posted on 2011-09-21
9
225 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: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
 

Author Comment

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

<div>
<script src="blahblahblah"></script>
</div>
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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…

919 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now