I have a menu with four elements say A , B , c and D
I want to highlight particular Element say A ,
I have my HTML and CSS like this
div.smenu div a {
padding:5px 10px;
display:block;
border-bottom:1px solid #ddd;
color:#3c8287;
background-color:#fff
}
div.smenu div a.current {
background-color:#EEE;
color:#3c8287;
font-weight:700
}
div.smenu div a:hover {
color:#3c8287;
text-decoration:none;
background-repeat:no-repeat;
background-position:right center;
font-weight:700;
background-color:#EEE
}
<div class="smenu">
<table>
. . . .
<div>
<span>Create request for</span>
A
B
</div>
<div>
<span>Direct access to</span>
C
D
</div>
</table>
</div>
and should remain as highlighted as long i stay on "A"
In "A" , i have tasks to "edit"( where edit is a hyper link in that page)
something like
<a href="............" >edit</a>
now, when i click on this edit link, my highlight(bold) on "A" disappears
Any help in fixing this, would be really apprecieated
thanks in advance!
Set a div around every element and use that to trigger it:
<div class="smenu">
<table>
.
.
.
.
.
<span>Create request for</span>
<div class="menu-item">A<div>
<div class="menu-item">B<div>
</div>
<div >
<span>Direct access to</span>
<div class="menu-item">C<div>
<div class="menu-item">D</div>
Do the css like this:
.menu-item a : hover
{
color: #3c8287;
text-decoration: none;
background-repeat: no-repeat;
background-position: right center;
font-weight: bold;
background-color: #EEEEEE;
}
This is how I usually do it without any issues.
Also it might indeed be best to not forget the 'visited' or try clearing ur cache.
Hope you can get it to work.
Cheers
It's because you never use your css class current
Let's say you are on page A, you should add the class current to the A menu element like this :
div.smenu div a {
padding:5px 10px;
display:block;
border-bottom:1px solid #ddd;
color:#3c8287;
background-color:#fff
}
div.smenu div a.current {
background-color:#EEE;
color:#3c8287;
font-weight:700
}
div.smenu div a:hover {
color:#3c8287;
text-decoration:none;
background-repeat:no-repeat;
background-position:right center;
font-weight:700;
background-color:#EEE
}
<div class="smenu">
<table>
. . . .
<div>
<span>Create request for</span>
<a class="current" href="xyz/abc/dosomething!inputa.action">A</a>
B
</div>
<div>
<span>Direct access to</span>
C
D
</div>
</table>
</div>
Related
I'm trying to center a bordered READ MORE link on a web page, but haven't succeeded yet. The link still sits on the left of the page:
I'm using Twitter Boostrap and that's how the HTML looks like:
<div class="container">
<h2 class="more">read more</h2>
</div> <!--end container-->
And the CSS:
#process .more {
border: 1px solid #392e2e;
padding: 15px;
display: inline-block;
margin: 0 auto;
}
#process .more a {
color: #392e2e;
text-decoration: none;
text-align: center;
}
I've also tried it with Bootstrap's class="text-center", but that doesn't work either. Here's a link to my project, you can see the READ MORE link issue at the very bottom of the page.
Thank you for your help.
Use the text-center class but use it on the parent div container for the link:
<div class="container text-center">
<h2 class="text-center more">read more</h2>
</div>
You can do it two ways:
1. Block display method:
#process .more a {
color: #392e2e;
text-decoration: none;
display:block;
width:100px; //Adjustable and depends on you
margin:0 auto;
}
or:
2. Outer element align:
h2.more {
display:block;
text-align:center;
}
h2.more a {
display:inline-block;
width:auto;
}
Here is the fiddle with 2 examples: Example
There are actually other ways to do it with CSS, but these two are the most common.
I have 2 questions (more like 1.5)
1) What would be the correct way to modify the menu in the first picture to look like the one in the second. Since I put both the picture and the text in the same <a> tag I'm having problems with the white border (the icons are 30x30px, no transparent space around them or anything) :
HTML:
<div id="header">
<div class= "main">
<div class="logoHeader">
<img src="logo.png">
</div>
<div class="menuPicHeader">
<img src="stovyklae.png"><h2>stovykla</h2>
<img src="klubase.png"><h2>klubas</h2>
<img src="elparde.png"><h2>el. parduotuvė</h2>
<img src="kontaktaie.png"><h2>kontaktai</h2>
</div>
<div class="socialIconsWrapHeader">
<img src="yttop.png">
<img src="ftop.png">
</div>
</div>
</div>
CSS:
h2{
display:inline-block;
text-transform: uppercase;
text-decoration: none;
color: black;
margin-left:10px;
margin-right:10px;
font-size:14px;
}
.logoHeader{
margin-left:15px;
float:left;
margin-bottom: 20px;
margin-top:15px;
}
.socialIconsWrapHeader{
float:right;
margin-top:15px;
margin-right:20px;
}
.socialIconsWrapHeader a{
margin:0px 10px 0px 10px;
}
.menuPicHeader{
float:left;
margin:20px 0px 0px 130px;
padding-left:10px;
}
.menuPicHeader a{
padding-top:20px;
padding-bottom:2px;
}
2) I was wondering what should I use to get the text onto the picture as seen here:
Should I cut the picture in a half, get some div and stick it to the bottom of the picture using the grey half as background? Or somehow just write on top of the <a>?
HTML:
<div class="rightCol1">
<img src="pic1.png">
<img src="pic2.png">
</div>
CSS:
.rightCol1{
float:right;
margin-right:30px;
margin-top:10px;
}
1: add .menuPicHeader a{ margin-right: 20px; }
http://jsfiddle.net/Lphup/
2: There are a lot of ways to do that, but here's one option:
http://jsfiddle.net/33vth/
for second
<div class="rightCol1">
<img src="pic1.png"><span>your text</span>
<img src="pic2.png"><span>your text</span>
</div>
CSS:
.rightCol1{
float:right;
margin-right:30px;
margin-top:10px;
}
.rightCol1 a {display:inline-block;position:relative;height:200px;width:100px;}
.rightCol1 a span {display:block;width:100px;height:70px;position:absolute;bottom:0;left:0;z-index:99;background:#333}
You can have more positioning control over the elements if you set their parent's positioning to 'relative' and then set their positioning to absolute. This lets you use top, left or right to set an absolute position for the child objects, in relation to their parent.
I didn't have a chance to try this, but something like this should do the trick:
.menuPicHeader { position: relative; }
.menuPicHeader a { position: absolute; top: 0; }
I'm trying to align a button and some text at the bottom of a div much like the example below with the Price and the Check it out button. What's the best way to do this. I've made a div, styled it to get the text, and picture right. I just need to attach the button to the right-hand side and the price to the left, inline with each other.
Similar to the product displays in the website thisiswhyimbroke.com
http://www.thisiswhyimbroke.com/
^^ Price and the Check It Out button. How do I achieve this?
Try like this: DEMO
Try to use reset you CSS first.
CSS:
*{
padding:0;
margin:0;
}
#priceAndButton {
width:100%;
display:block;
height:30px;
line-height:30px;
}
#priceAndButton h4 {
float:left;
vertical-align:middle;
}
#priceAndButton img {
float:right;
}
Hope this helps you
I have created a working fiddle with your requirements:
http://jsfiddle.net/8993H/
HTML:
<div id="main-container">
<div class="img-div"><img src="http://tiwibzone.tiwib.netdna-cdn.com/images/beer-chug-flowmeter1-300x250.jpg"/></div>
<div class="rhs">
<div class="button-nav">
<span class="price">$35.00</span>
<span class="check-btn"><button>Check It Out</button></span>
</div>
</div>
</div>
CSS:
#main-container{
width:100%;
border: 1px solid #aaa;
}
.img-div{
width:50%
}
.img-div img{
width:100%;
}
.rhs{
width:48%;
float:right;
position:relative;
}
.button-nav{
position:absolute;
bottom:10px;
width:100%;
}
.price{
float:left;
}
.check-btn{
float:right;
}
Try this:
button{
float:right
}
#price{
float:left
}
Here i created one working fiddle for your requirement.. You can re use this CSS. Hope This will help you.
HTML
<div class="desc">
<img height="200px" width="200px" src="http://www.clker.com/cliparts/8/2/2/6/11971154711712468971BigRedSmile_A_screwdriver_1.svg.med.png"/>
<p>Move over sliced bread, the water jet pack is officially the greatest thing ever. For only sixty eight grand you can own your very own water thrusting jetpack. It can lift you up to 30 feet high and thrust forward at 30 miles per hour – practically guaranteeing certain death.</p>
<div class="button">
Check it out
</div>
<div class="price">$500.00</div>
</div>
CSS
.desc{
text-align:jstify;
width:50%;
}
.button a{
background-color: #faab37;
color: white;
display: block;
float: right;
padding: 7px 8px;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.button a:hover{
background-color:#f9bd66;
}
Hope This is What your expected output
I am a Beginner Website Developer, I want to make my college's project but stuck at the beginning because my navigation div and small divs in navigation div are not going to transform or transit at once. when i apply transition at one of em with absolute position all (also apply absolute position to other three small divs) the all three of em except first disappears. Code is linked. I want to make navigation just like IMDB's Navigation. (with downside transition and with links and picture at one end.)
-Thank in advance.
HTML CODE:
<body>
<div id="Papadiv">
<header id="Header">
<Div id="Logodiv">
<img src="Images/Logo.jpg" height="100px" width="100px" />
</Div>
<Div id="Titlediv">
<font size="+5" face="Comic Sans MS, cursive">MobilePassion.com</font>
</Div>
</header>
<nav id="Nav1">
<div id="navoption1">
<a href="Index.html">
New Arrivals</a>
</div>
<div id="navoption2">
<a href="Famousmodels.html">
Famous Models</a>
</div>
<div id="navoption3">
<a href="Whoweare.html">
Who We Are?</a>
</div>
<div id="navoption4">
<a href="Contactus.html">
Contact Us</a>
</div>
</nav>
/* CSS Document */
#Nav1
{
background-color: #FDAA2F;
height:50px;
width:800px;
}
#navoption1
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
}
#navoption2
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
}
#navoption3
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
}
#navoption4
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
#navoption1:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink;
background-image:url(Rose%20(1).jpg)
}
#navoption2:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink
}
#navoption3:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink
}
#navoption4:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink
}
I think first off you need to do some research on how to build a "CSS Mega Drop Down Menu". (That's usually what they are called and you should be able to find a good example in which you can structure your styling off of.)
A "classic" drop down menu usually contains lists nested (or in your case - divs) within parent list items.
"Here" is a good step by step example that I think should get you off and running.
I have been rtying to find a good resource for an example. These are good examples to learn from i think. http://code-tricks.com/simple-css-drop-down-menu/ , http://css-tricks.com/simple-jquery-dropdowns/ . It would also be wise for user experience to use hoverintent (http://cherne.net/brian/resources/jquery.hoverIntent.html) or a delay. This creates a better user experience.
Problem: The idea is the div that changes the colour of its contents on hover. Except the text and image (sprite) colours change at different points; the text on hover above the 'address' div and the image above the 'addressicon' div. Does anyone know how I could I get both to change on hover over the the 'address' div.
HTML:
<section id="gallery">
<div class="container" style="padding-top:40px;">
<div class="address"><div class="title"><span>Address</span></div><br>
<div class="addressicon"></div>
<p><br>Address1<br>
Address2<br>
Address3<br>
Area<br>
City<br>
PostCode
</p>
</div>
<div style="width:33%;height:400px;display:inline-block;background-color:#000000"></div>
<div style="width:33%;height:400px;display:inline-block;background-color:#000000"></div>
</div>
</section>
CSS:
.address {
width:33%;
height:400px;
display:inline-block;
background-color:#CCC;
color:#bcb7af;}
.address:hover {color:#000000;}
.address span {
color:#bcb7af;
align:center;
font-size:24px;
width:100%;}
.address:hover span {
color:#000000;}
.title {text-align:center;}
.addressicon {
background: url(../images/address.png) bottom;
width:202px;
height:130px;
margin: 0px auto;}
.addressicon:hover {
background-position: 0 0;}
Many thanks
Problem Solved New CSS:
.address > .addressicon {
background: url(../images/address.png) bottom;}
.address:hover > .addressicon, {
background-position: 0 0;}
.address:hover > .addressicon {
color: SOMETHING;
}
And never leave a div empty. Put an in it, to prevent it from stupid behaviors.