?
Solved

hover

Posted on 2013-05-30
8
Medium Priority
?
451 Views
Last Modified: 2013-05-30
how do i adjust the box when the text is hovered over.


for example as you can see from the screen shot  when the mouse is over the word the box appears from the css tag called hover

i want to make the box height smaller so the box doesn't cover the above text

how do i do that ?

is there a property that i have to set in the hover attribute ?
Screen-Shot-2013-05-30-at-9.36.3.png
0
Comment
Question by:TimSweet220
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 34

Expert Comment

by:Paul MacDonald
ID: 39208447
I'm sure the "box" is just the container the text is in.  Change the size of that and I'm sure you'll be set.
0
 

Author Comment

by:TimSweet220
ID: 39208661
That didn't help the hover has rules as seen below if i change the border-raduis it makes it a oval shaped so it is changing but  it is in an oval now not rectangle


ul#storeslist li li:hover {
	background: rgba(204,204,204, 0.2);
 	-moz-border-radius: 4px;
  	-webkit-border-radius: 4px;
  	border-radius:4px;
  	border: 1px solid #ccc;
  	position:relative;
	behavior:url(http://preview.drawbackwards.com/PIE.php);
	z-index:0;
  	cursor:arrow;
  	margin: -1px 0;
	
}

Open in new window

0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 39208670
Give us some code or some kind of clue as to how that part of the page is marked up and maybe we can help you.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39208709
If reducing the height changes the shape, then just also reduce the radius to 2px.

We are not going to play guessing games. just post the link and we will look at it.

Cd&
0
 

Author Comment

by:TimSweet220
ID: 39208867
i can attach the style.css file
in there you will find the storelist properties and attributes
also there you will find ul#storeslist li li:hover
the site is not in production so i cannot paste link


i just want to reduce the height of it the page code is listed below
<div style="margin-top:-30px; border-radius:4px; height: 50px;">
<li style="margin-left: -5px; margin-bottom: -7px; margin-top: -30px;"><a href="http://test.bookmanstest.com/stores/bookmans-sports-exchange/"><h5>Sports Exchange</h5></a></li>
<li>3330 E. Speedway Blvd.
Tucson, AZ 85716
(520) 881-7329
<a href="/stores/sports">View details</a></li></div>

Open in new window

  this code is just for the sports exchange part of page which is box i want to adjust and make smaller
style.css
0
 
LVL 58

Accepted Solution

by:
Julian Hansen earned 1500 total points
ID: 39208983
I would say your problem is here

<div style="margin-top:-30px; ...
<li style="margin-left: -5px; margin-bottom: -7px; margin-top: -30px;" ...


You are applying a negative margin which is going to shif the block up.

I would get rid of the negative margin's - I don't think they are necessary here or at least by styling your page differently you can get rid of them.

Do you have a live link we can look at - tried the test.bookmanstest.com but that does not appear to work.
0
 

Author Comment

by:TimSweet220
ID: 39209159
where this site is place is on a private server so the link is not accessible.
i want the block to stay in the same position but just the highlight box when you hover to become smaller

i think i would have to create a new class in the style.css file because if i alter the hover for storelist it will affect all the hover boxes on the page for storelist  
so maybe i need to create a new class

but then i still dont know how to make the box smaller i cnaged the radius it makes it smaller but it also makes it oval shaped i added a height to it and it made it larger i also added a width it also changed it
so what tags out of the  this line of code alters the size and keeps the rectangle shape
ul#storeslist li li:hover {
	background: rgba(204,204,204, 0.2);
 	-moz-border-radius: 4px;
  	-webkit-border-radius: 4px;
  	border-radius:4px;
  	border: 1px solid #ccc;
  	position:relative;
	behavior:url(http://preview.drawbackwards.com/PIE.php);
	z-index:0;
  	cursor:arrow;
  	margin: -1px 0;
	
}

Open in new window


this code is also found in the style.css
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 39209253
None of them

Height is here

<div style="margin-top:-30px; border-radius:4px; height: 50px;">

I would change the way you have marked up this page - you are trying to patch a badly constructed page.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Find out what you should include to make the best professional email signature for your organization.
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question