I was using jQuery plugins to create a rounded corner for my <li>, but it was not working on a lot of browsers and didn't support mouse over.
I am wondering what is the best way to use two images (left corner and right corner) as the left and right side with using <li>.
The construct that I have seen used most for that is a span inside a link.
so something like:
<li><a><span>Your text here</span></a></li>
you can then target the span and the link using the hover state of the link:
a:hover{some rules here}
a:hover span{some more rules here}
that keeps it kinda semantic, and doesn't add to much junk to the page.
You could put Divs inside your li's like so:
<li>
<div class="lefcorner"></div>
<div class='liContent'>Foo</div>
<div class='rightcorner'></div>
</li>
That way you will both keep your semantics and will also have the cross-browser support of styling DIVs.
Related
Is it possible to affect the parent object on user hover over it's child in just CSS3?
i.e.
<div class="random">
<img src="image.png">
</div>
.random img:hover {
somehow affect .random?
}
I know it's pretty easy to do with JQuery, JS etc. But want to steer away from JS as much as possible.
Using ONLY css is impossible today, but if you want to do simple things, like changing the parent's background when you hover the inner element, you can simulate the background using a sibling. This way you will be able to achieve the result using the "+" selector.
<div class="container">
<span class="content">something</span>
<span class="bg"></span>
</div>
However, to do this, you'll have to work using absolute positioning and deal with it's side effects, like centering things and explicit dimensions, here's an example: http://jsfiddle.net/PYN6P/
I'm currently using this current HTML markup with Javascript to create text links with a inline image that "rolls over" on the text hover.
<div><a id="link" href="page.html"
onmouseover="rollover(this.id,'over');"
onmouseout="rollover(this.id,'out')"
>Link</a><img id="linkButton" src="image.gif" /></div>
It's important that the image is inline so I can easily create new text links with varying lengths of text.
I want to try and get this done without Javascript, and using a single image containing the over and out states of the rollover, so probably using the background position trick.
You need to use background-image (or just background) in CSS. Here is an example http://www.webvamp.co.uk/blog/coding/css-image-rollovers/
The key is using pseudo classes on the link element. Eg:
a:hover
a:active
a:visited
You can also use inline-block so that the a isn't completely a block element. You may want to set a width and a height to it. Keep in mind display:inline-block doesn't work that great in IE7, if you still need to support that.
Here's some additional tips on using CSS Sprites
So I'm developing a mobile micro site and that said, I want the links on the page, to behave
like ios links/tabs do, that when you click on them, the whole width of the button is active and changes color to display a click/finger over state etc..plus the WHOLE width of that div behaves like a button so that either on a small phone or a tablet, as long as I don't specify a width, that its active state goes from left to right ALL THE WAY as a "block"
To that effect for example, if I have a regular text link. like this:
<div class="mainBtns">Portfolio</div>
id give it this CSS so that on mouseover/click with finget etc, that it behaves like an ios button/tab.
CSS:
.mainBtns a{
display:block;
}
.mainBtns a:hover{
background-color:#d8d3cb;
}
Now that said. This is the problem im trying to solve.
I have a parent Div called thumbItemW (the content wrapper);
and two child items called galThumb and galThumbtxt
The content block looks like this:
<div class="thumbItemW ">
<div class="galThumb">
<a href="gallery-highrise.php" alt=""><img src="images/thumbs/highrise.jpeg" alt="High rise Gallery" />
</a>
</div> **//this is the gallery thumb floated left**
<div class="galThumbTxt">
HIGH RISE CONTEMPORARY
</div>**//this is the gallery thumb text floated right**
<div class="clearEm"> </div>//clear the float
</div> <!-- thumbItemW ender -->
What I want to do is that, when the user finger clicks the parent div, that the background color changes like in the example above with "mainBtns / mainBtns a:hover"
Problem is that, unlike the first example with mainBtns, since this one has child items, if I do something like:
pseudo CSS:
.thumbItemW a:hover{
display:block;
}
or something like this, this doesn't work the way id want it, since the elements are floats inside this parent div.
What I'm wanting to do is make the parent div .thumbItemW be like a display block so that when the user clicks, that they can click ANYwhere along that divs width and still activate the button as oppose to clicking RIGHT ontop of the button or text.
Can this be achieved the way I have it? Can this be achieved with CSS alone WITHOUT javascript/jquery?
Hope it's not too confusing.
why wouldn't you just specify width and height on the a element?
Is there any way to have a custom-shape image container? To use something instead of <div />?
The problem appears when I need to add corners on top of the #content-box ( http://img855.imageshack.us/img855/8343/screenshot20111027at163.png ). The corner-images are using only half of the block element, the rest (the pink alpha-background) are blocking the active-elements underneath it.
Is there any workaround for this?
To answer my own questions:
It is not possible to have a custom shape HTML element without parent block element holding it anyway, e.g. in case of SVG.
However, the one workaround that I've managed to come across is magic CSS pointer-events rule, which, as you might have guessed already, helps to click through the element.
pointer-events: none;
That did solve my issue.
It's not possible to have custom shaped containers. You could do this though using <div> wrappers, each containing a different background image. For example:
html
<div id="content-wrapper">
<div id="content-box">
<!-- Upload photo content box --->
</div>
</div>
css
#content-wrapper,
#content-box{
width:500px;
height:500px;
}
#content-wrapper{background:url('images/four-corners.png') no-repeat}
#content-box{background:url('images/octagon.png') no-repeat}
This way the images won't block any active elements on the page.
I'm having a rare CSS issue in Internet Explorer 7 (I'm actually testing it on IE8 in compatibility view, but the client sent me screenshots in native IE7 too), it's easy to reproduce:
Go to this site (spanish).
On the left column, click the border (or somewhere around) the box labeled "Fiestas anteriores"
The element should now be moved downward, but if you click the empty space left, it'll come back like a good dog.
I've been looking around for IE7 bugs and playing with the width, border and other CSS properties with no luck. Any input is welcome!
I found if you apply the following styles it seems to stop it breaking when you click anywhere near it:
#prevparties_middlerow
{
float:left;
width:150px;
}
one little suggestion though, if I may, instead of having divs either side of the content in your panels to create the borders like so:
<div id="prevparties_left"/>
<div id="prevparties_contentBox">
content
</div>
<div id="prevparties_right" class="boxmiddle"/>
you'll probably find it alot easier to wrap the content box in a div that has the borders set as a background, like so:
<div id="prevparties_contentWrap">
<div id="prevparties_contentBox">
content
</div>
</div>
the main advantage here is that the wrapping div will go down as far as the containing div goes, so you dont have to apply specific heights to all these border divs. And when things are wrapped like this I find there is much less possibility of it breaking :D
anyways, hope this helps.