I want the picture plus the gray background to be centered.
The body's style is set like this:
body {margin-left:auto;margin-right:auto;width:1000px;}
The div for the picture is this:
{width:auto;margin-left:auto;margin-right:auto;float:right;}
The image style is this:
{border:0px;padding:0px;margin:0px;}
If I removed the float the gray border around the image will fill all the page. and I do not want to specify a certain width for the border because some images are big and some are small.
I need help centering the image!
Add text-align: center to #chpheader, and remove float: right.
Add display: inline-block to <div style="text-align:center;background-color:#DCDEDD;margin-top:20px;border-radius: 20px;">.
If you need IE6/7 compatibility, instead add display: inline-block; *display: inline; zoom: 1.
You should not be using inline styles.
image style should be margin:0px auto not just margin: 0px
Related
Firefox is adding a white border on the inside of my image (.png), but no other browsers is, and the border property in CSS is actually 0. It's the image itself that is being rendered with a white border... Any way to remove this?
Give it a class and set display: block;.
I had the same issue. I wanted a 110x90px image and for that I was using a 560x460px image
with these css rules
.my-image
{
display: inline-block;
width: 110px;
height: 90px;
}
Turns out when i tried to use the same image but with the right dimensions it worked. White border was left on firefox.
I have 3 elements inline block with each other. The 2 smaller grids are flush with the bottom of the larger chart by default. How can I get them to be flush with the top of the larger chart instead. http://i.imgur.com/TAUG2rZ.png
I would prefer to not have to give an absolute position to each element, unless thats the only way.
all thats applied atm:
#smallgrid1, #largechart, #smallgrid2{
display: inline-block;}
Add vertical-align:top to css if you want to align them to top.
Other options for vertical-align which you may want are: middle, baseline, bottom etc.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
#smallgrid1, #largechart, #smallgrid2{
display: inline-block;
vertical-align: top; }
If, by default, the elements don't end up aligning themselves towards the top, I would use the vertical-align property to position each of the inline-block elements to the top.
I've created a simple CodePen that demonstrates this more clearly. Notice how I style each of the div elements on the page:
div.element {
display: inline-block;
vertical-align: top; /* aligns each of the divs to the top of the container */
}
In this case, the element ids are arbitrarily named element1, element2, and element3, but you would probably name them smallgrid1, largechart, and smallgrid2 respectively.
Hi there you could try this
#smallgrid1, #largechart, #smallgrid2{
display: inline-block; vertical-align: top}
I have two div id's. One has has an image in it and the other has a background image. There is an unwanted space in between these two divs. In the dreamweaver design view it appears as if there is no space, but if I make it live or preview in browser the space appears again.
This is the css for the divs
#header {
text-align: center;
padding: 0px;
margin: 0px;
}
#content {
background-image:url(img/ContentBox.png);
background-repeat: no-repeat;
background-position:center;
padding: 0;
margin: 0;
}
This is my body html (ignore the multiple line breaks, this is just so I can see the bg img in the div)
<body>
<div id="header"><img src="img/Header.jpg" /></div>
<div id="content"><br><br><br><br><br><br><br></div>
</body>
Images have a default display setting of inline. This causes them to flow inline with text, vertically-aligned with the baseline. All text is vertically-aligned with the baseline by default as well, unless you change it by setting vertical-align to something else on its containing element.
What is baseline?
The baseline floats above the bottom of the actual line. Look at the lower-case letter g. The bottom of the top circle is the baseline. That's where the images are getting aligned.
You can solve this multiple ways, but here are a couple:
Vertical Alignment
Again, image elements are set to display: inline by default. Assuming you don't want to change this, you need to adjust how the image element aligns vertically on the current line of text.
The vertical-align CSS property sets the vertical alignment of an inline element on the current line of text. It doesn't set it relative to the container.
Therefore, you can set the vertical-align property to middle, top, or bottom, and as long as the image element is larger than the line-height of the current line of text, it will not have the extra space below it.
However, you need to remember what I just said about line-height. In the event that your line-height is larger than your image element, vertical-align will do more than remove that extra spacing: it will actually align the image element on the line accordingly. See this jsFiddle to see an example of how a line-height greater than the height of the image will affect the result.
So, keeping with the HTML that you provided, to set the vertical alignment, you'd do the following CSS rule:
#header img {
vertical-align: bottom; /* or top or middle */
}
Displaying as Block Level
Another option would be to change the image element to display as a block level element. I don't recommend this approach unless you know you want a block level image.
Block level elements automatically fill to their container, and don't flow inline with text or other inline elements. Also, if you set a float on the image, this would force it to be block level.
So, you have two options to display as block level:
#header img {
display: block;
}
or
#header img {
float: left; /* You could float right too */
}
http://74.52.155.226/~projtest/team/harmeet/smoke51/products.html
That is the design that i am currently working on. If you inspect element on the banner below the navigation you can see that the 10px solid white border is taking some gap below the image. I am puzzled as to where is that coming from as logically the border should surround the image only no matter what the height of image is.
you can put display: block; on your <img>
That is because your image in the div.innerbanner is inline (images are inline be default). The space you seen is the descender height.
You need to create a block element of the image to prevent any descender height to show. Try adding this to your CSS:
div.innerbanner img { display: block; }
Im trying to do some horizontal layout of divs but get an unwanted "margin" after the divs.
http://jsfiddle.net/Yzxpu/
When I change the the markup and delete the spaces or line breaks the problem gets fixed for the horizontal spacing, but still there is vertical spacing under the divs. And the markup looks bad.
http://jsfiddle.net/Yzxpu/1/
I don't want to see any red (except for the far right, it will get fixed as the right-margin % gets set)
I'm using latest Chrome as web browser.
By adding: margin:0; and padding:0; to the CSS it fixes the vertical issue, because browers add their own default settings you would be advised to use a reset.css sheet to set everything back to 0.
The fiddle with the fix: http://jsfiddle.net/ynemx/
Reset CSS: http://meyerweb.com/eric/tools/css/reset/
TRY THIS
http://jsfiddle.net/Yzxpu/10/
CHANGE YOUR CSS
#t-newsAndInfo{background-color:red; overflow:hidden}
#t-newsAndInfo div {float:left;}
REMOVE "DISPLAY" FROM #t-newsAndInfo div
You could try to float:left the inner divs:
http://jsfiddle.net/Yzxpu/15/
#t-newsAndInfo{background-color:red; overflow:hidden;}
#t-newsAndInfo div {
background-color:lightyellow;
display: inline-block;
float:left;
position: relative;
width: 31.11111111111111%;/*((900-(30+30))/3)/900*/
height: 100px;
text-align: center;
/*margin-right: 3.111111111%;*/
/*margin-right: 2.99999999999%;*/
}