|
CSS - Alter Line-height Css Property Based On Image Height And Hyperlinks
Hi all,
I am trying to automate everything on my test website and I have one more angle to cover. In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height. Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder) My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement. Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values? I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit. Whew! Similar TutorialsQuestion) In CSS can you line-height be set to a lower value than the current font size? What does this cause? potential answers (practise revision exam are) A) line-height cannot be set to a value lower than the current font size B) The lines are cut to prevent overlapping C) The lines will overlap I am pretty sure they overlap but want to confirm Hi, I am trying to achieve a layout which uses unordered lists. Within the LI, there is an image and some text. The images are all different heights though. The issue i'm having at the moment is how can I make the text vertically align within the LI? Keep in mind that I can't put a height on as each image changes height. And these lists will be generated dynamically probably - so I don't really want to specify individual heights for each one... To make it even more difficult, the text may end up spanning onto two lines at some stage if i have to enter a larger description - so that also needs to be kept in mind. I've been looking around all morning for examples of how to do this and I can't find anything - so any help would be greatly appreciated!!! Here is what I'm trying to achieve: http://www.joshsphotos.com/user_interface/final_look.gif Here is the HTML at present: http://www.joshsphotos.com/user_interface/ And the CSS: http://www.joshsphotos.com/user_interface/css/style.css Thanks! It seem that everytime I added the image tag, the div'x area get bigger in IE but not in Mozilla/Firefox browser. So, I thought by added the "margin-bottom:-360px;" to the div would fix it but it had an opposite effect. Meaning it worked in IE but Mozilla show a vertical scrollbar. So, does anyone know how can I make the <img> overlap one another without being stacked on one after another in height for IE if I take out the "margin-bottom: -360px;"? Thanks... Code:
div.divBox1
{
width: 286px;
height: 359px;
float: left;
}
div.divClearFloat
{
clear: both;
height: 0px; /* For IE Stupidity (it added some spaces after clearing the float) */
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
div.divDottedLineAdvertisementSeperator1
{
width: 575px;
height: 3px;
background-color: #ff0000;
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
Code: <div class="divBox1"> <div style="margin-bottom:-360px;"> <img src="images/doctor.jpg" style="position:relative;top:0px;left:0px;z-index:2;"> <img src="images/we_help.jpg" style="position:relative;top:-360px;left:0px;z-index:1;"> </div> </div> <div class="divClearFloat"></div> <div class="divDottedLineAdvertisementSeperator1"></div> I am wondering if there is some way to make a <div> layer automatically expand to the full height of the screen similar to the way that one would use width=100% when talking about the width of a page. I have a layer that I want to extend to the bottom of the page no matter what resolution the user has on their screen. Maybe the layer could just extend all the way until the next layer? Any Ideas? Thanks Jamie I am trying to figure out how I can get this red curve to align to the bottom of the page, while also being able to move up and down with the size of the browser window. http://www.woodrichwebworks.com/psa/psa_comps/bycor/html/redtest.html Any help would be great. html Code: Original - html Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <style = "text/css"> .main { width:200px; height:300px; position:absolute; background:yellow; top:0px; overflow:hidden; } .container { display:inline; position:absolute; width:100px; height:100%-; _height:100%; margin-bottom:auto; top:151px; bottom:0px; background:red; overflow:hidden; } .test { display:inline; position:absolute; width:100px; height:100%; background:blue; } </style> </head> <body> <div class ="main"> <div class="container"> <div class="test"></div> </div </div> asdfasasdfsdaf </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style = "text/css">
.main {
width:200px;
height:300px;
position:absolute;
background:yellow;
top:0px;
overflow:hidden;
}
.container {
display:inline;
position:absolute;
width:100px;
height:100%-;
_height:100%;
margin-bottom:auto;
top:151px;
bottom:0px;
background:red;
overflow:hidden;
}
.test {
display:inline;
position:absolute;
width:100px;
height:100%;
background:blue;
}
</style>
</head>
<body>
<div class ="main">
<div class="container">
<div class="test"></div>
</div
</div>
asdfasasdfsdaf
</body>
</html>
Basically I have a div that fills up the main div(main). The reason that there are 2 other divs is because one is slightly translucent and I didn't want the text to be translucent so it is for sitting on top of it and displaying the text, (I know it doesn't do that right now, this is just example code). My problem is that I want the div(test) to fill up the main div(main) from a certain point down, that is make it start 151px from the top and then expand until the bottom of the main div. I discovered that you can do this in firefox and opera by placing a - at the end of the height:100%. I don't know if this is correct, but it works. It does not work however in ie6. i can chop it using overflow:hidden;, but thats not really the functionality I want since the div in the final version will have a border on it. Is there someway to make it display the same way in Internet Explorer 6 as in firefox? Thanks akurtis So, I have a div that is acting as a container. I contains a background image and colour that goes beyond the image should the image not be big enough for certain resolutions. Anyways inside this div container are 2 more divs, one with a set height that holds images, and another one below the first one that holds text. Now this text changes on a regular basis, but I don't really want to have to adjust the height of the container div everytime I add more text or take away text, I want it to automatically adjust the height as it needs to. I tried setting the height property to auto, but that didn't do anything. Just wondering if someone knows a way to do this? 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! I'm attempting a page layout that contains a scrolling div for the main content (overflow: auto. I want this div to be placed a fixed position from the top of the browser window but to expand vertically to fill up the rest of the window space. I can get something working in IE6 using an MS expression for the height of the DIV Example 1 But obviously this doesn't work on Firefox. I tried a different method to avoid the expression. Example 2 This one is odd, in that at first site it doesn't look as though it works in IE6... BUT if you re-size the window (even slightly) it then appears how I would expect. However this version still doesn't give a scrolling div in Firefox, it seems the height of 100% given to the div #bottomHalf is over ridden. Is there actually a way I can achieve what I'm after that will work across the latest browsers? (I'm not worried about IE5, NN4 etc). Hope this is a simple prob for you css gurus. This time I can just direct you to a public site http://tixrus.us Attention to the "On Sale Now" list at the left, I chose a small font to list the dates. I would like that teaser of the next 5 events in chron to be a little more compact. I have tried setting the line-height directly but nothing seems to change. I used style= in the source so it will be easy to find it. How can I make those more compact. Also the client list and the text in the search box. Thanks! Hi, I have this simple sample: <div style="width: 50px; height: 100px; text-align: center; background-color: teal; line-height: .7em"> <span style="padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 10px; ">Here are some words that should wrap</span> </div> You can see in IE that the space between "should" and "wrap" is greater than the space between the other lines. Why is that? Also, the line height in this sample in IE and FF are different, FF has a bit more space than IE. I cannot measure em, so I don't know which is right. Is there any documentation on this difference? Thanks in advance, CJB I'm having trouble making the line-height work the way I want to in IE. I set the line-height of the outer container to this tag cloud to 24px, yet on IE it doesn't seem to be working. Any Ideas? Check it out. http://gifdump.com/tags/ Viewed on Firefox Viewed on IE Hope this is a simple prob for you css gurus. This time I can just direct you to a public site http://tixrus.us Attention to the "On Sale Now" list at the left, I chose a small font to list the dates. I would like that teaser of the next 5 events in chron to be a little more compact. I have tried setting the line-height directly but nothing seems to change. I used style= in the source so it will be easy to find it. How can I make those more compact. Also the client list and the text in the search box. Thanks! Hi all, hope someone can help with this. Page with problem: html Code: http://central12.com/hovv.htm CSS Code: http://central12.com/hov.css Basically I used Eric Meyer image pop up tuturial, got it working ok in firefox, but in IE when I hover over the link the text jigs down a bit. I know I can stop this by removing the line-height attribute on the p tag, but wanted this to remain as it is a style I want across the site in general. Any way to keep the line height and remove the IE text jog. Thanks for any help. I'm encountering a stange problem with line-height in ie6 when my unordered list is wrapped in a div. Firefox displays the correct line-height but ie6 seems to double it. How can I fix this so ie6 looks like ff? Thanks for any help! 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=UTF-8" />
<title>Untitled Document</title>
<style>
ul {
list-style: none;
width: 192px;
margin: 20px 0px 0px 70px;
line-height: 2em;
padding: 0px;
}
li a:link, #nav li a:visited{
display: block;
color: #3e4735;
text-decoration: none;
position: relative;
}
li a:hover {
color: #6d7e59;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
</ul>
</div>
</body>
</html>
I'm using the following code: <font style="font-family:Verdana; font-size:10px; line-height: 70%; color: rgb(153, 153, 153);"<br />Photo Caption Goes Here</font> And it doesn't seem to be cross-browser compatible. The photo caption seems to publish differently across multiple browsers. I like how it's displayed in Firefox but on other browsers the photo caption is partially displayed or the line height is too close together. What's the best way to add css to a <font style=""> so it's cross browser compatible? Or does this have something to do with other styles on the page? Does line-height work in Internet Explorer? More specifically, does line-height work in Internet Explorer when applied to a <li>? I'm not able to make the div spacing be 8px in height? I can do that for Seamonkey but not IE... Code: <div style="margin:0px;padding:0px;height:8px;"></div> So, what is the workaround to it?? |
|||||||