Background img embarrassing noob question

  • LindBlad
  • Beginner
  • Beginner
  • User avatar
  • Posts: 61

Post 3+ Months Ago

Sorry about this ... but i have been wondering this all day. It seems like a simple thing to do but i just cant figure what am i doing wrong.

Here is how i wanted to BG img to act when resizing the browser window (the bg is in content bg)
http://www.lillan.fi/test/indexDropdown7.htm

But this is how it acts (bg img is here body bg)
http://www.lillan.fi/test/indexDropdown4.htm

Here's a video to show what i mean:
http://www.youtube.com/watch?v=GztD4ttPclg

So, how do i make the BG img to stay fixed with the content when resizing browser window???


Oh, i'm glad it still says "Beginner" in my profile :lol:
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 3+ Months Ago

what would happen if you set a fixed attachment on the background image. background-attachment:fixed;

the only issue i see is your content will flow over it so you could fix that with putting your content into an div with an overflow.

Though it seems to me that you are trying to get the logo to stay put if that is the case i would have gone a different route on the page layout.

I'm currently not on a computer so all i cant really do at this point in time is give ideas. i can test this later once i'm home and get on my comp
  • LindBlad
  • Beginner
  • Beginner
  • User avatar
  • Posts: 61

Post 3+ Months Ago

ScottG wrote:
what would happen if you set a fixed attachment on the background image. background-attachment:fixed;

the only issue i see is your content will flow over it so you could fix that with putting your content into an div with an overflow.

Though it seems to me that you are trying to get the logo to stay put if that is the case i would have gone a different route on the page layout.

I'm currently not on a computer so all i cant really do at this point in time is give ideas. i can test this later once i'm home and get on my comp


Thanks for your reply.
attachment:fixed; didnt help anything.
I kind of sorted it with table width="100%" http://www.lillan.fi/test/indexDropdown9.html

But yes, the logo was the problem in the first place. I asked them "do you really want the logo to be in the middle of the navigtion" and he said "yes" ... and i was like "great, how am i gonna do this" :hmm:

I will try to learn the "overflow" now. Thanks for that.
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 3+ Months Ago

Here an example of what I would have done It is crude I just through it together and I had to do some photo editing to get the logo out i did it fast so it is jagged. Feel free to use it if it fits your needs.

live version on my server http://www.indefinitedesigns.com/temp/

The zip file is too big to upload here so here is a link from my server including all of the files http://www.indefinitedesigns.com/temp/temp.zip
  • LindBlad
  • Beginner
  • Beginner
  • User avatar
  • Posts: 61

Post 3+ Months Ago

ScottG wrote:
Here an example of what I would have done It is crude I just through it together and I had to do some photo editing to get the logo out i did it fast so it is jagged. Feel free to use it if it fits your needs.

live version on my server http://www.indefinitedesigns.com/temp/

The zip file is too big to upload here so here is a link from my server including all of the files http://www.indefinitedesigns.com/temp/temp.zip


(i downloaded the files now so you can remove them from your server)
Wow, thanks for this ... im sorry you had to have all that trouble :oops:
Funny that you came up with the fixed top bar cause i thought about it too.
I will go study that now.

... but can i ask you one other thing (knowing that you are kind of a guru compared to me) This is really simple ... at least i think it is. I have a new problem with a CSS dropDown menu. Copied this from somewhere and tried to make it good for that new site.
http://www.lillan.fi/test/dropDownTest.htm

How do i make the drop down so that the background of the dropping down "bar" is white, (its now blackish so you cant notice it) and so that the texts on it are black, while the hover is still the greenish?


Anyway, big thanks for the info so far :)
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 3+ Months Ago

It was no trouble at all but like this?
HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
 
 
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style type="text/css">
<!--
 
/*DROPDOWN FUNCTIONALITY*/
/*set up ul tags*/
#menu, #menu ul{
   padding:0;
   margin:0;
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
   text-transform: uppercase;
   font-weight: bold;  
}
 
 
 
/*set up a tags*/
 
#menu a{
   display:block; text-decoration:none;}
 
 
/*position level 1 links horizontally*/
 
#menu li{display:block; float:left;}
 
/*undo previous style for level 2 links*/
 
#menu li ul li{
   float:none;
   background-color: #222;
 
}
 
 
/*position level 2 links vertically and hide*/
#menu li ul{
   display:none;
   position:absolute;
   z-index:1
}
 
 
/*unhide level 2 links on li:hover from level 1*/
#menu li:hover ul{
   display:block;
 
}
 
 
 
 
/*DROPDOWN STYLING:*/
 
 
#menu{height:25px}
 
#menu a{
   color:#F6F3E4;
   padding-right: 50px;
}
#menu a:hover{
   color:#869900;
   
}
#menu li{
 
   border:0px none #F3F1E7;
   margin-left:-1px
   
}
 
#menu li:hover{
 
   background-color:#}
 
#menu li ul:hover li{
 
 
}
 
 
 
body {
   background-color: #000;
   background-image: url(bg3.jpg);
}
 
#sub_menu a {
   background-color:#FFFFFF;
   color:#000000;
}
 
-->
</style>
 
</head>
 
