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?
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.
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/