Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 11-09-2012, 03:58 AM   PM User | #1
Jake_A_T
New Coder

 
Join Date: Oct 2012
Posts: 27
Thanks: 16
Thanked 0 Times in 0 Posts
Jake_A_T is an unknown quantity at this point
Why is my banner and navigation bar centred on a 24" Mac but not on a 27"?

Hi there,

I designed my website using HTML/CSS, and I have a top banner right below my fixed header, and below the banner is my menu/navigation. When i view the site on my laptop and 24" mac, both are centred; however, when I view my site on a 27" Mac, the banner is off to the left and the menu/navigation bar is a bit over to the right. Is there any way I can have both stay in the same spot no matter what size monitor I view the site on? I'll post the CSS/HTML for both below ("title" is the banner).

Code:
#title
{
height: 100px;
position: relative;
text-align:left;
z-index: -1;
margin-left: auto;
}

#menu
{
padding-top: 18px;
border-bottom: double 2px white;
border-top: double 2px white;
width: 75%;
height: 50px;
margin-top: 160px;
margin-left: 868px;
margin-right: 203px;
float: right;
text-align:center;
letter-spacing:4px;
word-spacing:4px;
font-family: "Arial";
font-size: 150%;
color: #ffffff;
}

<img src="images/banner.png" alt="Books and Technology" style="margin-left: 380px"/>

<div id="menu">
<font size="5"><b><a href="html.html">HOME</a> | <a href="page1.html">PAGE 1</a> | <a href="page2.html">PAGE 2</a> | <a href="page3.html">PAGE 3</a> | <a href="page4.html">PAGE 4</a> | <a href="page5.html">PAGE 5</a> | <a href="page6.html">PAGE 6</a></b></font>

</div>
Jake_A_T is offline   Reply With Quote
Old 11-09-2012, 09:39 AM   PM User | #2
VIPStephan
The fat guy next door


 
VIPStephan's Avatar
 
Join Date: Jan 2006
Location: Halle (Saale), Germany
Posts: 7,613
Thanks: 5
Thanked 865 Times in 842 Posts
VIPStephan is a jewel in the roughVIPStephan is a jewel in the roughVIPStephan is a jewel in the rough
Do you want it to stay in the same spot or do you want it to stay centered?
For centering inline elements like images you need to apply text-align: center to the parent. Centering block-level elements like divs is easy if you assign a specific width to them and set left and right margin to “auto”.

And by the way:
Quote:
<font size="5"><b>…
Please don’t do that. For what do we have CSS?
__________________
Don’t click this link!
VIPStephan is offline   Reply With Quote
Old 11-09-2012, 10:03 AM   PM User | #3
Custard7A
Regular Coder

 
Custard7A's Avatar
 
Join Date: Jul 2010
Location: Australia
Posts: 269
Thanks: 32
Thanked 32 Times in 32 Posts
Custard7A is an unknown quantity at this point
A good tip when styling your site: Resize your browser window often to see what happens! The effect you are experiencing is caused by the amount of horizontal pixels being increased as the resolution gets better, you can get the same effects by making your browser window narrower.
Custard7A is offline   Reply With Quote
Users who have thanked Custard7A for this post:
Jake_A_T (12-08-2012)
Reply

Bookmarks

Tags
banner, center, div, monitor, navigation

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 10:25 AM.


Advertisement
Log in to turn off these ads.