I am puzzled by nested DIV's with Position set to absolute, perhaps someone could guide me :)
My goal is: 1 navbar with 2 div's for points and life, both containing text and 1 icon, i want to absolute position the div's so i can later manipulate them via jQuery.
my problem is, when i nest elements within my points and life div, they go all bananas for me, the overlap and top/right does not seem to have any effect, also the elements within the div's does not comply to my position:absolute, i've tried all sort of combinations with relative, absolute, display:block etc. but without any result.
i compiled a Fiddler to help visualize my problem:
Fiddler link
if i change the div's within points/life the icon seems to behave, but the h2 text is still giving me problems ?...
any idea/solution to my nested div chaos :D. .
<div class="gameWrapper">
<div class="navBar">
<div class="points">
<h2>points</h2>
<div class="imageClass"><div>
</div>
<div class="life">
<h2>life</h2>
<div class="imageClass"><div>
</div>
</div>
</div>
.gameWrapper{
position: absolute;
overflow:hidden;
width:100%;
height:100%;
background-color: #eee;
}
.gameWrapper .navBar{
position:relative;
overflow: hidden;
height:69px;
width:100%;
top:0;
left:0;
border: 1px solid #00f;
}
.gameWrapper .navBar .points,
.gameWrapper .navBar .life{
position: absolute;
overflow:hidden;
top:15px;
}
.gameWrapper .navBar .points .imageClass,
.gameWrapper .navBar .life .imageClass{
position: absolute;
top:0;
right:0;
width: 30px;
height:30px;
background: #fff url(http://drytech.dk/wp-content/uploads/2013/03/pdf-icon.png) no-repeat 0;
}
.gameWrapper .navBar h2{
position: absolute;
top:0px;
}
.gameWrapper .navBar .points{
right:140px;
width:150px;
height:30px;
border: 1px solid #0f0;
}
.gameWrapper .navBar .life{
right:50px;
width:80px;
height:30px;
border: 1px solid #f00;
}
I would start by closing your div tags for your imageClass elements.
Making the h2 tags inline would also help. You can either do this with display: inline; or changing them into a default inline element, like a span.
Here is the fiddle
Changing the h2 tags into span tags, like I did for the fiddle, removes some of the default styling. Something to consider if you choose that route.
Related
Let's say I have the following rectangle box (this is a div) and I would like to represent an arrow on the left side. I was searching for a really simple way of doing but every solution I found is a little tricky for my purpose.
<div class="redbox">
<b>Hello world</b>
</div>
.redbox {
display: inline-block;
padding: 5px;
background-color: red;
}
http://jsfiddle.net/3N6yP/
How to transform this simple div to show an arrow on the left side?
Something like it:
Here am using a CSS triangle which is positioned absolute to the element, and than and using :before pseudo, so that, it creates virtual element for you. This will just save you few characters in the DOM. Just make sure you use position: relative; for the element having class .redbox, so that the absolute positioned virtual element doesn't fly away in the wild.
Demo
.redbox:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right:15px solid #f00;
top: 0;
left: -15px;
}
You can use this cross-browser generator: http://cssarrowplease.com/
I've found that the "border trick" sometimes has unpredictable margin offsets across different browsers (and of course depending on your markup) and prefer other methods.
I'd personally use a proven method and use an image. Depending on your situation you can just have one sprite image or you can wrap your arrow and content.
http://jsfiddle.net/3N6yP/5/
HTML:
<div class="redbox">
<span></span><div>Hello World</div>
</div>
CSS:
.redbox {
display: inline-block;
padding: 5px;
background-color: red;
}
.redbox div{
height:30px;
background:#ff0000;
display:inline-block;
line-height:30px;
}
.redbox span{
float:left;
display:block;
height:30px;
width:20px;
background:#333333 url(http://i.stack.imgur.com/cUsjz.png) center left no-repeat;
}
I'm trying to add an icon next to a centered text on hover, wo centering both text and icon. I want the icon to be placed directly after the centered element. Picture should explain it. Preferably I would like to use flexbox. This is what i currently have: http://jsfiddle.net/TmdZ3/
HTML
<div class="container">
<span>Label</span>
<i>icon</i>
</div>
CSS
.container {
height: 150px;
width: 150px;
border: 5px solid grey;
display: flex;
align-items: center;
justify-content: center;
}
i {
display: none;
}
.container:hover > i {
display: flex;
}
You'll have to make a small change to your markup and put the icon inside the span to then position it relative to its parent:
http://jsfiddle.net/TmdZ3/1/
span {
position: relative;
}
i {
display: none;
position: absolute;
top: 0;
right: -30px;
}
Note that the right: -30px; would have to be adjusted according to your icon's size and spacing to the span.
You should create a new span, make its position to be absolute, keeping relative to its immediate parent and then he would get what he is looking for on hover.
WORKING DEMO
The Code:
<div class='wrapper'>
<span>Label</span>
</div>
.wrapper{
padding:20px;
border:4px solid grey;
display:inline-block;
color:black;
font-size:22px;
font-family:verdana;
position:relative;
width:100px;
height:30px;
}
span{
padding:0 20px;
color:black;
text-decoration:none;
position:absolute;
}
Hope this helps.
What have you tried at present? Have a look at this FIDDLE which expands on the code example below.
This should be done by setting the background of the :hover css to something like:
background-image:url(myicon.png);
background-repeat:no-repeat;
background-position:right center;
The the regular link css to something like
padding:0 15px;
I got a problem in which my DIV which is position:relative doesn't acknowledge his position:absolute children. Therefore it causes a problem which the next position:relative div is showing at the incorrect spot.
CSS:
#header{
margin: 0 auto;
position:relative;
width:740px;
outline:2px solid black
}
#header #logo{
position:absolute;
width:218px;
height:69px;
background-image:url('../images/Logo.png');
top:15px;
left:30px;
text-indent: -999px;
overflow:hidden !important;
}
#header #logo a{
width:218px;
height: 69px;
}
#header h1{
color:#437297;
font-size:26px;
font-weight: normal;
position:absolute;
top:25px;
right:15px;
letter-spacing: 0.5px;
}
/* content */
#content{
position: :relative;
margin: 0 auto;
width:1024px;
outline: 1px solid red;
min-height:10px;
}
HTML:
<div id="header">
<div id="logo">some text</div>
<h1>My Page</h1>
</div>
<div id="content">
</div>
To demonstrate the problem:
http://jsfiddle.net/qBbYR/
The problem is, the BLACK outlined DIV is the Header DIV which should be at the top of the page, and the RED outlined DIV is the CONTENT DIV which should be right after the HEADER DIV.
As you can see, the header DIV ignores it's children because they are positioned absolute, and that causes design problems.
What can I do to solve this problem?
Absolute positioning takes elements out of normal flow. If you want them to influence the height of their containers, don't position them.
Use padding, margin, floats and display inline-block instead.
Well, positioned tags are kind of autistic. If you need a container to adjust to its children's dimensions, you have two choices:
Explicitly set container dimensions; or
Make children not-positioned (better IMO).
I want to set solid border width like as picture. What can I do? Thanks for answers
|
|
----- -------
|
|
You can visually achieve this result if you apply border-radius to the parent container.
The child container needs to have a solid background (that matches the background of the wrapper element). Like so: http://jsfiddle.net/skip405/JgsKM/
It's not easy to do borders like that just by using CSS border properties. You'd have to resort to some kind of trickery to cover over the borders at each corner.
You are better off using a background image for this task. Prepare an image with the right and bottom lines and place it on the background of those rectangles, positioned bottom right on each one. (Obviously you'd prepare the background image so that those gray lines don't meet at the bottom right corner—just as in the image you posted.)
This is assuming that you have a fair idea of the width and height of the elements, so it's not a perfect solution, but will get you pretty close.
img {
border:solid rgb(165, 162, 162)
border-top:none;
}
I think you should add 4 child divs for mask borders parent div.
Html
<ul class="list">
<li>
<div id="holder"> <!--parent div-->
<div id="maskTopLeft"></div> <!-- child 1 for mask border on top-left -->
<div id="maskTopRight"></div> <!-- child 2 for mask border on top-right -->
<div id="maskBottomLeft"></div> <!-- child 3 for mask border on bottom-left -->
<div id="maskBottomRight"></div> <!-- child 4 for mask border on bottom-right -->
</div>
</li>
</ul>
css
#main { width:100%; margin:10px; }
.list {
margin: 0px;
padding: 0px;
list-style-type: none;
position: relative;
}
.list li {
float:left;
margin-right: -0.5px;
margin-top: -0.5px;
}
.list li:first-child #holder {
border-right: 0.5px solid #000;
}
.list li:last-child #holder {
border-left: 0.5px solid #000;
}
#holder {
border: 1px solid #000;
height: 250px;
width: 200px;
position:relative;
}
#maskTopLeft {
position: absolute;
top:-1px;
left:-1px;
width:21px;
height:20px;
background-color:#fff;
}
#maskTopRight {
position: absolute;
top:-1px;
left:180px;
width:21px;
height:20px;
background-color:#fff;
}
#maskBottomRight {
position: absolute;
top:230px;
left:180px;
width:21px;
height:21px;
background-color:#fff;
}
#maskBottomLeft {
position: absolute;
top:230px;
left:-1px;
width:21px;
height:21px;
background-color:#fff;
}
demo on cssdeck
You can use background-image properties in css the best and easy way
http://www.w3schools.com/cssref/pr_background-image.asp
set a backgroud image to the div-container where the images is in it. this background image is white and has the to borders (right side, bottom side) as you want. i think that's the solution for your problem, because otherwise the borders will look different
I am working on a site where a 3rd party in-line HTML editor is being used (CKEditor). I have the editor control wrapped in a DIV that is relatively positioned and has a z-index that places is at the top of the visible stack. The problem is that on some pages there are images that are floating (float: right) on the right side. Some of the CKEditor styles are setting elements overflow property to hidden (overflow: hidden).
So although my containing DIV has a larger z-index than the floating image the CKEditor elements are not overflowing on top of the image. This creates the a result that looks as if the top right corner of the editor has been cut out.
Is there a way I can work around this without trying to edit CKEditor styles? Check out this example sinario:
http://jsfiddle.net/nmartin867/StHJA/
HTML
<body>
<div class="floating">
I'm floating!
</div>
<div class="container">
<div class="inner">
Why am I not overlapping?
</div>
</div>
CSS:
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:visible;*/ <--This would work
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
float:right;
}
You could do this but I am not sure if it applies to your situation.
.inner{
background-color:yellow;
position: absolute;
width:100%;
text-align: right;
}
Alternatively when you want to override third party styles but do not wish to edit them in the third party application you can recreate the same css class in your own stylesheet and force it to overwrite the third parties by using important! eg:
float: none !important;
Have you tried absolute positioning instead? Because you are floating a DIV that is not in the same container you want to overlap, it will position outside in the body itself. Also, you did not set the z-index for the floated DIV, so it will be layered behind because it is ahead of the other container in sequential order.
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:hidden;*/
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
/* float:right;*/
position:absolute;
top:0px;
right:0px;
z-index:2;
}
I am not sure if this is the effect you want to accomplish, but this will position the first container on the top.