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.
Related
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
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
I have two divs in my application. How can I make my left div to fit all space till right div. Right one can be text or image with any width.
<div id="header" class="header">
<div class="logo">
<img src="/Content/images/my_logo.png" alt="" />
</div>
<div class="logoClient">
Test Client /*here can be text or image with ANY SIZE */
</div>
<div class="clear"></div>
</div>
In this example I've done with fixed widths(700px and 200px), but this is wrong, because right one's text is dynamic and I want to left green bar be dynamic too.
http://jsfiddle.net/C5GL6/1/
Another approach with table, table-cell css options... but again... can't make left green bar fit all space.
http://jsfiddle.net/sjfQj/
How can I achieve this?
Remove width and add float:left to both the divs
.header
{
width: 950px;
font-family:Helvetica, Arial, sans-serif;
display:table
}
.logo {
height: 55px;
padding: 10px 20px;
background: #004B35;
display:table-cell;
}
.logoClient
{
display:table-cell;
height: 55px;
line-height: 55px;
padding: 10px 0px;
margin:0px -10px 0px 0px;
font-size: 30px;
color: #004B35;
overflow:hidden;
font-weight: bold;
text-align: right;
background: red;
}
DEMO Updated
Remove the width size in div
Edited fiddle
http://jsfiddle.net/C5GL6/2/
.logo {
float: left;
height: 55px;
padding: 10px 20px;
background: #004B35;
}
I'm trying to make a menu bar centered horizontally in the header of my page. For some reason, i can't get the centering to work. I made a little test page roughly displaying the problem: JSFiddle. The inner div has to be 5px away from the bottom, that's whatI use the position: absolute for.
I've tried searching on the web alot, but everything I find gives me the same result, or none at all. Most problems I found were when text-align: center wasn't in the container div, but even with it, it still doesn't work.
I removed two css attributes and it work.
position: absolute;
bottom: 5px;
Check this Fiddle
5px from bottom. Fiddle
This is not a perfect way, but it's still kind of useful. I first think of this idea from this Q&A.
You'll have to make some change to your HTML:
<div id="container">
<div id="wrapper-center"> <!-- added a new DIV layer -->
<div id="inner_container">
TEXT ELEMETNES IN THIS THING!!!!
</div>
</div>
</div>
And the CSS will change to:
#container {
background: black;
width: 100%;
height: 160px;
position: relative;
}
#inner_container {
display: inline-block;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
position: relative;
left:-50%;
}
#wrapper-center {
position:absolute;
left:50%;
bottom:5px;
width:auto;
}
Demo fiddle
The trick is to place the wrapper at the given top-bottom position, and 50% from left (related to parent), and then make the true content 50% to left (related to the wrapper), thus making it center.
But the pitfall is, the wrapper will only be half the parent container's width, and thus the content: in case of narrow screen or long content, it will wrap before it "stretch width enough".
If you want to centre something, you typically provide a width and then make the margins either side half of the total space remaining. So if your inner div is 70% of your outer div you set left and right margins to 15% each. Note that margin:auto will do this for you automatically. Your text will still appear to one side though as it is left-aligned. Fix this with text-align: centre.
PS: you really don't need to use position absolute to centre something like this, in fact it just makes things more difficult and less flexible.
* {
margin: 0;
padding: 0;
}
#container {
background: black;
width: 100%;
height: 160px;
}
#inner_container {
color:red;
height:50px;
width: 70%;
margin:auto;
text-align:center;
}
If you don't want a fixed width on the inner div, you could do something like this
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
That makes the inner div to an inline element, that can be centered with text-align.
working Ex
this CSS changes will work :
#container {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner_container {
display: inline;
margin: 0 auto;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
Try this:
html
<div id="outer"><div id="inner">inner</div></div>
css
#outer {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner{
display: inline;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
example jsfiddle
You may set the inline style for the inner div.
HTML:
<div id="container">
<div align="center" id="inner_container" style="text-align: center; position:absolute;color: white;width:100%; bottom:5px;">
<div style="display: inline-block;text-align: center;">TEXT ELEMETNES IN THIS THING!!!!</div>
</div>
</div>
Here is working DEMO
I am using the following css
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 150px;
margin: 10px 0px 5px 0px;
background-image: linear-gradient(to top, #CACACA 0%, #EFEFEF 100%);
}
I have 2 elements contained in a div.
<div id="header">
<p:graphicImage value="/dbimages/#{accountManagedBean.imageId}" styleClass="imageResizeAccountInfo"/>
<h:outputLabel value="#{accountManagedBean.account.userName}" style="font-size:40px"/>
</div>
One is an image, and the other is text. I would like the image to be on the left, and the text to be vertically and horizontally centered.
The actual HTML that gets produced is this:
<div id="header">
<img id="mainForm:j_idt164" src="/ui/dbimages/2805" alt="" class="imageResizeAccountInfo" />
<label style="font-size:40px">dvargo</label>
</div>
Currently they are right next to each other. I am new to css and have created this using composition so far.
Is there a way to do this?
You already have the width and height set on your div, so the following additional CSS rules will allow your div to accept vertical alignment for its content, i.e., your text.
display:table-cell; vertical-align:middle
You can use float: left or position: relative; top: xxx; left: xxx; on your image to position it to the left by floating, or to left relative to the top left of the div by a precise amount. Another good solution is to use the image as the background of the div (with no-repeat), and then using padding-left on your div element to make room for the image.
JS Fiddle: example (with a cute smiley face image since I don't have the OP's original image): http://jsfiddle.net/wCpfs/
You can use line-height property to center the text vertically.
As well as using text-align:center will make your text move to the center.
Try this or something similar:
#header {
text-align:center;
line-height:150px;
}
Kinda, just because you have height specified you can position text in the middle.
.imageResizeAccountInfo {
float:left;
}
#header p {
position relative;
left: XXX;
top: YYY;
}
Adjust XXX and YYY accordingly.
You're going to want to set the label to be a display: table-cell and then vertically align it like this:
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 150px;
margin: 10px 0px 5px 0px;
background-image: linear-gradient(to top, #CACACA 0%, #EFEFEF 100%);
display: table;
}
#header label{
display: table-cell;
vertical-align: middle;
text-align: center;
}
Here's a jsfiddle with the result: http://jsfiddle.net/V7mYR/1/