Center links in a fluid theme.

Dev Shed Forums Sponsor:

October 16th, 2012, 06:25 AM

lucadeluchis

Registered User

Join Date: Oct 2012

Posts: 5

Time spent in forums: 50 m 23 sec
Reputation 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?

October 16th, 2012, 08:21 AM

aeternus

For POny!

Join Date: Apr 2012

Location: Amsterdam

Posts: 416

Time spent in forums: 5 Days 4 h 56 m 43 sec
Reputation Power: 114

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>

__________________
PHP Tutorial

October 16th, 2012, 08:25 AM

lucadeluchis

Registered User

Join Date: Oct 2012

Posts: 5

Time spent in forums: 50 m 23 sec
Reputation 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!

October 16th, 2012, 08:48 AM

lucadeluchis

Registered User

Join Date: Oct 2012

Posts: 5

Time spent in forums: 50 m 23 sec
Reputation 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

October 16th, 2012, 10:23 AM

aeternus

For POny!

Join Date: Apr 2012

Location: Amsterdam

Posts: 416

Time spent in forums: 5 Days 4 h 56 m 43 sec
Reputation Power: 114

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;
}

October 16th, 2012, 10:29 AM

lucadeluchis

Registered User

Join Date: Oct 2012

Posts: 5

Time spent in forums: 50 m 23 sec
Reputation 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?

October 16th, 2012, 10:41 AM

aeternus

For POny!

Join Date: Apr 2012

Location: Amsterdam

Posts: 416

Time spent in forums: 5 Days 4 h 56 m 43 sec
Reputation Power: 114

Quote:

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.

October 16th, 2012, 10:45 AM

lucadeluchis

Registered User

Join Date: Oct 2012

Posts: 5

Time spent in forums: 50 m 23 sec
Reputation Power: 0

got it
thank you very much for you support

Center links in a fluid theme.

Developer Shed Advertisers and Affiliates