|
CSS - Ems Vs Px Vs % Etc.. Totally Confused!
ok
I have been reading how we shouldnt use px as they dont scale well or whatever.. but I have just tested px in my css and when I resize the size the text scales pretty much the same a with ems or %.. but what doesnt happen is if I resize the browser window itself, the text doesn't scale up or down... with any of the units? is this the standard behaviour? because what I am thinking should happen is that if I reduce the size of browser, the font size should get relatively smaller and vice versa. Similar TutorialsI am trying to create a basic template layout and am having some difficulties making it look the same in IE (version 7.0) and FF (version 3.5.3). The code is listed below and a live site is located at http://tapmeister.com/layout_test/index.html (watch out, the colors are pretty scary!). For instance, On FF, I have a blue wrapper bar on top, but IE I have a blue id=wrapper bar on bottom. On FF, my content in the yellow sidebars has a top and bottom margin, but no margin in IE. In IE, the green id=main is pushed down allowing the red id=content to show through. What I want is a header, three columns, and a footer. By having FF and IE look so different, I don't even know where to start. Can anyone help me understand why they are different, which one is "right", and how to hack the other one. Thank you, thank you, thank you. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout Test</title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
background-color: olive;
}
#wrapper
{
width: 100%;
background-color: blue;
margin: auto;
}
#main
{
margin: 0 180px;
background-color: green;
}
#content
{
background-color: red;
}
#side1
{
width:180px;
float:left;
background-color:yellow;
}
#side2
{
width: 180px;
float:right;
background-color:yellow;}
#footer
{
clear:both;
background-color:lime;
border-top: 10px solid black;
}
#header
{
background-color: purple;
}
</style>
</head>
<body id="page_bg">
<div id="wrapper">
<div id="header">My Header</div>
<div id="content">
<div id="side2">
<p>Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here.</p>
</div>
<div id="side1">
<p>Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here.</p>
</div>
<div id="main">
<p>Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff.</p>
<p><img style="margin: 5px; float: left; width: 250px;" src="lady.jpg" alt="" width="250"></p>
<p>Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff.</p>
</div>
</div>
</div>
<div id="footer">My Footer</div>
</body>
</html>
I am trying to get the logo div to sit on top of the background div with the code before....all I can get the logo to do is sit directly BELOW the header....help! please! PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>golfpeg.com</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- BODY { background-color: #ffffff; margin: 0px; padding: 0px; } #headerBg { position: relative; top: 0px; left: 0px; background-image: url(/gfx/bg_files/header_bg.gif); width: 760px; height: 102px; z-index: 1; } #logo { position: relative; top: 0px; left: 0px; background-image: url(/gfx/primary_logo.gif); width: 225px; height: 102px; z-index: 2; } --> </style> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td width="760"> <div id="headerBg"></div> <div id="logo"></div> </td> <td> </td> </tr> </table> </body> </html> I'm trying to create a (I think) simple page for an art gallery's artists. You can visit artizansc.com/dev/artists/artists.htm. I have created classes in my css for the artists' pictures (biopic), names (H2) and bio (biotext). I have also created a class called biowrapper to wrap each person's info. As you can see, the pictures are not lining up. It seems this should be simple and frankly, I'm feeling stupid. I'm new with CSS, but this shouldn't be rocket science! Can anyone please help me? I'm confused about why IE is rendering this correctly and FF is not. the main wrapper for the content isn't stretching with the image floating on the right. I know I'm missing something but I can't see what. I just started building this so there will be some styling missing but I wanted to at least get the basic elements working first. Can someone please help me see what I'm missing here? link Thanks, Brad I am very confused how best to define my style sheet for a given goal. Here is what I need to do: I need to have various styles of tables. Some whose text is centered (like the table header), some whose text is left justified. I need to be able to define link colors for each different type of table (i.e. a.link, a.active, etc). I just don't know how to proceed. It seems that I would do something like Code:
TD.centered {
text-align: center;
}
TD.left{
text-align: left;
}
But then I don't know how to define the link colors. Would I have to do something like Code:
.centered a:link {
color: #000000;
}
Isn't there a way I can create one selector that contains everything without having to have all these separate entries? Any help is vastly appreciated! Also, I am confused by the use of SPAN. Is this still used? Or is it best to specify the class in the element tag? thanks, brian This is driving me insane. What is happening here? The green <div> should be the same width as the table - and that width should be 830px. It looks like IE is stretching the table wider than it should be... but if so then why? When you consider that the table is 830px wide, the pink div is 730px, the green div is 850px, the red div is 620px and the blue div is 100px, you can see that absolutely nothing is lining up correctly. It all seems quite random. PHP Code: // containg div <div style="width:834px; padding:0; margin:0 auto; clear:both; text-align: left; float:left;"> // table <table width="830px" cols="10" rows="$rows" cellpadding="4" cellspacing="1" style="border-top:1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC;"> // pink div <div style="border: 2px solid #FF00FF; width:730px; padding: 0; margin:0;"> </div> // green div <div style="width:100%; margin:0; padding:0; border: 2px solid #00FF00;"> // red div <div style="border:2px dashed #FF0000; float:left; width:620px; margin: 0; padding: 2px 2px 2px 100px; text-align:center;"> // blue div <div style="border:2px dashed #0000FF; float:right; width:100px; text-align:right; margin: 0; padding: 2px;"> Internet Explorer: Firefox: Thanks, Hey, Ok I have a external CSS file and in their I have Code: TD { background-color:#FFFFFF; font-family:Verdana,Arial,Helvetica; font-size:11px; color:#000000; font-weight:normal; }
The project has been handed to me to finish off / make changes to and the origonal person just gave all TDs a white bg which is fine but now the site is being changed to have a bit of graphics on the header and footer. With all TD's having the above code it blocks the background image from showing. Is their away I can keep it set for al TDs to have the white background but sort of exclude some TD's? I have tried doing a Code:
TD.footer {font-family:Verdana,Arial,Helvetica; font-size:11px; color:#000000; font-weight:normal;}
which I thought would cancel out the background color of the TD code above but it has not worked. I dont want to rename the first code I pasted because I would have to go through and change each and every single TD to have the class.. and thats over 30 pages of changes I would have to do.. Any help is greatly appreciated.. Thank you in advance Hi, i am in the middle of designing a website and i need to create an area to insert a YouTube video... All the videos on YouTube seem to be 640px X 385px HOWEVER the give you an embed option of 640px X 480px This is a bit confusing... what size space should i allow for, thanks in advance for your help... I had always thought that 3-digit hex codes were equivalent to the 6-digit code that you'd get from doubling each digit. So #FFF would be equal to #FFFFFF, etc. However, in Photoshop, that doesn't seem to be the case. For example, #555 gives a dark blue, but #555555 gives a dark gray. Is there a difference in what this means in different contexts? It seems there is a difference between CSS and graphics software? Hi, I've been stuck for days now just trying to setup how I want to layout my page. What I am trying to get is the BODY of the page to pretty much just contain everything. The I want to put a frame around all the content so that a small rectangle gradient image that I made will expand as needed to fill the browser window. Then finally I want a DIV wrapper that will hold all the page content. Here is my latest attempt to do this; Code: html, body {
margin: 0;
color: black;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
padding: 0;
text-align: center;
}
div#frameBG {
top:0;
left:0;
z-index: 1;
}
div#wrapper {
margin: 0 auto;
width: 900px;
text-align: left;
z-index: 2;
}
div#logo {
position: relative;
top: -760px;
border: 0;
padding: 0;
}
div#leftCol {
width: 150px;
position: relative;
top: -580px;
left: 0px;
border: 2px;
padding: 10px;
background-color: #CCCC00;
text-align: center;
}
Code: <HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="style-test.css">
</HEAD>
<BODY>
<DIV id="frameBG"><img src="images/dk-green-rect.jpg" width="100%" height="100%"></DIV>
<DIV id="wrapper">
<DIV id="logo"><img src="images/header_01.jpg"></DIV>
<DIV id="leftCol">
<DIV> ...bunch of stuff here </DIV>
<DIV> ...bunch of stuff here </DIV>
<DIV> ...bunch of stuff here </DIV>
</DIV>
</DIV>
</BODY>
</HTML>
Using that I can at least get the content in the wrapper to appear over the background, but.... I get extra white space below and to the left of the background as I add more content. ...and, having to use -580px to position my stuff where I want it doesn't make sense for this. Someone suggested just putting the background in the BODY and leave out the BGframe but then the graphic repeats instead of stretching. Any help here???? Hello...I have a simple layout that I cannot get right. I have a (in looks) two column layout. In the content area, the first div defines the header image for the left content column. The second div defines the right help column. The third div defines the left content column. What I would like is, for the left content column to move up under the header image for that column. I'm pretty sure it's a float issue. Here is a link to the page: http://www.rustbug.com/mmtest/two_thirds_template.html |
|||||||