CODEWITHSUNDEEP
htmlcss
Batoku
Batoku

Reputation: 43

main page multilingual css alignment issues

We have some minor formating issues with the main page of our site Batoku when we switch to an alternative language (change to italian to test).

1) 'Swap' text is not centered between the arrows upon changing languages. (#wrap-main #main-home #items a#swap ) 

a#swap {
    color: #449AC2;
    font-size: 26px;
    font-weight: bold;
    left: 467px;
    max-width: 135px;
    position: absolute;
    top: 194px;
    word-wrap: break-word;
}

2)The footer is not centered and doesn't look good it is inconsistent in terms of items per line when a language changes and if you like this page at the bottom for the first time, there is no space to write a comment and like.

3)Potentially if there is a very large text for any of the languages the header will look completely all over the place.. to test under <li id="add-item"> modify the span to say <span>I will destroy your header!!! </span> (please use firebug)

Thanks

Upvotes: 4

Views: 238

Answers (1)

drip
drip

Reputation: 12943

1) About the swap, there is a fixed left position, that means that it will always stay there. It's better to be wrapped via some div with width: 100%; text-align: center; or something like that in other to center the text, and not the element itself.

2) About the footer. There is fixed width to the ul. You should remove it, add 'text-align:center' to it, remove the float from li elements and make them display: inline;

3) For the header you should blame the designer. :) They are not coders but at least they should ask their self "What if there are more links?" or "What will happens once the language is changed?", they should think a little outside of the frame. There is nothing here to prevent the site from braking. You can make it absolute, but once it's to large it will start to go over the text field. And that will not be ok too. You can use some kind of javascript to check if the elements it's breaking and apply some kind of class to the navigation in order to decrease the font-size or change the position of the elements.

Upvotes: 1

Related Questions