Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    10
    Rep Power
    0

    Need help with CSS


    Hello Everyone,

    I am trying to teach myself CSS. I taught myself HTML years ago when that was all you needed but am giving CSS a go now that it is almost a requirement for a modern webpage.

    For the most part I understand CSS, I can look through code and tell what it does. But the problem I seem to have is combing several elements.

    More instance, I can make a drop down menu mo problem but then if I try add another element like say, I try to make the article or information part of my site have an opacity of 0.6 just to make it see through. The general design of my website is that I have a single image that is the background. I have a logo that runs through the top of the page with a horizontal nav bar under that. Below that, I want my content or text to be on a see-through back ground so that you can still see the image underneath it.

    I call the div with my content "article" so whenever I try to set up my with an opacity, the article jumps up and covers my nav bar and also shifts slightly to the right. The "Home button on my nave bar is still visable but hover no longer works on the parts of the nav bar now covered by the "article'

    I am typing my CSS code below without any opacity. I was wondering if someone could help me figure out how to make this work.

    Any help would be greatly appreciated:

    body {
    background-color:black;
    background-image:url(images/background.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    }

    #wrapper {

    width: 688px;

    margin: 5px auto;
    }

    #header {
    background-image:url('../img/logo.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    width: 100%;
    }

    #article {

    float: left;
    width: 679px;
    height: 100%;
    min-height: 100%;
    padding-left: 5px;
    background-color: white;
    font-family: Georgia, "Times New Roman", Times, serif;
    }



    /* Creates the Navigation Bar */
    ul, li, a {
    margin: 0;
    padding: 0;
    }

    #nav {
    overflow: visible;
    }

    #nav li {
    list-style: none;
    float: left;
    border-top: solid 1px #bbb;
    border-bottom: solid 1px #bbb;
    border-right: solid 1px #bbb;
    position: relative;
    }

    #nav li:first-child {
    border-left: solid 1px #bbb;
    }


    #nav li a {
    font: bold 13pt Georgia, san-serif;
    display: block;
    height: 40px;
    line-height: 42px;
    color: #FDD017;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    padding: 0 30px;
    background-color: #348017;
    }

    #nav li a:hover {
    color: black;
    background: #FDD017;
    display: block;
    }



    /* Creates the drop down menu */

    #nav li > ul {
    color: #FDD017;
    background: #348017;
    background:rgba(255,255,255,0);
    list-style: none;
    position: absolute;
    top: 45;
    left: 0;
    display: none;
    }

    #nav li > ul li {
    float: none;

    }

    #nav ul a {
    white-space: nowrap;
    padding-top: 1px;
    }

    #nav li:hover > ul {
    display: block;
    }




    #nav li > ul {
    display: none;
    }


    #nav li:hover > ul {
    display: block;
    }

    #nav li > ul li {
    margin: 0;
    }

    #nav li > ul li a {
    color: #FDD017;
    background: #348017;
    margin: 0;
    }

    #nav li > ul li a:hover {
    color: black;
    background: #FDD017;
    }

    #nav li {
    margin: 0;
    padding: 0;
    }
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    10
    Rep Power
    0
    Yes, that is where I learned about Obacity and most of the other elements of CSS. I just seem to have trouble getting Opacity to work correctly with the other CSS I have for some reason
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    8
    Good morning,

    Have you got a live example to your website? If not could you post your HTML also so I can visually see what's going on?

    Kind regards,

    NM.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    10
    Rep Power
    0
    Originally Posted by Nanomech
    Good morning,

    Have you got a live example to your website? If not could you post your HTML also so I can visually see what's going on?

    Kind regards,

    NM.
    I don't want to put my content up yet but here is the jest of it:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Test Site</title>
    <link rel='stylesheet' href='style.css' type='text/css' />
    </head>

    <body>
    <div id="wrapper">

    <div id="header">
    </div>

    <ul id="nav">
    <li><a href="">Home</a></li>
    <li><a href="">About</a>
    <ul>
    <li><a href="">Policies</a></li>
    <li><a href="">Supporters</a></li>
    <li><a href="">Royalties</a></li>
    <li><a href="">Positions</a></li>
    <li><a href="">Chairmen</a></li>
    </ul></li>
    <li><a href="">Conerns</a></li>
    <li><a href="">Photo Album</a></li>
    <li><a href="">Contact</a></li>
    </ul>

    <div id="article">
    <h1><center>Welcome! This website is under construction</h1>
    <p>This is only a test.</p>
    </div>
    </div>

    </body>
    </html>


    I am doing more than just adding
    opacity:0.6;

    to my CSS, I am also giving the article background color, and a border. It works if I take away the drop down menu. It also works without the Opacity. But when I trying adding the Opacity, it messes up the alignment of everything for some reason.
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    8
    Good afternoon,

    When you say it's messing everything else up, do you mean that it forces the other elements to appear as if they have reduced opacity also?

    Kind regards,

    NM.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    10
    Rep Power
    0
    Originally Posted by Nanomech
    Good afternoon,

    When you say it's messing everything else up, do you mean that it forces the other elements to appear as if they have reduced opacity also?

    Kind regards,

    NM.
    No,

    When I add the Opacity, it causes the article to jump up and slightly to the right so that it almost completely covers the nav bar. Because it is see through, you can still see the nav bar but the hover doesn't work on it...all except for the Home because the article shifts to the right once opacity is added, home is the only part of the nav bar not covered by the article.

    I hope that makes sense. Basically adding opacity causes the article to jump over the nav bar and cover it up for some reason.
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    8
    What browser are you using?

    I've tried in IE, FF and Chrome and it's not moving anything around..

    Kind regards,

    NM.
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    10
    Rep Power
    0
    Originally Posted by Nanomech
    What browser are you using?

    I've tried in IE, FF and Chrome and it's not moving anything around..

    Kind regards,

    NM.
    I'm using Firefox but I am also using Dreamweaver and it is doing the same thing in live view as well.

    Here is the changes I am making from the above, perhaps it will clarify things:

    to #article I added

    background-color:#ffffff;
    border:1px solid black;
    opacity:0.6;
    filter:alpha(opacity=60); /*For IE*/

    When this didn't work, I started playing around with it and got rid of the

    body CSS and added a background div. I couldn't get either to work
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    10
    Rep Power
    0
    Originally Posted by Nanomech
    What browser are you using?

    I've tried in IE, FF and Chrome and it's not moving anything around..

    Kind regards,

    NM.
    I just played around with it again.

    This time, all I did was add

    background-color:#ffffff;
    border:1px solid black;
    opacity:0.6;
    filter:alpha(opacity=60); /*For IE*/

    to article, I didn't add anything at all to body.

    It appears to work now except the drop down menu displays behind the article now. How can I make the dropdown menu appear above this article? Again, this only happens with opacity.
  18. #10
  19. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    8
    Good afternoon,

    I had this very problem not so long ago.

    Rather than using opacity: 0.6; - try this on #article:

    Code:
    background: rgba(255,255,255,0.6);
    (Delete your background-color: #ffffff; on #article)

    Kind regards,

    NM.
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    10
    Rep Power
    0
    Yep that worked, but since I am trying to teach myself CSS, Why did it work?
    Last edited by Kravvitz; September 30th, 2013 at 11:03 AM. Reason: removed unnecessary quote
  22. #12
  23. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    8
    I actually don't know myself to be honest so I can't tell you. I'm interested to know why myself.

    I figured using background-color: #fff; and opacity: 0.5 is the same concept as rgba(255,255,255,0.5) but browsers must interpret it different.

    Can anyone enlighten us?

    Regards,

    NM.
  24. #13
  25. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    10
    Rep Power
    0
    Originally Posted by Nanomech
    I actually don't know myself to be honest so I can't tell you. I'm interested to know why myself.

    I figured using background-color: #fff; and opacity: 0.5 is the same concept as rgba(255,255,255,0.5) but browsers must interpret it different.

    Can anyone enlighten us?

    Regards,

    NM.
    Well I greatly appreciate the help. I would have never tried that on my own. I hope to learn why this works and why the other way didn't.
  26. #14
  27. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    8
    No problem whatsoever,

    I'm eager to find out now also

    Regards,

    NM.
  28. #15
  29. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Welcome to DevShed Forums, Space_Goose.

    The opacity property applies to an element and all of its descendants and can not be overridden to make descendants have a higher opacity value. RGBA, on the other hand, is only used for one color at a time (e.g. for the background or a border), instead of every visible portion of the element and any descendants. It's generally recommended to use a PNG image as a backup for browsers that don't support RGBA.

    More information:
    http://24ways.org/2009/working-with-rgba-colour
    http://dorward.me.uk/www/css/alpha-colour/

    P.S. Space_Goose, I'd appreciate it if you didn't quote entire posts when it's clear which one you're replying to. Please take the moment to delete the quote from the textarea before typing your reply.

    Also when posting code, please place it between [code][/code] tags.
    If you want to use the button to add the tags, paste the code in the textarea and then select it before clicking the button (so you don't get the problematic JavaScript prompt dialog).

    Comments on this post

    • Nanomech agrees
    Last edited by Kravvitz; September 30th, 2013 at 11:06 AM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo