PDA

View Full Version : Round boxes.



afe
Nov 25th, 2007, 03:50 AM
Hello, can anyone tell me how I can get round boxes like on this website. http://runnerspace.com/index.php






Thanks!:)

GO ILLINI
Nov 25th, 2007, 05:05 AM
http://www.freewebmasterhelp.com/tutorials/corners/1
the same theory can be applied to divs if you are using them.

-Adam

effpeetee
Nov 25th, 2007, 05:32 PM
http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml try this address.

Also many more resources in my signature URL "Sources."

Frank.

Edited because of wrong info - now removed.:o

afe
Nov 25th, 2007, 06:07 PM
Thanks for the sites, they helped a lot. Also effpeetee, may I have the full CSS and HTML code for the http://exitfegs.co.uk/TestDesign.html site?






Thanks!

effpeetee
Nov 25th, 2007, 06:18 PM
Here it is:thumbsup:
The graphics can be downloaded by right clicking them and saving picture.

Frank

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Test Design</title>
<style type="text/css" media="screen">
* { margin: 0; padding: 0}
body {
color: #666;
background: #d4d495 url(img/bg_header.png) left top repeat-x;
font: 87.5% "Lucida Grande", Arial, sans-serif;
}
html > body {
font: 14px;
}
p {
line-height: 1.5em;
margin-bottom: 1.5em;
}
h2 {
font-size: 2em;
line-height: 1.5em;
}
h3 {
font-size: 1.571428em;
line-height: 1.909em;
}
h2, h3 { font-family: Georgia, serif; font-weight: normal}
#side h2 {
font-size: 1.2875em;
line-height: 2.333em;
}
#side p {
font-size: 0.875em;
line-height: 1.75em;
}
#branding {
position: relative;
width: 960px;
height: 200px;
margin: 0 auto;
}
#branding h1 {
position: absolute;
width: 381px;
height: 199px;
left: 0;
top: 0;
background: url(img/img_logo.png) left top no-repeat;
text-indent: -9999px;
}
#branding ul {
position: absolute;
right: 0;
bottom: 1px;
width: 452px;
height: 50px;
background: url(img/bg_nav.png) 2px top no-repeat;
}
* html #branding ul {
width: 454px;
background-position: 4px top;
}
#branding li {
list-style: none;
float: left;
margin-left: 2px;
}
#branding li a {
height: 50px;
display: block;
width: 111px;
text-indent: -9999px;
}
#branding li#nav-home a{ background: url(img/bg_nav.png) left top no-repeat; }
#branding li#nav-about a { background: url(img/bg_nav.png) -113px top no-repeat; }
#branding li#nav-archives a { background: url(img/bg_nav.png) -226px top no-repeat; }
#branding li#nav-contact a { background: url(img/bg_nav.png) -339px top no-repeat; }
#branding li#nav-home a:hover,
#home #branding li#nav-home a { background: url(img/bg_nav.png) left bottom no-repeat; }
#branding li#nav-about a:hover,
#about #branding li#nav-about a { background: url(img/bg_nav.png) -113px bottom no-repeat; }
#branding li#nav-archives a:hover,
#archives #branding li#nav-archives a { background: url(img/bg_nav.png) -226px bottom no-repeat; }
#branding li#nav-contact a:hover,
#contact #branding li#nav-contact a { background: url(img/bg_nav.png) -339px bottom no-repeat; }
#content {
width: 960px;
background: #fff url(img/bg_content.png) left top repeat-y;
margin: 0 auto;
margin-bottom: 20px;
}
#shadow {
position: absolute;
top: 200px;
left: 0;
width: 100%;
height: 9px;
background: url(img/bg_shadow.png) left top repeat-x !important;
background: none;
}
#main {
float: left;
width: 600px;
border-top: 10px solid #fff;
border-bottom: 10px solid #fff;
padding: 5px 20px 10px 20px;
}
#side {
float: right;
width: 280px;
padding: 20px 20px 10px 0;
}
#footer {
clear: both;
width: 960px;
height: 50px;
background: url(img/bg_footer.png) left top repeat-x;
color: #fff;
text-align: center;
line-height: 40px;
}
.amp {
font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
font-weight: normal;
font-style: italic;
}
</style>
</head>
<body id="home">
<div id="branding">
<h1>Cassie's Place</h1>
<ul>
<li id="nav-home"><a href="#" >Home</a></li>
<li id="nav-about"><a href="#">About</a></li>
<li id="nav-archives"><a href="#">Archives</a></li>
<li id="nav-contact"><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
<div id="main">
<h2>Tricks <span class="amp">&amp;</span> Treats</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>Or are they?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="side">
<h2>About Me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="footer">
Footer
</div>
</div>
<div id="shadow"><!-- --></div>
</body>
</html>

