I have a responsive menu on top of an image background, which also has text on top.
Because I have to set the text messaqge with "position: absolute" to make it overlay on top of the background image, when I expand the menu the menu items will overlay on the text message. How do I fix that?
The other problem is I'd like to have the menu be transparent on the background image instead of being on the dark grey background. However, I can't seem to find a way to do that.
Here's the code
You may want to consider for you header message to put it inside of your header-slides div and then position this div to relative. That way your header message is actually positioned absolutely in the header and not in the body. Then if you want your nav to be transparent over the header image then you can position your body to relative just to be safe and position your nav to absolute, give it a high z-index and background opacity can be achieved by using rgba colors. So something like the following:
Here is a fiddle demo Fiddle Demo
Header:
.header-slides {
height: 500px;
border: 1px solid black;
position:relative;
}
<div class="header-slides" data-slides='["https://picjumbo.imgix.net/HNCK1654.jpg?q=40&w=1650&sharp=30", "https://picjumbo.imgix.net/HNCK2106.jpg?q=40&w=1650&sharp=30"]'>
<h2>Header Message</h2>
</div>
Then your nav:
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(20,20,20,0.8);
min-height: 30px;
position:absolute;
top:0;
left:0;
width:100%;
z-index:5;
}
And then remove the postion of relative from your responsive css at max width of 680px from your nav so remove the following completely:
ul.topnav.responsive {position: relative;}
z-index, bruh.
When elements overlap, z-order determines which one covers the other.
An element with a larger z-index generally covers an element with a
lower one.
.topnav{z-index:9999999}
try it.
For transparent BG colors you can use rgba(). There are online tools to convert your colors all oer the place.
Related
I want to create black gradient overlay on background image. But I have a problem. Background image always random and responsive ready (width:100%; height:100%; background-size:100%;). So I can`t just put gradient to bottom with fixed height. Is it possible to do that with css or jquery? Thanks!
My HTML:
http://jsfiddle.net/aobnuox7/
<div style="background:url(http://images.nintendolife.com/reviews/2011/02/panda_craze_dsiware/large.jpg) #000 no-repeat top center; width:100%; height:100%; background-size:100%; position: absolute; top: 0; left:0; z-index:1; ">
</div>
http://pbrd.co/1v1cavd - screenshot of what I need to do
If you want a shadow that fades from the bottom to around the middle why not use box-shadow: inset? You can find some useful generators online to get yourself started and then modify them as you need them to be. I'd suggest putting the box-shadow in an after pseudo class also.
When I use overflow:hidden on a container div with an image slider inside, it hides the overflowing content perfectly, but creates a white border of about 50px wide on the right side.
I want the images to extend all the way to the edge of the page, or as close as possible.
Is it possible to make the 'border' that overflow:hidden creates transparent, or make it narrower?
Hmm.. Animuson is right. Overflow: hidden; doesn't add any border. If the images is a link, then it might have borders (but the default color isn't white).
But yeah, please add some source code for it. Without knowing the complete scenario, then something like this could possibly help you out:
HTML:
<div id="section1">
<img alt="foobar" src="the_URL" />
</div>
CSS:
#section1 {overflow: hidden; width: 100px; display: block; }
#section1 img {width: 100px; border: none; outline: none; display: block;}
not tested...
Let me know if it helps or not. If it doens't, then please elaborate.
It turns out that the way to fix this problem was to:
Set the outer container to width:100%,
Set the inner container to 60px more than total page width, and overflow:hidden
This reduced the 'border' (right margin whitespace) to any px width I set, as per the width of the inner container.
Code: http://www.benphilippi.com
I am wondering if it is possible to have a scrollbar inside and on top of the DIV as oppose to next to it? I am developing a chrome extension where I have a DIV that contains information on the far right side of the page. When the DIV exceeds the height of the page, a scrollbar appears next to this DIV as oppose to inside and on top of the DIV. In addition, I am wondering if it is possible to get the scrollbar to fade when the user does not hover over it?
I have modified the appearance of the scrollbar by using -webkit in the css. Here is a snippet of what I have done:
#sidebar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
#sidebar::-webkit-scrollbar-track-piece {
background-color: #f3f3f3;
-webkit-border-radius: 0px;
}
#sidebar::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #ccc;
-webkit-border-radius: 0px;
}
As far as having the "inner" scrollbar, you can make the illusion of this by wrapping the DIV with another DIV of equal height and with the desired permanent width. Then set the inner DIV to 100% width, and it will adjust as the scrollbar appears. As far as the fade, I don't believe the scrollbar is part of the DOM, so Javascript is out, but you may be able to use the animate property in CSS http://fvsch.com/code/transition-fade/test1.html
Hello Ive made a page which has an image of width 1300px as its widest point. I'm trying to make something which makes the page load with the centre of the page (where text etc. resides) in the middle of the browser. Is there a simple way of doing this?
Add this to the outer wrapper CSS:
width: <text width>px;
margin: 0px auto;
And make the image a centered background of the body:
background: url(image.png) top center;
in CSS, do this:
body: {
text-align: center
}
#main {
text-align: left
margin: 0 auto;
}
The text-align center is for old IE6, whereas margin works for newer browsers. #main is your main div that is to be centered.
if you want to display some block elements (with fixed width) centered you need to use this rule:
margin:0 auto;
if inside an element you want to center some text, just set:
text-align:center;
if you want to center an absolute element (fixed widh aswell, i.e. 1300px) you need to be more tricky this way:
margin-left:-650px;
left:50%;
Body{margin: 0px;}
.wrapperDiv{Margin: 0 auto;}
I have the image position fixed inside div and code is gven below
#content{
margin-top:100px;
width:900px;
color:#009;
border:1px solid red;
overflow:hidden;
display:block;
}
img {
float:left;
position:fixed;
top:140px;
padding:50px;
}
#text{
display:block;
border:1px solid green;
width:500px;
height:1200px;
float:right;
overflow:scroll;
}
#footer{
clear:both;
width:600px;
height:300px;
border:2x solid blue;
color:#939;
}
HTML is
<div id="content" >
<img src="bar.jpg" width="46" height="639" />
<div id="text">
ggggggggggggggggggfgdfgdfgdgdfgdgdfgdf
</div>
</div>
<div id="footer">
Footer text
</div>
</body>
Now when i scroll down then image comes out of the content div box.
IS there any way so that even if i scroll the image bar should stay inside the div box.
The screen shot shows my problem
First Screen is ok without scrolling
alt text http://img293.imageshack.us/img293/8640/bar1k.png
But when i scroll the text full then it covers my footer as well
alt text http://img36.imageshack.us/img36/4393/bar2z.png
I want that image should scroll with the scroll bar but it should not come outside the div box . Is that possible. Basically the div box should be the boundary of the image. THe image should not come out of the div box any time but it should scroll in between that with the length of div box
so you want that blue bar to stay within the red box, right?
if that's the case you need to have the css for the blue box as
img {
position: absolute;
top:140px;
left:50px;
}
and also the container has to have
#content{
...
position: relative;
}
position: relative will make the blue bar absolutely positioned with respect to #content rather than the document object.
position: fixed positions your image relative to browser window
If you want to position it relative to the parent div, you should use position: absolute
position: fixed
Generates an absolutely positioned
element, positioned relative to the
browser window. The element's position
is specified with the "left", "top",
"right", and "bottom" properties
In other words you can't "fix" your image inside of div only relative to browser window.
Follow-up:
If you want that image to always be on the same place in the background do it with CSS:
body {background: transparent url(bar.jpg) bottom left no-repeat;
background-attachment:fixed}
from what i see, just remove the position: fixed from your img tag styles
img {
float:left;
padding:50px;
}
I dont know if is just because you made a quick demo to show us, but never apply a style to a tag, its better to use ID's or Classes
if you want to keep a margin of 140 pixels from the top of the div containing the image, use:
img {
margin-top: 140px;
}