|
CSS - Good Books On Css, Web Standards And Related Design
I was just wondering if any knew any good books on CSS (especially how it pertains to webdesign). One good example is Eric Meyer on CSS.
Thanks so much! Similar TutorialsI have a basic layout that I'm working on right now (a gif is attached), but I can't figure out the best way to code it. I know the corners have to be gif images. That's easy enough. What I'm wondering, is whether the top and side sections can be div's with corresponding borders or if I'm going to have to use images all around the center div. I'd really like to use as little bitmap imagery as possible just to get used to working conservatively instead of just laying everything out with images. I'm still new to CSS layouts, and I've seen some good tutorials, but not much related to escaping the blocky look traditionally associated with them. I know a list apart has a good article on rounded corners, but it didn't seem to apply here. Thanks for your time 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!! Hi, Does anyone have any recommendations on good up-to-date books on CSS for someone who has the basics of XHTML down? I know I can search various websites for this and that, but I'd like a hardcopy instructional book that I can use as a reference with all of the important information in one place. Also, what books should I avoid? Thanks! ~*Miaow*~ Does anyone have any idea what could be happening to my main menu - it dissappears in Safari! Hobo look at my site. it is very boxy and almost TOO structured. is there a design trick i can use to mix it up a little? specific examples would be greatly appreciated. Curious, what is regarded as the standard CSS markup method? Displaying your attrbutes horizontally: #wrapper{selector:attribute; selector:attribute; selector:attribute; selector:attribute;} Or Vertically: #wrapper{ selector:attribute; selector:attribute; selector:attribute; } Personally, horizontal seems the best. I like it because I can see the #id's and .classes all together and can follow the structure abit better. Makes it easier for me to find a certain stlye element. The argument someone presented in favor of vertical display is you won't miss a selector:attribute and the horizontal display it is hard to see the selectors:attributes. My counter arguement, in my head, was I can glance at a set of selectors:attributes and can easily identify what is / isn't there. I think I've read and written so much css that I can quickly identify pattens for certain elements and can spot rather quickly what is missing, if that is the problem, sometimes there is a large issue at hand. Eitherway, I'm in support of the horizontal display. Especially when there is a vertical style sheet that is 1152 lines long and the find option in dreamweaver is my best way of locating the style element. Thoughts on the matter? Hey people, Just want to know how i would make the equivalent alignment of an img to absmiddle. If i don't have absmiddle it doesn't display properly. As well as that, if the align tag with "left" as the value is missing, then text doesn't wrap around the image. How do i fix that? Also, while i'm here, i may as well ask about an equivalent to hspace as well. One of my images has hspace 6, and if i take it away, it displays incorrectly. Why do they make these things so hard? haha thanks people. Hi, I've created a fixed width Div/CSS design for my forum, and while Firefox can handle excessively wide user-posted images, IE handles it badly and stretches the div that the image is in, breaking the layout. An example is he http://forums.hiveworldterra.co.uk/viewtopic.php?t=496 (currently with my CSS work around - not pretty) What I would like is a non-Javascript, CSS-based method (or very minimal that gives acceptable results when JS is off) of making the containing Div of the image scroll horizontally when the image is over 590px wide, but not show a vertical scroll bar and not show any scroll bars if the image is under 590px. Is that even possible? thanks for any suggestions IBBoard Hi- I need to know if IE 5, IE 6 or IE7 are considered standards-compliant and do any of them support fully CS2 and strict standards? Thanks in advance- S Hi, I'm working on my first standards compliant site, so I'm a bit of a novice with the CSS required. You can view a test page I have set up at: 67.207.72.2/test_styles.htm (forum rules won't let me include this as a url) The css file for this page is at: 67.207.72.2/css/test_styles.css My issue is that the right column stops short- I'd like the background color to continue down the length of the page. To try to do this, I set the wrapping div on this section (#main_content) of the page with the appropriate background-color. IE displays the page the way I want it to appear, but FF, Safari, and Chrome all do not. I know this means I'm doing it wrong, but I don't know what to change. I've also tried using an image for a background for the #main_content div, and to set a height: 100% property for the column, but neither of those worked. Can anyone point me in the right direction? Thanks for your time. I want to get some css books, which ones currently would you reccomend, also, in general I am interested web design "best practices" I want to know the best workflows depending the website, a book that can tie all the loose knots. I already know about web design, but I want to become better, thats why Im learning css, php and mysql. So what book would I need to get for css? and a more general one that maybe has the whats and what not to dos of web design. thanks ***SOLVED**** A mod can delete this if you like Thanks to the forum I've worked out a prior issue but 2 remain in regards to the secondary navigation bar. 1. Width - If I use a value of 25% for the pages with 4 sub-links (i.e. "The Music" main) it spans the full width of the right column but in IE6 it pushes the box below it down abot 10px. In OP7, NS6, NS7 & Mozilla1.7 it displays properly. 2. a:hover - I can't seem to figure how to make the hover effect respond to mousing over all parts of the box. It only activates when hovering over the text portion. Works properly in the main-nav but not for the sub-nav (note - this is also ONLY IE related). Really not important unless it is an easy fix. I have tested this site in IE6, NS6.2, NS7.1, OP7.5, Moz1.7. I know v4 browsers are a lost cause but if you could confirm success/failure in others I would appreciate it. Regards, Golem2 I have a problem in IE when dynamically adding elements through the DOM, the problem is basically: if i add a element(a div btw), with document.createElement and use setAttribute("class", "my_CSS_classname") to apply styling, the styling doesnt get applied when viewing it in IE6 (it works fine in firefox). Does IE force you to style dynamic elements though the .style proberty or wah? this is my site i am converting to semantics (starting with the topleft VIPs Area login). i have some questions regarding some of my unique/weird cases: for stats like " * Games Played: 119 * Votes Casted: 64 * Comments Added: 56", i have grouped sets of them into <p>aragraphs, but instead of using line breaks (which is bad, apparently), i am trying to use <ul>s, just removing the bullet image and the indent. well, the indent is not going away. by making the margin-left:0em, does nothing, the padding-left does except it becomes out of line :S so it looks like Code: <p>
<ul class='nobullet'>
<li>Games Played: <b><?php echo $user['totalgames']; ?></b></li>
<li>Votes Casted: <b><?php echo $user['totalratings']; ?></b></li>
<li>Comments Added: <b><?php echo $user['totalcomments']; ?></b></li>
</ul>
</p>
should i be using <ul>s or something else to avoid the <br />? (i will have more questions, but this is a start) thanks a ton in advance! I have a gap between my <td> data. HTML Code: <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="11" height="31"><img src="/images/header_left.jpg" width="11" height="31" border="0" alt="" /></td> <td class="header" height="31"><? echo $query_data[3]; ?> <? echo $query_data[0]; ?></td> <td width="16" height="31"><img src="/images/header_right.jpg" width="16" height="31" border="0" alt="" /></td> </tr> <tr> <td class="smaller" colspan="2"><b><? echo $query_data[1]; ?></b><br /> <? echo nl2br($query_data[2]); ?><br /> and so on... CSS Code:
.header {
background-image: url(http://www.mysite.com/images/header_fill.jpg);
background-repeat: repeat-x;
}
This displays nicely in Firefox et al. But IE sucks so... Any suggestions? Please and thanks. I am using wordpress for my blog/site. I am using Freshnews theme from woothemes as the theme for the blog. Here is the link: demo.woothemes.com/freshnews The font is not that good and it is way too small and the spacing is bad (too congested). How do I change the fonts, size, spacing (line and paragraph) throughout the blog. I know I would have to change it somewhere in the stylesheet. But where exactly and how? And what are the ways to get this done? Should I install a font somewhere? Should I use webfonts (like google webfonts)? What is the advantage in using this? or what are the other ways? Hey, I got a webpage that looks like it should in both IE 6.0 and firefox 2.0. Now i went testing it in opera and it has a problem with some div positions. Here is how it looks in firefox and IE: Internet explorer:http://img442.imageshack.us/img442/8176/iexz2.jpg firefox:http://img361.imageshack.us/img361/5503/firefoxqc0.jpg And this is how it looks in Opera 9.10:http://img442.imageshack.us/img442/5125/operauw7.jpg The buttons signout, new contact and contact list are shifted to the low. I use this code on every page do display the header with the buttons ( the red part is the div with the buttons in it. Code:
<body>
<div class="containingTitles">
<div class="titleNavDiv">
<b>Hello, stefan.</b>
</div>
<div class="titleContentDiv">
<form action="search_contact.php" name="search" id="search" method="get">
<div style="float: left; width: 35%; margin: 0%; padding: 0%;">
<input type="text" style="width: 50%" name="sq" value="" id="sq">
<input type="submit" name="s" value="Search" id="s">
</div>
</form>
<form name="new_contact" id="new_contact" method="get" action="new_contact.php">
<div style="float: left; width: 22%; margin: 0%; padding: 0%; text-align: right;">
<input type="submit" name="nc" value="New Contact" id="nc">
</div>
</form>
<form name="contact_list" id="contact_list" method="get" action="contact_list.php">
<div style="float: left; width: 22%; margin: 0%; padding: 0%;">
<input type="submit" name="cl" value="Contact List" id="cl">
</div>
</form>
<form name="logout" id="logout" method="get" action="logout.php">
<div style="float: left; width: 20%; margin: 0%; padding: 0%; text-align: right;">
<input type="submit" name="lo" id="lo" value="Sign out">
</div>
</form>
</div>
</div>
<div class="navigationDiv">
<div class="unselectedContact"><a href="contact_info.php?contact_id=102">Username1</a></div>
<div class="unselectedContact"><a href="contact_info.php?contact_id=102">Username2</a></div>
<div class="selectedContact"><a href="contact_info.php?contact_id=102">Username3</a></div>
etc.
</div>
<div class="contentDiv">
----- contents of the page -----
</div>
</div>
And belowis the css code i use to float the divs into position. And here you can see the division of the pages and which class belongs to which div: http://img353.imageshack.us/img353/1503/layoutai3.jpg css Code: Original - css Code body{ margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; background: url(background.jpg) 22% 0; } .containingTitles{ float: left; width: 100%; margin: 0%; padding: 0%; background-color: #4D3D4D; color: white; overflow: hidden; } .titleNavDiv{ float: left; width: 20%; margin: 0%; padding-left: 2%; padding-right: 0%; padding-top: 1%; padding-bottom: 1%; overflow: hidden; } .titleContentDiv{ float: left; width: 77%; margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 1%; padding-bottom: 1%; overflow: hidden; } .navigationDiv{ float: left; width: 22%; margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; overflow: hidden; color: #FFFFFF; background-color: #4D3D4D; } .contentDiv{ float: left; width: 76%; margin: 0; padding-left: 2%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; overflow: hidden; color: #000000; background-color: #BFACBF; }
hope you can tell me why this happens. Thanks in advance. Hello, This one doesn't look good on FF 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#layer {
position:relative;
font-size:10px;
top:3px;
width:100%;
}
#layer ul {
float:left;
list-style-type:none;
height:12px
}
#layer li {
display:inline;
height:12px
}
#layer a {
text-decoration:none;
border:1px 1px solid #990000;
color:#990000;
background-color:#CCCCCC;
padding:20px;
height:12px
}
</style>
</head>
<body>
<div id="layer"><ul><li><a href="#">sample link</a></li></ul></div>
</body>
</html>
I've mucked up my css a bit. Works great in IE but not in FireFox. Submenus are not under their main menu item. and I can't seem to get it centered. Here is the site. Causeway Lighitng And here is the css (it the nav2 portion that controls the top menu) Code: #nav, #nav ul {
margin: auto; /* centres the nav */
padding: 0;
list-style: none; /* removes the bullets */
width: 100%;
}
#nav2, #nav2 ul {
margin: auto; /* centres the nav */
padding: 0;
list-style: none; /* removes the bullets */
width: 135px;
}
#nav li, #nav {
margin:0;
padding:0;
}
#nav2 li, #nav2 {
margin:auto;
padding:0;
}
#nav ul li {
position: relative;
width:130px;
line-height:14px;
padding:0;
margin:0;
}
#nav li ul {
position: absolute;
margin-left:134px;
margin-top:-24px;
display: none;
}
#nav li ul li {
position:relative;
float:none; /* stops the submenus from being horizontal */
}
/* Styles for Menu Items */
#nav li a {
display: block;
text-decoration: none; /* removes the underline */
color: #777;
background: #fff; /* necessary to fix an IE6 Bug */
padding: 0px;
border: 1px solid #ccc;
}
#nav2 li a {
display: block;
text-decoration: none;
/* removes the underline */
color: #777;
background: #FFCC00;
/* necessary to fix an IE6 Bug */
padding: 0px;
border: 1px solid #ccc;
text-align : center;
}
/* Fix IE. Hide from IE Mac \*/
* html #nav li, * html #nav2 li { float: left; height: 1%; }
* html #nav li a, * html #nav2 li a {
height: 1%;
margin-left : auto;
}
/* End */
#nav li a:hover, #nav2 li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
#nav li ul li a, #nav2 li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
#nav li:hover ul, #nav li.sfhover ul,
#nav2 li:hover ul, #nav2 li.sfhover ul { display: block; } /* The magic */
#nav2, #nav2 ul {
width: 100%;
}
#nav2 li {
float:left; /* makes the main nav horizontal */
width:80px; /* Width of Menu Items */
margin:0;
}
#nav2 li ul {
position: absolute; /* positions and sets width of submenus */
display: none;
float:left;
margin:0;
}
#nav2 li ul li {
position:relative;
float:none; /* stops the submenus from being horizontal */
}
/* Styles for Menu Items */
|
|||||||