|
CSS - Opinions Wanted On Some Basic Css Questions
I'm one of those people who has relied heavily on using tables to layout my pages in the past, but I've been in the process of redoing everything to use CSS instead...and for the most part I've been able to, but there are a few things that I'm not sure about. I also wonder if in some of these cases I'm trying to re-invent the wheel, or something like that
1. I have a few pages that I used tables to line up elements in what I guess would qualify as the same type of thing as 'tabular data' which is what I believe is what is considered still good practice to use tables for. Example: Name|Age|Qualifications| Bob|25|BA in Marketing, the University of Arizona...etc Sue|30|Masters in English Lit, the University of Michigan...etc etc, etc, etc.... So in this case, I could use CSS to do this, but after trying, it just doesn't seem to flow correctly. Now initially I was having a problem because apparently, setting the table width to 100% was spanning the entire width of the page even though I only wanted it to be in the middle column, so after some research, I discovered that setting the width to anything less than 100% (I use 99%) solved the problem. Am I right? Or am I just being naive? 2. Although I used style sheets with my pages already, there were many times when say I just wanted one little line to say be 'bold' so I use the <b></b> tags. Is mixing those tags with CSS a bad idea? Am I better off just making a class, say, '.bold' in my css file? Is there a danger of having an inline element have too many classes? ie <span class="bold center class1 class5 class9.....'>? 3. Is there such a thing as having too big of an external css file? I find myself trying to locate the same font style etc, that I've used for something else on another page, but finding the exact color, style, size etc, is becoming difficult and I find myself constantly adding new classes....Is this a bad thing? 4. When it comes to font sizes, should I stick to using just ONE way of measuring? i.e. using ONLY %, or ONLY px, or ONLY em? What are the dangers of mixing them together? Which way do you find is the most consistent for you? Similar TutorialsHi all, What does this mean? H1 A:link { color:#fff } - or - .sectionhead H2 { font-size: 12px; } I'm asking specifically about the space between the name of the selector and the HTML tag reference. What function does that space have? If it were a comma I would know, but I don't know what a space means. Sorry if totally dumb question. Also, I keep seeing three-character hex values (e.g., #fff, #0cd, #078, etc). How are they used, what do they mean? I would have thought it meant to repeat the three characters to make the six (eg, #ffffff, #0cd0cd, #078078) but that appears not to be the case. I've been looking around w3schools.org to find answers to questions like these, but no luck. Any suggestions? Thanks to anybody who takes the time to answer! Laura S. Hi there, I recently started up an internship at a music magazine and they asked me to do a simple side site to present some information. I left it pretty simple for most of it but wanted to challenge myself a bit with some CSS for one of the pages. The page in question is the 05 Panel Page It looked better in Firefox earlier, but I recently made some changes according to the site editors which made it look a lot less clean in Firefox and damn ugly in IE. I would like to have that introductory block of text be where it is with the panel information on the left side and the photos and text wrapping where appropriate. I've been fiddling with padding a lot, but haven't made too much headway. I know that there's a lot going on to be helped out with specific parts (although I wouldn't mind if anyone could). But if you had any topics that I should concentrate looking up information on, then that would be just as helpful. Edit: I was also having problems giving the entire side enough padding to stay away from the edges of the browser window. However I ran into problems on the right side of the page: some of the text would go too far past the headers. And if that didnt happen, extra space in general appears on that right side. Designers Required My business partner and I are looking for designers with extensive CSS experience to work on a free-lance basis. You must have provable experience of CSS/XHTML and have excellent knowledge of accessability issues. Experience of table-less design is also a must. The work is on-going, this isn't a one off project so even if you're not available at this time, please drop me a line if you'd be interested in being contacted for future projects. I'd be grateful if you could provide as much of the following information as possible : - Name - Location - Portfolio website (or examples of your work if you dont have a portfolio) - Hourly Rate - Number of hours available per week - Email addresses for any clients that are willing to be contacted for a reference. You can reach me on URL . We are based in the UK. thanks dave http://www.cyclomedia.co.uk/?24 took a couple of days to debug for major browsers, the horizontal version doesnt work in ie (even if you fully merge the CSS). if anyone knows what the problem is there then it'd be good to know. what is interesting is that if you look at all the sub menus in IE and then switch to the horiztontal version they work correctly... i think it's something to do with trying to place an absolutely positioned element outside of a float that is also position:relative! (overflow: visible doesnt help BTW) the source is overly spread out and commented, eventually i'll produce a more compact source for both versions. note: the html is the same for the horizontal and vertical versions! one day i'll update my site to be more blog like, allowing comments for each article... one day! edit: atricle/article edit: fixed the IE bug, needed another work around for the general lack of support for the child selector, basically the root menu items need to be floats, but everything below that doesnt. Hi, I have three <div> Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="container" style="width:500px;height:700px;background-color:green;">
<div id="one" style="float:left;width:100px;background-color:#ff9900; ">one<br>one<br>one<br>one<br>one<br>one<br>one<br></div>
<div id="three" style="float:right;width:100px;background-color:red;">three </div>
<div id="two" style="float:left;width:70%;background-color:#ff9988;">two jdfk hnldncf ddhf sd ohdnfc kbldhcv ohsvnskd hvjnsdhv hviopsdhv kbhopvd v onksdnv oln;sdmnv m;mv mnml;vm vm;klf kdfl'gl;v 'fg 'kdf'kvb'l ;'lfk</div>
</div>
</BODY>
</HTML>
I noticed when I increased the % width of my <div two> it goes below my <div three> I was under the impression it should just stay at the same level and text should wrap around my div three? But I guess that's not the case. Am I doing the something wrong or is this the expected behavior? Does anyone know much about IE 7? In particular does it conform to the WWW consortium's box model (margins and padding). This would reduce a whole lot of extra CCS elements and headaches. Does is finally support transparent PNG files? Support for PNG will change the look of the web dramatically! I never usually code my layouts and test for validation (which after this I see they would fail horribly), even though it displays right theres so many mistakes. I finally got my layout to pass validation in HTML 4.1, but some things went wrong. First heres the links: (and yes this does involve CSS): http://65.26.50.204/ec/index.php - My Layout (View Source) http://65.26.50.204/ec/stylesheet.css - The CSS One thing I was told to do is take out height="100%" but it only told me to take it out in some places and not otheres... strange. Anyways how do I get it to stretch 100% with CSS? Second question, is it a bad practice to use a lot of css classes, I mean like if I have a CSS class used only once is that bad? Does it even matter how many I use?... it wont delay page loading time will it? Third question, I was told to remove the cellspacing tag in most of the places, is that not used anymore or what? Hi all, I'm working on a page layout, and would like some advice. I have two questions. First, here is my code so far: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="Description" content="A Milwaukee Based Industrial Cleaning Company that specializes in Janitorial Programs, Green Cleaning, Specilaty Cleaning, One-Time Cleaning, Post-Construction Cleaning, Carpet Cleaning, Fabric Upholstery Care Floor Mainenance, Concrete Floor Coatings, Snow Removal, and Lawn Mainteneance"> <title>CSS Template</title> <link rel="stylesheet" type="text/css" href="../css/gibb.css" > </head> <body > <div id="containerDiv" style="width: 100%; height: 100%"> <div id="mastDiv" style="width: 100%; background-color: teal; height: 150px;"><p>tasd</p></div> <div id="contentDiv" style="width: 100%; height: 100%; background-color: red;"> <div id="leftArticleDiv" style="float: left; width: 90px; background-color: red;"> <p> Left Content <br /><br /> </p> </div> <div id="navDiv" style="width: 100%; height: 100px; background-color: gray; margin-left: 90px">Nav Content</div> <div id="mainDiv" style="background-color: blue; height: 100% width: 100%; margin-left: 90px;"> <p> Center Content<br /> longer <p> Center Content<br /> longer <p> Center Content<br /> longer <p> Center Content<br /> longer <p> Center Content<br /> longer </p> </div> <div id="footer" style="clear: left; height: 0px; visibility: hidden;"></div> </div> </div> </body> </html> This looks exactly how I would like it too in FF. My first question is, how can I fix it for IE. Specifically, navDiv and mainDiv appear below my leftArticleDiv, or they appear after it in IE. In FF they float right around the leftArticleDiv, but not IE. I've read many bug reports at ALA, but they don't seem to fit. Any ideas? Also, as you can see, my leftArticleDiv does not grow. That is, if it were to be longer than mainDiv, the results would be disatserous. Is ther anyway to have mainDiv and leftNavDiv always equall each other in height? So that whichever one were longer, the other one would be the same height? Thanks for your time. CJB i have three relatively simple questions -- i want to put thumbnails on my page inside the main container-- (2 column layout) i have used some code from REAL WORLD its close but not quite there-- also the thumb sizes will be different - they are stamps- like postage stamps so some horizontal and some square -- just need a tweak here also i have a gray line running thru the site--- not sure where it is coming from but i think it might be from the link container on the sidebar-- and speaking of side bar list container-- i would like it to be centered instead of up against right side-- i played with margins and padding - i am still wading thru that concept-- but coudlnt get anything to work--- so i SURE WOULD appreciate help on these three items -- many thanks in advance-- here is link to page THE PAGE here is link to CSS CSS I know how to center an element horizontally, but why does it not work with vertical centering? Horizontal (working) - Code:
element.foo {
margin: auto;
width: 0;
}
Vertical (not working) - Code:
element.fuu {
margin: auto;
height: 0; /* no values work */
}
I've seen an entire layout vertically centered by containing the entire layout in a single-cell table and applying the "valign" attribute to the cell, but I'd rather not use tables. I've also checked out the W3C's "Centering Vertically" example, but it relies on the author knowing the height of the content. Since height doesn't work with %, I can't use that. Does somebody know of a way to center vertically without using absolute positioning (relative is fine) or tables, and without knowing the height of the content? I'd rather not use trial and error, but this does seem like a question that is virtually impossible to answer 100% affirmatively (about as sure as 100% height works ). I have the following code: Code: <div class="Outer"> <div class="Inner"> Text one </div> </div> <div class="Outer"> <div class="Inner"> Text two </div> </div> I have the following CSS Code:
.Outer{
width:150px;
float:left;
}
.Inner{
Margin:10px:
}
I would like to set the Inner div in first instance of Outer to have a margin-left of 0px. I have tried the following Code: .Outer:first-child .Inner{
margin-left:0px;
}
This works in Chrome but not in IE, but it does work if I apply the style inline to the First Inner Div. Can it be done within the CSS file? So I just started a class about 4 weeks ago with CSS and I have run into a problem. Its probably a stupid mistake on my part somewhere but I can't figure it out. I have div id tags and for those id tags I have created for example: #test h2, p { font-style:italic; text-align:center; font-weight:bold; display:inline; padding: 10px; } This is because I want only the header and p content in this specific div tag to have these properties. But for some reason its spilling out onto the rest of my p and h2 tags. Why is this happening and how do I stop it so that I can control which h and p tags have specific properties? Hope someone can help!! Thanks Hi, I'm designing a web site using a full CSS layout with XHTML. It's quite challenging as I'm used to complex table designs. My design is located at http://www.definitedigital.com/vida/index.html And the style sheet at http://www.definitedigital.com/vida/style.css There's some things that look different across browsers, and I'm not sure if it's some sort of bug or my mistake. For example, 1. On Firefox the 'Punta Del Este Vida Beach House' link image is sometimes detected and sometimes unclickable. 2. There's much more vertical spacing between the divs (logo, photo, menu) in Firefox than in IE. I'd really appreciate if someone could take a look at my CSS, as I don't really know whether I'm doing this right or not. Thanks, Ralph Id really like to use css for page layout. Im using asp.net and I need to setup a template that all my pages use. Id rather not use tables, but ive had trouble using css in the past. I need a layout that allows for a header certered section (used to do it with a nested, centered table) center section should have shaded edges to simulate a printed page footer menubar below the header I also need the content area to expand and not go bezerk when i add data in a table or a large image. Can anyone point me to an example that does this ? I am working on css for a project of mine and I am having a few minor problems with the position and widths of my divs. If I have a parent container and divs within the parent container do the child containers not inherit the width and height of the parent containers? For example here is my css thus far: Code:
/* CSS Document */
h1 {
font-family: Geneva, Arial, sans-serif;
font-size: 20px;
color:#000000;
}
h2{
font-family: Geneva, Arial, sans-serif;
font-size: 16px;
color:#000000;
}
h4{
font-family: Geneva, Arial, sans-serif;
font-size: 12px;
color:#000000;
}
body {
margin: 0;
border: 0;
background: #ededed;
}
/*============================ Begin Layout Structure ============================*/
#wrapper {
width: 1024px;
min-height: 768px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 5px, auto;
background: #ffffff;
}
#accountselector {
position: relative;
height: 15px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}
#headerwrapper {
position: relative;
padding-top: 5px;
width: 100%;
height: 200px;
}
#headerwrapper-left {
position: relative;
width: 65%
height: 100%;
}
#headerwrapper-left-logo {
position: relative;
height: 75px;
width: 100%;
background: blue;
}
#headerwrapper-left-navigation {
position: relative
height: 15px;
width: 100%;
background: red;
}
#headerwrapper-left-banner {
position: relative;
height: 110px;
width: 100%;
}
#headerwrapper-right {
position: relative;
width: 35%;
height: 100%;
}
#headerwrapper-right-heading {
position: relative;
width: 100%;
height: 15px;
}
#headerwrapper-right-customer{
position: relative;
width: 100%;
height: 185px;
}
#bodywrapper {
position: relative;
min-height: 478px;
width: 100%;
padding-top: 10px;
}
#bodywrapper-leftwrapper {
position: relative;
height: 100%;
width: 20%;
}
#bodywrapper-leftwrapper-subnav {
position: relative;
height: 50%;
width: 100%;
}
#bodywrapper-leftwrapper-news {
position: relative;
height: 50%;
width: 100%;
}
#bodywrapper-rightwrapper {
position: relative;
height:100%;
width: 80%;
}
#bodywrapper-rightwrapper-body {
position: relative;
height: 100%;
width: 100%;
}
My HTML is as follows: Code: <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test5.css" /> </head> <body> <div id= "wrapper"> <div id= "accountselector">Home Business</div> <div id= "headerwrapper"> <div id="headerwrapper-left"> <div id= "headerwrapper-left-logo">US Sonet Logo</div> <div id= "headerwrapper-left-navigation">Link1 Link2 Link3</div> <div id= "headerwrapper-left-banner">US Sonet Banner</div> </div> <div id="headerwrapper-right"> <div id="headerwrapper-right-heading">Manage Account</div> <div id="headerwrapper-right-customer">Account Control Center</div> </div> </div> <div id="bodywrapper"> <div id="bodywrapper-leftwrapper"> <div id="bodywrapper-leftwrapper-subnav">Link1 Link2 Link3</div> <div id="bodywrapper-leftwrapper-news" >News</div> </div> <div id="bodywrapper-rightwrapper"> <div id="bodywrapper-rightwrapper-body"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p></div> </div> </div> </div> </body> </html> Why aren't the children divs inheriting their width from the parents or do they not function this way? After using tables for most of my web development life (which isn't very long) I'm diving into using divs and css to try and learn that art form. Obviously I'm running into issues that I could use some help on. I'm trying to layout a login area and I would like some direction. Here's what I have currently: Code: <div id="headerSignin">
<asp:MultiView ID="mvSignin" runat="server" ActiveViewIndex="0">
<asp:View ID="vwNotSignedIn" runat="server">
<div class="signInTitle">
Username:</div>
<div class="signInTextbox">
<asp:TextBox ID="txtUsername" runat="server" Width="200px" /></div>
<div class="signInTitle">
Password:</div>
<div class="signInTextbox">
<asp:TextBox ID="txtPassword" runat="server" Width="200px" TextMode="Password" /></div>
</asp:View>
<asp:View ID="vwSignedIn" runat="server">
<div>
</div>
</asp:View>
</asp:MultiView>
</div>
And the css for those tags: Code: #container #header
{
color: Blue;
width: 1000px;
height: 100px;
position: relative;
}
#header #headerLogo
{
width: 600px;
position: relative;
float: left;
}
#header #headerSignin
{
background: #A9A9A9;
width: 400px;
position: relative;
float: right;
}
.signInTitle
{
width: 130px;
text-align: left;
vertical-align: middle;
float: left;
}
.signInTextbox
{
width: 200px;
float: right;
}
With what I currently have stated there, I get the two columns evenly filling 50% of the headerSignin div. And the 'Username:' and 'Password' text are sqished at the top and the textboxes are squished together. (The colors are there just so I differntiate. ) I would like obviously for the Username and password to be next to the textboxes with a width of 130px and the textboxes be 200px with some padding in between them to seperate them. If any confusion I apologize. I'm new at divs... I have 3 problems with the CSS I'm attempting (been a very long time). You can see my crud in progress at .shelleysjewelry.com/uploads/newsite/shelleys/index dot html (and, yes, it is pure crud -- besides the god-awful CSS & JS, none of the links work). I've been banging my head on these... Problem the First: I have a tricky absolute positioning situation that uses a combination of sliding dropdown menus and Javascript, like so: var h = document.getElementById(id + '-ddheader'); var c = document.getElementById(id + '-ddcontent'); var dimensions = getPosition(h); c.style.left = dimensions[0]; c.style.top = dimensions[1] + h.offsetHeight + 5; c.style.display = 'block'; "c" represents the slideout submenu and is absolutely positioned. Both values are being set to something that is expected (e.g., dimensions[0] is not zero). However, while it works in IE, it doesn't work in Firefox -- the top is being respected, but the left isn't. I understand I have a lot of margin/padding that will mess with absolute positioning, but AFAIK, that should only affect a few pixels, not render it unusable. Anyone have insight why? Problem the Second: I love the overflow property. The tabs are wrapping around. However, I'd like them to not overlap, without explicitly breaking them into two rows. I don't suppose there's any way to do that? Problem the Third: In IE, to run the site, I have to "allow ActiveX Content". There is a Javascript function that runs on startup to calculate minimum div heights and other innoconous methods. How do I get rid of that warning? Any help much appreciated... ) First: I have seen: p.classname and just .classname What is the difference between the two if the latter is applied to a paragraph? Also: I have seen classes stack on top of each other like: <p class ="classname" class ="classname2">text</p> <p class = "classname" id = "idname">text</p> So is there a way to use classes with other classes id with other ids or classes and ids together like the above? Hi, I've been using nested layers in Dreamweaver and wanted to know if it's possible to hide all nested layers of a given layer (say A) by applying a behavior to hide just the layer A to an object? Or is it that in order to hide the nested layers also, I'll need to apply behaviors for each nested layer separately? Also, is there a way to load the content of a layer (such as swf movies, images and other stuff) only when its property is changed to visible (by default the layer is hidden). Thanks, Jayant |
|||||||