afe
Nov 25th, 2007, 06:30 PM
Thank you!:)

effpeetee
Nov 25th, 2007, 06:30 PM
Should be-

The graphics can be downloaded by right clicking them and saving background.

Frank

Excavator
Nov 25th, 2007, 07:38 PM
Thanks for the sites, they helped a lot. Also effpeetee, may I have the full CSS and HTML code for the http://exitfegs.co.uk/TestDesign.html site?






Thanks!

You could just hit View Source and copy/paste that. If the CSS is linked you can just put the path in your browser and it comes up as file you can save.

You can also save an entire website with File/Save As from the browser.

afe
Nov 25th, 2007, 07:54 PM
ohh cool.

effpeetee
Nov 25th, 2007, 09:28 PM
http://www.imanthony.com/tutorials/introtocss/lesson1.php

This may interest you.

Frank

afe
Nov 26th, 2007, 07:27 PM
Hey, what I actually want is how to put text and things in boxes other than HTML tables<I hate them!lol

effpeetee
Nov 26th, 2007, 11:10 PM
This program should show you all you need.

www.exitfegs.co.uk/Sources2.html

Frank



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Useful URLs</title>
<style type="text/css">/*This page has been coded and corrected by AeroSpace_Eng of the CodingForums.
My very grateful thanks to him for his help and patience.*/

/**********************************//* ROUNDED CORNERS *//**********************************/
* {
margin: 0;
padding: 0;
}


body {
background-color:#0000ff;
background-repeat: no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: white;
font-weight: normal;
margin: 20px 0;
}
a:link {
color: #FFF;
background-color: inherit;
}

a:visited {
color: #FFFF00;
background-color: inherit;
}

a:hover {
color: #FF0000;

background-color: inherit;
}

a:active {
color: #FFFFFF;
background-color: inherit;
}

.wrapper {
text-align: left;
background-color: black;
color: white;
margin-top: 0px;
}

#main {
float: right;
width: 100%;
}

#main p {
clear: both;
width: auto;
text-align: center;
color: #00F;
}

a img {
border: 0;
}

#main a img {
border: 2px solid white;
}

#main a:hover img {
border-color: orange;
}

#wrap {
position: relative;
width: 950px;
margin: auto;
}

#header h1 {
color: #ffffff;
text-align: center;
padding: 10px;
clear: both;
}

#content {
width: 35%;
float: left;
padding-left: 2px;
margin-bottom: 4px;
text-align: left;
}

#content2 {
width: 35%;
float: right;
padding-left: 2px;
margin-bottom: 4px;
text-align: left;
}

#links ul a:hover {font-size : 200%;}

#links2 ul a:hover {font-size : 200%;}

#links {
clear: left;
font: 8.5px "arial", non-serif;
font-weight: bold;
margin-top: 10px;
}

#links ul {
padding-left: 16px;
margin-left: 16px;
color: white;
width: 270px;
}

#links ul a {
color:white;
font-size: 1.2em;
font-weight:normal;
text-decoration: none;
}

#links ul a:hover {
text-decoration: underline;
}

#links2 {
clear: left;
font: 8.5px "arial", non-serif;
font-weight: bold;
margin-top: 10px;
}

#links2 ul {
padding-left: 16px;
margin-left: 16px;
color: "white";
font-weight:normal;
width: 270px;
}

#links2 ul a {
color: white;
font-size: 1.2em;
font-weight: normal;
text-decoration: none;
}

#links2 ul a:hover {
text-decoration: underline;
}

#valids {
margin: auto;
width: 180px;
}
#footer h4 {
clear: both;
height: 25px;
text-align: center;
padding: 10px;
color: #ff8800;
}

