I am making a menu which has three parts to it: Menu links left Images Menu links right
I need the menu links on the left and right to expand the full width of the screen and the image to be in a div with a fixed width and centered.
So I have the following setup
<div class="menuLinks">Some links</div>
<div class="menuImage"&开发者_如何学编程gt;<img src="" alt="" /></div>
<div class="menuLinks">Some links</div>
And the css
.menuLinks{width:100%;float:left;}
.menuImage{width:400px;float:left;}
Any help with this is much appreciated. Thanks
This is a solution which is Fully CSS and HTML.
CSS
#wrapper{
width:100%;
text-align:center;
overflow: auto;
}
#block-images{
background-color: silver;
width: 400px;
margin:0 auto;
position:absolute;
left: 50%;
margin-left: -200px;
}
.wrapper-menu-left{
float:left;
width:50%;
}
.wrapper-menu-right{
float:right;
width:50%;
}
.menuBlock{
text-align: left;
}
#mLeft{
background-color: green;
margin-right:200px;
}
#mRight{
background-color: navy;
margin-left:200px;
}
HTML
<div id="wrapper">
<div class="wrapper-menu-left">
<div class="menuBlock" id="mLeft">left</div>
</div>
<div class="wrapper-menu-right">
<div class="menuBlock" id="mRight">right</div>
</div>
<div id="block-images">images</div>
</div>
Here is your html menu :
<div class="menuLinks" name="links">Some links</div>
<div class="menuImage"><img src="" alt="" /></div>
<div class="menuLinks" name="links">Some links</div>
<div class="menuImage"><img src="" alt="" /></div>
<div class="menuLinks" name="links">Some links</div>
Just use css to size menuImages :
<style>
.menuImage{width:400px;float:left;}
</style>
Use javascript on load to find screen resolution and find each link div size :
<script language="javascript">
function resizeMenu()
{
var linksList = document.getElementsByName('links');
for(var i = 0; i < linksList.length; i++)
{
linksList[i].style.width = (screen.availWidth
- 2 * (400) //size of total images)
/ linksList.length; // total number of linksCount
}
}
resizeMenu();
</script>
精彩评论