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 have two spans with inline-block display, in responsive mode (for resolution lower than 768X1024) I need to position one on top of the other so I set display to block but the wrong one is on top how can i make the second span to go on top?
thanks
See if this variation helps:
http://jsfiddle.net/panchroma/RLSkL/
The important bits are that I flipped the order of the two divs in the HTML then used CSS to manage the layout
CSS
/* pull the first div to the right and the second to the left for desktop views */
#loginContent{
width:330px;
float:right;
}
#attensions{
width:330px;
float:left;
}
.LgnBtn{
clear:both;
}
/* for tablets and smartphones, remove the floats above */
#media (max-width: 790px){
#loginContent{
width:100%;
float:inherit;
}
#attensions{
width:100%
float:inherit;
}
}
Hope this helps!
Use float:left on the <div> you'd like to be on top.
the only way is move up the #loginContent in your html code, in other hand you can use absolute position to set their position as you like. for exam:
#attensions{
position: absolute;
top: 180px;
}
#loginContent{
position: absolute;
top: 0;
}
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 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 debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a top div with some text floated to the left and a div floated right that contains an ad image, social media links, and a search box. My search box is not floating right even though it is in it's own div that I have set to float right. It also appears my ad is not floating right. Also, my social media icons are showing up backwards. Many thanks for the help.
#gsc-control-cse form.gsc-search-box { float:right; width: 200px; }
Fiddle: here
Image of what site looks like when I preview is here
Remove the float right on the inner elements and remove the width 70% on #top-right
#top-right {
float: right;
}
#top-right ul li {
display: inline;
list-style-type: none;
}
#gsc-control-cse form.gsc-search-box {
width: 200px;
}
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;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
Have a look at mockup image
The site have a fixed content width. I need elements inside a red area to be stretched, depending on the screen width. So in case it's like on the image, green and blue stripes should go till the end of the screen. If screen is wider, site content area( that is inside the vertical red lines ) will be the same. But blue and green lines will stretch more, to reach the sites left and right side.
I was going to implement it using absolute positioning. But I need to know the width of the block. And as it can be different I do not know how to do it, except for using javascript. but I'd like to use html and css only.
There are many ways to accomplish this, but the coolest of all is using the before & after pseudo elements to fill in the edges.
.container {
width: 1200px; /* whatever... */
margin: 0 auto;
}
.header {
position: relative;
background: #000; /* whatever... */
}
.header:before, .header:after {
content: '';
position: absolute;
background: #000; /* whatever... */
top:0 ; bottom: 0; width: 999em;
}
.header:before {
right: 100%;
}
.header:after {
left: 100%;
}
Here's the fiddle: http://jsfiddle.net/bnket/
Check out this cool article by Chris Coyer: Full Browser Width Bars.
using css assume your center content is 800px in width..
You would add 800 plus the width of the stripes and asign fixed left & right
thats about it.
This is all i can provide due to the lack of a jsfiddle
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a html page wherein Image and Text come adjacent to each other, as shown in the markup below:
<div><img src="image1.png"/><p>First Image</p></div>
<div><img src="image1.png"/><p>First Image</p></div>
I want the Image and text align side by side under every DIV and all divs to be listed in the page.
Please help me how to achieve this with CSS, without using tables.
I would use display: inline-block
img {
width: 100px;
display: inline-block;
}
p {
display: inline-block;
}
DEMO jsFiddle
If i am understanding you right, you wan't your text to be inline with your image. well if that's the case then the reason this doesn't happen already is becuase a paragraph <p> element is a block element so it would be the whole width of its containing parent. If you wan't to display it inline use display inline on your <p> tag like this
div p{ /* Change this according to your selectors. */
display: inline;
}
div{
overflow:hidden;
display:inline;
}
div img{
display:inline-block;
}
div p{
display:inline-block;
}