div.nifty {
background: #000000;/* Color Nifty */
}

div.nifty p {
padding: 12px 10px;
}

b.rtop, b.rbottom {
display: block;
background: #0000ff;/* This has to match your main background colour */
}

b.ltop, b.lbottom {
display: block;
background: #0000ff;/* This has to match your main background colour */
}

b.rtop b, b.rbottom b {
display: block;
height: 1px;
overflow: hidden;
background: #000000;/* Color Nifty */
}

b.r1 {
margin: 0 5px;
}

b.r2 {
margin: 0 3px;
}

b.r3 {
margin: 0 2px;
}

b.rtop b.r4, b.rbottom b.r4 {
margin: 0 1px;
height: 2px;
}

li.nobullet {
list-style: none;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

</style>
</head>
<body>
<div id="body" class="clearfix"> <div id="header">
<h1>Useful URLs.</h1>
</div>
<div id="content">
<div id="links">
<div class="nifty"> <b class="rtop"> <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b> </b>
<ul>
<li><a href="http://www.alvit.de/handbook/">Web Developer's Handbook.</a></li>
<li><a href="http://www.websitebytes.com/articles/index.php"> Webpage Creation HTML Tutorials.</a></li>
<li class="nobullet">
<ul>
<li><a href="http://brainstormsandraves.com/articles/semantics/structure">Semantics, and Structure</a></li>
<li><a href="http://creativecoding.webforumz.com/articles/semantics.php">Semantic web design.</a></li>
<li><a href="http://www.positioniseverything.net/">Position is everything.</a></li>
<li><a href="http://www.brainjar.com/css/positioning/">CSS positioning again.</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="http://www.digital-web.com/articles/web_design_101_floats/">Digital Web on "FLOATS.</a></li>
<li><a href="http://blog.html.it/layoutgala/">CSS Layout Gala.</a></li>

<li><a href="http://www.digital-web.com/articles/web_design_101_floats/">Don't sink! Understand "FLOATS".</a></li>
<li><a href="http://www.positioniseverything.net/easyclearing.html">Clearing "FLOATS" The Old Fashioned Way.</a></li>
<li><a href="http://www.webreference.com/html/tutorial20/1.html#HEAD-1">Tutorial 20: CSS "FLOATS", Part I.</a></li>
<li class="nobullet">
<ul>
<li><a href="http://www.cssdrive.com/">Categorised CSS Gallery and Examples.</a></li>
<li><a href="http://www.snook.ca/jonathan/">Understanding CSS-based Layouts.</a></li>
<li><a href="http://www.alistapart.com/articles/slidingdoors/">CSS sliding doors technique.</a></li>
<li><a href="http://www.dynamicdrive.com/">Welcome to Dynamic Drive .</a></li>
<li><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="http://www.projectseven.com/tutorials/css/pvii_columns/">Equal Height CSS Columns.</a></li>
<li><a href="http://www.alistapart.com/articles/fauxcolumns/">Faux columns extend to the bottom.</a></li>
<li><a href="http://www.ilovejackdaniels.com/css/faux-columns-for-liquid-layouts/">Faux Columns for Liquid Layouts</a></li>
<li><a href="http://glish.com/css/">CSS Layout Techniques at 'glish'.</a></li>
<li class="nobullet">
<ul>
<li><a href="http://webdesign.about.com/od/tables/a/aa122605.htm">Tables for Tabular Data - What is Tabular Data?</a></li>
<li><a href="http://accessat.c-net.us/articles/convert.html">Table-based to a CSS layout.</a></li>
<li><a href="http://www.hotdesign.com/seynormal/">The alternative to tables.</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="http://www.tanfa.co.uk/css/examples/">CSS examples - index.</a></li>
<li><a href="http://www.positioniseverything.net/explorer/doubled-margin.html">The IE Doubled Float-Margin Bug.</a></li>
<li><a href="http://csscreator.com/?q=divitis">Divitis: What It Is And How To Cure It.</a></li>
<li><a href="http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without">53 CSS-Techniques You Couldn't Live Without</a></li>

<li><a href="http://www.answersthatwork.com/Downright_pages/Boot_Disks_and_Boot_CDs.htm">Useful Boot Disks.</a></li>
<li><a href="http://www.answersthatwork.com/home_page.htm">Answers that work - Home page.</a></li>





</ul>
<b class="rbottom"> <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b> </b> </div>
</div>
</div>
<div id="content2">
<div id="links2">
<div class="nifty"> <b class="rtop"> <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b> </b>
<ul>
<li><a href="http://xhtml.com/en/css/reference/">CSS reference.</a></li>
<li><a href="http://xhtml.com/en/xhtml/reference/">XHTML reference.</a></li>
<li><a href="http://www.bluerobot.com/web/layouts/">The Layout Reservoir.</a></li>
<li><a href="http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html">Various Box layouts.</a></li>
<li class="nobullet">
<ul>
<li><a href="http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml">Boxes with rounded corners.</a></li>
<li><a href="http://www.html.it/articoli/nifty/index.html">'Nifty' Boxes with rounded corners.</a></li>
<li><a href="http://en.neuroticweb.com/recursos/css-rounded-box/">More rounded corners.</a></li>

<li><a href="http://bonrouge.com/~home">HTML, CSS, PHP etc. at Bonrouge.</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="http://www.cssplay.co.uk/index">Experiments with Style Sheets.</a></li>
<li><a href="http://www.huntingground.freeserve.co.uk/main/mainfram.htm">The Huntingground - a general site.</a></li>
<li><a href="http://www.tizag.com/">Welcome to Tizag Tutorials.</a></li>
<li><a href="http://www.codingforums.com/index.php">Coding Forums - live help.</a></li>
<li><a href="http://www.felgall.com/">Ask Felgall. Free Computer Help.</a></li>
<li><a href="http://css.maxdesign.com.au/">MAX&nbsp;DESIGN - Tutorials.</a></li>
<li class="nobullet">
<ul>
<li><a href="http://www.huddletogether.com/projects/lightbox2/">Lightbox image viewer.</a></li>
<li><a href="http://www.htmlcodetutorial.com/">Help with HTML, CSS etc.</a></li>
<li><a href="http://www.theeldergeek.com/maximize_internet_explorer.htm">The Elder Geek on Windows XP.</a></li>
<li><a href="http://litmusapp.com/cssvista/">CSSVista. Edit your CSS live in IE and Ffox.</a></li>
<li><a href="http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml">Various IE bugs and their solutions?</a></li>
</ul>
</li>
</ul>
<ul>

<li><a href="http://www.softcomplex.com/products/tigra_menu/">Tigra Menu is free JavaScript menu.</a></li>

<li><a href="http://sperling.com/examples/menuh/">CSS Horizontal Drop-Down Menu and more.</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">CSS Library Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">CSS Library Horizontal CSS Menus</a></li>
<li class="nobullet">
<ul>
<li><a href="http://www.csszengarden.com/?cssfile=http://www.anthonyforsey.com/flower_annimation/sample.css">ZEN GARDEN - The Beauty of Web Design.</a></li>
<li><a href="http://www.maxdesign.com.au/presentation/page_layouts/">Sample CSS Page Layouts .</a></li>
<li><a href="http://www.w3schools.com/css/css_pseudo_elements.asp">CSS Pseudo-elements and more.</a></li>
</ul>
</li>
<li><a href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">Recommended DOCTYPES to use.</a></li>
<li><a href="http://www.htmldog.com/">HTML and CSS Tutorials. And Stuff.</a></li>
<li></li>
</ul>

<b class="rbottom"> <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b> </b> </div>
</div>
</div>
</div>

</body>
</html>

effpeetee
Nov 26th, 2007, 11:47 PM
.Body{
background-repeat: no-repeat;

This line at the top should not be there.

Frank

http://accessat.c-net.us/articles/convert.html

may be useful

afe
Nov 27th, 2007, 01:46 AM
.Body{
background-repeat: no-repeat;

This line at the top should not be there.


From your previous post?

effpeetee
Nov 27th, 2007, 10:14 AM
Yes, from previous post. It does not necessarily affect the program, but it should not be there.

Frank


body {
background-color:#0000ff;
background-repeat: no-repeat; - should not be here.
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: white;
font-weight: normal;
margin: 20px 0;
}