|
CSS - How High Is A Line In Em's?
I'm trying to figure out the exact height of a single line of text in units of em. I have a nice tabbed navigation system going with two levels, but the 1.25em that I had estimated isn't exactly correct (I get some misalignment when changing the font size). By putting a character in a div and modifying the height of another <div> next to it, with the font at max size, I managed to come to 1.165em, but this got misaligned at a few lower font sizes. Does anyone know an accurate measurement for this? Or should I just get it close enough for "normal" font sizes?
In case that didn't make sense, I'll try to illustrate with some ASCII art: Code: +---DIV---+ +-DIV-+ |some text| | | <- what height should this be to line up perfectly? +---------+ +-----+ Similar TutorialsHi, how do i set a table to be table 100% wide 100 % high using css? i am using the new dreamweaver that includes this in the header: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> the 100% height and 100% width html values dont' work, i have tried css to get the table 100% but can't can anyone help? Paul Well i am working on a new design but there's a problem, if you go to www.majd-gfx.com you see that the left column does not stretch fully (as long as the content column) i have searched for this and found a tutorial on alistapart.com but it wasn't very helpful as i would have had to rework the whole layout. Is there an alternative? p.s. i have tried height:auto and height:100%...neither worked.... I have a very high div which I want to resize depending on the height availible (it has the central BG image) e.g. if the user is on 1024 they dont have to scroll down for miles to see the whole page. But if the user is on a higher res then the div should become the full length available. Is this possible? I thought height: 100%; would work but it doesn't seem to do much. Also had at look at the overflow options but hidden wont do me any good because if the user is on 800x600 then you cant see the rest of the content. Any help appreciated thanks! i have a basic navigation system - 12 items divided into 3 columns - fitted together horizontally in a row. On a windows xp machine with a high resolution display which is set to automatically resize all ie browser pages to make them appear larger (readable or lower-res) - somehow my navigation columns no longer fit into a single row... as far as i know under all other browsers/platforms the menu appears correctly. i've tested the navigation layout in opera, ie, firefox, netscape on my own windows computer, and have tested the pages using some online site that takes snapshots of your page in various browsers on various operating systems (including linux and apple).... the problem may be with the way i am calculating the pixels for the div widths? or...? the page is at gatewoodfarms.com (gatewoodfarms.com/gwf.css) a screenshot of the problem is at gatewoodfarms.com/screenshot.png here is the Basic Structure/CSS: <body style="border:0px;padding:0px;margin:0px;min-width:630px;"> <div id="wrap" style="border:0px;padding:0px;margin:0px auto;width:630px;"> <div id="top" style=""> ... <div id="nav" style="border:0px;padding:0px;margin:0px;height:90px;width:630px;"> <div id="nav1" style="width:210px;height:90px;border:0px;margin:0px;float:left;"></div> <div id="nav3" style="width:210px;height:90px;border:0px;margin:0px;float:left;"></div> <div id="nav3" style="width:210px;height:90px;border:0px;margin:0px;float:right;"></div> </div> </div> <div id="main" style="border:0px;padding:0px;margin:0px;height:auto;width:630px;top:250px;"> ... </div> </div> any ideas how i can fix this? thanks! Help! I am trying to build my site in CSS. Here is the CSS for my top layer, despite the size being specified to 130px and an image inside it being 130px high, it is still 5px too high... any ideas? Code: #page_top_sizing {
background-color: red;
width: 764px;
height: 130px;
position: absolute;
top: 5px;
left: 5px;
z-index:1;
padding:0;
}
Thanks. A number of years ago I created a web site for a mattress store where I worked (7 days a week, for 5 years). The point is this: I'm not a great web designer. The code is ancient and the owner wants me to bring the thing up to date. Using tables, I had a system for creating thin, vertical lines that went up and down the entire heighth of the page. The lines divided the content area from the borders in a neat way - although, again, using very old HTML. It looks like this: http://www.wholesalewarehouseinc.com What I'd found was that if I used a fixed-sized header and some tables I could produces the thin line that you see on that page. This was the basic code: Code: <table width=100% height=100% cellpadding=0 cellspacing=0 topmargin=0 leftmargin=0 rightmargin=0> <td background="http://www.wholesalewarehouseinc.com/lf.gif" width=50% align=left><td width="1" background="dot.png"> <img src="dot.png"></td> </td><td valign=top> <table cellpadding=0 cellspacing=0 border=0 rightmargin=0 leftmargin=0 bottommargin=0> <img src="logo.png"></td> <td background="http://www.wholesalewarehouseinc.com/lf.gif" width=100% align=left><td width="1" background="dot.png"> <img src="dot.png"></td> </table> My question is this, and maybe this is too general for a meaningful answer. Is there a way to do the same sort of thing with CSS? I've run into a problem with a 3-column layout I'm making. The problem is to get the columns equally high. Previously I've just made the "illusion" of equally high columns by making a background image and repeating it in the y-direction (like this). This works fine as long as the page has a fixed with - in this case the left and right column have a fixed width but the center column is dynamic. So, how can I make all the columns look equally high? (without using tables, obviously) Btw, I can't show you an example of the page, but hopefully you'll get the picture and could point me to an article or something about the subject. EDIT: Never mind! I found an example and it worked! http://www.pixy.cz/blogg/clanky/css-3col-layout/ <-- thats the one. Greetings, I have a class called "header" and I am trying to give it a touch of extra space between it and the next line. All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class. Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer? Thanks in advance! I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks! Greetings, I am relatively new to CSS and am using background image bullets. Problem is, in the case of a two line link, the bullet aligns in between the two lines and I need it to align to the top line. Below is the CSS, and attached is a screenshot of the link to better illustrate my predicament. Thanks for any help! li { list-style-type: none; background: url(../images/bullet.gif) no-repeat left; padding: 0 0 0 10px; } Hi, Instead of organising an image sprite as follows: image image image image image image i'm wondering if there are any negative effects to organising the images in a linear fashion as follows image image image image image image I know that Flash will only render images that are a certain width or height but is there any such limitations when using css sprites? Thanks Hello, I use always use the <br /> tag and I just found out in using the clearing of divs like; Code: <div style="clear:both; margin-top:5px"></div> for next line or breaking of line. Is this a good thing to use? Thanks for taking the time to read my question I have a row of pictures as nav links, and under them I want to put a row of text stating what each link is Picture Picture Picture Picture Text Text Text Text Each pic is 52px wide, so I made the containers for the text 52px wide. both have left and right margins of 10px (I made the .NavText margin 11 to compensate for the 1px border) yet they don't line up!! What am I missing? Thanks, Brad html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="description" content="Canada Carriage - A supplier of great carriages from XXXXXXX." /> <meta name="keywords" content="Horse drawn vehicle, Carriages, Carts, Horse carriages, Horse carts, Coyaltix, Manitoba, Canada, Dealer, Equine, FEI, CDE, Combined Driving Event, Pleasure driving, Competition driving, Custom made, Fine quality, Affordable prices, European manufactured, Drive Canada" /> <meta name="Revisit-After" content="7 Days" /> <meta name="Robots" content="index, follow" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Canada Carriage</title> <link rel="stylesheet" type="text/css" href="LC.css" media="screen" /> </head> <body> <div class="MainCont"> <img class="HomeLogo" src="images/logo.jpg" /> <div class="NavHolder"> <a href="LisaClarkDesigns_About.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the About Lisa Clark Designs page." /></a> <a href="LisaClarkDesigns_Portfolio.htm"><img class="ImgNav" src="images/PortfolioNav.gif" alt="Click here to navigate to the Lisa Clark Designs Portfolio page." /></a> <a href="LisaClarkDesigns_Fees.htm"><img class="ImgNav" src="images/FeesNav.gif" alt="Click here to navigate to the Lisa Clark Designs Fees page." /></a> <a href="LisaClarkDesigns_Contact.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the Lisa Clark Designs Contact page." /></a> <div class="NavText">About</div> <div class="NavText">Portfolio</div> <div class="NavText">Fees</div> <div class="NavText">Contact</div> </div> </div> </body> </html> css Code: body {
background-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
.MainCont {
width: 800px;
margin: 0px auto;
padding: 0px;
}
img.HomeLogo {
margin-left: auto;
margin-right: auto;
margin-top: 200px;
margin-bottom: 0px;
display: block;
}
img.ImgNav {
border: 1px solid #999999;
padding: 0px;
margin: 0px 10px 0px 10px;
width: 52px;
}
.NavHolder {
margin-left: auto;
margin-right: auto;
margin-top: 100px;
margin-bottom: 0px;
padding: 0px;
display: block;
width: 314px;
background-color: orange;
}
.NavText {
padding: 0px;
margin: 0px 11px 0px 11px;
width: 52px;
color: #ffffff;
font-size: 12px;
float: left;
display: inline;
background-color: red;
}
Hi all, How to go to next line if the width of the content is more than specified width? Thanx/Chandar Hello, At my blog test site You'll notice the Quote: << Hello World! | Gettin' Closer >> text in the middle. Just as you see it above, I'd like that all on one line, but can't seem to figure out how to do it. Driving me nuts. Anyone? The CSS code controlling that is Code:
.alignright {
text-align: center;
display: inline;
}
.alignleft {
text-align: center;
display: inline;
}
Thanks! Chris i have a series of divs that look like this Code: <div> <div></div> <div></div> </div> <div> <div></div> <div></div> </div> Each of the inner divs use the float attribute but when it comes to the second outer div it doesnt automatically go onto the next line it sort of continues from where the last div left off. Why is this... I have a left-hand side nagivation TD containing plain-text links. The TD is a fixed width and I want to be able to indent automatically the second line of text in a link should the text for the text for the link exceed the fixed width of the TD. Anyone know how to achieve this effect? An example of what I might want it to look like... Code: Link one Link two A longer link three Link four how can i keep these 2 divs i have on the same line, i tried min-width for the div they are in and it works perfect but IE doesn't support it, i even tried a extra div to use as a spacer but IE seems to make keep them on the same line even though there is already enough space for it, here is the html i'm using Code: <div id="ms_all" ><!-- Start all mapserver --> <div id="ms_main_map_div"> <input alt="Map" id="ms_main_image" type="image" name="mapa" src="map_img.phtml?[data_to_img]" /> </div> <div id="ms_side_bar" > <!-- A bunch of form stuff --> </div><!-- End Side Bar --> </div><!-- End all mapserver --> and here is the css Code: #ms_all {
/*padding:5px;*/
height:610px;
min-width:810px;
position:relative;
}
#ms_main_map_div {
padding:2px;
left:5px;
float:left;
/*top:2px;*/
width:600px;
}
#ms_main_image {
cursor:crosshair;
width:600px;
height:600px;
}
#ms_side_bar {
right:2px;
float:right;
padding-top:20px;
/*top:10px;*/
padding:2px;
width:200px;
/*clear:both;*/
}
i want the 'ms_main_map_div' and the 'ms_side_bar' to be on the same line, but the 'ms_side_bar' stuff keeps jumping to the bottom of the page if it doesn't fit in the window, so does anyone know of a way to get IE to display this the right way or maybe make IE support the min-width thing, preferably keeping my CSS and XHTML valid I can't get IE7 or IE6 to look corectly. IE8 and other browsers appear to be fine. Any suggestions? html: 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 id="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_head">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HOME - My Company </title>
<link rel="stylesheet" type="text/css" href="/css/CC_Style.css" />
</head>
<body>
<div id="wrapper">
<div id="main">
<div id="bannerHolder">
<img id="banner" src="../media/108/banner_home.jpg" alt="" />
<div id="banner2">
</div>
</div>
</div>
<div class="clearfix">
</div>
<div id="footer">
Copyright @ 2002-2010, My Company, Inc. <a href="#">PRIVACY STATEMENT</a>
| <a href="#">SITEMAP</a>
</div>
</div>
</body>
</html>
CSS Code: /*LAYOUT*/
*{
padding: 0px;
margin: 0px;
}
body
{
text-align: center;
background-image: url(../images/bg.gif);
background-repeat: repeat-x repeat-y;
}
#wrapper
{
margin: auto;
text-align: center;
width: 960px;
background-color: #FFF;
}
/*--------------- B A N N E R S --------------*/
#bannerHolder
{
padding: 0;
margin: 0;
border: 0;
text-align: left;
background-color: #fff;
height: 198px;
}
#banner
{
width: 655px;
height: 198px;
}
#banner2
{
float: right;
height: 198px;
background-color: #e5f2fb;
width: 304px;
}
/*--------------------- M A I N -----------------------*/
#main
{
background: #fff;
height: 300px;
}
#news /* News Bar for Banner DocTypes */
{
border-left: solid 1px #ccc;
float: right;
margin: 15px 0 15px 0;
padding: 0 15px 0 15px;
width: 274px;
height: 350px;
}
/*--------------------- F O O T E R -----------------------*/
#footer
{
height: 22px;
line-height:22px;
font-size: 10px;
color: #aaa;
border-top: solid 1px #ccc;
text-align: right;
padding-right: 15px;
}
#footer a
{
font-family: Arial, Helvetica, sans-serif;
color: #3a80a2;
}
/*----------------- F I X E S -----------------*/
.clearfix
{
clear: both;
}
Hey, i made a header in with some space to get a navigation line over. So i put it in its place with css but when i zoom in or out it won't stay in the middle like evrything else, i tried evrything, display:block, margin:0px, position:absolute |
|||||||