I am using the responsive blog theme and having a tough time centering my site logo. This is what my site-logo in style.css looks like (according to inspect element):
#header img {
margin: 0 0.75em 0 1em;
display: block;
float: right;
margin-left: auto;
margin-right: auto;
height: auto;
max-width: 100%;
}
#header #site-logo {
margin-left: -82.5%;
height: 100px;
padding: 2.5em 0;
}
I tried changing the margins, text aligns and floats of these two divs, but none helped. I don't know, if I have to look into any other ID or class on the style.css.
If you know the width of the logo just use margin:0 auto; http://jsfiddle.net/NVLtM/
#header #site-logo {
display:block;
width:200px;
margin:0 auto;
}
If you don't know the width, make the image an inline-block element and use text-align:center on the parent element http://jsfiddle.net/NVLtM/1/.
#header {
text-align:center;
}
#header #site-logo {
display:inline-block;
}
remove the float, remove existing margins, no need for width;
margin: 0 auto will center the element
Related
I'm a css newbie and I am using DRUPAL (CMS) to design my site. I have been able to center a image by using this tag:
#block-imageblock-4{
width:25.5%;
height:10%;
text-align:center;
margin-top:1%;
margin-bottom:1%;
margin-left:37%;
margin-right:36.5%;
}
So if the screen resolution is 1366px768px(max #page) or larger #block-imageblock-4 stays in the center of the page.
WELL on another page I have two images with two tags. I used this CSS to place them side by side.
#block-imageblock-17,#block-rotating-banner-1{
display:block;
width:auto;
margin-left:2%;
}
There respective tags:
#block-imageblock-17{
width:15%;
float:left;
margin-top:1%;
margin-left:3%;
margin-right:1.5%;
margin-bottom:5%;
}
#block-rotating-banner-1 {
margin-right:-30%;
margin-top:1%;
margin-bottom:10%;
float:left;
background-repeat:no-repeat;
width:26%;
height:180px;
max-width:100%;
min-height:100%;
background-image:url("/sites/default/files/imgs/ArtistFrame.png");
}
However if the screen resolution is larger than 1366px by 768px then the images are not centered. and thats my problem.
I have noticed that if I take out all float and margins out of both tags and put both elements like this:
#block-imageblock-17,#block-rotating-banner-1 {
display:block;
width:auto;
text-align:center;
margin-top:1%;
margin-bottom:1%;
margin-left:37%;
margin-right:36.5%;
}
the two images ARE CENTERED, BUT NOT next to each other.
Any suggestions to get both images side by side and in the center of the page like tag #block-imageblock-4 ?
Try wrapping the images in a <div> tag and centering the div using margin: 0 auto; .
Something like this
CSS
.centerDiv { margin: 0 auto;}
HTML
<div class="centerDiv">
<img src="urlhere" />
...
</div>
try this:
img {
height: 250px;
left: 50%;
margin-top: -125px;
margin-left: -125px;
position: absolute;
top: 50%;
width: 250px;
}
and more here:
http://www.paulund.co.uk/absolute-center-images-with-css
div
{
margin: 0 auto;
width: 100px;
}
img
{
width: 100px;
}
the width of an element with "margin: 0 auto;" needs to have its width EXPLICITLY defined. See JSFiddle
#sponsors {
float: right;
display: inline;
width: 728px;
height: 100px;
margin: 60px 11px 0;
}
<div id="sponsors">
<img src="images/sponsors/1.png">
<img src="images/sponsors/2.png">
</div>
I can't move images to the right side of div with this, but div align="right" works.
How can I set images to right side using css3?
Change the display to block and add text-align:right
#sponsors {
float: right;
display: block; /* or remove this line, as block is default for div */
width: 728px;
height: 100px;
margin: 60px 11px 0;
text-align: right;
}
Display inline doesn't make much sense on elements with a width and a height sepcified. I assume you want the browser to respect your width and height so display should be block, or be removed completely as it is a div element which implies display:block by default. Then you want the elements inside the div to align to the right, which you do by applying text-align.
Try this:
#sponsors a img {
float:right;
}
Currently you are floating the sponsors div to the right, instead of the images inside the sponsors div. Target the images to float them, and it should work for you.
The images themselves need to be floated or their parent element needs to have its text alignment modified.
Floated: http://jsfiddle.net/MAz4Q/1/
#sponsors {
width: 728px;
height: 100px;
margin: 60px 11px 0;
}
#sponsors img {
float: right;
}
Aligned: http://jsfiddle.net/MAz4Q/2/
#sponsors {
width: 728px;
height: 100px;
margin: 60px 11px 0;
text-align: right;
}
Here's my page: http://bad-sf.com/stemtest/about.html
Notice that scrolling is still an option even though the content is small enough to not require scrolling. Could it have to do with my css? (below):
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
* {
margin:0;
padding:0;
outline: none;
}
html, body {
height:100%;
font-family: '_.regular';
font-size: 13px;
outline: none;
}
#wrap {
min-height:100%;
width:800px;
margin: 2% auto;
}
#main {
overflow:auto;
padding-bottom: 30px;
}
#smm {
width: 400px;
height: 200px;
float:left;
}
#footer {
position: relative;
margin-top: 0px;
height: 35px;
clear:both;
font-family: '_.regular';
}
THANKS! I'm still learning html and css so any input you have would be really appreciated - Danny
This is caused by #wrap, being 104% height. Note these rules:
body {
height: 100%;
}
#wrap {
min-height: 100%;
margin: 2% auto;
}
So your #wrap is actually 100% height plus 2% margin on top plus 2% margin on bottom.
There are several ways of countering this.
You can remove the height from body and optionally min-height from #wrap, as it's no use anymore in this case.
You can change margin on #wrap to margin: 0 auto; (this will inevitably raise the content though).
There are probably a few other possibilities, but seeing as the unsatisfactory answers are voted down, I don't really feel compelled towards thinking about more sublime solutions.
Take away height:100%; from html, body { }. Why did you need it there even anyway?
The reason why the scrollbar is always appearing is because the #wrap DIV is also set to 100% height and on top of that, a margin of 2%. This forces your body to be 2% more than 100%.
You can remove the 2% margin from #wrap but if you don't want do, removing the height: 100%; from html, body { } should do the trick.
I'm trying to make a part of my webpage that fit the width of the browser, for this I'm using width: 100%, the problem is that it shows scrollbars and I can't use overflow-x: hidden; because it will make some of the content hidden, so how I can fix this?
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px;
margin-left: 10px;
padding: 0;
-webkit-user-select: text;
}
Because you're using position: absolute, instead of using:
width: 100%; margin-right: 10px; margin-left: 10px
you should use:
left: 10px; right: 10px
That will make your element take the full width available, with 10px space on the left and right.
You have to remove the margins on the #news item
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px; /*REMOVE THIS*/
margin-left: 10px; /*REMOVE THIS*/
padding: 0;
-webkit-user-select: text;
}
If this doesn't work, you might have margin and padding set on the element itself. Your div - if that is what you are using - might have styles applied to it, either in your stylesheet or base browser styles. To remove those, set the margins specifically to 0 and add !important as well.
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin: 0 !important;
padding: 0 !important;
-webkit-user-select: text;
}
It seems that you have set the width to 100%, but there are also margins that force the width to expand beyond that.
Try googling for "css flexible ( two/three-collumn) layouts".
Here's an example,
<div id="cont">
<div id="menu"></div>
<div id="main"></div>
<div class="clear"></div>
</div>
and the css
#menu{
float:left;
height:100%;
width:200px;
}
#main{
padding-left:200px;
}
.clear{clear:both;}
The #menu div, will be aligned to the left and have a static width of 200px.
The #main div, will "begin" below #main, but because of it's 200px padding (can also be margin) its content and child elements will start - where #menu ends.
We must not set #main to a percent width, (for example 100%) because the 200 pixels of left padding will be added to that, and break the layout by adding scrollbars to the X axis.
I had a similar issue with a absolute positioned element, and I wanted to use width 100%. This is the approach I used and it solved my problem:
box-sizing=border-box
Otherwise I always had a little content and padding pushing past the scroll bar.
The answer is that you have margins set that will make the div wider than the 100%; hence the scrollbars.
If you can rid yourself of margins do it! However, often you'll want the margins. In this case, wrap the whole thing in a container div and set margins to 0 with width at 100%.
Same issue as before (see Sticky Footer, but only sometimes and Sticky Footer, but only sometimes...continued)...
I have a footer that I want to stick to the bottom of the page unless content fills the page, then I want it to get pushed down. I've done this a dozen times with other sites, but I can't get this one to work. Working in Wordpress. I've checked the order of my divs and I've gone over the css...any help is appreciated.
The main css components:
* {
margin: 0;
padding: 0;
}
html, body {
height:100%;
min-height:100%;
}
#wrapper {
background:url("images/shadowborder.png") repeat-y center;
width:100%;
max-width:100%;
min-width:980px;
min-height:100%!important;
margin:0 auto;
margin-bottom:-20px;
position:relative;
overflow:auto;
}
#content {
clear:both;
float:left;
padding:20px 20px 60px 20px;
font-size: 1.6em
}
#spacer {
height: 40px;
clear: both;
}
#footer {
position: relative;
border-top: 1px solid #e5a5fc;
padding:3px!important;
height:20px;
}
The site:
http://www.hcfmissoula.com
The recipe I use is:
height: 100% on html
min-height: 100% and position: relative on body (with height:100% for ie6)
position: absolute and bottom: 0 on the footer div
Maybe be tricky preventing footer from obscuring some text near the bottom though.