<div id="logo" style="center"><img src="logo1.png"></img></div><br><br><br><br><br><br><br></div>
This doesn't work.
Whats the problem with the style of the div? i'm sure the syntax is wrong.
"center" is not a style. You're probably looking for text-align: center.
Images are self-closing like the line-break. You don't use </img>.
You have a spare closing </div> at the end of the line. One of them needs removed, I'm not sure which spot you want it in.
<div id="logo" style="text-align: center"><img src="logo1.png"></div><br><br><br><br><br><br><br>
you cannot define style in div like that instead you can define the div property in css and call the class or id of the css.
Best way to center a element is probably to specify its width and put the side margin to auto:
If for example your logo1.png is 570px wide, you would do something like this in the css
#logo{
margin:0px;
margin-left:auto;
margin-right:auto;
width:570px;
}
Try this. You have to set the width of a div as shown below in order for it to work. To specify that the text inside the div is centered, simply apply style="text-align: center"
<div id="logo" style="margin-left: auto; margin-right: auto; width: 500px; border: 1px solid #ff0000">Your content here....</div>
Note: set 500px width to your desired width. Also, remove border: directive. I just added that so you could see the DIV was centered.
fiddle
Related
I am attempting to create a visual element using DIV elements and CSS which should display data in the format demonstrated below.
[-----50%-----|--25%--|--25%--]
When using the code and CSS I've specified below, my final element always spills onto the next line and the CSS percentage values I'm specifying don't seem to create the layout properly.
Could anybody suggest a better way to do this?
My HTML
<div class="visual-indicator-title">
All Items</div>
<div class="visual-indicator-holder">
<div class="vi-internal-element" style="width: 25%; background-color: #5E9BD1;">
25%</div>
<div class="vi-internal-element" style="width: 25%; background-color: #AB884D;">
25%</div>
<div class="vi-internal-element" style="width: 50%;">
50%</div>
</div>
<div class="visual-legend">
<ul class="inline-block">
<li>
<div class="legend-blue">
</div>
Sales</li>
<li><span class="legend-tan"></span>Processed</li>
<li><span class="legend-grey"></span>Pending Processing</li>
</ul>
My CSS
.visual-indicator-title{
font-size:12px;
font-weight:bold;
color:#777777;
}
.visual-indicator-holder
{
width:100%;
background-color:#666666;
height:28px;
border-radius: 8px;
}
.visual-indicator-holder .vi-internal-element
{
font-size:11px;
text-align:center;
color:#ffffff;
background-color:#777777;
border-radius: 6px;
display:inline-block;
}
The reason this happens is that with inline or inline-block, white space in the element will affect the rendering (adds space). Here is your demo working with white space removed, no changes to the CSS: http://jsfiddle.net/fZXnU/
Removing white space is not trivial though, so you'd be better off floating the elements (which triggers display:block). Working demo with plenty of white space: http://jsfiddle.net/fZXnU/1/
You can use float: left, position: relative, and then define width in percentage as you are.
I modified your code to use float here: http://jsfiddle.net/Z3kdP/.
If you remove the white-space between the divs then it works as intended.
http://jsfiddle.net/TeJuU/
EDIT: See this question: How to remove the space between inline-block elements?
You can make font-size: 0 on the parent element if you don't want to edit your html.
http://jsfiddle.net/TeJuU/1/
All of those elements have margin and padding with them as well as the percentages creating rounding errors during calculation. So you need to make sure you set, or take into consideration, what margin is doing to this. For rounding errors, it's typical to let the percentages add up to something less than 100% but then add margin: auto to center the whole thing.
I have an image inside a div, and I'm setting 1 pixel border to the div but there is a padding at the bottom between the border and the image. Can anyone please explain why?
Here is my html code:
<div id="border"><img src="example.png" /></div>
Here is my css:
#border {
border: 1px solid #000;
float: left;
}
use vertical-align:top for image
Browsers apply their default styles unless specified by your css, try explicitly setting padding in your css.
Firebug has a useful feature to let you see which styles have been applied to the elements on a page.
Hope this helps
Make sure the image has both padding and margin set to 0, e.g.:
img{padding:0;margin:0}
Or, to change just that image, apply a class to that particular image and set the style for that class, e.g.
<img class="foo">
.foo {padding:0;margin:0}
You are double closing your img tag:
You have
<div id="border"><img src="example.png" /></img></div>
Should be:
<div id="border"><img src="example.png" /></div>
I am trying to shift my style away from using tables to control formatting, but I haven't seen a simple css solution that does exactly the same thing as
<table><tr><td>aribitrary-html-A</td><td>aribitrary-html-B</td></tr><table>
All I want is to make sure aribitrary-html-A and aribitrary-html-B are aligned horizontally. I have tried various CSS concoctions using display: inline, clear: none, and float: left but they all have unwanted side-effects of moving my content around, while the table-tr solution just does what I want, regardless of what's in the arbitrary HTML, and regardless of what is in HTML that contains my table.
Am I missing something?
Why not use a grid system then like 960gs
You probably need this
<div id="wrap">
<div id="left">
content 1
</div>
<div id="right">
content 1
</div>
</div>
#wrap {
width: 50%; /* change this as you wish */
}
#left, #right {
display: block;
float: left;
}
You need to use <div>s and decent CSS. For people that aren't confident enough (or lazy, like me) Yahoos YUI CSS Grid Builder is invaluable! Enjoy!
Maybe this might help you?
<div style="width:400px;margin:0 auto;">
<div style="background-color:red;float:left;height:200px;width:200px;">
</div>
<div style="background-color:blue;float:right;height:200px;width:200px;">
</div>
</div>
Just don't put your css within style attributes like I did.
Just create two Divs and align the one you want to have on the left side.
Like so (update):
<div id="wrap" style=" width:300px;
margin:auto;
border: 1px solid black;
padding:1px">
<div id ="A" style="float:left;
border: 1px solid black;"> aribitrary-html-A </div>
<div id = "B" style="border: 1px solid black;"> aribitrary-html-A</div>
</div>
Update: I added a wrapper with a defined width. Also I used some borders to visualize the table-like layout. Hope that helps.
Wrap element in a div, set fixed width for the wrapper. Give each element in the div a width and set the margin to 0 auto.
Just set the CSS "float" property to left on every element you want to display horizontally, and make sure each of those elements have a set width.
I'm working on some complex design and have a silly question once again :)
Well, let's say I have a div and some content inside, like:
<div style="background-color: #fff; width: 1000px; margin: 0 auto;">
<img src="img.png" />
<p>Blablabla :)</p>
</div>
<div style="background-color: #000; width: 1000px; margin: 0 auto;"></div>
Div's width is fixed, but I don't tell the browser what's the height (so there's no height property of div in css file).
And then, when I add more and more text the first paragraph or bigger image, the text-child of first div is in the second div.
How to prevent this from happening? Or what did I to make it happen?
Thanks!
Make sure that the parent divs are not position:absolute; or position:fixed; in the CSS. They should be position:relative;.
If any child items are float:left; or float:right; then the reective parent div needs an overflow:auto; property inorder to cause the div to fully wrap the child items.
It'd help us help you more if you posted a whole sample of a working page, not just the divs, and the CSS as well.
It should be auto-expanding, it sounds like you have some other styling with positioning that's throwing the default behavior off.
You can see in a demo here that it should expand (height: auto;) to whatever content you give it, dynamically added or not.
I would check for floats and positioning on the img and p. But I cant tell you more without seeing the full css/html can you post a link?
I want the outer div, which is black to wrap its divs floating within it. I dont want to use style='height: 200px in the div with the outerdiv id as I want it to be automatically the height of its content (eg, the floating divs).
<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div style='width=300px;border: red 1px dashed;float: right;'>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>
How to achieve this?
You can set the outerdiv's CSS to this
#outerdiv {
overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}
You can also do this by adding an element at the end with clear: both. This can be added normally, with JS (not a good solution) or with :after CSS pseudo element (not widely supported in older IEs).
The problem is that containers won't naturally expand to include floated children. Be warned with using the first example, if you have any children elements outside the parent element, they will be hidden. You can also use 'auto' as the property value, but this will invoke scrollbars if any element appears outside.
You can also try floating the parent container, but depending on your design, this may be impossible/difficult.
Firstly, I highly recommend you do your CSS styling in an external CSS file, rather than doing it inline. It's much easier to maintain and can be more reusable using classes.
Working off Alex's answer (& Garret's clearfix) of "adding an element at the end with clear: both", you can do it like so:
<div id='outerdiv' style='border: 1px solid black; background-color: black;'>
<div style='width: 300px; border: red 1px dashed; float: left;'>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div style='width: 300px; border: red 1px dashed; float: right;'>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>
<div style='clear:both;'></div>
</div>
This works (but as you can see inline CSS isn't so pretty).
You may want to try self-closing floats, as detailed on http://www.sitepoint.com/simple-clearing-of-floats/
So perhaps try either overflow: auto (usually works), or overflow: hidden, as alex said.
I know some people will hate me, but I've found display:table-cell to help in this cases.
It is really cleaner.
First of all you don't use width=300px that's an attribute setting for the tag not CSS, use width: 300px; instead.
I would suggest applying the clearfix technique on the #outerdiv. Clearfix is a general solution to clear 2 floating divs so the parent div will expand to accommodate the 2 floating divs.
<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
<div style='width:300px; float: left;'>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div style='width:300px; float: left;'>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>
</div>
Here is an example of your situation and what Clearfix does to resolve it.
Use jQuery:
Set Parent Height = Child offsetHeight.
$(document).ready(function() {
$(parent).css("height", $(child).attr("offsetHeight"));
}
Add a new, empty div just before the closing tag of the parent with this style: clear: both;. Like this: <div style="clear:both"></div>.
I spent over a week trying to figure this out!