Jump to content

Fluid Width And Rounded Corners


hybrid kill3r
 Share

Recommended Posts

Three hours passed but my template is finally finished... well, besides the coding. My template consists of a horizontal header, followed by a horizontal menu directly below that. The riddle that has me stumped is the menu which consists of rounded top corners. Achieving a fluid width for this menu is the punch line of this riddle, but I think I have a basic understanding of how it should be done, but not how to do it(if that makes sense). I am imagining a base layer division consisting of the repeated background image of the menu. Maybe next, I will classify the first link and give it a background consisting of the left end. This is where I'm stuck. How would I display the right end of the menu? This is what I want the header to look like. You can disregard the logo/banner.gammamenu.gif

Edited by Hybrid Kill3r
Link to comment
Share on other sites

Three nested <div> elements at the top for the top edge and corners, three nested <div> elements in the middle for the side edges and main content box, three nested <div> elements at the bottom for the bottom edge and corners.The divs have background images. Four of them are corners, the other four are edges, one of them will have the backgroud image for the content area of the box.

Link to comment
Share on other sites

link not working?do you mean fluid width menu container, stretching across width of page, having rounded top corners either end, with menu button links, within it.ORfluid width menu buttons, with rounded top corners (like a tab button).?and will the menus have sub menu's?

Edited by dsonesuk
Link to comment
Share on other sites

Three nested <div> elements at the top for the top edge and corners, three nested <div> elements in the middle for the side edges and main content box, three nested <div> elements at the bottom for the bottom edge and corners.The divs have background images. Four of them are corners, the other four are edges, one of them will have the backgroud image for the content area of the box.
Ah but what would the CSS look like...HTML
<div class="box">	<div class="topLeft">TopLeft corner Image</div>	<div class="topRight">TopRight corner Image</div>	<divClass="topEdge"></div>	<div class="centerLeft">LeftEdgeImage</div>	<div class="centerRight">RightEdge Image</div>	<divClass="content">Background</div>	<div class="bottomLeft">bottomLeftImage</div>	<div class="bottomRight">BottomRightImage</div>	<divClass="bottomEdge">bottomImage</div></div>

CSS

.box { 	position: relative; /* positions the box relative to the html */	margin: 0 auto; /* centers the box at the top of the page */}.topLeft {	background-image: url(linkToImage);	background-position: top left;	background-repeat: no-repeat;}.topRight {	background-image: url(linkToImage);	background-position: top right;	background-repeat: no-repeat;}.topEdge {	background-image: url(linkToImage);	background-position: center top;	background-repeat: repeat-x;}.centerLeft {	background-image: url(linkToImage);	background-position: center left;	background-repeat: repeat-y;}.centerRight {	background-image: url(linkToImage);	background-position: center right;	background-repeat: repeat-y;}.content {	background-image: url(linkToImage);	background-position: center center;	background-repeat: no-repeat; /*this may repeat both ways...I'm not sure*/}.bottomLeft {	background-image: url(linkToImage);	background-position: bottom left;	background-repeat: no-repeat;}.bottomRight {	background-image: url(linkToImage);	background-position: bottom right;	background-repeat: no-repeat;}.bottomEdge {	background-image: url(linkToImage);	background-position: center bottom;	background-repeat: repeat-x;}

This appears to be what Ingolme was describing

Edited by ravenshade
Link to comment
Share on other sites

Ah but what would the CSS look like...HTML
<div class="box">	<div class="topLeft">TopLeft corner Image</div>	<div class="topRight">TopRight corner Image</div>	<divClass="topEdge"></div>	<div class="centerLeft">LeftEdgeImage</div>	<div class="centerRight">RightEdge Image</div>	<divClass="content">Background</div>	<div class="bottomLeft">bottomLeftImage</div>	<div class="bottomRight">BottomRightImage</div>	<divClass="bottomEdge">bottomImage</div></div>

CSS

.box { 	position: relative; /* positions the box relative to the html */	margin: 0 auto; /* centers the box at the top of the page */}.topLeft {	background-image: url(linkToImage);	background-position: top left;	background-repeat: no-repeat;}.topRight {	background-image: url(linkToImage);	background-position: top right;	background-repeat: no-repeat;}.topEdge {	background-image: url(linkToImage);	background-position: center top;	background-repeat: repeat-x;}.centerLeft {	background-image: url(linkToImage);	background-position: center left;	background-repeat: repeat-y;}.centerRight {	background-image: url(linkToImage);	background-position: center right;	background-repeat: repeat-y;}.content {	background-image: url(linkToImage);	background-position: center center;	background-repeat: no-repeat; /*this may repeat both ways...I'm not sure*/}.bottomLeft {	background-image: url(linkToImage);	background-position: bottom left;	background-repeat: no-repeat;}.bottomRight {	background-image: url(linkToImage);	background-position: bottom right;	background-repeat: no-repeat;}.bottomEdge {	background-image: url(linkToImage);	background-position: center bottom;	background-repeat: repeat-x;}

