Sacred Posted October 18, 2009 Share Posted October 18, 2009 I've seen some cool websites with gradients that fade out around the edges of their main content area; I've wondered, how do you do this? I've tried with images, but the result is not the same. Can someone tell how to make a gradient fade out around the edges of an element, like a content box for example? On a sort of related note, I use tables for my webpages, but I hear they are not good to use; how would I design a page with plain CSS? I've looked at the Zen Garden some, but still never got too much of a feel of how to set it up. I know you use images for containers and things, but still many things I am unsure of. Please help whenever possible. All help appreciated, thanks guys . -Sacred Link to comment Share on other sites More sharing options...
misterx100 Posted October 18, 2009 Share Posted October 18, 2009 There are some CSS gradient generators, but these are just a bunch of 1px div-s. What's wrong with the images? Link to comment Share on other sites More sharing options...
Sacred Posted October 18, 2009 Author Share Posted October 18, 2009 Well, I use a drop shadow(Don't know if that is correct) to make these boxes, but the shadow doesn't go all the way around it. It gets most of it, just not all, which kinda ruins the point of it. I doubt I'm even doing it right. If someone who uses GIMP knows how to do this, that would be very helpful ^^. Link to comment Share on other sites More sharing options...
Synook Posted October 18, 2009 Share Posted October 18, 2009 The "edge fade outs" are most likely done with images, there is no widely supported proper CSS method (yet). You can always fiddle with the image - maybe you want outer glow instead of a drop shadow?About laying pages out with CSS, have you read the CSS tutorial? The point of CSS is to be able to use semantic markup for your page, containers, whatever, and then style them separately. Link to comment Share on other sites More sharing options...
Sacred Posted October 18, 2009 Author Share Posted October 18, 2009 I understood the making of containers, like a box you use to hold news information or anything like that, but how is the setup? Do you just write it straight up and down? I am so used to using tables, I've never had a fully CSS styled webpage before. EX:Style.css-----------------------------------------#container{width:250px;height450px;border:1px solid black;background-image:url("");opacity:1.0;color:white;text-align:left;/* And So On */}-----------------------------------------<html><head> <title></title><link rel="stylesheet" href="Style.css" type="text/css" /></head><body><div id="container">This is text in a box.</div><div id="container">This is more text in a box.</div></body></html>I understand how to use them, but not exactly how to place them. Like what you would preferably use to center an element, make it align left, etc. I understand the usage, just not how to put it all together into a functional webpage. Idk if you understand what I mean, but just the fact that I don't know where to position everything, or how, I know lot's of code for positioning, but mainly in tables. Link to comment Share on other sites More sharing options...
Synook Posted October 19, 2009 Share Posted October 19, 2009 Floats, dimensions (width and height) and margins are used to position elements. For example, if you wanted to center an element you would give it a fixed width and margin:0px auto;, to align it to the right you may give the parent text-align:right; Link to comment Share on other sites More sharing options...
Sacred Posted October 20, 2009 Author Share Posted October 20, 2009 Thank you, it feels kind of like I need to "re-learn" css, in the effect of actually using it to make webpages and stop relying so much on HTML. There's still many questions I have; at least there is a great community to help me. Thanks.EDIT:Okay, I messed around with it, but had errors. How would organize a page with a leftNav, Main, rightNav, in that order? Like left-to-right without the right-most element being beneath the main content. It needs to be beside it.Here's stuff I tried:.leftNav{float:left;}.main{/* float:center; | Don't think that is even valid */margin:0px auto;}.rightnav{float:right;}Those exclude all the other code, just the positioning code I want to focus on. I know that's wrong, but how would I fix it? I wanna learn this, to never have to use tables again.EDITEDIT:Okay, I think I figured it out, but the HTML makes no sense to me. You have to right the navs first, then the main content that goes in the center below it for it to all be on the same line and centered all nice. Seems weird to me. Am I doing this right? -Sacred Link to comment Share on other sites More sharing options...
dsonesuk Posted October 21, 2009 Share Posted October 21, 2009 you need a layout similar to this, notice the main div, which is below left, and right, this is important..left{float:left; width:180px;}.right{float:right; width:180px;}.main{margin: 0 190px;} /*will prevent text inside this element from floating under outer side panel div's, when it extends below these elements bottom edge*/<div class="left"></div><div class="right"></div><div class="main"></div> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.