Fixed Menu at the Top of Webpage that Changes Size as Window Resizes

Question

Fixed Menu at the Top of Webpage that Changes Size as Window Resizes

1.2k views Asked by mrkwlkn81 At 12 September 2024 at 07:30

I need is a fixed menu at the top, a flash file underneath it, and then some text.

This is what I have so far: http://jsfiddle.net/ovr8spfu/

<style  type="text/css">
#menu {
    background-color:blue;
    height:70px;
    width:100%;
    top:0px;
    left:0px;
    position:fixed;
}
#container {
    background-color:green;
    height:70px;
    width:1310px;
    margin-left:auto;
    margin-right:auto;
    border-right-width:1px;
    border-right-color:black;
    border-right-style:solid;
}
#logo {
    height:70px;
    width:144px;
    float:left;
    background-color:aqua;
}
.menu_item {
    background-color:red;
    height:70px;
    font-family:Helvetica;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    border-left-width:1px;
    border-left-color:black;
    border-left-style:solid;
    float:right;
}
.menu_item.test1 {width:80px;}
.menu_item.test2 {width:188px;}
.menu_item.test3 {width:122px;}
.menu_item.test4 {width:136px;}
.menu_item.test5 {width:72px;}
.menu_item.test6 {width:116px;}
.menu_item:hover {background-color:pink;}
a:link {color:#FFFFFF;text-decoration:none;}
a:visited {color:#FFFFFF;text-decoration:none;}
a:active {color:#FFFFFF;text-decoration:none;}
#filler {
    height:62px;
    width:700px;
}
#flash {
    height:500px;
    width:1300px;
    margin-left:auto;
    margin-right:auto;
}
#section {
    width:900px;
    height:480px;
    margin-left:auto;
    margin-right:auto;
    font-family:Helvetica;
    font-size:18px;
}
</style>
</head>

<body>
<div id="menu">
    <div id="container">
    <div id="logo"></div>
    <a href="#"><div class="menu_item test1">ABC 123</div></a>
    <a href="#"><div class="menu_item test2">TESTING 8637376436</div></a>
    <a href="#"><div class="menu_item test3">Blah Blah Blah</div></a>
    <a href="#"><div class="menu_item test4">HEEEEEEELP</div></a>
    <a href="#"><div class="menu_item test5">XYZ123</div></a>
    <a href="#"><div class="menu_item test6">HOME</div></a>
</div>

I'm having several problems that I've searched for hours on end and just can't solve by myself.

The teal part is my logo that should always stay in the top left, the green part is "filler", and my menu items in red should stay fixed in the top right.

Because my menu/container is 1310px horizontally, if the window were to be minimized, my red menu items disappear offscreen. What can I do so that when the window is minimized, the red menu items are pushed to the left and the "green filler part" goes away instead?
My flash file, which will be placed underneath the menu, is also 1300px horizontally. How can I make it resize automatically so that it becomes smaller and smaller horizontally, if the browser window were to be resized?
How do I center the text inside the red menu items, both vertically and horizontally?
How do I center my #section text in the middle of the page?

Original Q&A

There are 3 answers

**Matt Hammond** · Answer 1 · 2015-06-15 17:14:36

Question 1&2

If you set the width to 100% of your container and your flash file and it will automatically scale it down for you when the page re-sizes.

width:100%;

Question 3 & 4

Here is a JSfiddle showing how to center things horizontally and vertically based on the parent divs size, you can add this class to anything and it will center based on the parent divs size -http://jsfiddle.net/ovr8spfu/2/

.center {
    text-align:center;
    position:relative;
    top:50%;
}

**Wakeuphate** · Answer 2 · 2015-06-15 17:15:45

I'll try and answer some of these the best I can, but a lot of it will be that you need to learn how to use percentages and possibly read up a bit more about how media queries work. http://learnlayout.com/media-queries.html for example.

Here your container needs set to width:100%; to begin with. This means it'll always lock to the size of the browser width. The issue you'll have is when the screen gets smaller, your other items will be pushed under each other.
I'm not extremely familiar with how flash works in browsers because I've thankfully forgotten a lot of it, but again, if you set it to a 100% width of the container it's in, it should always fill out to that size. You can do this by modifying your current flash code to the following:

<div id="flash"><embed src="my_flash.swf" height="100%" width="100%" menu="false"></div>

This will force it to the maximum height and width of the container it's in.
There are a few tricks to this, since you've a fixed height, you can set the line-height in the box to be the same as the height of the box and it will center it vertically (line-height: 70px;) on .menu-item your text-align: center; deals with the horizontal side of things on this question.
Here you can use a trick which you've kind of done in your fiddle already: margin: 0 auto; in #section instead of the margin-left: auto; and margin-right: auto;. Using margin: 0 auto; just means you have less code to write.

Hope this helps.

**Raúl Ruíz R** · Answer 3 · 2015-06-15 17:33:35

Check this Fiddle https://jsfiddle.net/ovr8spfu/3/

#menu {
background-color:blue;
height:70px;
width:100%;
top:0px;
left:0px;
position:fixed;
overflow: hidden;
}
#container {
    background-color:green;
    height:70px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    border-right-width:1px;
    border-right-color:black;
    border-right-style:solid;
}
#logo {
    height:70px;
    width:144px;
    float:left;
    background-color:aqua;
}
.menu_item {
    padding: 25px 5px;
    background-color:red;
    height:70px;
    font-family:Helvetica;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    border-left-width:1px;
    border-left-color:black;
    border-left-style:solid;
    float:right;
}
.menu_item:hover {
    background-color:pink;
}
a:link {
    color:#FFFFFF;
    text-decoration:none;
}
a:visited {
    color:#FFFFFF;
    text-decoration:none;
}
a:active {
    color:#FFFFFF;
    text-decoration:none;
}
#filler {
    height:62px;
    width:100%;
}
#flash {
    height:500px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    background-color: #000;
}
#section {
    width:100%;
    height:480px;
    margin-left:auto;
    margin-right:auto;
    font-family:Helvetica;
    font-size:18px;
    text-align:center;
}

Try to avoid fixed widths if you want to design responsive websites.

I changed your #container and #flash width to 100%
I removed your clases of test-1, test-2, etc... the divs resize automatically on your content so there is no need for fixed widths.
To center the text of the menu links (and the text of your section) horizontally, I used text-align:center . To align vertically I just added the following padding:
```
.menu_item {
padding: 25px 5px;}
```

I hope this helps!

Regards

TechQA.

Fixed Menu at the Top of Webpage that Changes Size as Window Resizes

There are 3 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in FLASH

Related Questions in MENU

Related Questions in CSS-POSITION

Popular Questions

Popular Tags

Trending Questions