...

View Full Version : A with background images. Am I doing it rite? :]



Koldunas300
07-20-2011, 03:25 PM
Hi there,
Excuse me if its a pretty basic question, but I have been going over my few lines of css for ages now and adding craziest parameters I can think of, but to no avail...
Basically I have an ul list of menu links and a simple background picture to display when on a:hover. The problem is that the background doesn't get fully displayed - it gets cut off on the right, just at the end of the word. There must a simple way how to display the full width of the background picture - I am just missing something. (Adding padding-right sort of works, but the words are not of the same length so the hover-backgrounds are still all different of width)



#menu a {
diplay: block;
clear: both;
min-width:260px;
padding-left:37px;
padding-top:18px;
height:40px;
color:#000000;
text-decoration:none;
font-size:14px;
font-weight:bold;
margin-top:20px;
}

#menu a:hover, #menu a.active {
min-width:260px;
padding-right:15px;
overflow:visible;
clear:both;
background-image: url(images/hover.png);
background-repeat: repeat;
background-position: 0% 0%;
text-decoration:none;
color: White;
z-index:5;
}


Z-index is because I use another Div beneath it for semi-transparent background. Min-width is there just because I was running out of ideas.

Thanks for your help - I bet I am going to facepalm after you tell me what's wrong. :rolleyes:

VIPStephan
07-20-2011, 03:51 PM
Nothing is wrong with your CSS. We need your entire code because this CSS doesn’t tell us anything about what gets styled.

Koldunas300
07-20-2011, 05:18 PM
Oh, right, sorry.
temp website can be seen at http://pasibandymui.comxa.com
It's a GetSimple CMS.

For the lazier lads, the stylesheet:


html {
height:100%;
}

body {
background-color:#EBD7AB;
background:url(images/LentosPataisytos5.jpg) ;
font-size:10pt;
font-family:Verdana;
margin:0;
padding:0;
color:#000000;
height:100%;
}

#tekstodezute {
position:relative;
top: 50px;
}

#tekstoribos {
width:780px;
float: right;
}

#meniuribos {
width:280px;
float: left;
}

#meniudezute {
position:relative;

top: 55px;
padding-bottom:110px;
}

#meniudezute li
{
min-width:260px;
list-style-type: none;
background-image: url(images/namukas.png);
background-repeat: no-repeat;
margin-bottom: 20px;
padding-left: 2px;
PADDING-top: 20px;
}


#meniuturinys a {
diplay: block;
clear: both;
min-width:260px;
padding-left:37px;
padding-top:18px;
height:40px;
color:#000000;
text-decoration:none;
font-size:14px;
font-weight:bold;
margin-top:20px;
}

#meniuturinys a:hover, #meniudezute a.active {
min-width:260px;
padding-right:15px;
overflow:visible;
clear:both;
background-image: url(images/hover.png);
background-position: 0% 0%;
text-decoration:none;
color: White;
z-index:5;
}

#ribos {
width:1100px;
margin:auto;
}

#dezute {
position:relative;
top:49px;

}

#meniuturinys {
position:relative;
top:15px;
right:20px;
color:Black;
z-index:5;

}

#turinys {
position:relative;
color:Black;
z-index:5;
}

.fonas {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:White;
z-index:1;
/* These three lines are for transparency in all browsers. */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity:.7;
}
#footer {
width:900px;
clear:both;
height:46px;
padding-top:32px;
margin-left:30px;
text-align:center;
line-height:14pt;
/* background-image:url(images/footer.png); */
background-repeat:no-repeat;
color:#000000;
}

#footer a {
color:#000000;
}

h1, h1 a {
font-size:23pt;
color:#000000;
margin:0;
}

h2 {
font-size:15pt;
color:#000000;
padding-top:6px;
}

h3, h3 a {
font-size:8pt;
color:Black;
padding-top:2px;
}

#sidebar h2 {
font-size:15pt;
padding-left:10px;
color:#000000;
padding-top:6px;
}

.description {
font-size:14pt;
color:#EBD7AB;
padding-left:5px;
}

a {
color:#000000;
text-decoration:underline;
}


a:hover {
text-decoration:underline;
}

li {
margin:5px;
list-style-type:square;
}



And this is the GetSimple template:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title><?php get_page_clean_title(); ?> &lt; <?php get_site_name(); ?></title>
<?php get_header(); ?>
<LINK REL=StyleSheet HREF="<?php get_theme_url(); ?>/style.css" TYPE="text/css" MEDIA=screen>
</head>

<body>
<div id="ribos">
<div id="dezute">
<div id="turinys">
<table><tr><td><img src=http://pasibandymui.comxa.com/theme/Pergalvojimas/images/logo.png><td width=300></td><td><?php get_component('kontaktai'); ?></td></tr></table>
</div>
<div class="fonas"></div></div>
<div id="meniuribos">
<div id="meniudezute">
<div id="meniuturinys">
<ul>
<?php get_navigation(return_page_slug()); ?>
</ul>
</div>
<div class="fonas"></div></div></div>





<div id="tekstoribos">
<div id="tekstodezute"><div id="turinys">
<h2><?php get_page_title(); ?></h2>
<?php get_page_content(); ?>

</div><div class="fonas"></div></div></div>




<div id="footer">
<br><br>
&copy; Copyright&nbsp;<?php get_site_name(); ?>&nbsp;<?php echo date('Y'); ?>
</div>


</div></div>
</body>

</html>


Sorry for the foreign div names :]

VIPStephan
07-20-2011, 05:31 PM
I just see now, it’s a typo; you have “diplay” instead of “display” in your CSS for the links.

Koldunas300
07-20-2011, 05:55 PM
You are right. But it actually works even worse with that line spelt correctly- I just added it out of desperation. Deleted it now.

VIPStephan
07-20-2011, 08:15 PM
No, your links must be displayed as block elements. It only looks worse because you randomly added more and more styles because you based your styling on wrong code before. Now that the error is corrected it becomes obvious. Remove all padding, margins, and widths from the anchors and the list items and start reapplying them step by step (but make sure the anchors are set to display: block).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum