|
CSS - My First Attampt On Css2 - Any Suggestions - Zip Attached
Hello,
I have attached my zip file and this is my first attempt on CSS2 (plenty of comments in the code), if some could look at it and recommend any suggestion and why that would be TERRIFIC. My main question is, what happens if the is say...4-5 paragraphs of text on the home page, under "Company Overview", the page then looks stupid, how do i extend the containers around the #middleContainer so that it looks intact. If you want to see the page it is also accessible at http://awo.loadedtechnologies.com/ Thanks you for your Help Similar Tutorialshello all, have a small problem with CSS when viewing the site with Firefox ... please help you are my last hope. Here is what Firefox doesnt like Code: background: url("images/tiler.gif") top y-repeat;
in IE everything looks fine but Firefox misses the image ... when i put a background color of the table ... the color is displayed but picture is not ... anybody has a solution ? I see Firefox doesnt like alot of css styles ... does anyone know a knowledge base with replacements or something like that ... ??? Thanks in advance guys ! So, I'm looking for a tool that will crawl and suck down my website (just html, not images) and then examine my stylesheet and compare the rendered page output with css and help me eliminate unused styles definitions, styles for identical properties with different names, unfound class attribute names and that sort of thing. The reason I need a spider is that my site runs on ATG and rql queries are pain to write when looking for styles in the repositories, and so I'd like to check the the final rendered page output, and not have to comb through my jhtml and my repositories separately. I've downloaded a couple tools. Style Studio and Style Master and neither will crawl my live site and check css, and the one that was supposed to go through my local resources didn't search for unused styles, just invalid css2 (which i can do at w3c anytime!) Ok, if that made sense to anybody and anybody knows the answer please let me know. Even a css2 seeker or something that will work on my site once i've crawled it with another spider tool would be cool too. I have 4000 lines of css and doing this by hand is driving me insane. thanks everyone. d Hi. I like to know what're the differences. I know that css3 has more properties. It can do rounded corner border easily and also some new ways to write css. Is this css3? input[type="submit"] Also I remember seeing websites mentioned css3 can be written in module or something like that? What other differences? Thanks. What is the Difference between CSS2 and CSS3 ??? Link: http://www.vairlinecms.com/template.html I cannot for the life of me figure out why Testting is not aligning vertically with About Us (To have the same space between top of Testting and menu bar as there is for About Us.) Any ideas? CSS: Code: /*
Author: Matt
File: default.css
Desc: contiains all of the CSS styles.
Legal: This code is not to be used without the written consent of the author.
*/
/* ===== Defaults ===== */
body {
background: #CCC;
font-family: verdana, tahoma, serif;
}
a {
}
h1, h2, h3 {
}
p {
}
/* ===== Wrapper ===== */
div#wrapper {
position: relative;
width: 976px;
height: 600px;
margin: 0 auto;
padding: 0;
background: #FFF;
border: 10px solid #FFF;
}
/* ===== Header ===== */
div#header {
position: absolute;
top: 0;
left: 0;
width: 976px;
height: 197px;
margin: 0;
padding: 0;
background: url(images/header.jpg) no-repeat;
}
/* ===== Navigation ===== */
ul#navigation {
position: absolute;
top: 154px;
left: 0;
float: left;
width: 976px;
margin: 0;
padding: 0;
list-style-type: none;
background-color: blue;
}
ul#navigation li {
display: inline;
}
ul#navigation a {
display: block;
float:left;
margin: 0;
padding: 0 .5em 0 .5em;
font-weight: bold;
line-height: 25px;
text-decoration: none;
color: #FFF;
border-right: 1px solid #FFF;
}
ul#navigation a:hover {
color: #FFF;
background: red;
}
/* ===== Content ===== */
div#content {
position: absolute;
top: 185px;
left: 0;
margin: 0;
padding: 0;
}
div#content #leftSide {
float: left;
width: 700px;
margin: 0;
padding: 0;
}
div#content #leftSide h1 {
color: blue;
margin: 0;
padding: 0;
}
div#content #leftSide p {
color: #000;
margin: 0;
margin-bottom: 10px;
padding: 0;
font-size: 13px;
}
div#content #rightSide {
float:left;
width: 200px;
margin: 0;
padding: 0;
}
div#content #rightSide h1 {
}
div#content #rightSide p {
}
/* ===== Content Boxes ===== */
div#content #clientLoginBox {
}
div#content #clientLoginBox h1 {
}
div#content #clientLoginBox p {
}
/* ===== Footer ===== */
div#footer {
}
HTML: Code: <?xml version="1.0" encoding="utf-8"?> <!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=utf-8" /> <title>vAirlineCMS.com | Virtual Airline Support Center</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" /> <head> <body> <div id="wrapper"> <div id="header"> <ul id="navigation"> <li><a href="#">Home</a></li> <li><a href="#">Demo</a></li> <li><a href="#">Sign-Up</a></li> <li><a href="#">Support & Contact</a></li> </ul> </div> <div id="content"> <div id="leftSide"> <h1>About Us</h1> <p>This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. </p> <h1>Features</h1> <p>Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test.</p> </div> <div id="rightSide"> <h1>Testting</h1> </div> </div> </div> </body> </html> Hi! I need a very good CSS2 quick reference where I can rapidly see what is supported in which browsers and a short description of the property. Thank you! Greetings, I posted this question in the HTML forum, too, but I realize that maybe the answer to this question would better be provided by CSS2, rather than using HTML tables, as the latter may be deprecated in the future--it seems--as a layout tool. I used to be able to position an image, or anything basically, in a table cell that is in the "absolute middle" of a web page, i.e. centered horizontally and vertically, using Dreamweaver MX. But, for some weird reason, I cannot do it anymore using Dreamweaver MX 2004. No matter what I try, the image or contents of the cell or table are always at the top of the page, centered horizontally, yes, but not vertically. I tried nesting a table within a table, and I tried using a percentage-based 3x3 table, but nothing works. I noticed that the "height" attribute of a table is deprecated now, thus, you should not give a table a "height" of 100%. Is that the reason? And if so, then what is another way to do this now? I mean putting an image or so in the absolute middle or center of a page? Better yet... What I really want to do is to place an image in the vertical center of a page, yet a bit to the side, but within proportion to the page of the visitor. Meaning, I'd like the center of the image, for example, to always have 50% of the page over it and 50% below it, exactly; and I'd like it to have 33% of the page to its right side, for instance, and 66% to its left side, always, regardless to the visitor's resolution. Now how can I do this, especially using Dreamweaver MX 2004? Thanks for anyone taking the time to help. I'll try to attach an image to demonstrate what I mean visually. http://forums.devshed.com/attachmen...tachmentid=4599 From what I've read its good practice to use tables when something is.. well Tabular. In the example I've attached the rows of shoes could expand or extract, so the vines in the lower left part would move up/down accordingly. I have a few ideas on how to integrate this, but I Just wanted to throw it out there to the community and see if anyone came up with some super slick solution. What I'm after: URL My try: http://westkoast.net/cssexample/example.html I know there is no real "right or wrong" way to do this. Any other ideas? Im deriving a list of photos with information from my database. I want to be able to print the webpage off without any of the information being broken up between pages. Since its coming from the database I cant just use page breaks cause then I get one image per page. Is there a solution to this? Hey, everyone! I was wondering if someone could advise how I could vertically center this page using CSS. I'm trying to create the look of gotgosh dot com but in CSS. Thank you! Kyler Here's the CSS code: * { margin: 0; padding: 0; } body { background: #666666 repeat-x; color: #000000; } #center { position: absolute; width: 100%; float: none; } #outercontainer { width: 760px; margin: 0 auto 0 auto; } #menu { height: 70px; background:#FF0000; } #container { position: relative; height: 500px; overflow: auto; border: 10px solid #FFFFFF; background-color: #FFFFFF; } #barst { height: 20px; width: 100%; background: #00FF00; } #barsb { height: 20px; width: 100%; background: #00FF00; } Here's the HTML code: <head> <title>enter title here</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta http-equiv="Content-Language" content="en-gb" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="center"> <div id="barst"> </div> <div id="outercontainer"> <div id="menu">---- HEADER --- -----------------</div> <div id="container"> <p>Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.<br /> <br /> Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa. Vivamus pellentesque sem id massa. Aliquam nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem. Curabitur tellus. Proin sit amet libero. Vivamus massa mi, pharetra in, ultricies vitae, vestibulum non, lectus. Nam quis ante ut nisl pharetra congue. Praesent laoreet mi vitae nisi. Sed fermentum massa.</p> </div> </div> <div id="barsb"> </div> </div> </body> </html> I have a design that I need to slice out. I had done this previously making the logo (the cocktail glass/flag/name/ball and green) in a sep div using a .png background and z-index layer for positioning. The problem is, in IE it came up with the ActiveX prompt to present, and in FF, It didn't show up. What I'm trying to do is, keep the dropshadow on the logo over the rest of the imagery. Am I over thinking this??? http://www.rustbug.com/the19thhole/index.html I don't really have a designers eye, so stuff I make tends to look like crap, but I try and make sure it's fuctional. I have a quick thing I made for an internal project at work, but need some suggestions on the design. It's mostly CSS based, but right now I see at least one problem with it: The side bar is positioned using fixed positioning, so if I fill up the bar, the stuff that falls off the end won't be available anymore. I don't want to use overflow: auto/scroll because it would make a nasty scrollbar in the middle of the page rather than on an edge. My server isn't working right now so I can't upload the copy of the page/css I made to it, so I will attach a zip file of the files. Any suggestions for improving this so that the problem I see is elimated, but a decently looking page still exists would be appricated. http://www.mihomeanddesign.com/test/ I was hoping someone would have a suggestion as to how to lay this site out without using absolute positioning for the #mainimage div. I know that I could float it right within the main wrapper, but I also want the top nav and the footer to extend 100%. I want to do this to avoid having to put "style="padding-bottom: 423px; " in every <p> at the bottom of the page if there is not a lot of text on it... like on the home page and the contact page. Any suggestions would be greatly appreciated. Hi, This is my first CSS layout. I would like to know if there is a better way to code this or what improvements or changes should be done. Thank you, Lutek <html> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css" media="screen"> body { margin-top: 0; text-align: center; background-color: #d30000; } #container{ margin: 0 auto; width: 650px; height: 800px; text-align: left; background-color: #FFFFFF; } #header { float: left; width: 100%; background: #FF9900; } #box-left { float: left; width: 33.3%; background: #FF0000; } #box-center { float: right; width: 33.3%; background: #ffff93; } #box-right { float: right; width: 33.3%; background: #ffff93; } #footer { float: left; width: 100%; background: #FF2200; } </style> </head> <body> <div id="container"> container <div id="header">header</div> <br> <div id="box-left"> box-left</div> <div id="box-center">box-middle</div> <div id="box-middle">box-right</div> <div id="footer">footer</div> </div> </body> </html> I've just been given the assignment to write a script that given a set of form elements by the user it will create a page with those form elements displayed and a submit button on the bottom. The form elements the user defines can be text fields, text areas, dropdown boxes, option groups, and checkboxes. The user also gives me a title for each form element. He can give me these form elements in any order and I need to display them in that order on the page. My question is, how do I arrange these form elements so they always look good together and I don't have funny gaps or unprofessional looking design? It would be easy if it was just text fields and area, but then I have to throw in option groups and checkboxes that can be any number in a row. Does anyone have some good form organization rules that could help me? Thanks!! |
|||||||