This appears to be what Ingolme was describing

Nested is a key word here.
<div class="box">  <div class="topLeft">	<div class="topRight">	  <div class="topEdge"> </div>	</div>  </div>  <div class="centerLeft">	<div class="centerRight">	  <divClass="content">		Content	  </div>	</div>  </div>  <div class="bottomLeft">	<div class="bottomRight">	  <div class="bottomEdge"> </div>	</div>  </div></div>

You'll need to assign heights and margins to the CSS as well.

Edited by Ingolme
Link to comment
Share on other sites

That's all perfectly well, but this post is about a fluid menu, well from what i have read! it is.

The riddle that has me stumped is the menu which consists of rounded top corners. Achieving a fluid width for this menu is the punch line of this riddle, but I think I have a basic understanding of how it should be done, but not how to do it(if that makes sense)
for a fluid top corner menu buttons, (sorry about height, images used in another posting).tabbuttonR.pngtabbuttonR_H.png<style type="text/css">ul, li a, li a span{height: 24px; margin:0; padding:0; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color:#555;}li{list-style:none;float:left; margin-right:4px;} /*margin used to separate buttons*/li a, li a span{display:block; text-decoration:none; line-height: 24px; cursor:pointer;}li a{padding-left: 10px; background: url(tabbuttonR.png) no-repeat top left;}li a span{padding-right: 10px; background: url(tabbuttonR.png) no-repeat right top; background-color:#FFF;} /*use matching background colour to match body if using images with transparent corners*/li a:hover{background: url(tabbuttonR_H.png) left top;}li a:hover span{background: url(tabbuttonR_H.png) right top; color:#00F;}</style><div style="display:inline-block; width: 100%;"><ul><li><a href="#"><span>Home</span></a></li><li><a href="#"><span>Profile Profile Profile</span></a></li><li><a href="#"><span>Other Other Other Other Other</span></a></li></ul></div> Edited by dsonesuk
Link to comment
Share on other sites

for fluid menu bartabbuttonR_middle.pngtabbuttonR_middle_H.png<style type="text/css">*{margin:0; padding:0;}body{margin:10px;}.box{ width: 100%; overflow:hidden;}.topEdge, .topLeft,.topRight{ height:25px;}.topRight{padding-right: 10px;}.topLeft{padding-left: 10px;}.topEdge{width: 100%; background-color:#FFF;}.topLeft{ background:url(tabbuttonR.png) no-repeat left top;}.topRight{ background:url(tabbuttonR.png) no-repeat right top;}.topEdge{ background:url(tabbuttonR_middle.png) repeat-x;}ul {list-style:none;}li {float:left;}li a {display:block; height:25px; line-height: 25px; padding: 0 12px; text-decoration:none; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color:#000;}li a:hover {color:#fff; background:url(tabbuttonR_middle_H.png);}</style><div class="box"><div class="topLeft"><div class="topRight"><div class="topEdge"><ul><li><a href="#">Home</a></li><li><a href="#">Profile</a></li><li><a href="#">Other</a></li></ul></div></div></div></div>

Edited by dsonesuk
Link to comment
Share on other sites

for fluid menu bartabbuttonR_middle.pngtabbuttonR_middle_H.png<style type="text/css">*{margin:0; padding:0;}body{margin:10px;}.box{ width: 100%; overflow:hidden;}.topEdge, .topLeft,.topRight{ height:25px;}.topRight{padding-right: 10px;}.topLeft{padding-left: 10px;}.topEdge{width: 100%; background-color:#FFF;}.topLeft{ background:url(tabbuttonR.png) no-repeat left top;}.topRight{ background:url(tabbuttonR.png) no-repeat right top;}.topEdge{ background:url(tabbuttonR_middle.png) repeat-x;}ul {list-style:none;}li {float:left;}li a {display:block; height:25px; line-height: 25px; padding: 0 12px; text-decoration:none; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color:#000;}li a:hover {color:#fff; background:url(tabbuttonR_middle_H.png);}</style><div class="box"><div class="topLeft"><div class="topRight"><div class="topEdge"><ul><li><a href="#">Home</a></li><li><a href="#">Profile</a></li><li><a href="#">Other</a></li></ul></div></div></div></div>
As an alternative you could make one long image with the link names on itAnd use image mappingIf your not sure how to make a image map there a sites with online mapping toolsThis could make loading times faster on your template
Link to comment
Share on other sites

which will mean, creating new images for every link, creating more individual images for each link when hovered over, adding coordinate mapping for each link, insuring javascript is enabled for mouseover, mouseout for image swapping. and this is quicker? don't think so.

Edited by dsonesuk
Link to comment
Share on other sites

which will mean, creating new images for every link, creating more individual images for each link when hovered over, adding coordinate mapping for each link, insuring javascript is enabled for mouseover, mouseout for image swapping. and this is quicker? don't think so.
um noI meant something like thisHeres a code I swiped off one of my sites
<img src="http://orbitupload.com/get/bar232.png" class="c1" usemap="#nav" border="0" alt="**Site Nav**" /> <map id="nav" name="nav"><area shape="rect" alt="index" title="Home" coords="10,1,65,18" href="index.html" target="" /><area shape="rect" alt="apps" title="Apps" coords="70,2,116,18" href="apps.html" target="" /><area shape="rect" alt="Games" title="Games" coords="121,2,183,18" href="games.html" target="" /><area shape="rect" alt="search" title="Search" coords="187,2,248,18" href="../web/search.html" target="" /><area shape="rect" alt="media" title="Media" coords="253,2,307,18" href="media.html" target="" /><area shape="rect" alt="chat" title="Chat" coords="312,2,356,18" href="chat.html" target="" /><area shape="rect" alt="links" title="Links" coords="360,1,407,18" href="links.html" target="" /><area shape="rect" alt="info" title="About" coords="412,1,469,18" href="about.html" target="" /></map>

This map is for one imagebar232.png

Edited by jmc92
Link to comment
Share on other sites

Fluid Width And Rounded Corners
so much coding to produce a simple menu, no hoverover option, will became more complicated if submenu are required! and last but not least NOT FLUIDall i have to do is add <li><a href="newlink">new menu link</a></li> and instant new menu, auto width adjust, with hover effect. new submenu <li><a href="newlink">Profile</a><ul><li><a href="newlink">new menu link</a></li></ul></li>and new submenu added (admittedly i will have add extra css coding to allow for this, but will be a quick fix) i know which one i would prefer, and hover effect will be instant. Edited by dsonesuk
Link to comment
Share on other sites

Nested is a key word here.
<div class="box">  <div class="topLeft">	<div class="topRight">	  <div class="topEdge"> </div>	</div>  </div>  <div class="centerLeft">	<div class="centerRight">	  <divClass="content">		Content	  </div>	</div>  </div>  <div class="bottomLeft">	<div class="bottomRight">	  <div class="bottomEdge"> </div>	</div>  </div></div>

You'll need to assign heights and margins to the CSS as well.

Ah, well when I say 3 nested tags, I generally mean those three inside the first, not nest nest nest if you catch my drift. Sorry for the misunderstanding. Are you using dreamweaver to produce the code?Anyway...testing that :)
Link to comment
Share on other sites

Let me see. The idea I had with my code was to produce a single flexible box with round corners. The box can be placed anywhere. Once you have the box, you can put the menu code inside it and style it as necessary.I don't use dreamweaver for my code, I just have Notepad++.

Link to comment
Share on other sites

No! what you produced was a layout for the main body, not the menu, you would only need one row for the menu bar, using your method not three.
I believe that you just misunderstood. All I gave was a typical "grid-9" box: It is a square with four corner images, four edge images and a center area to place some content. It was not a layout for a full page.Here is the working example
Link to comment
Share on other sites

why in ###### would he require the middle row as well?
It depends on whether the sides are decorated or not. If they don't then they're not necessary. I left the sides because the top corner images I was using would look odd if they abruptly ended at a solid red block. Edited by Ingolme
Link to comment
Share on other sites

(banging head against beam)......obviously the corner images would no longer be just corner images but include the body of the button, that would be more than high enough, to cover this. its for a menu! not to cover the height of page, which you intended with your solution.
My, calm down there. I have no intentions of offending anybody.He has not specified whether each individual menu item has round corners or just the menu itself. But from the description it sounds as if he wants a single horizontal menu with round corners on the top.That would look something like this:i28845.gifhttp://dtfox-tests.totalh.com/roundcorners3.php
Link to comment
Share on other sites

Which!, I did state this at the beginning. The problem with the solution you have provided now, is you have a huge space at the top, which is the top row that is empty. granted you could use position/margins to reposition the text links, but why not just use, one row instead.PS: using top and bottom padding for anchor link, in my opinion is a bad method for positioning a link, line-height is a much more better option.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...