I have a problem with the menu of my store. If you enter my webpage, http://masluzz.panamerik.net/ you can see the menu on the top is colored in gray and orange, but when I change the resolution of the page the background menu moves to the right side. I don't know how I can view on all resolutions without moving the background. Here is the css thanks!
#sticky {
padding: 0.0ex;
width: 100%;
clear: both;
color: #transparent;
font-size: 2em;
border-radius: 0.0ex;
background: url(/img/layout/menu.png) 38.5% 0% repeat-y;
border-radius: 0.0ex;
position: relative;
top: -3px;
Do you want the orange to go all the way across the menu? Instead of a background-image you could just use CSS.
background: #FE6900;
If you only want half of the menu or w\e to be that color, you could add a class like "orange-bg" to the li's that you want.
try change the position to absolute.
position: absolute;
Related
I want to have a shape under website logo but it needs to be continued from both sides by orange bars so it would look as a one piece. Here is the preview that I've created so far.
I'm stucked on this for hours. Please do you have idea how to accomplish that and keep it responsible? Thank you!
Here is how it should look like.
Set the background color of .test to the solid color in your background image, then position it properly. Lastly set the logo to position: absolute (don't worry it wont move unless you give it a position) then set the z-index: 2; to raise it above the squiggle.
(Demo)
.test {
position: relative;
background-image: url('//jumbo.elique.cz/img/navbar-bottom.png');
width: 345px;
height: 34px;
top: 64px;
background-color: #0b1b33;
}
.navbar-brand {
position: absolute;
z-index: 2;
}
Now this may cause the background color to cover up some of the busses in the background, to fix this you can wrap the nav in a 100px tall div with the same background-color, making this more uniform
(Demo)
.wrap {
background-color: #0b1b33;
height: 100px;
}
I'm trying to build a website header that is semi transparent, and contains a semi transparent image that hangs outside the of the header div, like in the image linked below.
Because of overlapping opacities, I can't simply put a semi transparent image in to a semi transparent div and add a negative margin to the image. The best I could come up with was taking the height of the header image, and cutting that bit of the logo image, like in image attached. However that's not ideal, as doesn't play nice responsively etc etc.
Any ideas of how I might achieve this look?
Thanks in advance.
If you know the height of your menu then you can place both the logo and the menu inside of a container. Then position the logo with the top value equalling the height of the menu.
.header-bg {
background: rgba(225, 225, 225, 0.5);
position: relative;
height: 60px;
}
.header-bg .logo {
width: 90px;
height: 90px;
background: rgba(225, 225, 225, 0.5);
position: absolute;
top: 60px;
left: 10%;
}
See this fiddle: http://jsfiddle.net/3kxBt/1/
Hope that helps in some way.
This is an interesting problem and there are a couple ways to solve it; two come immediately to my mind.
The first is your method; carefully position things so that you don't have multiple translucent sections overlapping. This wouldn't be too difficult; if you go with this method I would recommend breaking the header into sections left and right of the image and using absolute positioning.
The second and easier way is to create a version of the picture with the semi-transparent white overlay you desire already applied. Then you can use that as the background for the menu and image. The only tricky thing here is you have to make sure the images line up by either using fixed positioning or calculated pixel offsets. This approach has been around for a long time and you can see any early example (2001-ish) of it here.
My take on it is to create a :before pseudo-element. It has its problems, including what if the logo changes in size at some point, but overall it works.
HTML
<a class="logo" href="#">
<img src="https://example.com/logo.png" />
</a>
CSS
nav a.logo {
position: relative;
...
display: inline-block;
line-height: 0.0001em;
font-size: 0.0001em;
}
nav a.logo img {
position: relative; /* for z-index issues. giving the image a relative
position automatically will place it above the
absolutely positioned :before element. This is
because the before element is rendered before the
image */
}
nav a.logo:before {
content: '';
position: absolute;
display: block;
width: 100%;
height: 71px;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.4);
...
}
Demo: http://jsfiddle.net/ZP6LQ/1/show
Source: http://jsfiddle.net/ZP6LQ/1/
You can use rgba color format for background of both the .logo and the header to achieve your desired effect. However, you have to give position: absolute; to your .logo class because it needs to come right below the header. If you put your .logo on top of your header, then colors will overlap and won't look right. So, it needs to starts at the bottom of the header.
The header should have position: relative; so that your .logo is positioned relatively to the header. This way, you don't even need to know the height of your header because when you define top position of your .logo, you can simply use top: 100% so that it always starts right below your header. You don't have to hardcode that top value.
Now, you need to shift your actual logo (image) inside your .logo on top because its appearing below the header right now. For that you can simply push the image by giving it negative margin-top value.
SEE THE DEMO
The code would look like this:
HTML
<header>
<h1 class="logo">
<img src="/image/path" alt="logo">
</h1>
</header>
CSS
header {
background: rgba(255,255,255, 0.7);
position: relative;
}
.logo {
position: absolute;
top: 100%;
background: rgba(255,255,255, 0.7);
}
.logo img {
margin-top: -50px;
}
I can't see how to make my menu repeat 100% out of the container, and still have the navigation menu center.
I want to ask to how to make a double border top and buttom on the menu.
Here is the design.
I hope someone can help me.
You wrote in the comments
more like repeat from left to right of the screen (browser) :), the
double border how can i make the one red and another green? cause now
the one is black :/
If I understand correctly, you can do this in your css stylesheet
nav {
position: relative;
background-image: url(../img/menu.jpg);
width: 100%;
height: 79px;
border-top: 3px double red; //CHANGE COLOR
border-bottom: 3px double green; //CHANGE COLOR
top: 15px;
z-index: 2;
}
I have a map with several divs positioned absolutely on the page. Each div has a background image which contains the normal state and the hover state in one file. When the user mouses over the div, the background image is supposed to shift up 25 pixels. In ie7, the background image shifts up 25 pixels, but it also shifts to the right about 20 pixels.
Here is the CSS:
#LosAngelesButton {position: absolute; top: 80px; left: 168px; background: url(../images/superNav/LosAngeles.png) no-repeat; height: 27px; width: 110px;}
#LosAngelesButton a {display: block; height: 27px; width: 110px; text-indent: -99999em;}
#LosAngelesButton a:hover {background: url(../images/superNav/LosAngeles.png) no-repeat 0 -25px;}
The problem is showing only in ie7. Any suggestions?
I think you have this problem in other browsers to. you have set the background image on #LosAngelesButton and you change the state when you hover the a inside this element whatever it is. I would suggest you set your original background position on a element.
post the HTML code of this LosAngelesButton and i can give you a more precise awnser
I'm looking to have a full page image with a section of the image that, when hovered over, changes the image to a colored version of the original black & white image. I tried doing this with image maps & onMouseOver, but didn't have any success. There are only two images being used, a color and a black and white one.
I just want to have it so that when you hover over a section of the black and white image, the whole thing turns to the color version, and onMouseOut reverts back to the black and white. I'm using this as a splash screen for a blog and the hovered section will serve as a link into the site.
Thanks for the help
If you don't mind your hover area being "square" then using pure css this should work (note, replace the background colors with your appropriate image and the border on the a is just for illustration). Tested in Firefox, IE7, IE8:
HTML:
<span class="img"></span>
CSS (EDITED FOR IE7-8 BUGS):
body {
margin: 300px 218px 178px 400px; /*see explanation below css*/
width: 22px; /*total width of a tag including padding and borders*/
height: 22px; /*total height of a tag including padding and borders*/
}
a { /*warning, do not give this position: use margin to position it*/
width: 20px;
height: 20px;
display: block;
border: 1px solid red;
overflow: visible;
/*deleted margin from this: moved to body*/
}
a span.img {
position: absolute; /*this gives it block display by default*/
top: 0;
left: 0;
z-index: -1;
background-color: yellow; /*bw image here*/
width: 640px; /*image width*/
height: 500px; /*image height*/
}
a:hover span.img {
background-color: blue; /*color image here*/
}
/*deleted the a:hover span.img:hover as it was not needed after all*/
Of course if IE6 is a concern, then you need to do something with javascript for it to recognize the span:hover.
ADDED ON EDIT: I discovered that the a tag would hover sometimes outside of the defined area for the IE browsers. To avoid that, the body must have margins placed on such that the left and top position the a tag, and the right and bottom must make up the difference in the image size minus the total width of the a tag.