Fluid Width And Rounded Corners

[hybrid kill3r]

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.

[Ingolme]

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.

[dsonesuk]

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?

[ravenshade]

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

[Ingolme]

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.

[dsonesuk]

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).<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>

[Ingolme]

The code I provided works just well for a fluid width menu.<div> elements are flexible to begin with.

[dsonesuk]

I know That!, jesus, Im just pointing out he want a fluid menu not a fluid layout for the whole page.when you take a car to have engine fixed, you will be pretty annoyed if you find he just fixed the indicator light.

[dsonesuk]

for fluid menu bar<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>

[jmc92]

for fluid menu bar<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

[dsonesuk]

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.

[jmc92]

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 image

[dsonesuk]

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.

[ravenshade]

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

[thescientist]

Ingolme doesn't need Dreawever, haha. Naw, he's that good.

[Ingolme]

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++.

[dsonesuk]

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.

[Ingolme]

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

[dsonesuk]

no! you don't understand

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).

[Ingolme]

Well, if it only needs top corners, then the solution is to remove the bottom corners from the code.http://dtfox-tests.totalh.com/roundcorners3.php

[dsonesuk]

why in ###### would he require the middle row as well?

[Ingolme]

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.

[dsonesuk]

(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.

[Ingolme]

(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:http://dtfox-tests.totalh.com/roundcorners3.php

[dsonesuk]

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.