I have a website in which the layout looks something like this: (image below)
On the left panel, I have a div which displays a logo. I have another div which I want to put beneath the logo and so divs these have to be these stacked over each other. I tried fiddling with the z-indexes, but didn't quite get the rquired thing.
How can this be done?
If z-index is not working for you try nesting the logo <div> in a wrapper <div> something like this
<div> <!--div container to hold the logo div-->
<div><!--Logo div--></div>
</div>
Reference: jsFiddle Logo Demo
Status Update: jsFiddle Logo Demo Just Border Version
The above jsFiddle has extensive notes in the CSS Section so you can understand how to setup your specific Logo.
HTML:
<div id="logoHolder">
<div id="logoContent">
<div id="logoImage"></div>
</div>
</div>
CSS:
#logoHolder {
width: 296px;
height: 296px;
background-color: white;
border: 3px solid red;
}
#logoContent {
width: 256px;
height: 256px;
padding: 20px;
position: relative;
border: 1px solid black;
}
#logoImage {
background-image:url(http://img841.imageshack.us/img841/4718/securitysealred256x256.png);
background-repeat: no-repeat;
background-position: center center;
background-color: aqua;
height: 100%;
}
Try to use also position: absolute; instead of relative for both elements when using z-index. Then it can make some distortion in your layout, so you can put the logo divs inside another relative div or use some other technique to fix it, however it must work when using position absolute and z-index. If it is still not working, check if some of your javascript is not interfering or if some other elements in your code have z-index, so it is causing the problems.
If using position absolute, do not forget to define margin-left and margin-top.
I'm not sure what you want to achieve but try this, adapting the values to your layout
Try using the margin property, as shown in your image. If you put margin-left as a negative value for the right-side div, then the right-side div will move below/above the logo div.
Related
I will be making the arrows clickable to scroll left/right in the div
I have a div which contains a bunch of elements (arrows are not included in the div for my method) as seen here
I want to align the arrows as seen in the image, however these are not responding as expected when the page is a different size due to the terrible method I have wrote.. what would be the best way to do the above?
At the moment my code looks like this:
<img src={arrowLeft} alt="Left Arrow" className="arrow"></img>
<div className="gridRow">
......content for elements here.......
</div>
<img src={arrowRight} alt="Right Arrow" className="arrow right"></img>
And the CSS:
/*Arrow images*/
.arrow {
border: 1px solid red;
position: absolute;
top: 121%;
}
.arrow.right {
left: 91.7%;
}
.arrow:hover {
cursor: pointer;
}
Thanks
Instead of giving position: absolute to the two arrows (which will make them unresponsive to screen changes), you could just wrap everything inside a div and give the div the following CSS properties:
display: flex;
align-items: center.
This way, all the elements will be in a row and vertically centered.
This problem arises when you are using a position:fixed top nav bar: Since the nav bar is out of the document flow, the initial content that you put after it will be hidden by the nav bar itself. This fiddle shows my solution which uses an extra spacer div and padding-top:
http://jsfiddle.net/MFwJT/
html
<div class="fixednav">some nav stuff</div>
<div class="navspacer"></div>
main content which should not be covered by nav
css
.fixednav { position:fixed; width: 100%; height: 30px; background: #999 }
.navspacer { padding-top: 30px; } /* This works */
2 questions
Is there a better solution?
If you change padding-top to margin-top, the nav bar behaves as if the spacer came before it rather than after it. I'd like to know why this happens.
To clarify question 2, margin-top produces this:
whereas padding-top produces this (the correct behavior):
Is there a better solution
IMHO, better solution would be to avoid a fake spacer div navspacer and instead, go with the span as you can easily achieve your target with a single div, using line-height and without a fake div
Example Fiddle
CSS
.fixednav {
width: 100%;
height: 30px;
background: #999;
line-height:90px; /*this is the key here*/
}
.fixednav > span {
position:fixed;
display:block;
width:100%;
line-height:30px;/*this is the key here*/
}
HTML
<div class="fixednav">
<span>some nav stuff</span>
main content which should not be covered by nav
</div>
Question 2
If you change padding-top to margin-top, the nav bar behaves as if the spacer came before it rather than after it. I'd like to know why this happens.
when you give the padding-top: 30px;, it is applied to the inside of the content area, making the whole div height (30px + if anything is in content), check this demo to see it
when you give margin-top: 30px;, it is applied to the outside of the content, demo and the contents overlap as FIXED position divs do not follow the document flow but the viewport flow!!
The problem here is that you fixed the position of the fixednav but not the navspacer. When you do this, the fixednav and navspacer are on the same line since one is fixed and not the other. When you add padding to the navspacer, it pushes away the fixednav from it. When you add margin-top:30px; it moves the fixednav and navspacer together. To fix this, add a fixed position to the navspacer and add the content to the fixed navspacer:
/*html*/
<div class="fixednav">some nav stuff</div>
<div class="navspacer">main content which should not be covered by nav</div>
/*css*/
.fixednav { position:fixed; width: 100%; height: 30px; background: #999 }
.navspacer { position:fixed; margin-top: 30px; }
This will give you the correct behavior you are looking for.
Here is a link: http://jsfiddle.net/4vAgZ/
Also, this picture should help you with the padding vs. margin thing.
http://s3.amazonaws.com/codecademy-blog/assets/ae09140c.png
Hope this helps.
You can use a div for spacing like youtube does.
Here i made an example wich uses javascript to listen on window resizes and adjusts the spacer if necessary.
But you can also use this jQuery plugin for every single div.
//initial adjustment
$(function () { $('#topSpacer').height($('#fixedtop').height()); });
//adjustment on every resize event
$(window).resize(function () {
$('#topSpacer').height($('#fixedtop').height());
console.log("<div>" +$('#topSpacer').height() + "</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="topSpacer"></div>
<div>
Does anyone overlay me?
</div>
<div id="fixedtop" style="position:fixed; top: 0px;">
Top navbar elements Page0000000000000 Page11111111111111 Page2222222222222
</div>
<div>
Another relative element
</div>
I'm designing a pretty simply website for a friend. In the design, he wants a ribbon to stretch out horizontally in the middle of the page.
Like so:
https://i.imgur.com/Hz4SH4Hh.png
My attempt at doing this was to crop the 'ribbon' parts of the right and left and display those images while floating them to the right and left. Then creating a content div, centering it to fill in the middle of the ribbon. This solution is super sloppy and doesn't work well at all. Here's a picture of it
https://i.imgur.com/66C2kj5h.png
The resolution is kinda off, but you can see that the border of the middle div are off, and when stretching or shrinking the page, the percent width of the middle div messes the whole thing up.
Heres my HTML/CSS
<div class='ribbon-container'>
<div id='ribbon-left'>
</div>
<div id='ribbon-right'>
</div>
<div class='clear'></div>
<div id='ribbon-middle'>
</br>
<center>
<span class='ribbon_header'>Food Around Your School</span>
</center>
</div>
</div>
.ribbon-container { width:100%; height:118px; position:relative;}
#ribbon-left { background-image:url('images/ribbon_left.png'); width:117px; height:119px; position:absolute; bottom:0; left:0;}
#ribbon-right { background-image:url('images/ribbon_right.png'); width:117px; height:119px; position:absolute; bottom:0; right:0;}
#ribbon-middle { width:85%; height:81px; background-color:#b5b5b5; border:7px; border-top-style:solid; border-bottom-style:solid; border-color:#61615f;top:0; margin:0 auto;}
You're just gonna have to size everything in the same units. I'd suggest just using pixels unless you're going with a responsive design, and if you're going with a responsive design, I'd suggest using something like foundation.js.
Edit: and +1 to Michael Peterson's SVG idea. That's a good one too.
Perhaps try setting
.ribbon-middle{
width: auto;
padding: 0 120px;
}
where ribbon's padding is the width of the left/right images. then you will have the text always visible.
Since the height of the banner is not changing, you can accomplish this using by using a horizontally-repeating image as the background for the banner and then using absolute positioning for the left and right portions of the banner.
The html becomes:
<div class='ribbon-container'>
<div id='ribbon-left'></div>
<div id='ribbon-right'></div>
</div>
And the css becomes:
.ribbon-container {
width: 100%;
height: 120px;
position: relative;
background: url('http://i.imgur.com/LVXiQ37.jpg') top left repeat-x;
}
#ribbon-left {
position: absolute;
top: 0;
left: 0;
width: 112px;
height: 120px;
background: url('http://i.imgur.com/2MOcrO9.jpg') top left no-repeat;
}
#ribbon-right {
position: absolute;
top: 0;
right: 0;
width: 97px;
height: 120px;
background: url('http://i.imgur.com/Q6NmXR6.jpg') top left no-repeat;
}
I've done a really crude mock-up using the initial image you posted. The problem is that the image itself is not perfectly horizontal, so it looks like the right side does not line up in my fiddle, but if you are more careful in creating the initial image, this will work. And I haven't added text, but this can be done using absolute positioning as well, or another method I'm sure.
You can see the example at: http://jsfiddle.net/M3GmY/
I have a list of names which is rendered inside <ul>. I am applied some CSS code but facing some browser specific issues.
Chrome : List element is getting displaced by 1 row.
Firefox : All list items collapsing to one item.
Code snippet (JS bin editor)
HTML
<div id='container'>
<ul class='list'>
<li> <div class='rel'>
<div class='abs'> item 1 </div>
</div> </li>
... More items similar to above one
Css
#container {
height: 100px;
overflow-y:scroll;
width: 200px
}
.list {
background-color: skyblue;
}
.rel {
position: relative;
}
div.abs {
position: absolute;
left: 20px;
}
I want to know the reason of this misbehavior in both the browsers. Have I written wrong CSS ?
Update: With in <div class='abs'> I have a lot of code which I have not added here as it is not necessary and the content of abs div is positioned with respect to its parent i.e. <div class='rel'>
The problem is indeed the
div.abs {
position: absolute;
left: 20px;
}
This positions every element with class "abs" 20px to the left (and 0px from top) of the ul element.
What would you like to achieve? Your menu horizontally or vertically?
Horizontally: Use float:left or display:inline with a margin-left:20px;
Vertically: for a 20px margin-left:
http://jsbin.com/ediloh/17/edit
I first added margin:0px to delete the top and bottom margin of the ul element. Next I added a left margin of 20px to move it to the right.
alternative: put margin-left on the li-element instead. This will not move the circles
The divs with position:absolute are taken out of the page flow, basically causing their parent divs to have no content at all (no content amounting to any width or height that is). So they will collapse.
What outcome do you actually want. You are fixing the div.abs to be indented by 20px inside its containing div.rel.
Could you give some idea of what you are trying to achieve.
Wing
Ok so basically I have:
<div style="overflow-x:scroll">
<div class="content">
<div class="text"></div>
<div class="seperator"></div>
</div>
</div>
I want to position the bottom div (its basically a sort of horizontal line) on the bottom of the content div
I've tried the position: absolute embedding a position: relative div tag, but because the top div is scrollable the seperators remain fixed when I scroll
How would I go abouts getting this done (I have to use the seperator in the class=content div so it doesnt ruin the background I have set for it
Edit: Ok so my seperator has some shadows and stuff so I need it to overlay with the content, so I need some kind of absolute positioning, but not to the page, to the 'top div'
Is there a way to relatively position it so it'll always be at the bottom of the parent div?
#top-div { position:relative; /* fixed height or width */ }
#bot-div { position:absolute; bottom:0 }
Change this:
.sep {
border-bottom: 4px solid rgba(0,0,0,0.5)
position: absolute;
bottom: 0;
}
To this:
.sep {
border-bottom: 4px solid rgba(0,0,0,0.5);
}
If I am not understanding your question please feel free to correct me.