Running tests for a previous question, I found a strange behavior that differs from browser to browser. I have a box with a border and relative positioning, and inside it, I have some text absolute positioned on the top left of the container, and I want the text to "overlap" the border (so it is positioned taking into account the border).
blonfu suggested that I could set the container display to table and that would do the trick. Something like this:
.box {
position:relative;
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box-bordered {
border:25px solid rgba(0,0,0,0.1);
display:table;
}
.text {
position:absolute;
top:0;
left:0;
color:white;
}
<div class="box box-bordered">
<div class="text">Text</div>
</div>
The result of running the code above on in Internet Explorer or Firefox looks like what I want:
But the same code in Safari or Chrome (WebKit browsers?) looks different:
Which one is representing it correctly? What should be the expected behavior/display?
You need an outer div. This is because the border is considered not part of the dom element. So the position absolute looks in the html container not including the border. Chrome is the one representing it correctly. Don't trust IE when it comes to CSS and HTML compliance.
https://jsfiddle.net/L3L6o8ew/1/
<div class="outer">
<div class="box box-bordered">
<div class="text">Text</div>
</div>
</div>
CSS
.outer{
position: relative;
}
.box {
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box-bordered {
border:25px solid rgba(0,0,0,0.1);
display:table;
}
.text {
position:absolute;
top:10px;
left:10px;
color:white;
}
Related
Hello all CSS newbie here,
I have a special case, where I want to position a text area on the edge of a div. I want the text area to be cropped even when a user types into the text area. I'm deeply confused on why does the textarea grows and pushes the position of the parent div even though I have set the parent div overflow to hidden ? Any ideas so that the textarea position stays as is (cropped)?
My code is as below:
HTML
<div class="wrapper">
<div class='box'>
<textarea class="text"/>
</div
</div>
CSS
.wrapper {
width:300px;
height:300px;
background:red;
}
.box {
width:200px;
height:200px;
background:blue;
overflow:hidden;
position:relative;
}
.text {
width:300px;
height:50px;
right:-250px;
background:yellow;
overflow:hidden;
position:absolute;
resize:none;
}
Here is the link to my Codepen
Thank you and deeply appreciate any thoughts and suggestions.
.wrapper {
width:300px;
height:300px;
background:red;
}
.box {
width:200px;
height:200px;
background:blue;
overflow:hidden;
position:relative;
}
.text {
max-width:300px;
height:50px;
right: 0;
background:yellow;
overflow:hidden;
position:absolute;
resize:none;
}
<div class="wrapper">
<div class='box'>
<textarea class="text"></textarea>
</div>
</div>
Your html code is not correct. And I used max-width for textarea.
Okay I have a small problem,who I cant solve.
I hope experts will help :)
As you can see I have 3 divs on my index site.
No in the middle is one input who is across header and main div.
And the yellow circles are divs with but images*
About the div images...their code is
The positions are random,not equal as I have done.
HTML and CSS
#container{position:relative;}
.circle{border-radius:50%;
width:127px;
height:127px
positionate:absolute;
}
#apple_img{
background-image:url(../images/sprite.png);
background-position: some pixels;
top:-5px;
left:15px;
}
#weight_img{
background-image:url(../images/sprite.png);
background-position: some pixels;
top:30px;
left:80px;
}
#bike_img{
background-image:url(../images/sprite.png);
background-position: some pixels;
top:100px;
left:20px;
}
<div id="container">
<div id="apple_img" class="circle"></div>
<div id="weight_img" class="circle"></div>
<div id="bike_img" class="circle"></div>
</div>
So my problem is when re sizing the windows it will go as the div1,they will go across each other. I need too to make it responsible,but when using mobile,i need them to disapear, and when on smaller displays I need them to adjust their size to display.
Is the positioning okay or should I use float?
Your question is very confusing but I guess that you want is something like this:
In can resize without problems using media queries.
Here is the link of mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/#media
You can also use float:left and position:relative for your divs and position:absolute for your input.
Here is my HTML and CSS code:
.circle {
}
#apple_img {
background:green;
width:100%;
height:100px;
float:left;
position:relative;
}
#weight_img {
background:red;
width:100%;
height:100px;
float:left;
position:relative;
}
#bike_img {
background:blue;
width:100%;
height:100px;
float:left;
position:relative;
}
/* use media query here to other resolutions >768px and <=768px for example */
div > input{
width:200px;
height:200px;
position:absolute;
left:50%;
margin-left:-100px;
top:50px
}
input{
width:200px;
height:200px;
position:relative;
float:left;
}
<div id="container">
<div id="apple_img" class="circle"></div>
<div id="weight_img" class="circle"></div>
<div id="bike_img" class="circle"></div>
<div><input type="text" value="Type here"></div>
</div>
I guess that your class "circle" is not doing what you want, then I commented it (try used it to check).
For the tags div > input and input you can use the media query to resize correctly your input.
Here is my jsfiddle: http://jsfiddle.net/dhvuakjr/
Ps.: It's position and not positionate like you wrote your class circle
Hope this help you.
I am trying to produce a progress bar with a divider bar that separates sections. This divider bar (child <div/>) hangs below the progress bar (parent <div/>). Thus, I want the progress bar to cover all of the divider bar except for the part that hangs below.
Here is a very simplified representation:
<html>
<head>
<style>
body {
width:500px;
margin:0 auto;
}
#parent {
width:50%;
height:30px;
background-color: yellow;
}
#child {
width:1px;
height:50px;
background-color:black;
float:right;
margin-right:100px;
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
</html>
How can I get the yellow part of the progress bar to cover up the intersecting portion of the divider bar?
Here is an image representing what I'm looking for:
Thanks in advance!
dunno if i get this right, but why dont you just give the child element a margin-top? (and reduce the height of the child div)
http://jsfiddle.net/7SMuJ/
if that is not an option you'd need to rearrange the elements so you could use z-index
Setting a parent to position: relative will allow you to absolutely position the marker. Since they'd both then be appropriate types for z-index, I would take that route. Here's a jsfiddle:
http://jsfiddle.net/WXDZF/
Seems to be the cleanest solution. In this case you really are trying to position something, not push something up or down, so I would recommend staying away from using a margin in an inorganic way.
You could just set your overlay on another container
#parent {
width:50%;
height:30px;
}
.innerParent{
background-color: yellow;
width:100%;
position:absolute;
top:0;
left:0;
display:block;
height:30px;
}
#child {
width:1px;
height:50px;
background-color:black;
float:right;
margin-right:100px;
z-index:1;
}
markup
<div id="parent">
<div class="innerParent">
</div>
<div id="child"></div>
</div>
You have to switch the paramaters from child to parent and visa versa, see below.
#parent {
width:100px;
height:30px;
background-color: yellow;
}
#child {
width:50%;
height:30px;
background-color:black;
float:right;
}
I have a div containing a span and I want the span to vertically and horizontally align to the center of my div.
Here's the fiddle : http://jsfiddle.net/RhNc2/1/
I've try margin:auto on the span and the vertical-align on the div, but it's not working
EDIT : My div and my span don't have a fixed height, it depends of the content, i've put it fixed on the fiddle just to show you
Add this to the div CSS:
display:table-cell; text-align:center
working fiddle is here: http://jsfiddle.net/sdoking/DCT85/
CSS:
#myDiv {
border:1px solid black;
height:50px;
width:200px;
vertical-align:middle;
display:table-cell;
text-align:center
}
#mySpan {
width:100%;
border:thin blue solid
}
Borders are for clarity :)
Vertical alignment is a tricky business, and I don't know if there's one tried-and-true way. The most reliable technique available in the last couple of years is to use a CSS table layout. The only downside to this approach is that it may not work on outdated browsers. Still, in my experience this is probably the best overall solution. See my example below:
<style type="text/css">
#container {
display:table;
border-collapse:collapse;
height:200px;
width:100%;
border:1px solid #000;
}
#layout {
display:table-row;
}
#content {
display:table-cell;
text-align:center;
vertical-align:middle;
}
</style>
<div id="container">
<div id="layout">
<div id="content">
Hello world!
</div>
</div>
</div>
Here's a jsFiddle: http://jsfiddle.net/aGKfd/2/
There's another technique, but it's not as foolproof as the above technique. It involves two containers, with the outer container's position set to relative and the inner set to absolute. Using absolute positioning on the inner container you can get close, but it requires some tweaking to get it just right:
<style type="text/css">
#vertical{
position:absolute;
top:50%;
left:0;
width:100%;
text-align:center;
}
#container {
position:relative;
height:200px;
border:1px solid #000;
}
</style>
<div id="container">
<div id="vertical">
Hello world!
</div>
</div>
Here's a jsFiddle: http://jsfiddle.net/6SWPe/
use line-height = height:
http://jsfiddle.net/RhNc2/8/
You can also just apply these styles to the containing <div>. The line-height solution assumes you only need one line of text to be centered though.
#myDiv{
border:1px solid black;
height:50px;
width:200px;
text-align:center;
line-height:50px;
}
Here it is
#myDiv{
border:1px solid black;
height:50px;
width:200px;
}
#mySpan{
display:block;
text-align:center;
line-height:50px;
}
And the jsFiddle: http://jsfiddle.net/Simo990/RhNc2/9/
Edit: since your div and span height depends of the content, my solution will not work, because it needs fixed height and only one row of text. Just look for a solution with position:absolute.
I have two divs that I want to appear on top of each other. I was able to do this by setting the top in css. My problem is that now there is a big gap where the div used to be. I would like to get all of the subsequent content to float up and fill that gap.
You can see the fiddle here: http://jsfiddle.net/MzvC4/
Any suggestions on how to achieve this?
Should be able to do this:
#Navigation{
position:absolute;
margin-top:-250px; //or whatever px it is
}
http://jsfiddle.net/MzvC4/1/
Set your bottom margin to the same offset:
#Navigation{
margin-bottom: -249px;
}
You can do this without using any negative margins - if you simply change the position property to absolute, it will be taken out of the flow of elements, and other elements will move up to accommodate that. Then, to accommodate for the <body>'s 10px of padding, just apply top: 10px; to move it directly on top of your <div id="Carousel">. http://jsfiddle.net/MzvC4/4/
#Navigation{
position:absolute;
top:10px;
}
There is no need to use so many selectors. Just remember, use ID if the selector is used ONCE and class for repetitive, or common, styles. Here is the adjusted code:
Fiddle: http://jsfiddle.net/MzvC4/
The HTML:
<div id="carousel">
</div>
<div id="navigation">
</div>
<div id="tabs">
</div>
<div id="subtabs">
<div id="lefttab" class="subtabcontent">
<p>This is left tab content</p>
</div>
<div id="righttab" class="subtabcontent lasttab">
<p>This is right tab content</p>
</div>
</div>
And the CSS:
div{
border:1px red solid;
}
#carousel{
margin:0 auto;
width:985px;
height:249px;
background:blue;
}
#navigation{
margin:0 auto;
width:800px;
height:100px;
background:green;
}
#tabs{
height:113px;
width:800px;
height:50px;
margin-left: auto;
margin-right: auto;
background:yellow;
}
#subtabs{
margin:0 auto;
width:800px;
height:133px;
background:#ccc;
}
#lefttab, #righttab {
float:left;
margin:0;
width:370px;
height:133px;
background:#fafafa;
}
#righttab {
margin-left:56px; /* instead of #spacer */
}
.subtabcontent p {
/* place tab specific styles here */
padding:6px;
font-size:1em;
}
.lasttab {
font-size:2em;
font-weight:bold;
}