I am trying to add a backgroung image for a "a" element, but it would only show part of the image ( so if I have Home as value, whatever space home takes that is what is shows of the image, if the value is empty it wont show anything of the image).
Despite I have setted up the width and height of the "a" element to display.
Can anybody help me?
Code.
<div style="width:1200px;height:25px;text-align:left;">
</div>
I am sure is something silly, but I cant find out what.
<a> is an inline element. Inline elements cannot have a set width and height.
You therefore need to change the display mode of the element using the CSS property display.
Use display: block; if you want your elements to be taken out of the flow of text and considered a block (ie.: stacked vertically, one block per line).
Use display: inline-block; if you want your element to behave like an inline element position wise but have block-like properties.
Note: inline-block is supported by IE6 on <a>. In IE6, inline-block display style is only supported on elements which has an inline default style.
Add display:block; to the anchors (block vs inline-block). Once you do that though, you may need to float:left; the anchors to keep them side-by-side. If you go that route, follow them all up with a clear:both; div.
a.box { float:left; width:100px; height:25px; margin:0 8px; }
.clear { clear:both; }
Foo
Foo
Foo
<div class="clear"></div>
Related
I am trying to align the first two divs inside "product-details" class. I removed the last div with clear:both; I gave 150px width to the first div with class "text-center".I gave display:inline-block and position:relative to both of the first divs. I made width of the second div auto.
When I check the computed values in the inspect element the first div is not accepting the display:inline-block. It shows display:block; and the two divs are not aligned horizontally. I have had this situation before also.
div.text-center {
display: inline-block;
position: relative;
}
div:nth-child(2) {
display: inline-block;
position: relative;
}
<div class="product-details">
<div class="text-center">...</div>
<div>...</div>
<div style="clear:both;"></div>
</div>
div.text-center is not taking display inline-block instead shows display block in the element inspector
The code does work. I right clicked on the second ... and clicked inspect element. You can see in the "Elements" tab then in the "Styles" tab that the default display: block was overridden by display: inline-block. What browser are you using? This is on the latest version of Chrome that I am getting this result.
As pointed out above, the code should work. You can try and force it to work by adding an important rule
div.text-center {display: inline-block !important;}
I removed floats and display changes from block to inline-block as required. That was the only option. Also I need to remove width auto and give width in % for both divs to align them horizontally. This was the solution I found. Thanks for your answers.
There are my codes. (jsfiddle)
Why this part of my codes isn't running?
header{background-color: #2bd5ec;}
I want to add background color to header tag. What i need to do?
The issue here is that since the elements inside your header are floated, they're considered in a different flow than your header, and thus it doesn't resize to fit them.
One way to fix this is to append <div style = "clear: both;"></div> to your header; little demo: little link.
You can also just add overflow: hidden; to your header: another little link, or float it as well: yet another little link.
you can set Height for Header.
for example :
header{background-color: red; height:100px;}
and you can use "clear" like this :
<header>
<div id="info">
<h1>Oyunn.in</h1>
</div>
<div id="categories">
<p>Barbie - Benten - Senten</p>
</div>
<br clear="all"/>
</header>
and css:
header{background-color: #2bd5ec;}
#info{float: left;}
#info h1{font-size: 100%;margin: 0;}
#categories{float: right;}
#categories p{margin:0;}
use overflow:hidden
header{background-color: #2bd5ec; overflow:hidden;}
The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.
Using the overflow property with a value different than visible, its default, will create a new block formatting context. This is technically necessary as if a float would intersect with the scrolling element it would force to rewrap the content of the scrollable element around intruding floats. The rewrap would happen after each scroll step and would be lead to a far too slow scrolling experience. Note that, by programmatically setting scrollTop to the relevant HTML element, even when overflow has the hidden value an element may need to scroll.
The overflow declaration tells the browser what to do with content that doesn't fit in a box. This assumes the box has a height: if it doesn't, it becomes as high as necessary to contain its contents, and the overflow declaration is useless.
SEE DEMO
Add
header{background-color: #2bd5ec;width:100%; height:30px;}
Background attribute usually needs div's dimensions
actually you didn't clear your child floats so whenever we are using float so we should clear the floats and we can give overflow: hidden; in our parent div to clearing the child floated div's.
header {
background-color: #2BD5EC;
overflow: hidden;
}
see the demo:- http://jsfiddle.net/vE8rd/17/
I am trying to add two divs inside the parent div, which has a button inside each div.
I need to fix the width in pixels only for the second div and the 1st div should be having width in % so that the button inside the 1st div should be covering the entire space of the browser.
I need all the widths in % and also I don't want to change either html structure and css because it is already implemented so i just need changes in css property.
Here is my demo
http://jsfiddle.net/zuyyT/2/
P.S : When I scale the browser, the second div is coming in next line. Please scale it and check once.
Fiddle is working on and off ... you can go either one of two ways; using floats (need to change the order of your markup) or positioning - like such ...
<div class="block">
<div class="block_right"> <span>last button</span> </div>
<div class="block_left"><a href="" class="scButton score" > <span>Lorem ipsum</span></a></div>
</div>
and your CSS ...
.block {
display:block; background-color:#FFC; width:100%; float:left; height:30px
}
.block_left{
background-color:#C93; margin-right: 150px;
}
.block_left a{
background-color:#CCC; border-radius:4px; padding:4px; width:100%; display:block
}
.block_right{
float:right; width:130px; background-color:#CC9
}
... using position, you'll need to add position:relative to .block and then right:0 to .block_right; keep the margin on .block_left
Using positioning, you won't need to change the order of the elements in your markup (should that be an issue).
This may be what you require. :-)
.block_right{
position :absolute;
right:0;
top:0;
float:right; width:130px; background-color:#CC9
}
If you give your block_left a width:100% and then use margin-right:-130px; you can leave your html exactly as it is.
The negative right margin leaves space on the right hand side for other elements to fit into even though the element has a 100% width.
This is happening because of the width of right div..u gave 100% to the parent and 80% to the first child..so,when the browser size is 500px(say),the first child will occupy 400px(80%) of it...And when u give 130 px to the second child,it'll come to the next line..that's pretty obvious coz it doesn't have enough space in the first line...so it should be <=100px(for this example)...
Is there a way to prevent a line break after a div with css?
For example I have
<div class="label">My Label:</div>
<div class="text">My text</div>
and want it to display like:
My Label: My text
display:inline;
OR
float:left;
OR
display:inline-block; -- Might not work on all browsers.
What is the purpose of using a div here? I'd suggest a span, as it is an inline-level element, whereas a div is a block-level element.
Do note that each option above will work differently.
display:inline; will turn the div into the equivalent of a span. It will be unaffected by margin-top, margin-bottom, padding-top, padding-bottom, height, etc.
float:left; keeps the div as a block-level element. It will still take up space as if it were a block, however the width will be fitted to the content (assuming width:auto;). It can require a clear:left; for certain effects.
display:inline-block; is the "best of both worlds" option. The div is treated as a block element. It responds to all of the margin, padding, and height rules as expected for a block element. However, it is treated as an inline element for the purpose of placement within other elements.
Read this for more information.
.label, .text {display: inline}
Although if you use that, you might as well change the div's to span's.
A DIV is by default a BLOCK display element, meaning it sits on its own line. If you add the CSS property display:inline it will behave the way you want. But perhaps you should be considering a SPAN instead?
<span class="label">My Label:</span>
<span class="text">My text</span>
try this (in CSS) for preventing line breaks in div texts:
white-space: nowrap;
The div elements are block elements, so by default they take upp the full available width.
One way is to turn them into inline elements:
.label, .text { display: inline; }
This will have the same effect as using span elements instead of div elements.
Another way is to float the elements:
.label, .text { float: left; }
This will change how the width of the elements is decided, so that thwy will only be as wide as their content. It will also make the elements float beside each other, similar to how images flow beside each other.
You can also consider changing the elements. The div element is intended for document divisions, I usually use a label and a span element for a construct like this:
<label>My Label:</label>
<span>My text</span>
div's are used to give structure to a website or to contain a lot of text or elements, but you seem to use them as label, you should use span, it will put both text next to eachother automatically and you won't need to wright css code for it.
And even if other people tell you to float the elements it's best that you just change the tags.
I don't think I've seen this version:
<div class="label">My Label:<span class="text">My text</span></div>
<div id="hassaan">
<div class="label">My Label:</div>
<div class="text">My text</div>
</div>
CSS:
#hassaan{ margin:auto; width:960px;}
#hassaan:nth-child(n){ clear:both;}
.label, .text{ width:480px; float:left;}
Try applying the clear:none css attribute to the label.
.label {
clear:none;
}
use this code for normal div
display: inline;
use this code if u use it in table
display: inline-table;
better than table
try float your div's in css
.label {
float:left;
width:200px;
}
.text {
float:left;
}
I have many times succeeded to get div's without line breaks after them, by playing around with the float css attribute and the width css attribute.
Of course after working out the solution you have to test it in all browsers, and in each browser you have to re-size the windows to make sure that it works in all circumstances.
display: inline-block worked for me
ie I have a div, below is a hidden div, which is wider than the div above. I want to specify the div inside to have elements with greater widths than the div above. these elements right hand side is aligned to the right hand side of the div above, but since it is wider, want the left hand side to break out. The div below is on a diff layer than the div above as it only appears on clicking on trigger element of div above.
Basically its a drop down list, with some random elements are wider than the image element above which, when clicked drops this list. but i want the list underneath to expand to the left breaking out of the parent div, without specifying exact positions. Therefore, the elements are all children of the parent div and right aligned to it, just like parent.
Hmmm, hope you can follow. Really appreciate any help. Thanks in advance.
Negative Margins seems to be the best answer. If anyone knows of cross browser issues, please post here. Perhaps I will but shalln't be testing for them for a week or two.
You should probably just use a select tag (for accessibility's sake) even though it won't look as fancy. But if you're set on it, try something like this (and add your javascript code to hide/show the list):
#wrapper {
width: 500px;
}
#select {
border: 1px solid black;
width: 180px;
float: right;
}
#options {
float: right;
clear: right;
text-align: right;
}
and
<div id="wrapper">
<div id="select">pick one...</div>
<div id="options">
<div class="option">I'm short</div>
<div class="option">I'm a very very very very very long option</div>
</div>
</div>
If you end up using this, change the options div to a ul tag and the option divs to li tags, or something semantically closer to what you're building. I just used divs to cut down on the amount of css in my example.