Saint_Michael 3 Report post Posted December 13, 2006 The next step will be to set up our header with a tab menu a search box and a header image. With these three parts you will be able to be make a somewhat dynamic header, so it can be seen more and not blended within the website and be lost or hard to find within the website. You have to remember the website is for other people and not for you, so you have to make it as user friendly as possible. Now with the Text with in the image you could say that this could use be used for important updates, or a slogan or two, with this your actual images will be a bit smaller in size (KB) and it will load faster as well. Which of course is a good thing since you want people who use dial up to be able to see it with in a few seconds after entering your site in their browser. Step 2. Before we start with the tab menu and the search box we will put our image in first just to give a general idea where everything else will be once we adjusted everything. So go ahead and design a dummy image so you will know what it will look like after you adjust it so it fits properly. Then when your done coding the header you can design your final image to be put inside the website. First we will insert our image in the following code With this set up: .img-header {background: url("logo.jpg"); background-repeat: no-repeat; border: solid 1px; position:relative; top: 49px; clear: both; float: left; width: 955px; height: 100px; margin: 0px; padding: 0px;} As you see our header will be in the background so when we put in our floating text our design won't break out and be jumbled up. NOTE: With the header you can design it however you want just make sure to pay attention to what you edit so not to break the design. So in your css file put the image code under your header code like so: /* generated by csscreator.com */ html, body{ margin:0; padding:0; text-align:center; } /* Main Body */#pagewidth{ width:95%; text-align:left; margin-left:auto; margin-right:auto;} /* Header */#header{ position:relative; height:150px; background-color:#33729d; width:100%; border-bottom:solid 1px;} /* Header Image */.img-header {background: url("logo.jpg"); background-repeat: no-repeat; border: solid 1px; position:relative; top: 49px; clear: both; float: left; width: 955px; height: 100px; margin: 0px; padding: 0px;}Now go to your html file and put in the following within your header div: <div class="img-header"></div>So your header code in the html file should look like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&%2334; ><html xmlns="http://www.w3.org/1999/xhtml/ xml:lang="en" lang="en" ><head><title>CssCreator-->XTML 1.0 Transitional Template</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><link rel="stylesheet" href="main2.css" type="text/css" /></head><body><div id="pagewidth"><div class="rbroundbox"> <div class="rbtop"><div></div></div> <div class="rbcontent"> <div id="header" ><div class="img-header"></div></div>Step 3. Now we are going to add in a tab nav into are header, the program that I use which is free is called CSS Tab Designer.. NOTE: You do not need to use this software their are plenty of css sites that tell you how to design a nav system. The tab menu code I will be using is Tab Menu 1 since the blue coloring matches with the rest of the site. So once you generated the code in the CSS Tab Designer, save it because the tab menu uses images. So once you saved it and move the image files over and then copy and paste the tab css code right under the image code you just placed there. So now your CSS File should look like this /* generated by csscreator.com */ html, body{ margin:0; padding:0; text-align:center; } /* Main Body */#pagewidth{ width:95%; text-align:left; margin-left:auto; margin-right:auto;} /* Header */#header{ position:relative; height:150px; background-color:#33729d; width:100%; border-bottom:solid 1px;} /* Header Image */.img-header {background: url("logo.jpg"); background-repeat: no-repeat; border: solid 1px; position:relative; top: 49px; clear: both; float: left; width: 955px; height: 100px; margin: 0px; padding: 0px;} /* Top Nav Menu *//*- Menu Tabs 10--------------------------- */ #tabs10 { float:left; width:100%; font-size:93%; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:10; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url("tableft10.gif") no-repeat left top; margin:0; padding:0 0 0 0px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url("tabright10.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; }-->Next copy and paste the html code for the website (it will look like this) <div id="tabs10"> <ul> <!-- CSS Tabs --><li id="current"><a href="Home.html"><span>Home</span></a></li><li><a href="Products.html"><span>Products</span></a></li><li><a href="Services.html"><span>Services</span></a></li><li><a href="Support.html"><span>Support</span></a></li><li><a href="Order.html"><span>Order</span></a></li><li><a href="News.html"><span>News</span></a></li><li><a href="About.html"><span>About</span></a></li> </ul> </div>Then place your tab code on top of the image div you just place in earlier. don't worry we will adjust everything that needs to be adjusted once we finish up. Step #4. Next we will set up our container for the search box so when we put in the actually html for the search box we can adjust the css to fit in nice and proper like. Ok first for the CSS container. /* Search Box */.container {position:relative; top: -25px; margin-top: 0px; margin-left: 780px; color: #EFEFEF;; }We will place the code on top of the tab menu which of course will be under the image css code. Next for the html <div class="container"> <form name="form1" id="form1" method="post" action=""> <input type="text" name="textfield" value="Search..." /> <input class=" button" type="submit" name="Submit" value="GO" /> </form></div>you will place this right under the tab menu since it is right along the lines of being on top of the image itself. As you notice the container breaks the header just a bit so it's adjustment time now. So after adjusting your css file your css file should look like this. /* generated by csscreator.com */ html, body{ margin:0; padding:0; text-align:center; } /* Main Body */#pagewidth{ width:95%; text-align:left; margin-left:auto; margin-right:auto;} /* Header */#header{ position:relative; height:150px; background-color:#33729d; width:100%; border-bottom:solid 1px;} /* Header Image */.img-header {background: url("logo.jpg"); background-repeat: no-repeat; border: solid 0px; position:relative; top: -54px; clear: both; float: left; width: 957px; height: 129px; margin: 0px; padding: 0px;} /* Search Box */.container {position:relative; top: -57px; margin-top: 0px; margin-left: 760px; color: #EFEFEF;; }/* Top Nav Menu *//*- Menu Tabs 10--------------------------- */ #tabs10 { float:left; width:100%; font-size:93%; border-bottom:1px solid #000000; line-height:normal; position:relative; top: -32px; } #tabs10 ul { margin:10; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url("tableft10.gif") no-repeat left top; margin:0; padding:0 0 0 0px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url("tabright10.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; }-->Since we are the in the css kind of mood how about we add some style to the search box. input.blue{background-color: #33729d;font-weight: bold; font-size: 12px; color: #000000;border: solid 1px;}input.blue1 {background-color: #33729d; font-size: 10px;color: #000000;border: solid 1px;}You will add that code under the search bar container so as to keep the css code a bit organized. Also you might have notice that your image might have adjusted so adjust as need be.in your forum just change the input class id's that follow the css and your set. Step 5. For the most Part I got this idea from another template designer that I somewhat know, emailed him from time to time about suggestions. Anyways we are now going to add text container within the image header. for the CSS you will copy and paste this /* Header Text Container */.site-slogan-container {width: 330px; height: 130px; position: absolute; top: 10px; z-index: 1; overflow: hidden; margin: 0px; padding-right: 15px; background-color: transparent;}.site-slogan {float: right; width: 700px; margin: 0px; padding: 0px; background-color: transparent; font-size: 10px;}.site-slogan p.title {float: right; width: 700px; margin: 0px; padding: 0px; color: #000000; font-family: arial, sans serif; text-align: right; font-weight: bold; font-size: 220%;}.site-slogan p.subtitle {clear: both; float: right; width: 700px; margin: -5px 0px 0px 0px; padding: 0px; color: #000000; font-family: arial, sans serif; text-align: right; font-weight: bold; font-size: 200%;}.site-slogan p.text {clear: both; float: right; width: 700px; margin: 10px 0px 0px 0px; padding: 0px; color: #000000; font-family: arial, sans serif; text-align: right; font-weight: bold; line-height: 1.0em; font-size: 140%;}.site-slogan p.readmore {clear: both; float: right; width: 700px; margin: 10px 0px 0px 0px; padding: 0px; color: #000000; font-family: arial, sans serif; text-align: right; font-weight: bold; line-height: 1.0em; font-size: 120%;}.site-slogan a {color: #000000; text-decoration: underline;}.site-slogan a:hover {text-decoration: none; color: color: #000000;}With this you can put in some text in which it won't mess up the image and also keep you from changing the image every time you want to mention a big Update or something like that. Now for the HTML that will be needed to set up the container. <div class="site-slogan-container"> <div class="site-slogan"> <p class="title">TEXT</p> <p class="subtitle">TEXT</p> <p class="text">TEXT</p> <p class="readmore">››› <a href="#">TEXT</a></p> </div> </div>You will place the html within the image div like so. <div class="img-header"> <div class="site-slogan-container"> <div class="site-slogan"> <p class="title">TEXT</p> <p class="subtitle">TEXT</p> <p class="text">TEXT</p> <p class="readmore">››› <a href="#">TEXT</a></p> </div> </div> </div>Ok so after making many adjustments here and there in the header is complete. Of course you could add anything else to it if you want. If you want you could add in a divider bar to put in a small gap between your header and your content like so. /* Nav Menu replacement */.container2 {background: url("navbar.jpg"); background-repeat: no-repeat;position:relative; top: 150px; left: -50px; padding: 0px; margin: 0px 0 0px 0; border-bottom:solid 1px; width: 957px; height: 21px; }You will place this right under the image css so you can adjust both of them quickly if you need to. Then to show the border just place this right under the </div> for the image div. Like so: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; ><html xmlns="http://www.w3.org/1999/xhtml/; xml:lang="en" lang="en" ><head><title>CssCreator-->XTML 1.0 Transitional Template</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><link rel="stylesheet" href="main2.css" type="text/css" /></head><body><div id="pagewidth"><div class="rbroundbox"> <div class="rbtop"><div></div></div> <div class="rbcontent"> <div id="header" > <div id="tabs10"> <ul> <!-- CSS Tabs --><li id="current"><a href="Home.html"><span>Home</span></a></li><li><a href="Products.html"><span>Products</span></a></li><li><a href="Services.html"><span>Services</span></a></li><li><a href="Support.html"><span>Support</span></a></li><li><a href="Order.html"><span>Order</span></a></li><li><a href="News.html"><span>News</span></a></li><li><a href="About.html"><span>About</span></a></li> </ul> </div><div class="container"> <form name="form1" id="form1" method="post" action=""> <input class="blue" type="text" name="T1" size="20" value="Search..."> <input class="blue1" type="submit" name="Submit" value="GO" /> </form></div> <div class="img-header"> <div class="site-slogan-container"> <div class="site-slogan"> <p class="title">YOUR TEMPLATE PARTNER!</p> <p class="subtitle">Quality is our passion.</p> <p class="text">Serving the webcommunity<br />with XHTML/CSS designs</p> <p class="readmore">››› <a href="#">Go to templates</a></p> </div> </div> <div class="container2"></div>Then that’s it for the header. Of course with all this done it will be time to adjust accordingly and go through our first css validation and optimizing for this tutorial. So go to the following site to get your css optimized. So whats up with these tool? Simple, if you optimize your coding (removing of extra tags, white space) and validate (making sure your using the right tag structure), not only will your site look good but it will load nice and fast. We are talking fast for dial up users, basically meaning that it would load like someone using a cable modem on a 56k account. However you still want your site to load fast reguardless of what kind of connection you the web designer has. In which case I bring you to this website Website Optimization With online tool you will be able to tell how fast your site loads up and some other instresting info. Of course you need to have the website loaded, although I would provide one, it is best that you set up your own website account so as to learn about the tools better. Ok so first we are going to optimize are CSS so click on the following link. http://www.cleancss.com/ Then we will go to W3c CSS validator and see what errors come up [url=http://jigsaw.w3.org/css-validator/]CSS Validator Now if you have any errors (their was a few when I did it) you would want to correct them and then validate again. If you notice you would see a list of warnings although they won't hurt your overall design fixing them would help the css be more efficient. Of course We will do all major Optimization near the end of the Tutorial. So at this point in the tutorial we are done with the header. But before you close down your editing software make sure your design doesn't break from the optimization and validation. It happens sometimes so double check to make sure. So at this point the css is validated to some extent that you have no major errors, so the next thing to do is optimize your html and validate it as well. Lucky us we don't have much to optimize and validate so you should have very few errors. Ok so now this is what our CSS File and html should look like if you followed this tutorial in a somewhat loose fashion for the basic Idea. CSS @media print {#twocols,#maincol {width:100%;float:none;}#leftcol,#rightcol {display:none;}}/* generated by csscreator.com */html,body {text-align:center;margin:0;padding:0;}/* Main Body */#pagewidth {width:95%;text-align:left;margin-left:auto;margin-right:auto;}/* Header */#header {position:relative;height:151px;background-color:#33729d;width:100%;}/* Header Image */.img-header {background:url("logo.jpg");background-repeat:no-repeat;border:solid 0;position:relative;top:-52px;clear:both;float:left;width:937px;height:100%;margin:0;padding:10px;}/* Nav Menu replacement */.container2 {background:url("navbar.jpg");background-repeat:no-repeat;position:relative;top:161px;left:-10px;border-bottom:solid 1px;width:957px;height:21px;margin:0;padding:0;}/* Header Text Container */.site-slogan-container {width:330px;height:130px;position:absolute;top:50px;z-index:1;overflow:hidden;padding-right:15px;background-color:transparent;margin:0;}.site-slogan {float:right;width:700px;background-color:transparent;font-size:10px;margin:0;padding:0;}.site-slogan p.title {background-color:transparent;float:right;width:700px;color:#000;font-family:arial, sans serif;text-align:right;font-weight:700;font-size:220%;margin:0;padding:0;}.site-slogan p.subtitle {background-color:transparent;clear:both;float:right;width:700px;color:#000;font-family:arial, sans serif;text-align:right;font-weight:700;font-size:200%;margin:-5px 0 0;padding:0;}.site-slogan p.text {background-color:transparent;clear:both;float:right;width:700px;color:#000;font-family:arial, sans serif;text-align:right;font-weight:700;line-height:1em;font-size:140%;margin:10px 0 0;padding:0;}.site-slogan p.readmore {background-color:transparent;clear:both;float:right;width:700px;color:#000;font-family:arial, sans serif;text-align:right;font-weight:700;line-height:1em;font-size:120%;margin:10px 0 0;padding:0;}.site-slogan a {background-color:transparent;color:#000;text-decoration:underline;}.site-slogan a:hover {text-decoration:none;color:#000;}/* Search Box */.container {position:relative;top:-54px;margin-top:0;margin-left:760px;color:#EFEFEF;}input.blue {background-color:#33729d;font-weight:700;font-size:12px;color:#000;border:solid 1px;}input.blue1 {background-color:#33729d;font-size:10px;color:#000;border:solid 1px;}/* Top Nav Menu - Menu Tabs 10--------------------------- */#tabs10 {float:left;width:100%;font-size:93%;border-bottom:1px solid #000;line-height:normal;position:relative;top:-32px;}#tabs10 ul {list-style:none;margin:10px;padding:10px 10px 0 50px;}#tabs10 li {display:inline;margin:0;padding:0;}#tabs10 a {float:left;background:url("tableft10.gif") no-repeat left top;text-decoration:none;margin:0;padding:0;}/* Commented Backslash Hack hides rule from IE5-Mac \*/#tabs10 a span {display:block;background:url("tabright10.gif") no-repeat right top;color:#FFF;float:none;padding:5px 15px 4px 6px;}/* End IE5-Mac hack */#tabs9 a:hover span {color:#FFF;}-->#leftcol {width:140px;float:left;position:relative;left:0;background-color:#33729d;border:solid 1px;}#twocols {width:81.5%;float:right;position:relative;}#rightcol {width:140px;float:right;position:relative;left:0;background-color:#33729d;border:solid 1px;}#maincol {background-color:#33729d;float:left;display:inline;position:relative;width:77%;border:solid 1px;}#footer {height:150px;background-color:#33729d;clear:both;border-top:solid 1px;}/* *** Float containers fix: [url="https://csscreator.com/attributes/containedfloat.php"]csscreator.com/attributes/containedfloat.php; *** */.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix {display:block;}/* Hides from IE-mac \*/* html .clearfix {height:1%;}/* set millions of background images */.rbroundbox {background:url(nt.gif) repeat;width:100%;margin:1em auto;}.rbtop div {background:url(tl.gif) no-repeat top left;}.rbtop {background:url(tr.gif) no-repeat top right;}.rbbot div {background:url(bl.gif) no-repeat bottom left;}.rbbot {background:url(br.gif) no-repeat bottom right;}/* height and width stuff, width not really nessisary. */.rbtop div,.rbtop,.rbbot div,.rbbot {width:100%;height:7px;font-size:1px;}.rbcontent {margin:0;}#tabs10 a:hover,#tabs10 #current a {background-position:0 -42px;}#tabs10 a:hover span,#tabs10 #current a span {background-position:100% -42px;}HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd xmlns="http://www.w3.org/1999/xhtml/; xml:lang="en" lang="en"><head><title>CssCreator-->XTML 1.0 Transitional Template</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="main2.css" type="text/css" /></head><body><div id="pagewidth"> <div class="rbroundbox"> <div class="rbtop"></div> <div class="rbcontent"> <div id="header" > <div id="tabs10"> <ul> <!-- CSS Tabs --> <li id="current"><a href="Home.html"><span>Home</span></a></li> <li><a href="Products.html"><span>Products</span></a></li> <li><a href="Services.html"><span>Services</span></a></li> <li><a href="Support.html"><span>Support</span></a></li> <li><a href="Order.html"><span>Order</span></a></li> <li><a href="News.html"><span>News</span></a></li> <li><a href="About.html"><span>About</span></a></li> </ul> </div> <div class="container"> <form name="form1" id="form1" method="post" action=""> <input class="blue" type="text" name="T1" size="20" value="Search..." /> <input class="blue1" type="submit" name="Submit" value="GO" /> </form> </div> <div class="img-header"> <div class="site-slogan-container"> <div class="site-slogan"> <p class="title">TEXT</p> <p class="subtitle">TEXT</p> <p class="text">TEXT</p> <p class="readmore">››› <a href="#">TEXT</a></p> </div> </div> <div class="container2"></div> </div> </div> <div id="wrapper" class="clearfix" > <div id="twocols" class="clearfix"> <div id="maincol" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. </div> <div id="rightcol" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. </div> </div> <div id="leftcol" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. </div> </div> <div id="footer" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. </div> <!-- /rbcontent --> <div class="rbbot"></div> </div> <!-- /rbroundbox --> </div></div></body></html>Next Part we will work on the footer with some css and who knows even more css. Share this post Link to post Share on other sites
twitch 0 Report post Posted December 15, 2006 Actually, there's no such thing as Pure CSS unless you're combining CSS and PHP/ASP/etc. Good tutorial, but it's pretty basic. Tips: Use classes only when there is more than one of that element on the page, every other time, use id.Make your CSS more appropriate-ised. For example, .img-header would be better off img#header-img. This stops it from 'accidentally' being applied to elements that it shouldn't be.Combine properties like background to shorten space used. It also makes it easier for reading and debugging.Never use absolute positioning, the affect of positioning of elements can easily be done with margins and floats. That's what they're for. If you do use the position porperty, make sure the attribute is relative.Don't rely on online editors, they will always **** up at one point or another.People should really be going for XHTML 1.0 Strict or even better XHTML 1.1, as now XHTML 2.0 is out. The stronger the standards we meet, the better our site will be for everyone.Your HTML is also flaud, you need to use the appropriate tags to contain the data. For example, use <p> to contain the content within divs. You don't necessarily need divs to organise layout. Share this post Link to post Share on other sites
TavoxPeru 0 Report post Posted January 16, 2007 This is a good basic tutorial, i think that a lot of people will follow this.Best regards, Share this post Link to post Share on other sites
Saint_Michael 3 Report post Posted January 16, 2007 Well that is what I am going for is basic layout without all the twists and turns needed. Since this is based on online tools and what not. Share this post Link to post Share on other sites
toby 0 Report post Posted January 16, 2007 It didn't work for me, can you post a screenshot of what it's supposed to look like please? Share this post Link to post Share on other sites
Saint_Michael 3 Report post Posted January 16, 2007 I can do you one better here is a link of what it looks like.http://forums.xisto.com/no_longer_exists/Hopefully that helps out. Share this post Link to post Share on other sites
mortalmatt 0 Report post Posted May 28, 2007 Thanks for all the CSS tips guys! CSS is great for styling a website and going for a standard look on all web browsers. Some things I would like to see is how to avoid those automatic line breaks after divs and such in IE. Share this post Link to post Share on other sites
