#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    5
    Rep Power
    0

    Center links in a fluid theme.


    Hi there, I've made a fluid theme for my site, but I've got a problem positioning 2 links.

    I cannot put the url in this post...i try to explain the problem:

    I want to center in the page the links that have got no fixed width and are touching together,but i really don't know how to do it, i've tried several stuff...



    some idea?
  2. #2
  3. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Without seeying any relevant markup or css, it will be just a guess. If they are just simple links without anything else. Use on the container the property text-align: center.
    css:
    Code:
    .center-links{
         text-align:center;
    }
    html:
    Code:
    <div class="center-links">
                        <a href="">link1</a>
                        <a href="">link2</a>
                    </div>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    5
    Rep Power
    0
    Thanks for reply.

    Maybe i can put the link, otherwise is not so easy to explain it...

    lucadrupal.altervista.org/ProveDrupal/en/content/about-us

    Just resize thw browser windows till you see 2 links "contact" and "book"

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

    Join Date
    Oct 2012
    Posts
    5
    Rep Power
    0
    The link is safe, is just a demo site, it's about an hotel, but is not a real one, is just to test and then show to some clients
  8. #5
  9. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Hi before I give a sort of fix (well an idea), I need to mention something.
    You are using a whooping 31 stylesheets. Furthermore the style for each and every link is duplicated instead of combined. (see item#xxx). I am not sure who makes this stuff or what generates it, but this really is a coders nightmare. I will give an idea of what to do and how to center something.

    In general: give the menu a width and use margin: 0 auto. Again, I would really ditch it all and start over. You can't seriously sell spagetti if you are payed for code.

    In sheet (http://lucadrupal.altervista.org/ProveDrupal/sites/all/themes/hostel/css/responsive.smartphone.landscape.css?mbvjsk) line 103: change to:
    Code:
    #block-menu-menu-contattaci-prenota-mobi ul.menu.clearfix {
        margin: 0 auto;
        padding: 0;
        width: 148px;
    }
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    5
    Rep Power
    0
    Thanks for the reply.
    This is a drupal sub-theme.
    It's got different css based on desktop, tablet and smartphone.
    Do you think is not a good stuff?
  12. #7
  13. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Originally Posted by lucadeluchis
    Thanks for the reply.
    This is a drupal sub-theme.
    It's got different css based on desktop, tablet and smartphone.
    Do you think is not a good stuff?
    To be (brutally)honest anywebsite that uses 31 stylesheets can't be consired good or even close to average. The amount of extra time it takes to load your website with a fiber connection (so the clientside is not limited by speed) is almost 2 seconds extra, because of the extra header requests (the server needs to process).

    Besides that de css is redundant. For example. Your menu links get assigned the exact same properties they share but are declared apart from eachother.

    Simplification of what is happening:
    Code:
    #link1{
      display:block;
      color:red;
    }
    #link2{
      display:block;
      color:red;
    }
    instead of
    Code:
    #link1, #link2{
      display:block;
      color:red;
    }
    So in short, no its not good stuff. I have a feeling this code is generated automatically in the backend of some "user friendly" drupal component. All wysiwyg-editors are wrong and redundant, no exceptions.

    P.s. in the worst case you can have 3 different stylesheets, but even that is not always neccesarry (google mediaqueries) (apart from conditional comments for IE, but those only load unless it's ie)
    Last edited by aeternus; October 16th, 2012 at 10:47 AM.
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    5
    Rep Power
    0
    got it
    thank you very much for you support

IMN logo majestic logo threadwatch logo seochat tools logo