Hello all, I am quite unhappy with how my site, GeekGods.net, is looking. I'm an old-fashioned HTML kind of girl, but want to really investigate how to improve the look of my site using CSS instead of square tables. I would like to learn more on CSS and how to make my site look more cool. It looks square and noobish right now. I also am interested in making round sections for my articles, like bubbles( I've seen this on sites, but don't know what they are really called). Do you guys have any resources where I can get a starting point from? Even template sites where I can get a reference from would help. I want to redesign the site, but I am feeling a little overwhelmed on where to start. Thanks for the help! Whoops, this is more appropriate for the CSS forum. Please feel free mods to move it, my bad!
Okay... to understand how to make round sections, you'll have to understand how to make content "float," which kind of requires you to start to learn the whole css model. Setting the style rule float:left on an element allows future elements to flow in the area to its right instead of coming below, and setting the style rule clear:left makes sure the element drops down below any elemtents with float:left. The example I made for you uses divs stacked up using both float:left and clear:left so that future elements after them (the paragraphs) will flow as desired by the rightmost edges of the floated divs. Then I used the background-image of the containing div to make it look like the text was really flowing along a slope. <html> <head> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <style> p{font-size:.9em; line-height:1em; margin-top:0; margin-bottom:0} // div{border:1px dotted gray} div.left{float:left; clear:left; height:12px;} </style> </head> <body> <div style="width:200px; background:url(myredthing.gif) no-repeat top left"> <div class="left" style="width:50px"></div> <div class="left" style="width:40px"></div> <div class="left" style="width:30px"></div> <div class="left" style="width:20px"></div> <div class="left" style="width:20px"></div> <div class="left" style="width:20px"></div> <div class="left" style="width:30px"></div> <div class="left" style="width:40px"></div> <div class="left" style="width:50px"></div> <p>This is where we type our text, type our text, type our text. This is where we type our text and put whatever we want.</p> <p>See how the content wraps at the edges of the floating divs</p> </div> </body> </html> Code (markup): You can uncomment the style rule div{border:1px dotted gray} to see borders around all of the divs Do you have any questions about this..... PS Your avatar is hot
Check out these sites for rounded corner techniques: Nifty Corners: http://www.html.it/articoli/nifty/index.html Curvy Corners: http://www.curvycorners.net/ Spiffy Corners: http://www.spiffycorners.com/
'The CSS Anthology:101 essential tips' is good. Lots of practicle examples from text, navigation, graphics and layout. i found the book very helpful. Think the site is www.sitepoint.com or amazon of course. I know u can find lots of free resources on the net, but i'm old fashioned in that i still like a good book too, and this book is good.