1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to center this list menu transforming from vertical to horizon

Discussion in 'CSS' started by ketting00, Apr 12, 2016.

0
  1. #1
    Hi guys,
    I'm trying to center this menu on narrower screens when it transforming from vertical menu on wider screens, but it sticks to the left.

    So how do I center it?
    
<!DOCTYPE html>
<html>
    <head>
        <style>
            .list {
                position: fixed;
                right: 0;
                top: 8em;
                padding: 0.6em 0.4em;
                border: 0.07em solid #656565;
            }
            .list li {
                cursor: pointer;
                margin: 1em 0;
            }
            .list li:first-child { margin-top: 0; }
            .list li:last-child { margin-bottom: 0; }
            @media (max-width: 40em) {
                .list {
                    position: static;
                    padding: 0.6em;
                }
                .list li {
                    display: inline-block;
                    text-align: center;
                    vertical-align: middle;
                    margin: 0 0.3em;
                }
            }
        </style>
    </head>
    <body>
        <ul class=list>
            <li>B1</li>
            <li>B2</li>
            <li>B3</li>
        </ul>
    </body>
</html>
    Code (markup):
    Thank you,
     
    ketting00, Apr 12, 2016 IP
  2. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #2
    Never mind,

    I center it in the wrong place. It should be in the ul tag, not li.
     
    ketting00, Apr 12, 2016 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    I missed your follow-up post. I also missed that you're going from a vertical list on wide screens to horizontal on narrow screens, which was/is contra-intuitive to me.

    But since I have already coded my misunderstood version, here it is for your amusement and edification. 
    
<!DOCTYPE HTML>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta content=
    "width=device-width; height=device-height; initial-scale=1"
  name="viewport">
  <title>
  Test document
  </title>
  <style type="text/css">
  /*<![CDATA[*/

  body {
   background-color: white;
   color: black;
   font: 100%/1.5 sans-serif;
   margin: 0  1.5em;
   padding: 0;}

  p {
   font-size: 1em;}

  h2::before {
   content: "Desktop\a0"}

  ul#test {
   list-type: none;
   margin: 1.5em 0;
   padding: 0;
   text-align: center;}

  #test li {
   display: inline-block;
   margin: 0 0.3em;}

  @media (max-width: 40em) {
   h2::before {
    content: "Small Viewport\a0"}
  
   ul#test {
    display: block;}

   #test li {
    display: block;
    margin: 1.5em 0
    text-align: center;}}
  
  /*]]>*/
  </style>
  </head>

  <body>
  <h1>
  Test of responsive list
  </h1>

  <h2>
  Test
  </h2>

  <ul id="test">
  <li>B1</li>
  <li>B2</li>
  <li>B3</li>
  </ul>
  </body>
</html>
    Code (markup):
    Jeez! I hate that when I paste here, the formatting is not maintained.

    gary
     
    kk5st, Apr 13, 2016 IP
  4. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #4
    Thank gary for the humor,

    It's not contra-intuitive. I put that around images. There's plenty of space on the desktop. I want to focus on the image on mobile. So it must go to the top or the bottom.
    I use very widescreen monitor though.

    However, your code got these messages from Chrome desktop:
    
The value "device-width;" for key "width" is invalid, and has been ignored.
horizon.html:7 The value "device-height;" for key "height" is invalid, and has been ignored.
horizon.html:7 Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead.
    Code (markup):
    Are you still suggesting these. My users target is mostly on mobile and women, and iOS perhaps.

    Thanks,
     
    ketting00, Apr 13, 2016 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    I don't have the errors you found (Chrome Version 49.0.2623.112 (64-bit) in Linux). The W3C html validator shows no errors.

    gary
     
    kk5st, Apr 13, 2016 IP
  6. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #6
    Thanks for confirming. Your code is short and sweet. I like it.
     
    ketting00, Apr 13, 2016 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Some advice? Get rid of the damned position:fixed; nothing like wasting screen space that could be better used to show content... There's a reason I use user.css via stylish to override that on any site I frequent that pulls that stupid useless and annoying stunt.

    Also, rather than doing cursor:pointer, you say this is a menu? Get your COMPLETE semantic markup in there (aka ANCHORS) and you'll find it's more reliable to style the anchors than it is the LI, particularly if you need to support IE8/earlier. Just set the LI to inline-block and then forget they even exist -- don't even TRY wasting time doing anything more with them. Set the anchors to display:block so they can receive vertical style, and you're good.

    Remember, don't even THINK about styling things until you have the full complete semantic markup in place.

    Oh, and that "error" some validation systems don't like semi-colons on viewport meta -- NOT that an HTML validator should actually even be looking at the content of a meta tag -- change them to comma's as that's the "accepted" delimiter by the specification that has no business declaring that...
     
    deathshadow, Apr 17, 2016 IP
  8. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #8
    Thanks @deathshadow for suggesting about the anchor.

    I'm considering using it.
     
    ketting00, Apr 18, 2016 IP