Before posting this question, I have looked into various stack overflow questions and implemented them but it didn't work for me.
Please do not post this question as duplicate.
My problem is that my dropdown is not coming on top of other elements.
I have posted the code in jsfiddle
NOTE: Please drag the output window towards the left to get the proper view of the header
In the SCSS window, user profile dropdown is handled by class navbarDropdown
.navbarDropdown {
float: right;
padding: 0px 10px;
position: relative;
img {
margin-top: -5px;
height: 40px;
}
ul {
background-color: $base-secondary-color;
padding: 4px 0;
position: absolute;
z-index: 999;
top: 30px;
left: 0;
width: auto;
border: none;
border-radius: 1px;
}
ul a {
height: 30px;
padding: 0 40px 0 10px;
display: block;
}
}
I have tried position:absoulute and z-index.
I don't know where is the mistake. Any help is appreciated?
By the looks of it, the reason your drop down list is hidden is because it overflows the content of the nav element, ".navbar". Adding the CSS property overflow: visible; should fix the immediate problem.
Related
I am building a webshop with on the left side a sidebar with a sort of navbar in it.
But the background (color Brown) has to fill the whole left side, but if my page is longer it covers not the complete left side.
This is my CSS for the background:
.sidebar {
z-index: 10;
border-top: 2px #000000;
position: absolute;
float: left;
left: 0;
margin-top: -5%;
padding-bottom: -10px;
width: 15%;
min-height: 115%;
max-height: 200%;
background: #C6A970;
}
Does anyone have an idea how to cover the left side of my webpage?
Thanx in advance!
according to the informations you gave you probably search something like that:
Fiddle
Your provided css already shows that your code must be messy, using float and position absolute together is weird and your min-height and max-height are over 100%.
We could help a little better if you provide full code.
Please try this:
Use this css:
.sidebar {
z-index: 10;
border-top: 2px #000000;
position: absolute;
float: left;
left: 0;
bottom: 0;
margin-top: -5%;
padding-bottom: -10px;
width: 15%;
min-height: 100%;
background: #C6A970;
}
or refer to the jsfiddle link below:
https://jsfiddle.net/89f074ke/1/
The following is my code for positioning text over image. The requirements are:
Image should be adapt to screen automatically. Even on smart phone, the image should be displayed completely. Only showing part of the image is not allowed.
Text should be accurately positioned anywhere I wish.
.txtimg{
position: relative;
overflow: auto;
color: #fff;
border-radius: 5px;
}
.txtimg img{
max-width: 100%;
height: auto;
}
.bl, .tl, .br,
.tr{
margin: 0.5em;
position: absolute;
}
.bl{
bottom: 0px;
left: 0px;
}
.tl{
top: 0px;
left: 0px;
}
.br{
bottom: 0px;
right: 0px;
}
.tr{
top: 0px;
right: 0px;
}
<div class="txtimg">
<img src="http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg">
<p class="bl">(text to appear at the bottom left of the image)</p>
<p class="tr"> (text to appear at the top right of the image)</p>
</div>
However, the bottom left text is hide from fully displayed on my firefox browser.
It is wired that the code snippet runs pretty well in stackoverflow by clicking the Run Code Snippet below.
I don't know why. Anywhere I found a solution: change overflow:auto to overflow:visible. The problem will disappear.
Anyone advice?
I can't reproduce the problem on this specific code, but i know the problem. Simply add a vertical-align on the image.
.txtimg img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
This also work like this :
.txtimg img {
max-width: 100%;
height: auto;
display: inline-block;
}
Finally I found the problem. In another CSS class, I have already include the "overflow:hidden" line. So, I remove the corresponding line in class txtimg.
my client has added an image to their WordPress header. I am having difficulty (I'm still learning CSS) getting the image to align where we want it.
This is the site here
You can see the Options House graphic on the right. I want it to be to the right of the word "stocks" in the tagline. Help?
====Edits based upon suggestions below====
#Beardminator made a suggested answer, but this is what the site header looked like after including that code:
Relatively position that options_house div like so:
#options_house {
float: right;
position: relative;
top: 40px;
left: 52px;
}
And take off the overflow hidden from the header class.
Here is the 2 div which you should replace with this code:
.slogan {
color: #EBEBEB;
font-size: 17px;
left: 200px;
line-height: 25px;
position: absolute;
text-shadow: 0 2px 4px #0F243E;
top: 59px;
}
.logo_mmj, .logo_mmj:visited, .logo_mmj:hover, .logo_mmj:visited:hover {
background: url("../images/logo_marijuana.png") no-repeat scroll 0 0 transparent;
display: block;
float: right;
height: 95px;
position: absolute;
right: 0;
text-decoration: none;
top: 23px;
width: 392px;
}
You need to put the logo to the right, so the .logo_mmj should contain
right:0px;
Or if you use position:relative;
You can use like this:
.logo_mmj
{
position:relative;
float:right;
}
update:
The site you linked have very different logo that's why It only made it worse. You only need to adjust
.slogan left property. And add
to .logo_mmj div top:30px or much more.
Here is what it looks like:
I'd like to have the picture and the name be in the same line as the header... Without having to do manual margin-top...
Just to note... I am using Bootstrap.
http://getbootstrap.com/
Here is the HTML code...
Here is the CSS code...
.navbar-top {
height: 64px;
background-color: #772A75;
position: fixed;
width: 100%;
min-height: 64px;
top: 0;
left: 0;
z-index: 1000;
box-shadow: 0px 2px 10px #888888;
}
.navbar-container {
padding: 0 20px;
}
.navbar-heading {
margin-top: 10px;
}
Just set float: left for the left heading and set float: right for the right image block.
You can move the dropdown-toggle after the h1 tag, make sure to add display : inline-block to both of them. you might have to play with floats and width to get them the way you want...
Click here for visual
As you can see from the picture, my parent container is not expanding to fit my child container. The page container (#contain) actually stops at the bottom left hand corner of the kitchen photograph. The child container (#zone2) is clearly overflowing outside its parent container (#contain). I would like to be able to have (#contain) expand automatically to fit (#zone2). The CSS is:
#contain {
position: relative;
width: 100%;
margin: 0 px;
background: #E3DCCC;
z-index: 0;
}
#zone1 {
width: 100%;
height: 850px;
background: url(http://waly1039.com/sites/default/files/k4.jpg) no-repeat center top;
position: absolute;
z-index: -1;
}
#head {
position: absolute;
top: 20px;
width: 100%;
height: 330px;
}
#head img {
max-width: auto;
height: auto;
}
#zone2 {
position: relative;
overflow: hidden;
padding: 3px;
top: 360px;
float: right;
right: 15px;
width: 53%;
height: auto;
border: 4px solid #715E40;
background-color: white;
}
#zone2 img {
max-width:100%;
height: auto;
float:left;
margin: 5px;
}
#zone3 {
position: relative;
top: 710px;
left: 15px;
float: left;
height: 340px;
width: 38%;
border: 4px solid #715E40;
background-color: white;
}
This is a float issue. Try adding the traditional CSS clear fix to #zone2's container:
.container:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Be sure to put this in the :after pseudo selector, otherwise it won't work for you. Floated elements exist outside of normal document flow, which is why the container isn't expanding to contain them. The clear fix forces the floats to be cleared, which will cause the container to expand around the bottom of this element.
I tested adding more images to #zone2 and #contain expands vertically. Somehow you've got an element(s) in #zone2 with padding or margins that aren't being added to the parent's total height.
If you want a quick fix in order to move on then add margin-bottom: 30px; to #zone2.
I've duplicated your problem and was able to resolve it with this: You might want to try it. It's looks a bit odd so make a class for it if you like. I'm more concern with where it is placed.
Just beneath lines of your code, add my third line. Just that and you are done. Note, it more about positioning.
<div id="zone3"></div>
<div id="zoneclear"></div>
<br style="clear:both; float:none; display:block; height:1px;" />
Just add the third line.
and just modify one of your styles:
#zoneclear {
clear: both;
float:none;
display:block;
height: 30px;
position: relative;
}
[EDIT]
The codes have a serious bug in firefox which is not present in Google Chrome (that I tested in earlier due to your relative positioning. So I've modified the #zoneclear style to fix that. You might have to test if the other browsers like this hack.
I hope it helps you