I created an image and I wanted to use that as an hr for a page. When it's uploaded it is justified all the way to the left. I want it to be centered, under the heading. This is my css code:
.section-underline {
height: 35px !important;
display: block;
background-image:url("http://s18.postimg.org/rhqgsx8bp/underline.png") !important;
background-repeat: no-repeat;
border: 0;
}
This is a link to the page I'm working on: http://fortunabakery.getbento.com/
and a screenshot: underline and header
Sure, set an explicit width and then apply margin-left: auto; margin-right: auto; and it will be centered!
In your case, that means:
.section-underline {
width: 133px;
margin-left: auto;
margin-right: auto;
}
in your CSS, use background-position: center center
Related
http://pixphoriad.haneuri.net/index2.php
The top div for the header centers fine but for some reason the content in the footer is not centered. Here's the css for the footer:
div#footer {
background-color: #000;
color: #fff;
position:relative;
height:350px;
clear: both;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
}
apply these rules to center tag...
overflow: auto;
display: inline-block;
Btw, center tag is obsolete, i had never seen it until now. But whatever..
I like overall site...It shows passion.
Define the width you want and give margin like this:
div#footer {
width: 500px;
margin: 0 auto; /* or `10px auto` to add margin top and bottom */
text-align: center; /* align text center aligned*/
}
I would suggest that you add the following lines to your div#footer:
overflow: auto;
display: inline-block;
My problem is that on mobile, the right cont (white background) goes underneath the left cont (purple). I have tried using clear:both and it still didn't fix it.
I keep thinking this CSS is wrong:
.cont {
width: 1000px;
overflow: hidden
}
.cont_left {
width: 283px;
height: auto;
float: left;
vertical-align: central;
padding-top: 25px;
padding-left: 25px;
padding-right: 25px;
background-image: url(.//images/sidebar.png);
padding-bottom: 220px;
}
.cont_right {
width: 600px;
padding-left: 25px;
height: 100%;
float: left;
position:relative;
font: Arial;
font-size: 12px;
background: #ffffff;
padding-right: 25px;
}
Live site: Website
Image of problem: iOS Screenshot
Maybe you are looking for the Faux Columns technique, which has been discussed here. Also, Geoff Graham has written a pretty well covered article about spliting your layout in half (but of course, you don't need to go 50 50 as described).
In your case, I'd go with percentages (70% for the content, 30% for the side bar), using one of the techniques mentioned above. And be careful, as vertical-align: central; is not a valid property. Here you can find some info about how to center stuff vertically.
so its just the css for the left side is wrong. you have got the bg image on repeat. the top part of the image repeated is white so it looks like the right side is bleeding over....
.cont_left {
background-color: #23265d !important;
background-image: url(".//images/sidebar.png");
background-position: left top;
background-repeat: no-repeat;
float: left;
height: auto;
padding: 25px 25px 220px;
width: 283px;
}
this will fix it
This block of css controls the position of some 3rd party images. They are generated on the fly as a javascript slider. I need to center it based on another image else where on the page. I know the left and right dimensions of my reference image. All I need to do is figure out how to center this block on that. Is there a way to center this between say 200px and 800px?
.pagination {
display: block;
margin:26px auto 0;
width:400px;
margin-left: auto;
margin-right: auto;
left: 130px;
position:relative;
text-align: center;
}
If you know the width is 400px (as per your snippet), you could do:
.pagination {
display: block;
margin: 26px auto 0;
width: 400px;
}
Example at http://jsfiddle.net/Ne9jz/
So my page is here and as you can see in the middle i am trying (unsuccessfully) to get the two images to fit into the gray box...one on each side. here is my html
<div class="top_center_image">
<div class="left_image">
</div>
<div class="right_image">
</div>
</div>
and here is my CSS
.top_center_image{
background: url("../image/TopBox.png") no-repeat;
height: 179px;
margin-left: 5px;
width: 649px;
}
.left_image{
background: url('../image/DwightWorldVideoleft.png') top left no-repeat;
width: 296px;
height:152px;
margin-left:11px;
float:left;
}
.right_image{
background: url("../image/AMWimage.png") no-repeat scroll left top transparent;
height: 152px;
margin-left: 11px;
width: 311px;
float:right;
}
is there an easier and better way to line all this up.....thanks in advance
The following worked for me...
.right_image {
background: url("../image/AMWimage.png") no-repeat scroll left top transparent;
float: right;
height: 152px;
margin-right: 12px;
margin-top: 12px;
width: 311px;
}
.left_image {
background: url("../image/DwightWorldVideoleft.png") no-repeat scroll left top transparent;
float: left;
height: 152px;
margin-left: 11px;
margin-top: 12px;
width: 296px;
}
I added margin-top rules to both. I removed margin-left from the right image, and added margin-right in its place.
Try this,
remove margin-left: 11px from both the .left_image and .right_image
Add as follows
.left_image {margin: 10px;}
.right_image {margin: 10px;}
I just added another div container inside of the top_center_image to wrap the two images, set both images to float left, rather than one left and one right. Then styled the new div with this
width:630px; height:155px;margin-left:10px; padding-top:14px;
You will need to adjust with margin-left of the two images to push it in, but i'm sure you can figure that out as much.
I've been working on a small blog form but have been having trouble with my Div tags. Whenever I create a second div tag to hold the Form a space has appeared between it and the previous Div tag. Is there anything wrong with my CSS?
body {
background-image: url(../images/body-bg.jpg);
font-family: arial;
}
#header {
background-image: url(../images/new-post-h.png);
background-repeat: no-repeat;
height: 124px;
width: 850px;
color: #ffffff;
margin: 0em 0px;
}
#form-bg {
background-image: url(../images/new-post-b.png);
background-repeat: no-repeat;
height: 500px;
width: 850px;
padding: 8px;
margin: 0em 0px;
}
#new-form {
height: 624px;
width: 850;
margin-left: auto;
margin-right: auto;
}
Here is what keeps on happening:
http://i40.tinypic.com/j623i8.jpg
Two things:
1) From the looks of your image (assuming that it is 100% size, and what elements are your header, etc), your header background is only ~50px tall. However, you define the height as 124px in your CSS. You can't stretch a background image with CSS (to my knowledge) so the image won't fill the size of the element.
2) In your declaration for #new-form, add a unit to width. Otherwise, it won't work as expected, and you'll also get a parser error.