i have created a website but now i am having 1 issue. i am unable to do click even on link and navigation.
you can take a look:
http://www.cambridgekitty.com/business-directory/
to check the real codes.
HTML
<div id="main-bg">
<div id="left-side-logo"></div>
</div>
CSS
#wrap {
padding: 0;
position: relative;
width: 100%;
}
#main-bg {
background: url("../img/kittybg2-h.png") no-repeat scroll right top transparent;
margin: 0 auto;
min-height: 733px;
position: relative;
width: 100%;
z-index: -9999;
}
just add a logo on left side
#left-side-logo {
background: url("../img/norwichkitty-final-logo-bg-02.png") no-repeat scroll 0 0 transparent;
height: 500px;
left: -150px;
opacity: 0.8;
position: absolute;
top: -60px;
width: 500px;
z-index: -1;
}
and add
position: relative;
to #wrap. and add
z-index: -9999;
to #main-bg.
but after doing this ... i am unable to click on logo or even navigation links.
please let me know why i am casusing this issue.
thank you
Don't use a negative z-index if you don't know exactly what you're doing. Use a positive value and just set #left-side-logo's z-index to a value even higher.
Since #wrap has a negative z-index, it's placed behind the content of #inner-wrapper in the latter's stacking index.
See also:
W3C: CSS2.1: 9 Visual formatting model (Section z-index)
If I were you, I would simple change the elements I apply the different background images to. Give #inner-wrapper the city image background, and #main-bg the logo background. Then use the background-position property to position the logo background (currently the two zeroes in your background rule). Also, if you want opacity for that logo you can achieve that by simply setting it in Photoshop or whatever editor you prefer.
This solution means you don't have to deal with the z-index issues and makes for more hack-free and semantic mark-up, although you do have a few containers. Hope this helps :)
Related
I want to display some random design images on my sites background as background-image, problem now is that every time I place such an image it somehow interacts with nearby boxes etc.
I just want my design images (small icons etc) to be part of the background without getting in touch with other non-design elements like text, boxes etc.
Something like that I guess:
body {
min-height: 100vh;
position: relative;
height: auto;
width: auto;
background-image: url("/static/pattern.jpg");
background-repeat: repeat;
z-index: -10;
} -> "The actual background of the site"
.design_element_01 {
position: relative;
z-index: -1;
background-image: url("/static/xyz.png");
max-width: 100px;
} -> "The design element that should get placed onto the body background from above"
Try:
.design_element_01 {
position: absolute
/*...*/
}
In addition, you might need to change max-width to width, since a background doesn't provide width to the element.
Centering the Background
There are a few different approaches to centering the background. I'll outline one here; if it doesn't work for you, I can describe others.
Essentially, the idea is to make the .design_element_01 element itself take up the entire page. Then, background-size can be used to constrain the size of the background, and background-position can be used to center it. A basic example would be:
.design_element_01 {
position: absolute;
top: 0;
left: 0;
background: url("/static/xyz.png");
width: 100%;
height: 100%;
/* I'm using 100px here since you used max-width: 100px, but you can use whatever you want. */
background-size: 100px;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}
(Do note that I haven't tested this; you may need to tweak it.)
If you test this example, however, you will notice that this centers the background on the screen, but not necessarily the entire page. This may or may not be what you want. If not, you can change the <body> element's position property:
body {
position: relative;
}
This should cause the .design_element_01 element to be positioned relative to the <body> element.
I also created a JSFiddle example to demonstrate the solution: https://jsfiddle.net/mouqewzv/.
Finally, if you don't want your element completely centered, but just offset from the center, you could tweak the left and top properties of design_element_01 to position the background initially at the center, but then offset it.
Try setting your design_element_01 position to absolute NOT relative
and then try to place it however you want using
left:
right:
top:
bottom:
z-index:
Hope this works!
Platform: Wordpress (self-hosted)
Template: TwentyTen
I've been able to work out most things by Googling or tinkering around with familiar parts of the stylesheet, but I'm stuck now and am hoping someone can help me out. Basically, I’d like to create a header that is similar to this in design (http://albertaspeechie.blogspot.com) in that part of the header background will be transparent.
If I create an image with a transparent section, it shows as white because it's still within the header/wrapper with its white background.
I'm thinking that, possibly, setting the header background as transparent (though I can't figure out how to just make the header transparent, without affecting the rest of the wrapper) and boosting the padding above the wrapper. and increasing the height of the header. I used to know how to increase the height of the header, but I can't seem to find it anywhere anymore.
Any advice as to how I could do this? I'm only bumbling around with a test blog at the moment, so there's no published site to show. It's just a straight twentyten at the moment, without any adjustments until I can figure out how to do a partly transparent header.
Thanks in advance.
Edit: I'm not sure why people are downvoting this. I've followed the rules and instructions.
You can use positioning to move the image outside the header.
Add the image you want to use to inside your header. Make sure the image has a transparent background - use a png file for example.
Add position: relative to the header
Add position: absolute to the image, and then provide coordinates for the image.
To position it outside the header, provide a negative value for top. To center the image add 0 to left and right, and then use margin: auto.
.header img {
position: absolute;
top: -100px;
left: 0;
right: 0;
margin: auto;
}
body, html {
height: 100%;
padding: 0;
margin: 0;
background: lightblue;
}
.wrapper {
margin: 0 auto;
width: 50%;
height: 100%;
background-color: lightyellow;
margin-top: 150px;
}
.header {
background-color: white;
width: 100%;
height: 200px;
position: relative;
}
.header img {
position: absolute;
top: -100px;
left: 0;
right: 0;
margin: auto;
}
<div class="wrapper">
<div class="header">
<img src="http://placehold.it/250x250" alt="" />
</div>
</div>
Codepen Demo
Read more about positioning here.
Actually this is a problem I encountered during the developing of blogger.
I want to write a navbar on my own, but the width of parent elements limit the style width:100%, even if I set the float properties to it.
Please see the image above. Only nav's HTML/JS/CSS are configurable. So how can I configure the CSS Style of class nav to archive this goal?
Or, If you have relevent experience in developing blogger, please tell me.
Thanks a lot!
use position absolute for your nav. Look at this FIDDLE
html :
<div class="first">0</div>
<div>
1
<div class="nav">NAV</div>
</div>
<div>2</div>
css :
div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }
EDIT
Your nav is in a position:relative; well you can append your nav to your body with that jquery (HERE THE FIDDLE UPDATED):
$(".nav").appendTo("body");
To achieve that kind of 'layering' you probably need to use absolute positioning, especially if your options are limited. This has the obvious caveat of taking it out of the page's flow, so you'll need to ensure your page is never too short for it to be visible. It won't affect other elements around it either.
So, something like:
nav {
left: 0;
position: absolute;
top: 400px;
width: 100%;
}
Hopefully one of its parents has a position: relative; so the nav knows where to use as an origin point when positioning absolutely, otherwise it'll use the top left of the browser pane.
You may also need a z-index value if you want your nav to appear behind the content.
Not sure if this is what you are searching for, but you can try giving your naviation position: absolute; and width: 100%;. This will get the navigation element out of the flow of the document.
How can I make a semi-transparent element with text in it which goes on top of one navigation bar, but goes under the other? I am trying to make an effect like in http://hongkong.grand.hyatt.com/en/hotel/home.html where the red Hyatt logo and "hong kong" go above [over] the brown bar, but below the white (top of screen). https://www.dropbox.com/s/xarl3qe3ncxrdm1/Untitled20130520174504.jpg?v=0rc-s
You'll just need to use various z-index values for the arrangement and opacity to get the transparency.
(source: snag.gy)
#topbar {
height: 20px;
width: 100%;
position: fixed; /*so it doesn't scroll with the page*/
left: 0;
top: 0;
z-index: 3; /*the bar on top gets the highest index because it's above everything else*/
}
#secondtopbar {
height: 20px;
width: 100%;
position: fixed;
top: 20px;
left: 0;
z-index: 1; /*the second bar on top gets the lowest index because it's below everything else except the text, with doesn't even get a z-index*/
}
#logo {
opacity: 0.5; /*this makes it half-transparent, on a scale from 0-1*/
height: 100px;
width: 100px;
position: absolute;
top: 30px;
left: 30px;
z-index: 2; /*the logo gets the middle index because it's in between*/
}
What type of a solution are you searching for? If you check out what the Grand Hyatt did, they're using an image and setting position: absolute to place it where they want it to appear.
If you do not want to use an image, you could use some HTML elements layered on top of each other to recreate the logo: See here http://jsfiddle.net/U3mCz/
Couple of notes:
You'll have to set a lower z-index on the parent of the logowrapper
(in my example, anything under 500 will work), so that the logo stays
on top.
You'll need to adjust your css on the logowrapper to position the logo where you want it.
If you adjust the height of the red bar, make sure you set your line-height equal to the height of the red bar to ensure vertical-centering of your text!
Hope that helps you out.
How we can add a div tag over a slideshow like in the following link
http://www.hellofresh.com/
Here the div with title "DISCOVER THE JOY OF COOKING " is placed over a slideshow.
How might I do this?
First of all, welcome to Stackoverflow (oops; this isn't your first question!). The key to placing your div over the slideshow (or over any other element) is using absolute positioning. Absolute positioning enables you to specify the exact position for an element instead of leaving it with the flow of the document. If you take a look at your example website's CSS, you can see that the div that has "Discover the joy of cooking" is styled basically like this:
position: absolute;
top: 0px;
left: 0px;
top and left act somehow like x and y in a 2-dimensional grid system, except that the origin is placed differently. top: 0px; pulls the div up and left: 0px; pulls the div left, so all-in-all, it's placed on the upper-left corner.
To achieve the effect of the translucent black, you use the opacity property. opacity: 0.5; means that the div is half-opaque, while opacity: 0; means it's not visible at all. Your favorite value might be something like opacity: 0.7; -- anything in the range 0...1.
The last piece here is to tell the browser that the div should be over the slideshow, not behind it. To do that, use the z-index property. z-index specifies the relative "stack order" of elements. So if you want your div to be over the slideshow, style it with z-index: 5; while styling the slideshow with z-index: 1;, for instance.
Hope that helped at all!
Ok, you can do something like this ( http://jsfiddle.net/YgpqX/ ):
<div class="div1"></div>
<div class="div2"></div>
.div1 {
width: 320px;
height: 200px;
background: #aa5;
}
.div2 {
width: 100px;
height: 100px;
margin-top: -200px;
background: #5aa;
}
Or ( http://jsfiddle.net/YgpqX/1/ )
<div class="div1"></div>
<div class="div2"></div>
.div1 {
position: relative;
width: 320px;
height: 200px;
background: #aa5;
}
.div2 {
position: relative;
width: 100px;
height: 100px;
top: -200px;
background: #5aa;
}
And if your block in html should be earlier then slider block, then use z-index: 9999; to get it up.
And also abolute position:
<div class="div1">
<div class="div2"></div>
</div>
.div1 {
position: relative;
width: 320px;
height: 200px;
background: #aa5;
}
.div2 {
position: absolute;
width: 100px;
height: 100px;
background: #5aa;
}
By setting the opacity property in CSS
This is some basic info on this one W3schools Css opaque
They are accomplishing this effect using CSS Positioning. Basically they are absolutely positioning the discover the joy of cooking block over the slide show. You can use z-index on the absolute position div to bring it over the relative position (slideshow) div. Basically you need to use a combination of position and z-index. I have a basic example of the CSS/HTML here: http://jsfiddle.net/jqVAe/1/
HTML:
<div id="slideshow">
Scrolling sideshow goes here. Scrolling sideshow goes here. Scrolling sideshow goes here. Scrolling sideshow goes here. Scrolling sideshow goes here. Scrolling sideshow goes here.Scrolling sideshow goes here.
<div id="over-slideshow"></div>
</div>
CSS:
#slideshow{
width: 400px;
height: 200px;
position: relative;
background: green;
}
#over-slideshow{
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
background: red;
}
This provides a basic structure in which to put your slideshow. I would recommend finding a good slide show plugin and not trying to reinvent that functionality. I'm sure there are plenty of Jquery (Javascript Framework) plugins that will accomplish this task for you.
You may try position: absolute and z-index. z index is used to align a layer over or under a layer. You may go through;
Lesson 15: Layer on layer with z-index (Layers), Understanding CSS z-index, and A Detailed Look at the z-index CSS Property