Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Moscow
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy A with background images. Am I doing it rite? :]

    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)

    Code:
    #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.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Nothing is wrong with your CSS. We need your entire code because this CSS doesn’t tell us anything about what gets styled.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Moscow
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, right, sorry.
    temp website can be seen at http://pasibandymui.comxa.com
    It's a GetSimple CMS.

    For the lazier lads, the stylesheet:
    Code:
    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:
    Code:
    <!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 :]

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    I just see now, it’s a typo; you have “diplay” instead of “display” in your CSS for the links.
    Last edited by VIPStephan; 07-20-2011 at 04:33 PM.

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Moscow
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You are right. But it actually works even worse with that line spelt correctly- I just added it out of desperation. Deleted it now.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    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).


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •