0

I'm having troubles with the website I'm making. When zooming out, the navigation bar's contact us link is going to the bottom. Each link is set to specific width so I can make it full horizontal but it seems complicated to specify width.

The content which is 800px at size is divided into two div tags, left is 399px(floated left), right 400px(floated right) and the remaining 1px is for the white border located at the center. The problem for the content is just like the navigation bar. The right part is going at the bottom.

This is the site http://angelickp.byethost24.com/AliceAcademy.php.

3
Contributors
6
Replies
7
Views
6 Years
Discussion Span
Last Post by Arkinder
0

I found out what the problem is. When zooming out, the border at the center is resizing. The navigation bar contains lots of border so it messes up too when zooming out. How to prevent this? I really need the border.

1

zoom is not an appropriate or useful test
users set the basefont to their specifications/requirements and expect that websites are current enough in code compliance to adjust around them
current best practice it to use em or % as layout tools
cease using px, the problem will disappear

800px columnn looks ridiculous on this 2600px monitor
800px pushes offscreen in small displays/portable devices

Edited by almostbob: n/a

Votes + Comments
very helpful
0

zoom is not an appropriate or useful test
users set the basefont to their specifications/requirements and expect that websites are current enough in code compliance to adjust around them
current best practice it to use em or % as layout tools
cease using px, the problem will disappear

800px columnn looks ridiculous on this 2600px monitor
800px pushes offscreen in small displays/portable devices

Do you mean i'll use % for image, border size etc.?

1

He means use em or % for everything. Keep in mind that the actual value outputted by the em unit is based on font size.

An example for the % unit.

div#container {
    border-color: white white -moz-use-text-color;
    border-style: solid solid none;
    border-width: 10px 10px 0;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    width: 69%; /* Instead of the 800px you were using */
}

Regards
Arkinder

Votes + Comments
very helpful
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.