I've recently been trying to catch up with the times and use CSS along with HTML in creating webpages. I have found some bumps along the way though and I know a lot of you have more experience on this type of stuff than myself. Here is the test site I have been working on: http://mytestingaddy.net84.net/comf/ Here are my issues: 1. Whenever I attempt to use gradient features in CSS, it is not smooth as demonstrated in examples like these: http://www.w3schools.com/css/css3_gradients.asp . It looks like the background is divided up into lines. You'll notice on my page listed above that I have a misaligned banner and menu links (more on those later). If I take those out, the gradient background gets a little better: http://imgur.com/I9pzvpl. My question is, why am I not seeing the smoothness you see in many examples plastered across the web? The background looks the same in all browsers (IE, Chrome, Firefox, etc.). 2. One thing that I have found notoriously difficult is positioning with CSS. It used to be so simple to just use position within your HTML tags but that is no longer the case if you are using CSS and HTML5 doesn't support these. As you can see in my site, the banner and menu are not centered at the top of the page, heck my banner is covering my menu links. It's probably simplistic or maybe I am oversimplifying it but how do you position these so they match up with the rest of the page? I've posted my CSS below if that helps and instead of a flat out answer, I'd like to be pointed in the right direction if that makes sense. Code: #formcontainer{ width: 800px; height: 400px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color:#FFFFFF; border-radius:10px; border:2px solid; } /*- Menu Tabs 17--------------------------- */ #tabs17 { font: bold 11px/1.5em Verdana; float:left; width:100%; background:change-background; font-size:93%; line-height:normal; } #tabs17 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs17 li { display:inline; margin:0; padding:0; } #tabs17 a { float:left; background:url("images/tableft17.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs17 a span { float:left; display:block; background:url("images/tabright17.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs17 a span {float:none;} /* End IE5-Mac hack */ #tabs17 a:hover span { color:#FFF; } #tabs17 a:hover { background-position:0% -42px; } #tabs17 a:hover span { background-position:100% -42px; } .ribbon { width: 300px; position: absolute; text-align: center; font-size: 20px!important; background: #ff0000; background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ababab)); background: -webkit-linear-gradient(top, #ff0000, #ababab); background: -moz-linear-gradient(top, #ff0000, #ababab); background: -ms-linear-gradient(top, #ff0000, #ababab); background: -o-linear-gradient(top, #ff0000, #ababab); background-image: -ms-linear-gradient(top, #ff0000 0%, #ababab 100%); -webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px; -moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px; box-shadow: rgba(000,000,000,0.3) 0 1px 1px; font-family: 'Helvetica Neue',Helvetica, sans-serif; } .ribbon h1 { font-size: 25px!important; color: #801111; text-shadow: #d65c5c 0 1px 0; margin:0px; padding: 15px 10px; } .ribbon:before, .ribbon:after { content: ''; position: absolute; display: block; bottom: -1em; border: 1.5em solid #ff0000; z-index: -1; } .ribbon:before { left: -2em; border-right-width: 1.5em; border-left-color: transparent; -webkit-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px; -moz-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px; box-shadow: rgba(000,000,000,0.4) 1px 1px 1px; } .ribbon:after { right: -2em; border-left-width: 1.5em; border-right-color: transparent; -webkit-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px; -moz-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px; box-shadow: rgba(000,000,000,0.4) -1px 1px 1px; } .ribbon .ribbon-content:before, .ribbon .ribbon-content:after { border-color: #871616 transparent transparent transparent; position: absolute; display: block; border-style: solid; bottom: -1em; content: ''; } .ribbon .ribbon-content:before { left: 0; border-width: 1em 0 0 1em; } .ribbon .ribbon-content:after { right: 0; border-width: 1em 1em 0 0; } .ribbon-stitches-top { margin-top:2px; border-top: 0px dashed rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5); } .ribbon-stitches-bottom { margin-bottom:2px; border-top: 0px dashed rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3); } body {/* IE10 Consumer Preview */ background-image: -ms-radial-gradient(center, ellipse farthest-corner, #FF0000 0%, #3F3F3F 100%); /* Mozilla Firefox */ background-image: -moz-radial-gradient(center, ellipse farthest-corner, #FF0000 0%, #3F3F3F 100%); /* Opera */ background-image: -o-radial-gradient(center, ellipse farthest-corner, #FF0000 0%, #3F3F3F 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #FF0000), color-stop(1, #3F3F3F)); /* Webkit (Chrome 11+) */ background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #FF0000 0%, #3F3F3F 100%); /* W3C Markup, IE10 Release Preview */ background-image: radial-gradient(ellipse farthest-corner at center, #FF0000 0%, #3F3F3F 100%);}
Your site's down so I can't really take a look at the effect you're talking about to help you. You could use jsfiddle or something similar if the HTML is simple enough. As far as positioning is concerned, one of the most tricky elements of CSS, I've found this site always immensely helpful. Again, I can't look at your site, so I can't really help. Also, another note: w3schools sucks. A lot. If you need a CSS or Javascript reference, use MDN. For comparison's sake, here's their linear-gradient reference. Unfortunately, w3schools is always the top google result, so I always tack "mdn" on all my searches. And finally, another tip... use LESS. It's awesome.
The site is up for me and I had a friend try it too. What do you get when you access it? Should I post my code or screenshots? Thanks for the references, I'll start reading up on them now.
Just can't connect to it. Do I need a port number? Are you sure the URL is right? I can't even ping mytestingaddy.net84.net. Again, if it's not much HTML, you can just paste it into a jsfiddle. Bootstrap is a CSS/js library: http://getbootstrap.com/ . Often called "Twitter Bootstrap" since it was originally developed at Twitter (2.3.x had more of Twitter's design patterns than 3.x does). He's no doubt referring to its grid system, which I personally don't like so much. Bootstrap does, however, offer a ton of useful things. FontAwesome is another good library if you need icons. Both are free to use. You can use cdnjs, too, so you don't have to host the libraries yourself.
I can get to it. It did take awhile to load some references, though. If the Title shows, then try stopping the load and d/-ing the HTML source and form.css to your machine. It has no server dependencies.
AT&T's routes seem screwy, then. I connected to my VPN and it loaded fine. Weird. Taking a look at it now... looks straight outta the late 90's!
On your body style, add: background-attachment: fixed; More on background-attachment. This is because your ribbon is positioned absolutely. There are several better ways of handling it (step 1: don't use that hideous, 90's ribbon), but since your ribbon has a fixed width, you could just add a margin-left to #tabs17 to move 'em over. Better? Use Bootstrap's navbar. Most of what you're doing here can be done in a much nicer and modern style by using mostly out-of-the-box Bootstrap components.
Can't get to your site or I would help you out, man. I will try in the early hours of morning work. A good way to troubleshoot and compare with other peeps' code is to place your cursor over the element you're trying to compare, then right-click and select "Inspect Element" in Chrome. You'll see the CSS of the piece you're trying to compare.
Lil Pun, I think I found it. Add this to your body style in the css background-attachment: fixed; to make it brighter do: background-size: auto 1px; Without that, your gradient (which is based on a 1px image) is expanding to the size of the elements within the body tag. [EDIT] Depressio beat me to it
Yea follow Dep's link. I use it all the time for control positioning it is very simple. Bootstrap does a lot of other awesome things too.
First of all, congrats on taking your first steps! It's great to learn code. I see some people proposed Bootstrap in this thread--- I'd suggest Bootswatch for a little bit of easy customization. http://bootswatch.com/ Here's something I'm working on, really rough, not adaptive or responsive design yet and ungrided (and maybe I'll keep it without a grid haha). www.utelos.com Try to keep things simple my man. Simple colors. Gradients really agitate me, and probably a lot internet users these days. That's more design---but https://hackdesign.org/ is a great resource for that!
Thanks, that indeed fixed the issue. I then went and read the MDN write up on the background-attachment property as well. This may seem like a dumb question but how do you know when you need to use scroll, fixed, local, initial or inherit on that property? I see the example on MDN but it is only for fixed and it uses an image so I understand it in those terms but I'm not quite sure how you knew to apply what you did to fix my issues when I am using color/gradient only? Lol! Yes, the ribbon looks horrible, I know. I am only using it to learn more about CSS positioning though, as I said this is much more tricky than adding "center" to your HTML tags. I noticed you said it looked very 1990's. Is that the site overall or just the ribbon? I'll go checkout Bootstrap and report back later. Many, many thanks!
Lil Pun, Let me try to clarify things for you a little bit. Twitter Bootstrap, or Bootstrap is basically a collection of css code in the form of a css stylesheet. The advantage of using bootstrap is that it is cross browser compatible. Whereas your code is certainly not that. Also, twitter bootstrap doesn't necessarily solve your gradient issue, what it does, more than that, is to help you with common website elements such as: navbar, typography, dropdown menus, forms, etc and so forth. Also, if you learn about twitter bootstrap and how it works, you can take advantage of the many templates that have been created to help you. take a look at this link which includes 95 of the best bootstrap landing pages that you can buy for cheap. It should have one that's perfect for your business: http://www.webdesignrazzi.com/2014/landing-page-templates/
Also with bootstrap, make doubly sure that you CAREFULLY read this page: http://getbootstrap.com/getting-started/ Especially look at the code for their example pages. You do have firebug right? Do you know what firebug is? It helps you view code if you are using firefox web browser. Get the app here and thank me later: https://getfirebug.com/ Basically what firebug does is this: right click on any element and firebug shows you the css code that they used to make it do that. Finally, don't pass over this code: It helps IE8 web browsers to render bootstrap properly, you need to add this to the head of your bootstrap document. <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
Thanks for the tips. I'm not using gradient as a final setting just testing with it so I understand better what CSS can/cannot do. I'll look into the references above as well. Thanks again!
The code I was trying to show you to add to the head of document was: respond.js and html5shiv.js look at the head of bootstrap example templates to see how to implement these, they are in green.
One problem you are having, as it relates to positioning, is that you need to add a container class to your code and "wrap" your elements around that class. The continaer class sets the initial width of the webpage, either to a fluid width: ie 100%, or a fixed width: 960px; The other thing you need is to set the margins: ie margin: 0 auto; to center everything. After you do that, you can use (or create) a GRID to position everything with column classes. ie col-1: 60px; col-2: 120px, so on and so forth. Finally, the float property will help you float items to the left or right: ie: float:left; float:none; float:right. div class="container" ... /div
Fixed and local both stretch with the size of the viewport. For example, if your body was 45,000 pixels long (height), the gradient would be applied to the entire 45,000 pixels (you can test this yourself by adding a height attribute). Because it's fixed relative to the viewport, this is how you see some websites when you scroll, the background image doesn't scroll quite as fast. It's relative to the entire page rather than just the container. Local is relative to the container, not the viewport. Scroll means it doesn't move, even when scrolling. It stays put. My guess is that your background-image was repeating like if you were to use an actual iamge. By using "fixed," you force it to fit your entire viewport (the entire page). Using gradients instead of flat colors is 90's, especially for backgrounds. The ribbon itself looks 90's... almost GeoCities like (not sure if you're old enough to remember that) -- there are much better ways to incorporate a title with your navigation (in Bootstrap's navbar, see the "brand" class).
