I am attempting to center three buttons at the bottom of an MTML page and I cannot get them to center no matter what I try. Below is my last attempt. Any help appreciated!
HTML Code:
<div style="margin-left: auto;margin-right: auto">
<div class="btn-group">
Top
Page Two
Page Three
</div>
</div>
CSS Code:
.btn-group .button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
You just need to apply a center align to your parent div
text-align: center;
Check my answer in the following fiddle :
https://jsfiddle.net/9bm1n9vb/
I created a new css class just to avoid the inline css ;)
Related
I am using bootstrap 3.0 and the following is my HTML code , I am facing a problem with the background color.
HTML code
<div class="container" id="pictures">
<div class="row">
<div class="col-md-12">
<h1>Collection</h1>
</div>
</div>
</div>
CSS code (I have targeted the H1 tag using this css code)
#pictures h1 {
padding:10px 0;
color: #fff;
font-size:60px;
background-color: #f92735;
text-align: center;
margin: 60px 370px;
border-radius: 10px;
margin-top: -65px;
}
Heres the problem , as i size down my browser horizontally , the background color disappears . can somebody tell me why ?
The problem come from the following styles you have applied for h1
margin: 60px 370px;
It means it required minimum (370+370) width to show your h1 tag. Reduce the margin to less number then you can see it in small screens also.
#pictures h1 {
padding:10px 0;
color: #fff;
font-size:60px;
background-color: #f92735;
text-align: center;
margin: 60px 30px;
border-radius: 10px;
margin-top: -65px;
}
DEMO
I was just adapting a webdesign, when I found a problem and couldn't slove it on my own.
I coded a heading and an article picture, both in the same div, with a border at the bottom of the div.
My problem: The border comes right after the title and doesn't integrate my picture.
Check out this fiddle to see what i mean: Click me!
Here is my code:
<div class="latestarticle">
<a class="articletitle" href="#" >Guitar Hero Experts Melt Your Face Off</a>
<div class="articlepicture">
</div>
and CSS:
.latestarticle {
border-bottom: solid 1px #CCC;
padding: 0px;
margin-top: 12px;
font-size: 12px;
}
.articletitle {
color: #CD5700;
text-decoration: none;
font-weight: bold;
font-size: 14px;
margin-bottom: 5px;
}
.articlepicture {
height: 76px;
width: 136px;
float: left;
margin-top: 12px;
margin-right: 9px;
border: solid #A3A3A3 2px;
}
I'm wondering why this is not working. This should work, anyway, add display: table; or display: table-cell; to your .latestarticle. It works fine. See Demo
Edit
Oh! I came to know this problem is happening because you have floated left to your .articlepicture and I hope you wanted to do as demo.
I have added <div class="articlegroup"></div> for your .articlepicture div and defined it display: inline-block;
DEMO
use css display: block to .articletitle
I think what you are looking for is a clearfix. You need to add a "clearfix" div as a sibling to a floated element if you want the parent to recognize the height of the floated element.
<div class="latestarticle">
<a class="articletitle" href="#">Guitar Hero</a>
<div class="articlepicture"></div>
<div class="clearfix"></div>
</div>
Then define the .clearfix style in css:
.clearfix { clear:both; }
use disply:inline-block; for latestarticle .see here http://jsfiddle.net/WEHw4/5/
I am building a fixed width site, 970px, centered, with a gradient as the surround. Originally the fixed width portion was white with several horizontal areas (menu, search area, product selection area) having a different background. This was accomplished simply with a background color of white for a div that is the next child of the body, which contained all the content of the page, and an override to the background color when needed. This worked fine.
Can I make these horizontal areas have the same background as the gradient, which will obviously be different at different places in the page? I thought I would simply keep the background-color transparent (the default) at all levels until I came to the parent of content I want white, making that parent's background-color #FFFFFF. This works if I specify a height to the area. However, the main body of the website will be of indeterminate height, and must be white (or something other than the gradient!). Are there any techniques through which I can force an element and its contents into a white background without specifying a height on that element?
Thanks.
Thanks for the response. I should clarify with code so that the question is clear. Sorry for that.
Here is sample HTML that illustrates the problem:
<body>
<div id="Page">
<div id="Header">
<div id="HeaderNavigationSection">
<div id="HeaderNavigationMenu">
<ul>
<li>Menu Item One</li>
<li>Menu Item Two</li>
</ul>
</div>
</div>
<div id="HeaderBannerSection">
<a href="#">
<img id="CompanyLogo" alt="Company Logo" src="" height="45" width="200" />
</a>
<p id="BannerSloganOne">Banner Slogan One Text</p>
<p id="BannerSloganTwo">Banner Slogan Two Text</p>
</div>
<div id="HeaderSearchSection">
<div class="HeaderSearchSectionLine">
<p class="HeaderSearchBoxLabel">Search Label One and Related Search Area</p>
</div>
<div class="HeaderSearchSectionLine">
<p class="HeaderSearchBoxLabel">Search Label Two and Related Search Area</p>
</div>
</div>
</div>
</div>
</body>
First, here is CSS that works, using a page-level white background color and a section level different background color (yellow for illustration). This works throughout my code. I do not show any resets or basic settings. Note that the commented-out CSS for the #HeaderBannerSection is not needed (it appears in the code that doesn't work, which is shown after this code).
html {
height: 100%;
background-color: #D4D4D4; /* surrogate for browser-specific gradient */}
body {
text-align: center;}
#Page {
width: 970px;
margin: 0px auto 10px auto;
line-height: 1.2;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: left;
background-color: #FFFFFF;}
#HeaderNavigationSection {
height: 30px;
background-color: #FFFF00;}
#HeaderNavigationMenu {
display: inline;
float: right;}
#HeaderNavigationMenu li {
display: inline;
float: left;}
#HeaderNavigationMenu li a {
display: inline;
float: left;
margin: 8px 0px 10px 0px;
padding: 0px 10px 0px 10px;}
#HeaderBannerSection {
/*width: 970px;*/
/*background-color: #FFFFFF;*/}
#CompanyLogo {
display: inline;
float: left;
width: auto;
margin: 10px 0px 10px 10px;}
#BannerSloganOne {
display: inline;
float: left;
width: 330px;
margin: 20px 0px 20px 80px;}
#BannerSloganTwo {
display: inline;
float: right;
width: 300px;
margin: 20px 10px 20px 0px;
text-align: right;}
#HeaderSearchSection {
clear: both;
height: 68px;
background-color: #FFFF00;}
.HeaderSearchSectionLine {
clear: both;}
.HeaderSearchBoxLabel {
display: inline;
float: left;
margin: 10px 0px 0px 10px;}
Here are the changes to that CSS that attempt to make the html-level background color (namely the gradient) the default, through transparency, except where specifically overridden where desired (in this example, for the #HeaderBannerSection (with code from above commented out as needed)):
#Page {
width: 970px;
margin: 0px auto 10px auto;
line-height: 1.2;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: left;
/*background-color: #FFFFFF;*/}
#HeaderNavigationSection {
height: 30px;
/*background-color: #FFFF00;*/}
. . .
#HeaderBannerSection {
width: 970px;
background-color: #FFFFFF;}
. . .
#HeaderSearchSection {
clear: both;
height: 68px;
/*background-color: #FFFF00;*/}
This code does not work. The background-color for the section that should be white instead remains the gradient. This is true unless I specify a height for the section, then it all works. But I won't be able to specify the height for the main section (not shown) unless I do a jQuery to determine rendered height and then do a jQuery css height setting (not ideal, and haven't even tried it yet to see if it works). Incidentally, the offending code does work in IE6 and IE7 (at least as rendered in Expression Web 4 SuperPreview).
Thanks again for any help you can give me.
For your banner section try this jsfidle
the min-width property forces the div to have a specific minimum width if the content inside it is not enough to fill it (it will be the specified width by default until the content in it is so much that the div has to expand)
I've changed the background colour so that you can see the actual div # work
feel free to change to #FFFFFF once you are sure you have gotten it correct.
I want to align the text in my div ('what' and 'where') but now that I have the text a the bottom it has pushed the divs (search-field1 and searchfield2) further down the page!
How can I have it so the text doesnt affect this? Is it something to do with the cellpadding/spacing?
Sorry im not the best at CSS I'm teaching myself it.
HTML:
<center>
<div class="what"><p>what?</div>
<div class="where">where?</div>
<div>
</center>
<center>
<div class="search-field1">
</div>
<div class="search-field2">
</div>
</center>
CSS:
.what{
display: inline;
font: 16px HelveticaNeue-Light;
color: #A9E2F3;
font-weight: bold;
height: 35px;
width: 320px;
background: #151515;
display: inline-block;
vertical-align: center;
}
.where{
display: inline;
font: 16px HelveticaNeue-Light;
color: #A9E2F3;
font-weight: bold;
height: 35px;
width: 320px;
background: #ffffff;
display: inline-block;
verticle-align: center;
}
.search-field1{
height: 35px;
width: 320px;
background: #ffffff;
border:1px solid;
border-color: #BDBDBD;
display: inline-block;
verticle-align: center;
}
.search-field2{
height: 35px;
width: 320px;
background: #ffffff;
border:1px solid;
border-color: #BDBDBD;
display: inline-block;
horizontal-align: center;
}
Thanks!
James
James is this what you are looking for? http://jsfiddle.net/jkeyes/WFPK2/
Set the line-height for your containers (in this case .what and .where to be the same as the height:
line-height: 35px;
sounds like you need float:left on your center tags
Html:
<div class="center">
<div class="what">what?</div>
<div class="where">where?</div>
</div>
<div class="center">
<div class="search-field1"></div>
<div class="search-field2"></div>
</div>
CSS:
If you use float:left on the enclosing div's it will allow the two center div's to float side by side.
.center {
float:left;
}
Another option would be to set your line height to zero on the hidden div like so:
line-height: 0px;
Then add padding to the surrounding divs. Like so:
padding-top: 10px;
Hope that helps someone.
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?