I'm trying to achieve a hover effect with a background with the menu items, but with the css I have things appear to be out of place. I've tried many different things and still can't figure out how to have the menu items stay in place when on hover, and also not to have the text stick to the bottom on top of background.
http://youvisit.com/creative/FindYourFutureCampaign/html/
The problem is that by adding your left/right images (the ones with the rounded corners), you're changing the width and height of the <li>. Since those images are 19px tall, you need to get the height of the <li> to be 19px. You can do this using line-height and height. After doing that, you'll have to figure out how to vertically align the text in the <a>. Then, you need to adjust for the changes in width. You could do this by using left/right padding on the <a>, and then remove that padding on hover (the padding removed should equal the width of the left/right image).
This should get your pretty close. I didn't test this in IE7/8.
ul.menuItems li {
float: left;
height: 19px;
line-height: 19px;
margin-right: 20px;
}
ul.menuItems li a {
color: #000000;
display: block;
float: left;
height: 19px;
line-height: 19px;
padding: 0 2px;
text-decoration: none;
}
ul.menuItems li:hover a {
background: url("../img/menuHoverCenter.png") repeat-x 0 0;
padding: 0;
}
ul.menuItems li:hover:before {
content: url("../img/menuHoverLeft.png");
float: left;
}
ul.menuItems li:hover:after {
content: url("../img/menuHoverRight.png");
float: right;
}
Really, this is a bad design. You probably don't need to add content on hover. How about using CSS3 border-radius to get your rounded corners. Then use either linear-gradient or a background image for your background. border-radius is not supported by all browsers, but it's fairly well supported if you're not worried about IE8 and lower: http://caniuse.com/#search=border-radius
Fix your css and it will not "jump":
ul.menuItems li:hover:before {
background: url("../img/menuHoverLeft.png") no-repeat 50% 0%;
}
ul.menuItems li:hover:after {
background: url("../img/menuHoverRight.png") no-repeat 50% 100%;
}
And give height with width to work properly.
Related
I'm fighting with some CSS here that doesn't want to be crowbarred into submission. I just want the sprites there, without a border around it, and to lower the opacity when hovered over.
Here's how it looks across browsers so far:
The Chrome version is closest to what I want, but I can't get the border to disappear, and the hover opacity doesn't do anything.
Code-wise, here's where I'm at so far:
.social-icons {
background: url('/wp-content/themes/MySite/images/social-profiles/social-profiles-s.png') top left no-repeat;
width: 32px;
height: 32px;
}
.social-icons img {
border-style: none;
}
.social-icons img:hover {
opacity: 0.8;
}
img#facebook-ico.social-icons {
background-position: 0px 0px;
}
img#twitter-ico.social-icons {
background-position: -34px 0px;
}
img#google-plus-ico.social-icons {
background-position: -68px 0px;
}
img#rss-ico.social-icons {
background-position: -136px 0px;
}
I do not know why, but the fact that you have empty image elements (no 'src') somehow causes the borders. I would remove the image elements and place the backgrounds directly on the anchor tags. Then float and adjust margins as needed:
.widget-container a:hover {
background: url('/wp-content/themes/MeanwhileInAmerica/images/social-profiles/social-profiles-s.png') top left no-repeat;
width: 32px;
height: 32px;
display: block;
float: left;
}
.widget-container a {
opacity(0.8);
}
I tested it with Dev Tools... the border was gone and the opacity change worked too.
You may have to target your elements differently to avoid changing other parts of the page. The sprites look fine otherwise.
EDIT
According to: http://www.w3.org/TR/html5/embedded-content-0.html#attr-img-src
"The src attribute must be present".
This is what I'm trying to achieve, and have come pretty close:
This is my CSS:
li {
float: left;
position: relative;
padding-left: 55px;
background: url(../../images/separator.png);
background-repeat: no-repeat;
background-position: left bottom;
height: 87px;
}
a {
font-size: 15px;
line-height: 67px;
}
I'm almost there, but there are a few problems. The only way I came up with to have the menu items vertically in the middle of the separators was to use line-height. But now of course when hovering over the links the hover is the height of the line-height, and I don't want that.
Also: is there a way to have the menu items go "inside" the separator images, like in the picture? The separator image is a transparent png. If not I'll just decrease the padding on the menu items to try and get them closer.
First method:
Give the link a height, position it 50% from the top, half the height back to top:
a {
font-size: 15px;
height:30px;
display:block;
position:relative;
top:50%;
margin-top:-15px;
}
Demo
http://jsbin.com/ovaqix/1/edit
Second Solution
Make the a element display:table-cell and same height as li, then use vertical-align:
a {
display:table-cell;
height:87px;
vertical-align:middle;
}
Demo
http://jsbin.com/ovaqix/2/edit
Table-cell doesnt work in IE7
Have you tried changing stating a height in a:hover ?
To have the menu items go inside the separators, I think that you need to create after and before pseudo elements, with the border hack to generate triangular shapes. Something in he line of:
a:before {
border-top: 38px solid transparent;
border-bottom: 60px solid transparent;
border-right: 60px solid black;
}
If you provide more details, I can be more specific.
I know I have seen this somewhere before, but I am trying to create a black fixed navbar with a marker that is transparent cut-out triangle. I need help getting the triangle cut-out to be transparent to the background, so when you scroll the page, you can see through to the content beneath:
I have a standard list/anchor navigation with a javascript to move the .current class depending upon the page section:
<div class="navbar">
<ul>
<li class="current"><a>home</a></li>
<li><a>products</a></li>
<li><a>services</a></li>
<li><a>contact us</a></li>
</ul>
</div>
styled with the following CSS:
.navbar {
width: 100%;
position: fixed;
background: black;
float: left;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
a {
padding: 10px 20px 20px;
}
.current a {
background: transparent url('../img/wedge-red.png') center bottom no-repeat;
}
The only way I can think to do it is to add extra divs on either side of the ul and assign the background to them, and then use a transparent png with a cutout as the background of the li a's.
Is there a way to do this without getting really ugly like that, and adding extra divs?
Try CSS pseudo elements!
Add 2 free DOM elements before and after an existing element in the DOM. Ideal in cases when you don't want to add stuff to your markup to satisfy styling needs.
CSS Markup
.item:before {
content:"";
display: inline-block;
width: 20px;
height: 20px;
background-color: silver;
}
.item:after {
content:"";
display: inline-block;
width: 20px;
height: 20px;
background-color: gray;
}
HTML
<div class="item">Content</div>
Check this JSFiddle for a demo.
Make sure you set content: "" and display:block in order to see them.
Here's what I ended up with -- extending the borders and cropping them with overflow: hidden; (a little hacky, but it works and doesn't add elements to the DOM):
.navbar {
width: 100%;
height: 60px;
position: fixed;
overflow: hidden;
}
ul {
border-left: solid black 2000px;
border-right: solid black 2000px;
position: absolute;
top: 0;
left: 50%;
margin-left: -2000px;
}
The above worked nicely for my purposes, and behaves in a responsive environment.
The other answer on this page, using :before and :after pseudo elements didn't work for my purposes. It ended up being too fussy, the pseudo elements wouldn't align properly, and kept wrapping to the next line when the browser window was resized. That solution as suggested works with fixed-width elements, not percentages as was specified in the original question.
I have an issue with the sliding doors technique here. The heading right after the description is floating left due to the sliding doors technique, but all I want is that is stands alone in the center, above the products.
Can you help me understanding how to do it?
Here is the CSS I used for the heading:
h3.offer-title, h3#comments, h3#reply-title {
background:url(images/offer-title-bg.png) no-repeat right bottom;
color:#434343;
display:block;
float:left;
font-size: 14px;
margin-right: 6px;
padding-right:6px;
text-decoration:none;
height: 43px;
line-height: 0;
position: relative; }
h3.offer-title span, h3#comments span, h3#reply-title span {
background:url(images/offer-title-bg.png) no-repeat;
display:block;
padding-left: 20px;
height: 43px;
line-height: 43px;
padding-right: 16px;
}
Thank you.
It's floating because you set float: left in your first CSS code block. To get rid of that behaviour you need to get rid of the float.
Once the float is gone, if you want the header's background to nicely fit the text like it did before, the element needs to have display: inline-block.
But with display: inline-block and no set width on the header (you could add a width, but then it might break if you want to change the text or font size), it's not centered. To get it centered, you need a wrapper element around it which has text-align: center.
So:
Add this block:
h3.offer-title {
display: inline-block; /* this makes the bg fit the text */
float: none; /* this overrides float:left */
}
Wrap the offer-title element in another div.
Style the wrapper with
.offer-title-wrapper {
text-align: center;
}
I am working on a website in Dreamweaver and I am somewhat of a beginner to some aspects of web design.
I have a vertical Spry Menu Bar running along the left side of my page that is working fine in most browsers, except good old internet explorer. In most browsers, the items in the menu bar will fit to the width of the menu bar, but in internet explorer, the items are trimmed down to the size of the word they contain. In some situation they are trimmed so much that two menu items are on the same line. The same thing is happening for submenus as well.
Here is the site: http://www.lakeathleticboosterclub.com/
Go ahead and test it out for yourself in case I wasn't describing the problem very well, and here is the CSS that I am working with.
#charset "UTF-8";
/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/*******************************************************************************
LAYOUT INFORMATION: describes box model, positioning, z-order
*******************************************************************************/
/* The outermost container of the Menu Bar, a fixed width box with no margin
or padding */
ul.MenuBarVertical
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to
accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
*/
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are
same fixed width as parent */
ul.MenuBarVertical li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
}
/* Submenus should appear slightly overlapping to the right (95%) and
up (-5%) with a higher z-index, but they are initially off the left side
of the screen (-1000em) */
ul.MenuBarVertical ul
{
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
left: -1000em;
top: 0;
width: auto;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible,
we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
left: 0;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
}
/*******************************************************************************
DESIGN INFORMATION: describes color scheme, borders, fonts
*******************************************************************************/
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
border: 1px solid #CCC;
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
background-color: #33C;
color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover
with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
}
/*******************************************************************************
SUBMENU INDICATION: styles if there is a submenu under a given menu item
*******************************************************************************/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu
and are set to use a background image positioned on the far left (95%) and
centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation
MenuBarItemSubmenuHover and are set to use a "hover" background image
positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/*******************************************************************************
BROWSER HACKS: the hacks below should not be changed unless you are an expert
*******************************************************************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we
underlay each submenu with an iframe */
ul.MenuBarVertical iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is
to keep IE 5.0 from parsing */
#media screen, projection
{
ul.MenuBarVertical li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}
Any help would be greatly appreciated.
Okay, so it seems you need to set ul.MenuBarVertical to have a width that will fill its container:
ul.MenuBarVertical
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 100%;
}
However, the sidebar has no width either so now we need to add:
.sidebar1 {
float: left;
width: 218px; <-- This is changed
background: #151B8D;
padding-bottom: 10px;
color: #fff;
}
And then that will screw up everything until we change this:
.content {
padding: 10px 0;
width: 790px; <-- Explicit width
float: right; <-- Should make things a little more predictable
}
Since it doesn't actually have an explicit width, the rendered dimension of your sidebar depends entirely on how the browser decides to size everything. In IE, it just doesn't work out well. Using this method should do the trick!
Also, for posterity, here is the original fix from my comment:
add display: block; or even width: 100% to ul.MenuBarVertical li {...}
If this causes strange behaviour in the main container, it's likely due to content wrapping issues arising from using floats. You can resolve that with setting `overflow: hidden' to .container. It triggers browsers, including IE, to recognize the dimensions of floated content and wraps accordingly.
Hope this helps! If it's not quite there after this, let me know and I'll see if I can determine the issue.