<body>
<div align="center">
  <table width="973" border="0" cellpadding="0" cellspacing="0">
    <!--DWLayoutTable-->
    <tr>
      <td width="355" height="39" valign="top"> <ul id='menu'>
          <li><a href='#'>Makaronitehdas</a>
            <ul id="sub_menu">
              <li><a href='#'>Ravintola</a></li>
              <li><a href='#'>Tuoteluettelo</a></li>
              <li><a href='#'>Tekijät</a></li>
            </ul>
          </li>
          <li><a href='#'>Kuvia</a> </li>
        </ul>
        &nbsp; </td>
      <td width="286">&nbsp;</td>
      <td width="332" valign="top"><ul id='menu'>
          <li><a href='#'>Ryhmille</a></li>
          <li><a href='#'>Yhteystiedot</a></li>
        </ul>
        &nbsp;</td>
    </tr>
    <tr>
      <td height="315">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>
</body>
</html>
 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4.  
  5.  
  6. <head>
  7. <title>Untitled Document</title>
  8. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  9. <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  10. <style type="text/css">
  11. <!--
  12.  
  13. /*DROPDOWN FUNCTIONALITY*/
  14. /*set up ul tags*/
  15. #menu, #menu ul{
  16.    padding:0;
  17.    margin:0;
  18.    font-family: 'Open Sans', sans-serif;
  19.    font-size: 16px;
  20.    text-transform: uppercase;
  21.    font-weight: bold;  
  22. }
  23.  
  24.  
  25.  
  26. /*set up a tags*/
  27.  
  28. #menu a{
  29.    display:block; text-decoration:none;}
  30.  
  31.  
  32. /*position level 1 links horizontally*/
  33.  
  34. #menu li{display:block; float:left;}
  35.  
  36. /*undo previous style for level 2 links*/
  37.  
  38. #menu li ul li{
  39.    float:none;
  40.    background-color: #222;
  41.  
  42. }
  43.  
  44.  
  45. /*position level 2 links vertically and hide*/
  46. #menu li ul{
  47.    display:none;
  48.    position:absolute;
  49.    z-index:1
  50. }
  51.  
  52.  
  53. /*unhide level 2 links on li:hover from level 1*/
  54. #menu li:hover ul{
  55.    display:block;
  56.  
  57. }
  58.  
  59.  
  60.  
  61.  
  62. /*DROPDOWN STYLING:*/
  63.  
  64.  
  65. #menu{height:25px}
  66.  
  67. #menu a{
  68.    color:#F6F3E4;
  69.    padding-right: 50px;
  70. }
  71. #menu a:hover{
  72.    color:#869900;
  73.    
  74. }
  75. #menu li{
  76.  
  77.    border:0px none #F3F1E7;
  78.    margin-left:-1px
  79.    
  80. }
  81.  
  82. #menu li:hover{
  83.  
  84.    background-color:#}
  85.  
  86. #menu li ul:hover li{
  87.  
  88.  
  89. }
  90.  
  91.  
  92.  
  93. body {
  94.    background-color: #000;
  95.    background-image: url(bg3.jpg);
  96. }
  97.  
  98. #sub_menu a {
  99.    background-color:#FFFFFF;
  100.    color:#000000;
  101. }
  102.  
  103. -->
  104. </style>
  105.  
  106. </head>
  107.  
  108. <body>
  109. <div align="center">
  110.   <table width="973" border="0" cellpadding="0" cellspacing="0">
  111.     <!--DWLayoutTable-->
  112.     <tr>
  113.       <td width="355" height="39" valign="top"> <ul id='menu'>
  114.           <li><a href='#'>Makaronitehdas</a>
  115.             <ul id="sub_menu">
  116.               <li><a href='#'>Ravintola</a></li>
  117.               <li><a href='#'>Tuoteluettelo</a></li>
  118.               <li><a href='#'>Tekijät</a></li>
  119.             </ul>
  120.           </li>
  121.           <li><a href='#'>Kuvia</a> </li>
  122.         </ul>
  123.         &nbsp; </td>
  124.       <td width="286">&nbsp;</td>
  125.       <td width="332" valign="top"><ul id='menu'>
  126.           <li><a href='#'>Ryhmille</a></li>
  127.           <li><a href='#'>Yhteystiedot</a></li>
  128.         </ul>
  129.         &nbsp;</td>
  130.     </tr>
  131.     <tr>
  132.       <td height="315">&nbsp;</td>
  133.       <td>&nbsp;</td>
  134.       <td>&nbsp;</td>
  135.     </tr>
  136.   </table>
  137. </div>
  138. </body>
  139. </html>
  140.  
  141.  
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 3+ Months Ago

If that is the correct effect you are looking for i added an id to the ul tag for the dropdown named sub_menu and added the css
CSS Code: [ Select ]
#sub_menu a {
   background-color:#FFFFFF;
   color:#000000;
}
 
  1. #sub_menu a {
  2.    background-color:#FFFFFF;
  3.    color:#000000;
  4. }
  5.  
  • LindBlad
  • Beginner
  • Beginner
  • User avatar
  • Posts: 61

Post 3+ Months Ago

ScottG wrote:
If that is the correct effect you are looking for i added an id to the ul tag for the dropdown named sub_menu and added the css
CSS Code: [ Select ]
#sub_menu a {
   background-color:#FFFFFF;
   color:#000000;
}
 
  1. #sub_menu a {
  2.    background-color:#FFFFFF;
  3.    color:#000000;
  4. }
  5.  


YES! That is exactly what i was trying to do but couldnt find the way. I was thinking that maybe it misses something but well, i couldnt tell what it was.


THANK YOU so much. You have been really kind and helpful. Now i can finally finish this site :)

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: Veeramanikandan and 51 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.