Hey so I have a div containing 3 links which have a background url image making them appear as an image
Here is my css classes
/* calculate button */
.fc-calculate {text-align: center; padding: 12px 0; display: }
.fc-calculate-button {margin: 0 auto; width:200px;}
.fc-calculate-button a {line-height: 21px; height: 21px; background: url(../../images/SOURCE/btn_grn_r.gif) 100% 0 no-repeat; width: auto; display: block; float: left; padding-right: 30px;}
.fc-calculate-button a span {display: block; float: left; background: url(../../images/SOURCE/btn_grn_l.gif) 0 0 no-repeat; line-height: 21px; height: 21px; padding-left: 12px; color: #fff;}
And mark up as follows
<div class="fc-calculate">
<div class="fc-calculate-button">
<sc:link field="Link One" cssClass="">
<span class="btnspan">
<sc:text select="." field="Link One Text" />
</span>
</sc:link>
</div>
<!-- /fc-calculate-button -->
<div class="fc-calculate-button">
<sc:link field="Link Two" cssClass="">
<span class="btnspan">
<sc:text select="." field="Link Two Text" />
</span>
</sc:link>
</div>
<!-- /fc-calculate-button -->
</div>
The issue is that instead of the links appearing next to eachother and centered they are appearing beneath eachother
You're floating your anchor and your spans but not your .fc-calculate-button class, if you want to display both containers side by side and center them on its container try this:
CSS
.fc-calculate {
text-align:center;
}
.fc-calculate-button {
display:inline-block;
*display:inline; /* ie7 fix */
zoom:1; /* hasLayout ie7 trigger */
}
divs are inherently display:block. Try adding this:
.fc-calculate {margin: 0 auto; text-align: center; padding: 12px 0;}
.fc-calculate-button {display:inline; margin: 0 auto; width:200px;}
Related
My sidepanel doesn't float right properly. It acts (for some reason) as if there's a top margin, it refuses to align next to the page title.
I'm also attempting to make it responsive using <aside>
It should be here:
My main content sits in a max-width:1050px, the rowSidepanel should make a column of width:60%, I assumed the sidebar would too make a column of width:27%; float:right; all within that pageArea.
I've inspected element and tried to force top:0; etc but it is still not behaving itself.
Does anyone know what I am doing wrong? .
HTML
<div id="pageArea">
<div class="colPad">
<div class="rowSidepanel">
<!-- InstanceBeginEditable name="main content" -->
<div class="breadCrumb"> Home <span style="font: Georgia;"> > </span> Repertoire</div>
<h1>Repertoire</h1>
<p class="introPara">Intro</p>
<p>Main content....</p>
<!-- InstanceEndEditable -->
</div>
<aside id="sidebar">
<div class="sidepanelArea"> Sidepanel </div>
</aside>
</div>
</div>
<div class="clearBoth"></div>
CSS
#pageArea {
max-width: 1050px;
margin: 0px auto 0px auto;
padding: 134px 0px 0px 0px;
display: block;
background-image:url("/images/common/centered-page-bg.jpg");
background-repeat: no-repeat;
background-position: 0% 12%;
min-height: 667px;
z-index: 1;
overflow: hidden;
position: relative;
}
.colPad {
padding: 0px 15px 0px 15px;
}
.rowSidepanel {
width: 60%;
}
aside {
float: right;
padding: 1%;
width: 27%;
margin: 0% 0px 20px 0px;
background-color:#000;
color: white;
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
}
#media all and (max-width : 799px) {
#sidebar {
width: 99%;
padding: 1% 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-top: 3px solid #dc1b20;
background-color: #FFF;
color: black;
}
}
Your .rowSidepanel is displayed block and no matter of his width he is assigned to be across all screen. Just make him float: left;
.rowSidepanel {
width: 60%;
float: left;
}
Your #breadcrumb, repertoire header, and paragraph element are all block elements and are thus taking up the entire width of the browser (and pushing down your sidebar).
You should group those other elements into a container div of their own and flow that left. Apply background colors to both divs (the one floated left and the one floated right) to visualize what you're doing.
Try changing the div order, #rowSidepanel before #sidebar.
http://codebins.com/bin/4ldqosu
I am lining up a span with an image background next to a list of images and the span shows up about 40px below the images (I want them to be lined up right next to them)
Here is my html
<div id="people">
<img width="44" height="44" src="http://www.mysite.com/image.png" class="personImage" rel="/Person/CorpInfo/74" title="Name">
<img width="44" height="44" src="http://www.mysite.com/image2.png" class="personImage" rel="/Person/CorpInfo/79" title="Name">
<span class="initials" rel="/Person/CorpInfo/839" title="Name">YA</span>
<img width="44" height="44" src="http://www.mysite.com/image3.png" class="personImage" rel="/Person/CorpInfo/49" title="Name">
</div>
As you can see, I am showing a list of images but in certain cases, I show a span with their initials and a background "generic" picture. As mentioned, for some reason, the span is showing up lower than the images.
Here is the css for this "initials" span (if that helps)
.initials
{
display: inline-block;
font-size: 24px;
vertical-align: middle;
height: 44px;
left: 0;
top: 0;
line-height: 44px;
font-weight: 500;
overflow: hidden;
background: url('/content/Images/generic1small.png') no-repeat 0 0;
text-align: center;
width: 44px;
}
and here is the css for the "personImage class
.personImage
{
display:inline;
}
If I apply this hack, it seems to line up:
<style type="text/css">
.initials { margin: -40px 5px 0px 0px;}
</style>
but I really want to avoid this as its causing some other issues on my page (not relevant for this question).
Any idea why I can't get this span to line up against these images?
Have you tried changing
.initials {
vertical-align: middle;
}
to
.initials {
vertical-align: top;
}
So I have a div which will contain 3 buttons and I want these buttons centered within the div.
I tried this so far
.centerButtons
{
margin-left: auto;
margin-right: auto;
width: 90%;
}
Which centers the div containing the buttons which is fine, but the actual buttons within this div are not centered..This is my mark up so far..
<div class="clearfixLeft clearfix centerButtons">
<xsl:if test="sc:fld('Link One', .)!=''">
<div class="fl_left mr_7 mt_10">
<div class="green-btn-solid">
<sc:link field="Link One">
<span class="btnspan">
<sc:text select="." field="Link One Text" />
</span>
</sc:link>
</div>
</div>
</xsl:if>
...
</div>
Additional Classes
/* link styles */
.green-btn-solid {line-height: 21px; height: 21px; background: url(../../images/SOURCE/btn_grn_r.gif) 100% 0 no-repeat; width: auto; display: block; padding-right: 30px; }
.green-btn-solid span {display: block; float: left; background: url(../../images/SOURCE/btn_grn_l.gif) 0 0 no-repeat; line-height: 21px; height: 21px; padding-left: 12px; color: #fff;}
Have you tried text-align: center;? I'm pretty sure it works on elements as well.
Use text-align
.centerButtons {
text-align: center;
}
which will center all inline children of class centerButtons
text-align on the centerButtons class will work if your button is an inline element. If your button is a block-level element, you will need to define it's width and use margin: auto like you did with the centerButtons element.
I'm using CSS buttons from this tutorial:
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
I need to put a button in the middle of a DIV so it's centered. But I can't!
Here's the code of the button:
<a class="button" href="#"><span>Bring world peace</span></a>
And here's CSS:
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button {
background: transparent url('bg_button_a.gif') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button span {
background: transparent url('bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
Here's the code I'm trying to use:
<div align="center"><a class="button" href="#"><span>Bring world peace</span></a></div>
the align attribute for the div element is deprecated. You're better off defining a class for that div, like so:
<div class="centerize">
<a class="button" href="#"><span>Bring world peace</span></a>
</div>
And the CSS:
.centerize {
text-align: center;
}
Note however that setting the text-align will only affect the content inside the div. The div itself (should be) a block element, and depending on where it sits in the document structure, may not be centered itself.
Just to make a little more certain, you can do something like this:
.centerize {
display: block;
margin: 0 auto;
text-align: center;
}
Now you can apply centerize to any element, and that element should take up the entire browser's width and center-align its content.
Modify the button class for these properties:
.button{
margin-left:50%;
margin-right:50%;
position: relative;
}
And wrap your link in the div like this:
<div align="center">
<a class="button" href="#"><span>Bring world peace</span></a>
</div>
The a.button is floated to the left. You could try float: none; on that element. margin: 0 auto; is also useful for center-aligning elements.
Does that help?
I am using the following code to display a list of images and apply a drop shadow effect to each image. The images may vary in orientation but will always be a maximum of 120px.
To get this to work I am having to float:left the "shadow" container. By adjusting the margins of the container and it's image, I am able to simulate a drop shadow. (http://img200.imageshack.us/i/withfloat.png/)
The downside of this approach is that the image then becomes left aligned. If I remove the float the .shadow background spans the full width of the li and does not wrap the image.
(see above url but "withoutfloat.png")
How can I get the shadow div to wrap the image and keep it centered within the li?
Css:
<style type="text/css">
ul
{
list-style-type: none;
position: relative;
margin: 0;
padding: 0;
}
li.box
{
display: inline;
float: left;
margin: 3px;
background: red;
position: relative;
}
.wraptocenter
{
display: table-cell;
text-align: center;
vertical-align: middle;
width: 120px;
height: 120px;
}
.wraptocenter *
{
vertical-align: middle;
}
.shadow
{
background: blue;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.shadow img
{
margin: -4px 6px 6px -4px;
}
</style>
Html:
<ul>
<li class="box">
<div class="wraptocenter">
<span>
<div class="shadow">
<img src="Handler.ashx?id=936&size=103" />
</div>
</span>
</div>
</li>
</ul>
Remove the float but add overflow:auto to the containing element. That will make the non-floating element contain its inner floating elements the way you expect.