Forums

  • # September 11, 2012 at 9:36 pm

    > I get where you’re coming from with the formal intro and a logo commonly being the very first item however. Perhaps a display: none; element in it’s place? Visibility would still read it but to sighted users it would be hidden.

    Using `display: none` doesn’t work with screen readers as elements using this property get ignored, if you wanted your logo hidden for those who are sighted you would use `visibility: hidden` and absolutely position it off the left side of the screen.

    # September 12, 2012 at 9:53 pm

    Thanks wolfcry911. Thanks for the comments about the break and the clearing of the floats. You’re right. I didn’t need it there. I still get a little confused about floats sometimes.

    # October 1, 2012 at 8:07 am

    Hey Miela84, add this to the bottom of your css and play with the width of the window. Just use this s you can show it off in class hehehe. Really nice if you want to develop for mobile devices.

    @media only screen and (min-width: 0px) and (max-width: 1000px) {
    #header{
    height: 160px;
    margin-top:140px;
    }
    #header a.logo {
    margin: -70px 0 0 -108px;
    }
    #header ul{
    width:300px;
    padding-top:80px;
    }

    #header ul li:nth-of-type(4) {
    margin-left:0px;
    }
    }

    # October 1, 2012 at 8:24 am

    Just add insert into this part of css #header ul li a.logo {
    this: background-position: center;

    Anonymous
    # May 15, 2013 at 10:02 am

    I have a similar menu I need help in. This is what I’m working with. Can u help me please.
    http://www.stephentemple.com/events/index.jpg

    Anonymous
    # May 15, 2013 at 10:04 am

    Here is my css

    body { background-color: #3d1c0f; background-image:url(../images/body_bg.jpg); background-position:top center;
    background-repeat: no-repeat; background-size: 100%;
    }

    #container { width:980px; margin: 0 auto;
    }

    #header {width:980px; height: 260px; }
    #logo { display: block; width: 370px; height: 290px; background:url(../images/logo.png) no-repeat; position:relative; float: left; margin-left: 300px;}

    #nav {width: 980px; Height: 43px; position: absolute;}

    #nav ul { list-style: none; }

    #nav li {display: inline;}
    #nav a { float: left; display: block; margin-right: 40px; }

    #wrapper { display: block; width: 980px; height: 850px; background: #fff; margin-top: 30px; border: 1px solid #000;
    -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;
    }

    # May 15, 2013 at 10:43 am

    Please make a Codepen.

    Anonymous
    # June 5, 2013 at 4:30 pm

    ok. I got it fix though. Thanks

    Anonymous
    # July 1, 2013 at 11:34 am

    Hi here is the code pen. I need help with this logo centered with the nav
    http://cdpn.io/brHFx

    Anonymous
    # July 1, 2013 at 11:37 am

    just incase it didn’t work here is the link http://codepen.io/kcolbe01/pen/rEqoc

Viewing 10 posts - 16 through 25 (of 25 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag