I have some css problem. here is what I need.
No matter how many words the title have(example: title could be What's new today?, could be hello world)
it always have a background line pass through the whole div, and the word's background is white. (the word should be text-align:center; and it's background looks like broken the line)
Here is my code:
<style>
.ocell {
width:960px;
height:42px;
text-align:center;
padding: 20px 0 20px 0;
}
.wd {
margin: 0 auto;
background-col: white;
margin-left: -10px;
padding: 5px;
}
.line {
position: absolute;
border-bottom: solid 1px #999;
margin-top:-18px;
width: 960px;
}
</style>
<div class="ocell">
<div class="wd">Title</div>
<div class="line"></div>
</div>
also in http://jsfiddle.net/zApLA/ may be also can use a background-image instead of the line. Thanks.
This can be achieved by simply using div with border-bottom for the line, and positioning element with text on that line. Fiddle here.
Couple of problems with your CSS.
One - the .wd div spans the entire width of page (defaults to 100%)
Two - no z-index sset to say which div should be on top of which.
Try this code (worked in fiddle)
.ocell {
width:960px;
height:42px;
text-align:center;
padding: 20px 0 20px 0;
}
.wd {
margin: 0 auto;
background-color: #f0f;
margin-left: -10px;
padding: 5px;
font-size:20px;
z-index:10;
border:1px solid #f0f;
display:inline;
}
.line {
position: absolute;
border-bottom: solid 1px #999;
margin-top:-15px;
width: 960px;
z-index:-1;
}
Related
I have a jsfiddle here https://jsfiddle.net/z0yjvksg/38/
Super simple but its driving me mad.
I just need to center the select menu and label (red box) in the container (green box).
I've tried everything I can think of without actually adding padding or margins to push the box across.
.form{
border: 1px solid green;
padding: 10px 0;
}
.search-form__by{
border: 1px solid red;
display: inline-block;
margin: 0 auto;
//text-align: center:
label{
float: left;
margin: 7px 10px 0 0;
}
select{
width: 200px;
}
}
Add:
.row {
text-align:center;
}
jsFiddle example
Or if you're using Bootstrap, add the class text-center to the row div: <div class="row text-center">
Add text-align to form class.
.form{
border: 1px solid green;
padding: 10px 0;
text-align:center;
}
Full solution:
https://jsfiddle.net/hs0bxyny/
I have this code JSFiddle :
HTML
<div id="logo"></div>
<div id="menu"></div>
CSS
#logo {
width: 400px;
height: 100px;
margin: auto;
background-color: beige;
}
#menu {
width: 200px;
height: 100px;
margin: auto;
background-color: green;
}
#menu:hover {
border-top: 15px #f39539 solid !important;
margin-top: -15px;
}
It works very good but when i was playing with CSS values i found something that i didn't understand.
My question is why when i put value lower than -15px in margin-top, my menu div don't go up when i hover over it ?
why margin-top: -30px; is the same that margin-top: -15px; ?
P.S : 15px is also the value of my border-top-width.
UPDATE
and what is weird is when i drop border-top: 15px #f39539 solid !important; when i hover, My DIV go up without problem even when i put margin-top: -50px; ! JSFiddle
#menu:hover {
/* border-top: 15px #f39539 solid !important; */
margin-top: -50px;
}
I think if I understand what you are asking is....
What you are seeing is margin collapse.
It's when you have two adjoining margins, the largest wins - the smallest is lost.
More details here: http://reference.sitepoint.com/css/collapsingmargins
Container #666 has margin: 20px; overflow: hidden;.
Nodes #333 have margin: 20px 0 0 20px; float: left;.
Example, http://jsbin.com/owejal/3/edit or picture:
However, the intended result is:
container with 20px margin,
children with 20px margin in-between, but not with the container.
This could be achieved using negative padding (i.e. if container had padding: -20px 0 0 -20px), though such thing does not exist.
The desired result can be achieved using additional element (http://jsbin.com/owejal/4/), though I am keen to learn whether there is CSS only solution.
If you only care about the spacing between the elements, you can discard the pseudo element. It's only there for the background.
http://codepen.io/cimmanon/pen/mucDv
<div class="foo"></div>
<div class="group">
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
</div>
<div class="foo"></div>
The CSS:
.group {
overflow: hidden;
margin: -10px 0 -10px 10px;
padding-right: 10px;
position: relative;
}
.group:before {
display: block;
content: '';
position: absolute;
z-index: -1;
top: 10px;
right: 20px; /* 20px instead of 10px due to padding */
bottom: 10px;
left: 10px;
background: #666;
}
.node {
width: 100px;
height: 100px;
float: left;
background: #333;
margin: 10px;
}
.foo {
height: 20px;
background: #00f;
margin: 20px;
}
This is a little hacky, but how about just hiding the top and left margin areas with some strategically placed pseudo-elements?
http://jsfiddle.net/SUJtd/
.foo {height:20px; background:#00f; margin:20px 20px 0;}
.group {overflow:hidden; margin:0 20px 20px 0; background:#666; position:relative;}
.group:before{content:""; position:absolute; top:0; left:0; right:0; height:20px; background:#fff;}
.group:after{content:""; position:absolute; top:0; bottom:0; left:0; width:20px; background:#fff;}
.node {width:100px; height:100px; float:left; background:#333; margin:20px 0 0 20px;}
No extra HTML tag - but a class change & No Pseudo elements
A simple trick which probably should work for you :
http://jsbin.com/owejal/65/edit
Screenshot:
Will work with all possible number of nodes :)
<div class="foo"></div>
<div class="group">
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
</div>
<div class="foo2"></div>
CSS:
.group { overflow: hidden; margin: 20px; margin-bottom:0px; /* margin is required */ background: #666; }
.node { width: 100px; height: 100px; float: left; background: #333; margin: 0px 20px 20px 0px; /* there must 20px gap between every node, but not the container */ }
.foo { height: 20px; background: #00f; margin: 20px;}
.foo2{
height:20px;
background:#00f;
border-top:20px solid white;
margin:20px;
margin-top:-20px;
}
Since you didn't mention resizability as requirement, you could simple use a nth child declaration like in here:
http://jsbin.com/owejal/51/
However, this solution is optimized for fixed widths of parent container, so there should always be 4 elements in a row for example. Nevertheless, its css only.
Change the margin of the node to:
.node { margin: 0 20px 20px 0; }
See http://jsbin.com/owejal/52/edit. Note that this will still give you extra padding at the bottom, but this is a common issue that isn't easily solved. See http://css-tricks.com/spacing-the-bottom-of-modules/ for various ways to solve this (though in the case you presented, none of these solutions work).
The following CSS will get you the desired result, actually you will still have 2 limitations:
If you change the background of body, you need to update the border color for element .foo
The inner nodes still have right margin, this is also the case your desired result screen shot (.group can have 5 nodes, but in this solution it will only have 4).
.group {
overflow: hidden;
margin: 20px; /* margin is required */
background: #666;
}
.node {
width: 100px;
height: 100px;
float: left;
background: #333;
margin: 0px 20px 20px 0px;
}
.foo {
height: 20px;
background: #00f;
margin: 20px;
}
.group + .foo {
height: 20px;
background: #00f;
margin: 20px;
position: relative;
top:-40px;
border-top: 20px solid #fff;
}
You can still find the solution here
This question already has answers here:
Div layout with 3 columns: fixed - liquid - fixed
(2 answers)
Closed 9 years ago.
Here is my code: http://jsfiddle.net/2Mtcq/.
I want the middle column to be fluid, but left and right colums - to be set width. How do I make the middle fluid? I want it to look something like:
https://dl.dropboxusercontent.com/u/22358199/Screen%20Shot%202013-05-31%20at%2011.00.31%20AM.png
body {
margin:10px;
}
#header {
width:600px;
background-color: #f0efee;
}
#main{
width:600px;
}
#leftcol {
background-color: #f0efee;
float:left;
margin: 10px 10px 10px 0;
width:100px;
}
#midcol {
background-color: #FFC;
margin: 10px 10px 10px 0;
float:left;
}
#rightcol {
background-color: #FCF;
float: left;
margin: 10px 0 10px 0;
width:100px;
}
#footer {
width:600px;
background-color: #f0efee;
clear:both;
}
Working jsFiddle Demo
Change your HTML to this one:
<div id="main">
<div id="leftcol">Left</div>
<div id="rightcol">Right</div>
<div id="midcol">Middle middle Middle middle Middle middle</div>
</div>
I've put midcol after left and right.
And in your CSS:
Float your rightcol element with right.
Change the margin of midcol to margin: 0 110px; (from left and right, each 110px: 100px for columns, 10px for gaps.
Add margin: 10px 0; to #main element.
Remove unnecessary properties.
Here you are:
#main {
width:600px;
margin: 10px 0;
}
#leftcol {
background-color: #f0efee;
float:left;
width:100px;
}
#midcol {
background-color: #FFC;
margin: 0 110px;
}
#rightcol {
background-color: #FCF;
float: right;
width:100px;
}
Also you can make your #main width to 100% for having a full page width:
#main {
width: 100%;
margin: 10px 0;
}
If you are not supporting IE8, you can use calc on your CSS.
#midcol {
background-color: #FFC;
margin: 10px 10px 10px 0;
float:left;
width: calc(100% - 220px);
}
For see browser support click here
Try This
#midcol {
min-width:100px;
width:auto;
background-color: #FFC;
margin: 10px 10px 10px 0;
float:left;
}
Have a look at this, gives an explanation about this: Div width 100% minus fixed amount of pixels
it explains all the details
the best solution i see is using css calc as stated in that link.
example here: http://jsfiddle.net/2Mtcq/7/
#midcol {
background-color: #FFC;
margin: 10px 10px 10px 0;
float:left;
width: -moz-calc(100% - 220px);
width: -webkit-calc(100% - 220px);
width: calc(100% - 220px);
}
browser support of calc here: http://caniuse.com/calc
you could use that and as a worst case have JS fallback.
I've got three div elements within one class, which in html document it looks like that:
<div class="content">
<div id="content_head">
<!--CONTENT HEAD CODE-->
</div>
<div id="between_ads">
<!-- ADS HERE -->
</div>
<div id="content_middle">
<!--CONTENT MIDDLE CODE-->
</div>
</div>
And css code for these:
.content
{
position: relative;
width: 75%;
float: left;
left: -52px;
margin: 5px 0 10px 0;
border-right: 1px solid #D9D9D9;
}
.content #content_head
{
/*position: relative;*/
width: 100%;
float: left;
border-bottom: 1px solid #D9D9D9;
}
.content #content_middle
{
/*position: relative;*/
width: 100%;
float: left;
margin: 5px 0 0 0;
border-top: 1px solid #D9D9D9;
border-bottom: 1px solid #D9D9D9;
}
/*BETWEEN ADVERTS*/
.content #between_ads
{
position: static;
width: 100%;/*737px;*/
height: 10px;
/*margin: 302px 0 0 -17px;*/
margin: auto;
padding: 0;
background: #000;
}
/*BETWEEN ADVERTS*/
The problem is, that resulted code for BETWEEN ADVERTS looks like this:
http://i.stack.imgur.com/ZU2FD.png - black bar over window "Polecane" that's highlighted in blue - but this div element should be placed here:
http://i.stack.imgur.com/ww0Ko.png - where is the yellow highlight.
Setting .content to position: absolute and rest to relative brakes totally the layout of .content class.
I'm quite new to html and css and still not everything understand.
Cheers
Try taking out the position and float of all your divs. Divs naturally like to be sitting one on top of another so adding positioning css disrupts it I would think.