I am trying to modify this code and play around with it. I want to make the main div container wider.
div#container{width:450px !important; width /**/:460px;
margin: 0
This looks like a fix for something but I don't know what for. Do I need to proportinally increase the 2nd width or does it always need to be 10 px larger? Any ideas?
div#container{width:450px !important; width /**/:460px;
margin: 0
This looks like a fix for something but I don't know what for. Do I need to proportinally increase the 2nd width or does it always need to be 10 px larger? Any ideas?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<title>Nifty Corners: Javascript and CSS rounded corners</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
body{padding: 20px;background: #707883;color: #222;text-align: center;
font: 85% "Trebuchet MS",Arial,sans-serif}
h1,h2,p{margin: 0;padding: 0 10px;font-weight:normal}
p{padding: 0 10px 15px}
h1{font-size: 250%;color: #FFF;letter-spacing: 1px}
h2{font-size: 200%;line-height:1;color:#002455 }
[COLOR=red]div#container{width:450px !important; width /**/:460px;[/color red]
margin: 0 auto;padding:5px;text-align:left;background:#FFF}
div#header{background: #BFDDED;padding: 10px;text-align:center}
div#content{float:left;width:300px;padding:10px 0;margin:5px 0;background: #778CCA}
div#nav{float:right;width:145px;padding:10px 0;margin:5px 0;background: #FFD154}
div#nav h2{font-size: 120%;color: #9E4A24}
div#footer{clear:both;width:450px;background: #C4E786;padding:5px 0;text-align:center}
</style>
<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("div#container");
Nifty("div#content,div#nav","same-height small");
Nifty("div#header,div#footer","small");
}
</script>
</head>
<body>
<div id="container">
<div id="header"><h1>Nifty Corners</h1></div>
<div id="content">
<p>Auiiui uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>
<h2>Rounded corners without images</h2>
<p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
<p>Iiuiuaea ouea ieuuio o eoo iaoa euiaou uoia
uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
</div>
<div id="nav">
<h2>Simple. Just Javascript and CSS.</h2>
<p>Aoioeou eeeu ueeiuiii uoauiioi uae eoeoioe ouiui oieouoo uioo uaieeoe oe eouoiea a oou uiu.</p>
</div>
<div id="footer">footer here</div>
</div>
</body>
</html>