Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am trying to place some links between my top area and bottom area so that they overlap both of them by an equal amount. I have the navmenu div set to a larger z-index than all the other div's but I can't get it to overlap anything. site is at http://www.joekellywebdesign.com/churchsample1/index.html
stylesheet is at http://www.joekellywebdesign.com/churchsample1/css/styles.css
Thanks in advance for the help.
Many ways to do it.
You can simply specify a negative margin for your navmenu
#navmenu {
margin: -10px 0;
}
Since you have specified the position as relative, which means the location of the div will depend on previous div. Its top would be the top plus the height of the previous div.
You can either change the position into absolute, or adjust the margin or padding values to display content inside the div in your way.
z-index will only be effective when elements are overlapping. In your case, all divs are in relative position. None of them is overlapping.
You could for instance do the following:
<div id="navmenu">
<div class="inner"><h1>Test text</h1></div>
</div>
and than in CSS:
#navmenu .inner {
padding-bottom: 15px;
margin-top: -15px;
position: relative;
z-index: 200;
background-color: #F00;
}
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am not asking this because it's a problem for me, actually, that's exactly how I wanted to display the divs, but I didn't know they would appear below each other. Why is that? I only gave them width and height, I didn't position them.
I thought they would appear on each other at the same position
<div class="D1">
</div>
<div class="D2">
</div>
<div class="D3">
</div>
<div class="D4">
</div>
.D1,.D2,.D3,.D4{
border:1px solid;
border-color:red;
width:500px;
height:200px;
}
/* OR
div{
border:1px solid;
border-color:red;
width:500px;
height:200px;
}
*/
Sorry for this probably dumb question, but I'm just curious :D
That's the expected behavior.
div by default are block elements which means that they always start on a new line and take up the full width available.
If you want elements to be on the same line and to only take up as much width as necessary, you must use inline elements, such as span.
Find here a complete reference
By default, the flow of the page will display your divs elements (which are blocks) one below another as you have seen.
If you want to override this behaviour you could set a
position: absolute;
property to your divs so they can be placed wherever you want regardless of the position of other elements. For example you may want to set all your divs at the top left corner by doing:
div {
position: absolute;
top: 0;
left: 0;
}
By default display property is block for div.Change it to inline to display in one line.
If you use float: left; in css, the problem will be solved. Because div element is a block level element.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I haven't used float for the divs in CSS rather I have used position. I used relative to position all the divs but all of them gets jumbled up in other screen resolutions. What am I doing wrong please clarify since I am new to HTML. Thanks in advance.
You shouldn't really use the position property unless you want something specific out of it. Block and inline elements do most of the work when it comes to position. With that said we still need the position:property in many cases. The most used kind of positions are relative and absolute, and I can help you understand these.
position: absolute; allows you to assign a specific position example:
div {
position: absolute;
top: 50px;
left: 50px;
}
What the previous code does is place the selected div element 50 pixels away from the top border and 50 pixels away from the left border. The tricky part is that you need to specify what your borders are going to be.
For this we use position: relative;. Example:
.parent {
position: relative;
}
.child{
position: absolute;
top: 50px;
left: 50px;
}
What the previous code does is set the parent element to be the reference to it's child element. So the position: absolute;child will be positioned 50 pixels away from it's .parenttop and left border. Hope this helps.
Here's w3schools article about positioning : W3 Positioning
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm working on Wordpress template, and got this little problem which is:
I can't position the date label above the image thumbnail, as you can see here:
http://cl.ly/image/3X1j3h3j0E0X
If I make it position: absolute its position would be changed while the windows is changing.
How could I implement the right CSS for that.
This is the CodePen example, try to resize the window:
`http://codepen.io/msabdullah/pen/rplgC`
You need to use a combination of position: relative and left right top bottom to position it correctly. It should be positioned relative to the parent element.
<div class="parent">
<div class="child">
</div>
<div>
If you had the above html structure then you would need to make sure both had positioning, and then position the child relative to the parent:
.parent {
position: relative;
}
.child {
position: relative:
top: 0;
right: 0;
}
This is just an example, but it should be something similar.
Try to give position relative to parent element to maintain the uniformity.
check the DEMO.
CSS like this: Where div is parent element have position:relative.
img, p{display:inline-block;}
div{position:relative;}
p{position:absolute; right:0; top:0;}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I want that the blue box at link is displayed the full width of the white area, the content...
code:
.info {
background-color: #3498db;
padding: 10px;
color: #fff;
font-weight: bold;
position: absolute;
z-index: 10;
}
thank you for your help...
You can set the width of 100%, this should be the full width of the content area...
Try this JQuery code:
var s=$('#content').width();
document.getElementById('home').style.width=s;
By using Inspect Element i found that #content is your parent(white background) div and #home is your div you want to adjust the width to the width of #container.
If its info class write:
var s=$('#content').width();
$('.info').css({'width':''+s+'px'});
If you want the blue content on 100% of #content, you should remove the padding on #content.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
How can I have a div with negative margins on both sides so that the div extends off the page on both sides?
I've used negative margins and only the left works, which makes sense. How can I get the right negative margin to work, as floating right solves the negative right margin but breaks the negative left margin.
Well, we dont know how your page look's like, but:
position: fixed and set right and left as negative should do the work.
You can set the width of the div to more than 100% and then set the negative left margin.
JSFiddle example
HTML:
<div id="overflow"></div>
CSS:
#overflow {
width: 120%;
height: 300px;
background: #DCDCDC;
border: solid 3px #333;
margin-left: -10px;
overflow: hidden;
}
In the example you can see that the border around the div only shows on the top and bottom and the sides of the div are hidden outside of the window.