Solved

How can I center this?

Posted on 2011-09-21
9
224 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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&amp;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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
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 the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

708 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

16 Experts available now in Live!

Get 1:1 Help Now