|
CSS - Whats The Best Css Tutorial Out On The Internet?
Whats the best CSS Tutorial you ever seen? I want to improve more on my web design so I want to know what CSS tutorial was the best? It can be anything like making a horzontal menu or best looking form. I dont care what it is...
Thank you. Similar TutorialsDoes anyone know of a good online site/tutorial that explores the different possibilities of div tags? Thanks, Emilie I am looking for a CSS tutorial which teaches how to make a layout like this layout Basically a 3 column layout with boxes in the left and right columns Thanks I'm looking for recommendations for good CSS forms tutorials. I did do a brief Google search this afternoon, but it seemed like a veritable cornucopia of crap. So I was wondering if people here had some favorite resources that deal specifically with form elements in terms of layout / positioning, and style? Thanks... Please . . . Can anyone recommend any comprehensive, online tutorials on how to make a basic, one-column, three-div CSS Web site? I want to learn correctly. Amazon has an amazing menu, the one that says 'see all 41 product categories'. All the options pop out and there is no need to continously click to find out what you are looking for. Genius! Is this basic? Can anybody point me in the right direction for a tutorial? It would seem I am always "taking" from this sites and never giving much back, but not today. I had posted a message a few days ago which generated a reply with a link to this site - http://www.sitepoint.com. While I was there, I requested a sample download of some chapters of a book. It was in the book "Html without tables" or something like that they pointed me to this sample site - www.footbagfreaks.com What an awesome way to learn css layout. I checked it in both IE and NS and it was pefect. There are three .html files and one style sheet. I know I will be studying this code if only to get the basics down. I hope this works for you. Hello, I have been spending hours on tutorials of css only to find some things work in one browser, while not in others. I would like to find a tutorial which only applies to IE CSS1(2) OR IE & Netscape css1(2). Is there such beast? I find that I'm constantly running into conflicts with css and how it displays in internet explorer and mozzilla,let alone the rest of the browsers. Does anybody know a good trusted up to date css tutorial site where one can learn css that is cross browser friendly? Thanks Hi, I'm looking for a tut on how to create tabs for content, not tabs for navigation/menu. Yes, kinda confusing, but here's an example of what I'm after: http://landflip.com/land.asp?listing_id=23028&hfeature=1 If you scroll down mid way, you will see a tabbed area where it provides the options to check out: Photos, Location, Aeriel and Street View. This is what I want to mimic (not the tabbed navigation up top in the menu bar). Can you recommend any tutorials that would teach me how to do this? Thanks. This css looks great in IE, but in netscape, etc. its fubared. the positioning of the #leftcolumn is wayy out in the middle of the page instead of aligned like it should be and the right column is below the left column. Code:
body {
margin: 0;
padding: 0;
font-size: 12px;
font-family: 'Arial', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background: #ccc url(/greydusk/images/bgtile.gif) repeat-y 50% 0;
}
#caption {
font-style: italic;
font-weight: bold;
padding-top: 5px;
}
#frame {
width:750px;
margin-right:auto;
margin-left:auto;
padding:0px;
text-align:left;
}
#header {
float: left;
width: 751px;
height: 55px;
background: #ccc url(/greydusk/images/header_back.gif);
}
#leftcolumn {
float: left;
width: 505px;
background:#fff;
margin-top: 0px;
margin-left: 2px;
padding-bottom:20px;
}
#title {
display: block;
font-weight: bold;
font-size: 15px;
}
#date {
float: left;
margin-left: -35px;
font-weight: normal;
color: #9C9C9C;
}
#leftcolumn p {
background: url(/greydusk/images/marker1.gif) no-repeat top left;
text-indent: 50px;
padding-left: 15px;
padding-right: 10px;
margin-top: 35px;
}
#rightcolumn {
float: left;
width: 235px;
margin-left: 5px;
}
#rightcolumn p {
padding-left: 15px;
padding-right: 15px;
}
#menu {
background-color: #000;
width: 751px;
font-size: 14px;
color: #FFF;
}
#menu ul {
list-style: none;
margin: 0 0 0 0;
padding: 0px;
}
#menu li {
float: left;
margin: 0 0 0 0;
padding-right: 15px;
padding-top: 4px;
padding-left: 15px;
padding-bottom: 7px;
}
#menu li a {
padding: 0px;
padding-bottom: 3px;
margin: 0 px;
color: #fff;
text-decoration: none;
}
#menu li a:hover {
border-bottom: 4px solid #7F88DA;
color: #7F88DA;
}
and here is the page. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>test site</title>
<script type="text/javascript"></script>
<style type="text/css" media="all">
@import "/greydusk/css/greydusk.css";
</style>
</head>
<body onload="window.defaultStatus='test-site';" id="test">
<div id="frame">
<div id="header">
<p> </p>
</div>
<div id="menu">
<ul>
<li><a href="blah.htm">home</a></li>
<li><a href="blah.htm">news</a></li>
<li><a href="blah.htm">forums</a></li>
</ul>
</div>
<div id="leftcolumn">
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
<p><span id="title">Sample news title, hello there!</span>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
</div>
<div id="rightcolumn">
<p>BLAH BLAH BLAH BLAH</p>
<p>BLAH BLAH BLAH BLAH</p>
<p>BLAH BLAH BLAH BLAH</p>
<p>BLAH BLAH BLAH BLAH</p>
<p>BLAH BLAH BLAH BLAH</p>
<p>BLAH BLAH BLAH BLAH</p>
</div>
</div>
</body>
</html>
thanks in advance! this thing is frustrating me to no end! and i just no it's a simple 1 or 2 lines i need to change. =( Hi I am using an external stylesheet to try to format some text, but its not working. This is what is in my stylesheet? PHP Code: .small{ font-size: 11px; font-family: verdana, arial, tahoma;} I then used this: PHP Code: <span class="small"><font color="#000000">my text</font></span> But its not formatting it. Any ideas? Hi all Can any one help, I have built a webpage and it looks fine in firefox but not in IE. Have a look http://pfwd.org.uk/style.htm I have no idea whats up with it. I have tried to vaildate the page with w3c and it comes up saying that a a href tag should not between div tags or something along those lines. (this is for the "go" link). Ths css is vaild and checked http://pfwd.org.uk/style.htm http://pfwd.org.uk/style.css The htm code: PHP Code: <!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"> <head> <title> </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css"type="text/css" /> </head> <body> <div class='main'> <div class='header'>Updates to the site</div> <div class='subHeader'>Search for an update</div> <div class='dbItem' style='left:180px; width: 239px; height:22px; float:left'> <form name="search" method="post" action="post"> <select name="Year"> <option>Year</option> <option>2005</option> <option>2004</option> <option>2003</option> <option>2002</option> <option>2001</option> <option>2000</option> </select> <select name="Month"> <option>Month</option> <option>January</option> <option>Febuary</option> <option>March</option> <option>April</option> <option>May</option> <option>June</option> <option>July</option> <option>August</option> <option>September</option> </select> <input type="submit" name="Submit" value="Search" /> </form> </div> <!-- Start on the fly scripts --> <p> <div class="link"><a href='#' class='links'>GO</a></div> <div class='dbdescripHeader'>Description of update</div> <div class='dbdescripItem'>text goes here text goes here</div> <div class='dbHeader'>Number</div> <div class='dbItem'>one</div> <div class='dbHeader'>Date</div> <div class='dbItem'>10/01/01</div> </p> <!-- End on the fly scripts --> </div> </body> </html> th style code: PHP Code: body{ background-color:#006699; font-family:Arial, Helvetica, sans-serif; } .main, header, subHeader{/*Positon values that make every thing go inside the main box */ position:absolute; left:100px; } .main, subHeader dbItem{ border: solid 1px #0099CC; } .main, header{ top:125px; left:140px; width:451px; } .main{ height:300px; } .header{ background-color:#0099CC; font-size:12px; font-weight:800; } .subHeader{ height:22px; width:200px; border: solid 1px #0099CC; background-color:#FFCC66; float: left; font-size:10px; font-weight:700; padding: 2px; } .dbHeader{ border: solid 1px #0099CC; background-color:#FFCC66; font-size:10px; font-weight:600; padding: 2px; width: 50px; } .dbItem{ background-color:#FFFFFF; border: solid 1px #0099CC; font-size:10px; font-weight:700; padding: 2px; width:50px; } .dbdescripHeader{ border: solid 1px #0099CC; background-color:#FFCC66; font-size:10px; font-weight:600; padding: 2px; width: 364px; float:right; } .dbdescripItem{ background-color:#FFFFFF; border: solid 1px #0099CC; font-size:10px; font-weight:700; padding: 2px; width:50px; width: 390px; float:right; height:48px; } .link{ font-size:11px; font-weight:700; font-family:Arial, Helvetica, sans-serif; padding:2px; color:#0099CC; text-decoration:none; float:right; } .links{ background-color:#006699; border: 1px solid #0099CC; border-top:1px solid #0099CC; color:#0099CC; text-decoration:none; padding:0 2px; } .link a:hover{ font-size:11px; font-weight:700; font-family:Arial, Helvetica, sans-serif; padding:0 2px; text-decoration:none; color:#FFCC66; background-color:#006699; } br{ margin-top:-15px; } p{ height:1px; } Thanks PFWD http://65.26.50.204/ec/index3b.html They look odd on the left and bottom, the margin seems to big, and there is no margin on the right or bottom, in firefox. In internet explorer it displays the way I want it too, but it adds scrollbars and expands the pages width and height, past where I want it to go. Any solutions? Hi I have floated two boxes next to each other http://www.sussexfind.co.uk/test/ (left and right) I have put a class "clr" after them, when viewed in IE the gap between the footer and the rounded boxes is greater than when viewed in Firefox. Does anyone know why this is? Thanks I have downloaded my fair share of drop down menus and have always had problems with understanding how it works and what adjustments move or alter what part of the menu. I experimented a bit and got it working on a Mac but it doesnt look right on a PC and vise versa. Is there a tutorial out there that is really descriptive on how it works and shows which adjustments alters what on the menu than just giving you a downloadable sample to play with. Hi guys, It's hard for me find a good book that teachs Photoshop in a way that a CSS designer need. All the good strategies to define wireframe templates I got it from mostly blogs. So, I wonder if it's any book where I could learn and master this techniques in Photoshop? (Also a good video tutorial it would be helpfull) Best to all Demian I know its a bit vague but if someone can actually HINT on what is wrong with the design as it looks ok in FF and IE7 and major other browsers however in IE6.0 the divs (basket and best seller and donate) have moved to the right a bit more. In Opera9.0 it looks very messy. IE: http://browsershots.org/screenshots...1b07da5ea24003/ Opera: http://browsershots.org/screenshots...e171bac56fbf14/ Original: http://www.zahra-zahra.com/aboutus.php What is the method to have a div expand to wrap all the elemetns inside it ? somethings work in IE, some work in Firefox and some work in Safari. I then apply the size to each page separately, but now I have also found out that browsers interpret px differently it seems. my page is www.mmimageart.com, you can go and see in the galleries how if you are using safari, the container div is not wrapping the elements inside. So any help would be appreciatted. Thanks. i have a div on a page that i want to be centered. i am using in css as Code: margin: 0 auto that works fine and is centered in firefox, but is left aligned in internet explorer. how to accompalish it in iexplorer ?? Hey guys. I found some CSS code that will causes the latest IE 6 browsers to display an error reporting window if the service is running and close IE. It works on two computers. A celeron 1.2GHz and an Athlon 2600+. Here is the original code that IE works fine with. Code:
/*nav.css*/
#nav *{font: small-caps normal 98%/1em sans-serif;display:block;}
#nav * a{color:#9fb594;display:block;}
#nav_list,#nav,#nav_main{float:left;clear:none;}
#nav_main{background-image:url('../image/nav_bg.png');background-repeat:repeat-y;width:122px;}
#nav_foot{background-image:url('../image/nav_foot.png');background-repeat:no-repeat;height:177px;width:122px;}
#nav_foot{font: small-caps normal .6em/1em sans-serif;}
#nav_foot a{width:105px;margin-top:2px;vertical-align:bottom;}
#nav * ul{list-style-type:none;padding:0;margin:0;}
#sub_nav_list{background-color:#000;text-align:right;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a{width:105px;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a,#sub_nav_list,#nav_foot{float:left;clear:both;}
.nav_item{height:2.2em;}
.sub_nav_item a{padding-bottom:.5em;min-height:1em;}
.selected a.nav_hlink{font:normal small-caps 900 98%/1em sans-serif;}
#nav_main * a:hover{background-color:#333;}
The last item, the hover, is what is changed. Code:
/*nav.css*/
#nav *{font: small-caps normal 98%/1em sans-serif;display:block;}
#nav * a{color:#9fb594;display:block;}
#nav_list,#nav,#nav_main{float:left;clear:none;}
#nav_main{background-image:url('../image/nav_bg.png');background-repeat:repeat-y;width:122px;}
#nav_foot{background-image:url('../image/nav_foot.png');background-repeat:no-repeat;height:177px;width:122px;}
#nav_foot{font: small-caps normal .6em/1em sans-serif;}
#nav_foot a{width:105px;margin-top:2px;vertical-align:bottom;}
#nav * ul{list-style-type:none;padding:0;margin:0;}
#sub_nav_list{background-color:#000;text-align:right;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a{width:105px;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a,#sub_nav_list,#nav_foot{float:left;clear:both;}
.nav_item{height:2.2em;}
.sub_nav_item a{padding-bottom:.5em;min-height:1em;}
.selected a.nav_hlink{font:normal small-caps 900 98%/1em sans-serif;}
#nav_main * a:hover{background-color:#333; width:80%;margin:auto; }
This works fine in Firefox, doesn't look too good. I'm trying to figure something out so that when it's actived it looks kinda like the buttons used in a lot of linux console setup programs. Like the nvidia driver installer and the slackware setup buttons. Trying to figure out how to make this crapy looking site look better. I guess stupid "animations" based on linux console isn't the best way to go :P |
|||||||