|
CSS - The Best Css Book? Covering Beginner All The Way To Advanced?
Hi all,
Does anyone have any good suggestions for a CSS book? I'd like to buy an all in one, that will teach me CSS. Thanks for any help Similar TutorialsThus far I've done all of the CSS courses on lynda.com and have read css Zen Design and Transcending CSS, both GREAT books. What would be a good "next step book" into advanced CSS coding or have I done it all? The page: http://new.midnighttempest.com/ As you can see, the content div is covering the footer, it sits just below the menu, whereas i want it to sit just below the content the php file: PHP Code: <?php define('IN_PHPBB', true); $phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './'; $phpEx = substr(strrchr(__FILE__, '.'), 1); include($phpbb_root_path . 'common.' . $phpEx); include($phpbb_root_path . 'includes/functions_display.' . $phpEx); include($phpbb_root_path . 'includes/bbcode.' . $phpEx); // Start session management $user->session_begin(); $auth->acl($user->data); $user->setup(); page_header('Homepage'); $template->set_filenames( array( 'body' => 'main.html', ) ); $forumid = 14; $sql_array = array( 'SELECT' => '*', 'FROM' => array(TOPICS_TABLE => 't'), 'LEFT_JOIN' => array( array( 'FROM' => array(POSTS_TABLE => 'p'), 'ON' => 't.topic_first_post_id = p.post_id' ) ), 'WHERE' => 't.forum_id = ' . $forumid . ' AND MONTH(FROM_UNIXTIME(post_time)) = MONTH(CURDATE())', 'GROUP_BY' => 't.topic_id', 'ORDER_BY' => 'post_time DESC' ); $sql = $db->sql_build_query('SELECT', $sql_array); $result = $db->sql_query($sql); while($row = $db->sql_fetchrow($result)) { $url = "<a href='".$phpbb_root_path."viewtopic.php?f=".$forumid."&t=".$row['topic_id']."'>".$row['post_subject']."</a>"; $poster = "<a href='".$phpbb_root_path."memberlist.php?mode=viewprofile&u=".$row['topic_poster']."'>".$row['topic_first_poster_name']."</a>"; $date = $user->format_date($row['post_time'], false, false) . "</strong>"; $text = generate_text_for_display(smiley_text($row['post_text']), $row['bbcode_uid'], $row['bbcode_bitfield'], $row['enable_bbcode'] = $row['enable_smilies'] = $row['enable_magic_url'] = true); $avatar = '<img src="http://new.midnighttempest.com/download/file.php?avatar=2_1260394092.png" />';; $updates[] = '<table width="100%" border="0"> <tr> <td colspan="2"><strong>Title</strong>:'.$url.'</td> </tr> <tr> <td width="10%">'.$avatar.'</td> <td width="90%">'.$text.'</td> </tr> <tr> <td colspan="2"><strong>Posted On:</strong> '.$date.' <strong>by</strong> '.$poster.'</td> </tr> <tr> <td colspan="2"><hr/></td> </tr> </table>'; } $db->sql_freeresult($result); $template->assign_vars( array( 'UPDATES' => implode('', $updates), 'FORUMID' => $forumid ) ); page_footer(); ?> main.html Code: <!-- INCLUDE overall_header.html -->
<div class="forabg" id="main">
<div class="inner">
<span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<span style="font-size: small">Updates</span>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row" style="background: #CBA2DC; padding-left: 5px; padding-bottom:5px; padding-right:5px; padding-top:5px;">
<p> </p>
{UPDATES}
<p><a href="/viewforum.php?f={FORUMID}">View all previous updates</a> </p>
</li>
</ul>
<span class="corners-bottom"><span></span></span>
</div>
</div>
<div class="forabg" id="menu">
<div class="inner">
<span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<span style="font-size: small">Menu</span>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row" style="background: #CBA2DC; padding-left: 5px; padding-bottom:5px; padding-right:5px; padding-top:5px;">
<!-- INCLUDE mt_menu.html -->
</li>
</ul>
<span class="corners-bottom"><span></span></span>
</div>
</div>
<!-- INCLUDE overall_footer.html -->
mt_menu Code: <p><strong>Info</strong>
<br />
<a href="/">Home</a><br />
About / Rules
<br />
Join Form </p>
<p><strong>Members</strong>
<br />
Memberlist
<br />
Card List
<br />
Games
<br />
Forum
<br />
Donate
<br />
Login </p>
<p><strong>Other</strong>
<br />
Affiliates
<br />
Link to us
<br />
Randomizer
<br />
Staff Pay
<br />
Credits
<br />
Contact Us</p>
css Code: /* Midnight Tempest Layout */
#main {
position:absolute;
width:70%;
overflow:visible;
z-index:1;
}
#menu {
float:right;
width:20%;
overflow:visible;
z-index:2;
}
Dear all, I am willing to develop a div tag, which will cover the entire body tag. The code I am using is the following: Code: <div id="warningLayer" style="position:absolute; width:100%; height:100%; margin:0; padding:0; background-color:#000000; opacity: 0.5; z-index:999999999; display:block; overflow:visible;"> </div> Unfortunately, the HTML page covers more that the browser window, hence when the visitor scrolls down the page, the body remains uncovered. How could I fix this issue? Thank you in advance. IE is not very friendly when it comes to iframes. I wanted to know if there is a workaround for iframes on internet explorer. I've been searching high and low, and tried every idea I can think of to fix this. It's really hard to explain what it is I'm looking for, but I'm going to try to be as clear as possible. I've been working on my blog: http://tkthebadomen.blogspot.com/ And I almost got it to the point I want, except I've hit a brick wall with this one. I have the background fixed, and a layer of buildings that scrolls with the page. The problem is filling the area below the scrollable buildings with black. I'm not going to go into detail about all the things I've tried. But if I make a section black, it only fills the screen once, so if I scroll, the next page shows through; and then when I look at just a single post, it makes the bottom of the page go down past the footer. So my question is: Is there a way to fill the background with a color, from a certain point on the page to the end of the content? Here's the css I currently have for the front scrolling sections: Code: div.front {
background-image:url(http://www.tksheppard.com/blog/front.png);
background-repeat: no-repeat;
background-attachment: scroll;
position:absolute;
width:1284px;
height:100%;
top: 500px;
left: 0px;
bottom: 0px;
}
div.middle {
background-color:#000000;
color:#000000;
position:absolute;
overflow:hidden;
width:1284px;
height:100%;
top: 150%;
left:0px;
bottom:0px;
}
If you need anymore code posted, let me know. Hey guys. I have a basic div and want an image to show up on the top of the div only. Here it is. Code:
#container #news {
top:3px;
width:260px;
height:194px;
background-color:#eeeee2;
float:left;
margin-bottom:4px;
background: url(/images/section_top.gif) no-repeat top left;
}
The image spans the width of the div and is only about 20 pixels tall. so it should show up, but the rest of the div should display, obviously. The image does indeed show up at the top. However, the rest of the div gets covered in white for some reason. Anybody know what's up? Thanks in advance. I made my site buttons so that there's some transparent areas so when you hover, only the transparent areas are colored by using the css's link background color properties, yet the background only reaches half way so the link background doesn't cover the whole image... this is the first time it has happened to me. Any suggestions on an alternate way to do this? hi, i have created a simple css layout and its displaying correctly in google chrome, firefox, IE 6 and IE 7. However, IE 8 is covering the 1px border on the left of the containing div section with the image contained within the logo. I tried adding a 1px padding and margin which only served to push the image over the right hand side border in IE 8. Does anyone know whats causing this issue? Here is my code below. Thanks in advance. First, the HTML code:- 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' />
<meta http-equiv='Content-Language' content='en-us' />
<link rel='stylesheet' type='text/css' href='css/default.css' />
</head>
<body>
<div id='page'>
<div id='logo'>
<img src='gfx/siteLogo.jpg' alt='Our Website Logo' />
</div>
</div>
</body>
</html>
Now the css file:- Code:
/* page structure definitions */
html
{
font-size: 100%;
}
body
{
margin: 0;
padding: 0;
/* 20px */
padding-top: 1.25em;
padding-bottom: 1.25em;
text-align: center;
font-family: Verdana, sans-serif;
background-color: white;
/* 16px */
font-size: 1em;
}
#page
{
margin: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
/* 900px */
width: 56.25em;
/* 1px */
border: solid black 0.0625em;
background-color: #ABBAD9;
}
#logo
{
margin: 0;
padding: 0;
/* 900px */
width: 56.25em;
/* 150px */
height: 9.375em;
}
#logo img
{
margin: 0;
padding: 0;
/* 900px */
width: 56.25em;
/* 150px */
height: 9.375em;
}
The image in the logo is 900px * 150px. Hi all, a few quick q's: 1. What is best way to set-up a style-sheet for NN4 CSS? I am using @import, and I want to serve-up a NN4 CSS with link a "link rel"... 2. Can I reley upon Dreamweaver's CSS syntax checking to create my alternative/NN4 CSS? (i.e. DW will tell you if a particular attribute or style is or is-not supported by a certain browser.) 3. What is the best/fastest/your technique for building alternative style sheets (by alternative, I mean a style-sheet to feed to browsers like NN4)? 4. Should I be using the TAN hack for height also? Example: Code:
* html div { /* This is the Tan hack */
height: 130px;
hei\ght: 100px; }
/* the backslash cannot appear before the letters a to f, and A to F, and numerals 0 to 9 since doing so will turn those letters or numerals into hexadecimal numbers. */
5. (Last q) I am using an image replacement technique for my navigation (using one background sprite to create off/over/active states: INKNOISE)... It works great, except this: In Mozilla FF on PC when page loads, the background images do not ussually load... Anyone got a fix for that? Because I can't seem to find a fix, my best answer would be to create a PHP sniffer and force a page refresh. Thanks in advance! Cheers! Micky Hi, Here is my problem: I have a horizontal css menu using a list. It is embedded within a table <td> element. The menu is floating to the left as I suppose is inteneded by the css code, but I want the whole list to be centered with respect to the <td> element. I put <td align=center> but that does not center the whole list. It is still flushed against the left side of the <td> element. Also, I want the entire list to cover the entire width of the <table>. How do I accomplish these tasks? I have searched on google without any success. thank you for your help in advance. Here is the CSS code and Html code for your reference: CSS: Code:
<style type="text/css">
.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 80px; /*Width of top level menu link items*/
#width: 95px;
_width: 95px;
padding: 2px 8px;
border: 0px solid #202020;
border-left-width: 0;
border-right-width: 0;
text-decoration: none;
/*background: url(http://asc2009.dreamhosters.com/menubg.gif) center center repeat-x;*/
color: white;
font: bold 13px Tahoma;
}
.horizontalcssmenu ul li a:visited{
color:white;
#color:white;
/*background: url(menubgover.gif) center center repeat-x;*/
}
.horizontalcssmenu ul li a:hover{
background: yellow;
color: blue;
#color: blue;
/*background: url(menubgover.gif) center center repeat-x;*/
}
HTML Code: Code: <table width="900" height="20" border="0" cellpadding="0" cellspacing="0" style="border-bottom:1px solid black;"> <tr> <td background="menubg.jpg" align="center"> <div class="horizontalcssmenu" align="center"> <ul> <li><a href="default.htm">Home</a></li> <li style="border-left:1px solid black"><a href="default.htm">About Us</a></li> <li style="border-left:1px solid black"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Products</a></li> <li style="border-left:1px solid black"><a href="default.htm">Downloads</a></li> <li style="border-left:1px solid black"><a href="default.htm">Service</a></li> <li style="border-left:1px solid black"><a href="default.htm">Requests</a></li> <li style="border-left:1px solid black"><a href="default.htm">References</a></li> <li style="border-left:1px solid black"><a href="default.htm">What's New</a></li> <li style="border-left:1px solid black"><a href="default.htm">Contact Us</a></li> </ul> </div> </td> </tr> </table> Please visit my site where the menu is currently hosted. the url is http://asc2009.dreamhosters.com You will see my problem. You will notice when you hover your mouse over the last item in the menu, you will notice that the hover color does not go the whole way to the end of the td element. the list is flush to the left of the td element I need it to cover the whole width of the table. any help would be very much appreciated. Can anyone recommend a reference book. I have the Jeffrey Zelman book but would like something that covers a bit more detail. Is the Eric Meyer on CSS any good? cheers, steven. I have some expereince with Style Sheets but would like a more in depth knowledge of CSS. Do any of you have any good book recommendations that cover CSS? I've been messing around with CSS for a little over a month now. I've seen a lot of sites created with CSS and I'm convinced it is the correct way to design web sites. Although there is a vast amount of resources out on the web, I've become somewhat frustrated with trying to implement CSS. Mainly, it seems that getting CSS to work in both Firefox and IE requires you to sell your soul to Lucifer and devote your life to the black arts. So, I want to just stop trying to write pages and get a good book on CSS. There are tons of them out there which is making it hard for me to decide. I usually go with the O'Reilly book's but the CSS one has bad reviews on Amazon. I'm just looking for some input on what books you guys would suggest. Thanks in advance. I've been designing web pages for 7 years now, using layout tables. I realize that it's time to let go with them now. Do you recommend any good book about this? I've red Ben Henick's article on Alistapart (http://alistapart.com/articles/12lessonsCSSandstandards). Do you know if he has written any books about the topic too? Ok here is my layout http://codingcore.com/template.html there are no tables at all its all css floats but the only problem is that the left and right menus go over the copyright bar on the bottom the middle box doesnt the copyright stays 45px from the middle box but i want it to be under all the boxs because right now the menus go over the copyright i want its copyright to be below the boxs on the right and left ive tried many things but I cant seem to get it to work i dont want to use tables ither Thanks Matt Hi everyone. I'm looking for some help rendering a list using css. Basically I have a list in this format: Code: <ul>
<li>shirts</li>
<li>jackets
<ul>
<li>casual jackets</li>
<li>formal jackets</li>
</ul>
</li>
<li>suits</li>
</ul>
And I would like to render it something like: Code: shirts jackets > casual jackets formal jackets suits All the text needs to be floated left so it will wrap to the next line. I'm able to float the top level list items correctly i.e. "shirts jackets suits" using: Code: <ul id="menu">
<li>shirts</li>
<li>jackets</li>
<li>suits</li>
</ul>
#menu, #menu ul {
list-style:none;
}
#menu li {
float: left;
width:5em;
}
the problem I have is getting the nested lists to appear alongside the parent items instead of below. When I add the nested lists I see something like: Code: shirts jackets suits
casual jackets
formal jackets
Maybe this just isn't possible but if anyone could help me I'd sure appreciate it! Thanks! Toby I want to style something based on what comes after it. If a div is the last to have the class "combinedyes" I want to make the text red for example. I've experimented with: #EditMedHistoryDisplay div.cmMed.combinedyes + div.cmMed.combinedno But that styles the combinedno element... Any ideas? Code: <div id="EditMedHistoryDisplay"> <div class="cmMed odd combinedyes">Testosterone 2 mg <span class="medicationDelMethod">Cream-Transdermal</span> <div class="cmNotes ecmInstructions" id="cmnotes_21158" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div> </div> <div class="cmMed even combinedyes">DHEA 10 mg <span class="medicationDelMethod"> Cream-Transdermal</span> <div class="cmNotes ecmInstructions" id="cmnotes_21194" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div> </div> <div class="cmMed even combinedyes">Test 10 mg <span class="medicationDelMethod"> Cream-Transdermal</span> <div class="cmNotes ecmInstructions" id="cmnotes_21184" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div> </div> <div class="cmMed even combinedno">Testosterone 2 mg <span class="medicationDelMethod"> Patch-Transdermal</span> <div class="cmNotes ecmInstructions" id="cmnotes_21038" title="Click to edit">It's a patch...</div> </div> </div> hi. looking for a good book to learn css, which does *not* labor ie6 hacks, since none of my readers use ie6 any longer. i have read the head first book on xhtml/css, and now looking to expand my knowledge on css to include strong fundamentals, so i can move onto more cutting-edge stuff. a friend recommended css mastery, but this book was published in feb 2006, and ie7 was released nov 2006, so i don't see how it could be considered applicable to current browsers. there are so many to choose from. again i'm looking to learn strong fundamentals, without the need to spend time learning ie6 hacks. thanks. I am trying to create a completely non-uniform layout for one of my clients using only CSS. I would like to accomplish this using only floats that are cross-browser supported. The layout is split up into 9 different panels that need to be positioned correctly. Is this achieved simply by using float and clear? I have been experimenting and have been failing. What about positioning? Would kind of positioning would I use to arrange something inside of a parent div? See attached file for layout. P.S. I know I can get this exact layout done using tables, but I would much rather do this with some "simple" CSS. |
|||||||