Jump to content

Making a border which auto adjusts?

Water

By Water
in CSS

Recommended Posts

Water Newbie

Water

Posted
Posted

I'm messing around and testing again here: http://cannygood.vacau.com/tester2.phpAs you can see there's a big red bar covering the menu and logo. This is....so-so looking, might be OK for other websites, but what I'm trying to get here is a closed in border around the logo and menu- something with a width no bigger than the main bulk of the website text.I can do this. I can make a box with a set width which surrounds the logo and icons.The trouble is...when I do that the menu loses its adjustability. The surrounding box is of a fit size and even when I shrink the page very small it stays the same size, it doesn't adjust the way it does currently.Is there anyway to reconcile the two options and have a small but adjustable box or is it a case of having to choose which I want?

Link to comment
Share on other sites
cousineaug Member

cousineaug

Posted
Posted
I'm messing around and testing again here: http://cannygood.vacau.com/tester2.phpAs you can see there's a big red bar covering the menu and logo.
ok so I did a few things you will not like but I am getting close to what you needI made your background blue so we can see the red on the links. change that after testingI removed 2-3 containers and some code that was not doing anythingI used style for the CENTER of the menuI removed the LIST - you did not have an open or close UL on itI changed the LI to SPANand...you probably don't need the SPANjust move the ID into the AThe spacing between elements is INSIDE the A or else the background colour comes through the spaceYou may need some non breaking spaces to fine tune adjustment.and probably a few more things I have forgottenCSS
body{//background-color:#009966;background-image: -webkit-gradient(    linear,    left top,    right top,    color-stop(0, rgb(0,153,102)),    color-stop(0, rgb(19,82,61)),    color-stop(0.96, rgb(0,153,102)));background-image: -moz-linear-gradient(    left center,    rgb(0,153,102) 0%,    rgb(19,82,61) 0%,    rgb(0,153,102) 96%);}#banner{margin:auto;width:70%;text-align: center;}#bordas{border: 1px solid green;background-color: #d43140;margin: 900px}#bordas2{/*margin:auto;*/background-color: blue;overflow:hidden;/*//margin: 900px;*/}#navvy{clear:both;  padding: 0px;text-align:center;/*overflow:hidden;*/margin:22px 0;}#navvy span {line-height: 200%; padding:0px;line-height: 50px;background-color:#d43140;color:white;font-weight:bold;}  #navvy span a{line-height: 200%; padding:12px;margin:0px;line-height: 50px;background-color:#d43140;color:white;font-weight:bold;}#navvy span a:hover {background:#ea98a0;color:black;}body#one #one1 a, body#two #two1 a, body#three #three1 a, body#four #four1 a, body#contact #contact1 a{background:#616E69;text-decoration: underline;color:#E8F0ED;}#content{margin:auto;width:70%;//background-color:#B2C9E6;background:clear;text-align: left;font-size:12pt;font-weight:bold;color:#F9E7E9;clear:both;}p.serif{font-family:Georgia,serif;border-style:solid;border-width:medium;}

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test Site</title> <link rel="stylesheet" type="text/css" href="cssstuff.css"> </head>  <body id="two">  <div id="bordas2"> 	<div id="banner"> 	<img alt="logo" src="logo.jpg"> 	</div>  <div id="navvy">             <span  id="one1"><a href="testside2.php"> PAGE 1 </a></span><span  id="two1"><a> PAGE 2 </a></span><span  id="three1"><a href="http://www.wikipedia.org"> WIKI </a></span><span  id="four1"><a href="http://www.wikipedia.org"> WIKI2 </a></span><span  id="five1"><a href="http://www.wikipedia.org"> WIKI3 </a></span><span  id="six1"><a href="http://www.wikipedia.org"> WIKI4 </a></span><span  id="contact1"><a href="mailto:meeeeee@gmail.com"> CONTACT </a></span> </div> </div>  <div id="content">   <p>Having a highlight to show which page is the active one is very important for usability purposes, particularly on more complicated sites with multiple layers.</p> </div>  </body> </html> <!-- www.000webhost.com Analytics Code --><script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script><noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript><!-- End Of Analytics Code -->

hope this helps Guy

Link to comment
Share on other sites
  • 3 weeks later...
Water Newbie

Water

Posted
  • Author
Posted

Hi, sorry, took me ages to reply but got waylaid with other things and wasn't messing around with websites.Thanks for the help but that doesn't seem to fix the problem, the bar keeps covering the entire top of the screen,

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

do you mean something like

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Test Site</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">div, ul, li {margin:0;padding:0;}body{/*background-color:#009966;*/background-image: -webkit-gradient(	linear,	left top,	right top,	color-stop(0, rgb(0,153,102)),	color-stop(0, rgb(19,82,61)),	color-stop(0.96, rgb(0,153,102)));background-image: -moz-linear-gradient(	left center,	rgb(0,153,102) 0%,	rgb(19,82,61) 0%,	rgb(0,153,102) 96%);}p{ margin: 0.9em 0;}#wrapper {overflow:hidden;}#banner{padding:8px;}#bordas{border: 1px solid green;background-color: #d43140;margin: 900px}/*#bordas2{margin:auto;background-color: #d43140;overflow:hidden;/*margin: 900px;}*/#menu{position:relative; float:left; left:50%;}#menu li {position:relative; right:50%;background-color: #d43140;}#navvy{height:50px;margin:22px 0;text-align:center;}#navvy ul{list-style-type:none;}  #navvy li{float:left;}#navvy li a{padding:12px;line-height: 50px;background-color:#d43140;color:white;font-weight:bold;margin:0 0 0 5px;}#navvy li#contact1 a { margin-right:5px;} #navvy li a:hover {background:#ea98a0;color:black;}body#one #one1 a, body#two #two1 a, body#three #three1 a, body#four #four1 a, body#contact #contact1 a{background:#616E69;text-decoration: underline;color:#E8F0ED;}#content{padding-top:1px;margin:0 auto;width:70%;text-align: left;font-size:12pt;font-weight:bold;color:#F9E7E9;}p.serif{font-family:Georgia,serif;border-style:solid;border-width:medium;}#header {overflow:hidden; width:70%; margin: 0 auto;background-color:#d43140;}</style></head><body id="two"><div id="wrapper">	<div id="header">	<div id="banner">	<img alt="logo" src="http://cannygood.vacau.com/logo.jpg" width="100%">	</div><div id="navvy"><ul id="menu"><li id="one1"><a href="testside2.php">PAGE 1</a></li><li id="two1"><a>PAGE 2</a></li><li id="three1"><a href="http://www.wikipedia.org">WIKI</a></li><li id="four1"><a href="http://www.wikipedia.org">WIKI2</a></li><li id="five1"><a href="http://www.wikipedia.org">WIKI3</a></li><li id="six1"><a href="http://www.wikipedia.org">WIKI4</a></li><li id="contact1"><a href="mailto:meeeeee@gmail.com">CONTACT</a></li></ul></div>	</div><div id="content">  <p>Having a highlight to show which page is the active one is very important for usability purposes, particularly on more complicated sites with multiple layers.</p></div></div></body></html>

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

or maybe

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Test Site</title><link rel="stylesheet" type="text/css" href="cssstuff.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">div, ul, li {margin:0;padding:0;}html{overflow-x:hidden;}/*required for IE7*/body{/*background-color:#009966;*/background-image: -webkit-gradient(	linear,	left top,	right top,	color-stop(0, rgb(0,153,102)),	color-stop(0, rgb(19,82,61)),	color-stop(0.96, rgb(0,153,102)));background-image: -moz-linear-gradient(	left center,	rgb(0,153,102) 0%,	rgb(19,82,61) 0%,	rgb(0,153,102) 96%);}#wrapper {overflow:hidden;}#banner{width:70%;}#bordas{border: 1px solid green;background-color: #d43140;margin: 900px}/*#bordas2{margin:auto;background-color: #d43140;overflow:hidden;/*margin: 900px;}*/#banner, #menu/*#navvy*/{position:relative; float:left; left:50%;}#menu li, #banner img {position:relative; right:50%;background-color: #d43140;}#banner img {padding:8px;}#navvy{height:50px;margin:22px 0;text-align:center;}#navvy ul{list-style-type:none;}  #navvy li{float:left;}#navvy li a{padding:12px;line-height: 50px;background-color:#d43140;color:white;font-weight:bold;margin:0 0 0 5px;}#navvy li#contact1 a { margin-right:5px;} #navvy li a:hover {background:#ea98a0;color:black;}body#one #one1 a, body#two #two1 a, body#three #three1 a, body#four #four1 a, body#contact #contact1 a{background:#616E69;text-decoration: underline;color:#E8F0ED;}#content{margin:auto;width:70%;text-align: left;font-size:12pt;font-weight:bold;color:#F9E7E9;}p.serif{font-family:Georgia,serif;border-style:solid;border-width:medium;}#header {overflow:hidden;}</style></head><body id="two"><div id="wrapper">	<div id="header">	<div id="banner">	<img alt="logo" src="http://cannygood.vacau.com/logo.jpg" width="100%">	</div></div><div id="navvy"><ul id="menu"><li id="one1"><a href="testside2.php">PAGE 1</a></li><li id="two1"><a>PAGE 2</a></li><li id="three1"><a href="http://www.wikipedia.org">WIKI</a></li><li id="four1"><a href="http://www.wikipedia.org">WIKI2</a></li><li id="five1"><a href="http://www.wikipedia.org">WIKI3</a></li><li id="six1"><a href="http://www.wikipedia.org">WIKI4</a></li><li id="contact1"><a href="mailto:meeeeee@gmail.com">CONTACT</a></li></ul></div>	<div id="content">  <p>Having a highlight to show which page is the active one is very important for usability purposes, particularly on more complicated sites with multiple layers.</p></div></div></body></html>

Link to comment
Share on other sites
Water Newbie

Water

Posted
  • Author
Posted

The first one seems to do it- albeit looking slightly weird (giant logo I think is all).I'll try and figure out what you've done there and incorporate it into my css files. Thanks.edit- ack, the giant logo seems integral to the way you did it and the logo shrinks too. hmm....

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

I thought you wanted it the same size as the width of content text, as in 70%, if you want it remain to a fixed size, no problem change#header {overflow:hidden; width:70%; margin: 0 auto;background-color:#d43140;}to#header {overflow:hidden; max-width:956px; margin: 0 auto;background-color:#d43140;} /*image with + 2 X 8px padding*/and remove width = "100%" from image<img alt="logo" src="http://cannygood.vacau.com/logo.jpg">Done!

Link to comment
Share on other sites
Water Newbie

Water

Posted
  • Author
Posted

hmm, the logo no longer shrinks, but that was just a cool extra I wasn't planning on including myself. Works just the way I wanted it now. Thanks a bunch.And just missing out the width thing sorts the image scaling. Doubly great. Ta.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...