TimSweet220
asked on
hover
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
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
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.
ASKER
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;
}
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.
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&
We are not going to play guessing games. just post the link and we will look at it.
Cd&
ASKER
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
style.css
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>
this code is just for the sports exchange part of page which is box i want to adjust and make smallerstyle.css
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
this code is also found in the style.css
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;
}
this code is also found in the style.css
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.
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.