|
CSS - Image Sizing - Constant Height Variable Width?
I'm trying to make up a thumbnail page that shows pics in a row at a constant height. I don't want the images distorted so the width will vary.
I tried: Code: img.proj_thumb {border-style:none; height:75px; width:auto}
Ths worked on mylaptop, but fails on the server - see the attached pics. Any suggestions? Similar TutorialsI'm wondering what's the word is called for setting the image width and height in CSS Code:
img.test
{
<<What's the keyword??>>: 10 px;
}
Thanks, FletchSOD i want to fit in my 'Did you know?' panel beside my ad, but i'm having a lot of trouble... the ad is 468x60. here is the panel: Code: <div class='ocontentsection panelmargins floatleft' style='margin-left:8px; height:101px; width:167px;'>
<h2 class='aligncenter' style='text-indent:0;'>
Did you know?
</h2>
<div class='contenttext' style='font-size:9px;'>
<p class='nomargins'>
<?php
$tips = array(
"The formula generating your VIPortals Score is:
<strong>Games Played * 2 + Votes Casted * 3 + Comments Added * 4 + (Games Played + Votes Casted + Comments Added) * 5</strong>",
"The money awarded to the winners of every contest comes from the <strong>advertisers</strong> who are paying us to place their ads here."
);
$rand_index = round(rand(0, count($tips) - 1));
echo $tips[$rand_index];
?>
</p>
</div>
</div>
look here in the middle of the page i want the text to fit inside the box too :S is there a better way of doing this? as you can see, i had to set a bunch of widths and stuff... thanks. Hi Guys, Consider the following box: PHP Code: <div style=border: 1mm black Solid; width: 148mm; height: 98mm;'> </div> 148mm + 1mm + 1mm = width of 150mm 98mm + 1mm + 1mm = width of 100mm Now why does neither firefox or ie manage to get it? Firefox is about 2mm out and ie is about 3mm out? Any ideas or is it some quirk? Charlie I'm trying to replicate what I had in html tables with css div. The final (I hope) problem is that as I populate cells with data retrieved from a MySQL data base there are columns that want to expand beyond the default height. When that happens, that cell overlaps the next row. If I use min-height, the cell alignment goes haywire because other cells are below the minimum. The workaround is to increase the default height, but that doesn't make me love divs. Is there a solution to this? Here's my code (stripped down--there'e a lot more to the application, and sanitised for anonymity). Thank you. <style type="text/css" media="screen, print, projection"> body, html { margin:0; padding:0; color:#000; background:LightBlue; } #wrap { width:99.5%; margin:0 auto; background:LightBlue; padding:0px 0px 0px 0px; border: none; } #p { float:left; width:72.5%; padding: 0px 0px 0px 0px; border: 3px solid navy; } # li { border-bottom: 1px solid navy; height: 36px; font-size:small; } #p li.header { border-bottom: 1px solid navy; font-weight:bold; font-size:medium; height: 24px; padding:0px 0px 0px 0px; } #p ul { margin:0; padding:0px; list-style:none; } #p p { font-weight:bold; font-size: medium: padding: 0px 0px 0px 0px; } #title { border-bottom: 1px solid navy; width:100%; } #button { float:left; border-bottom: 1px solid navy; border-right: 1px solid navy; width:10%; } #pt { float:left; border-bottom: 1px solid navy; border-right: 1px solid navy; width:20%; } #c { float:left; border-bottom: 1px solid navy; border-right: 1px solid navy; width:30%; } #ex { float:left; border-bottom: 1px solid navy; border-right: 1px solid navy; width:19%; } #az { float:left; border-bottom: 1px solid navy; border-right: 1px solid navy; width:9%; } #ep { float:left; border-bottom: 1px solid navy; width:11%; } </style> </head> <body> <?php // code to connect to mysql and do do some other stuff goes here $cl=field_already_retrieved_from db; echo "<div id=wrap>"; //wrapper for entire page (the real application does a lot more than this section $result = mysql_query //sql select statment goes here $num_rows = mysql_num_rows($result); echo "<div id='p'>"; //wrapper for p's echo "<div id='title'>"; echo "<ul><li class=header>Lines</li></ul>"; echo "</div>"; //end title while($row = mysql_fetch_array($result)) { $p=$row['p']; $v=$row['V']; echo "<form action='detail.php' method='post'> "; echo "<div id='button'>"; //button to display line detail echo "<ul><li>"; echo "<input type='submit' class='btn' name='line' value ='Detail'><input type='hidden' name='p' value ='$p'><input type='hidden' name='v' value ='$v'><input type='hidden' name='cl' value ='$cl'>"; echo "</li></ul>"; echo "</div>"; //end button echo "</form>"; echo "<div id='pt'>"; echo "<ul><li>"; echo $row['pt']; echo "</li></ul>"; echo "</div>"; //end pt echo "<div id='c'>"; echo "<ul><li>"; echo $row['c'] . "/" . $row['PN']; echo "</li></ul>"; echo "</div>";//end c echo "<div id='ex'>"; echo "<ul><li>"; echo $row['Ex']; echo "</li></ul>"; echo "</div>"; //end ex echo "<div id='az'>"; echo "<ul><li>"; echo $row['az']; echo "</li></ul>"; echo "</div>"; //end az echo "<div id='ep'>"; echo "<ul><li>"; echo $row['ep']; echo "</li></ul>"; echo "</div>"; //end ep echo "</form>"; } // end while (select lines from database) echo "</div>"; //end p--wrap for lines echo "</div>"; //end wrap--entire page mysql_close($con); ?> </body> </html> Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... Is there any way to scale the size of a background image? I know there probably isn't but I thought I would ask. I would like the background image of a div to be a gradient that scales in proportion to the size of the div. I've thought about doing this using a expression type css rule where I have a backround DIV rather than it being the background of the div but older ie 5.0 doesnt seem to like those. Any thoughts? Let me know if you would like me to explain more.... Yes I know IE has a gradient filter but id rather not use Proprietary code So my code works fine in webkit(Safari/Chrome), and it almost works in Firefox. If you want to try it out for yourself, just make sure you use a large image, like 500x500 pixels or larger so you can see what I mean. In the tutorial I watched they were able to make it work in Firefox, and the video is almost 1yr old, so it should work. Code:
<html>
<head>
<title>Background Size and Images</title>
<style>
body { background: blue;
margin: 0;
padding: 0; }
#container { background: white;
width: 75%;
height: 600px;
padding: 50px;
margin: 1em auto; }
#container div { background: tan;
border: 1px solid;
margin-right: 50px;
float: left; }
#container #one { width: 80%;
height: 100px;
background: url(samplesample.png) no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%; }
#container #two { width: 150px;
height: 50px;
background: url(samplesample.png) no-repeat;
-webkit-background-size: 150px 50px;
-moz-background-size: 150px 50px; }
#container #three { width: 100px;
height: 250px;
background: url(samplesample.png) repeat;
-webkit-background-size: 25px 25px;
-moz-background-size: 25px 25px; }
</style>
</head>
<body>
<div id="container">
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
</div>
</body>
</html>
Help I just can't get this thing to size. I've tried all sort of stuff This is so simple I must be missing something obvious. Here is what I want: on the left the rss feed link. to it's right the legend link with a button background behind it. I've gotten stuff like this to work before so I must be missing something. Here is what it does: The RSS feed link is fine, but the problem is the bg graphic is truncating and I want all of it to show. It also cuts it off in the vertical direction. Here is the current code (may change again by the time you look at it though!) Code: <a href="rss/calrecent.rss" ><img src="images/feed-icon-14x14.png" height="14" width="14" alt="rssfeed" border="0" /> Calendar FEED </a>
<span id="lar1" style="background: url(images/leg-button.gif) top left no-repeat; height: 31px; width: 183px; " ><a href="#" onclick="return dynpop('genrelegend',600,700);" style="text-align: center;"> Legend</a> </span>
I tried putting the background on the <a> element and setting its size with a style. and making it a#lar1 but that didn't work. So my latest try would be to size a span element. Here is the style of lar1 span#lar1 { height: 31px; width:183px; } Here it is in situ http://demo.tixrus.us/calendar.php Thanks I know I've made this kind of thing work before so what stupid thing am I missing in my blindness and frustration?? Thanks, and the one who answers will probably be Kravvitz but anybody can take a swing at it. GO SOX! Hello, I have my XHTML code in CSS to insert an image at the top like this: Code: <div id="award">
<img src="images/award.gif" alt="Year Award" />
</div>
#award
{
position: absolute;
top: 30px;
left: 400px;
z-index: 99;
}
When I resize my browser this image just changes its position and moves across the page. And all my content is set to auto margin on left and right. How do I make it fix into a position and wont change during resizing or the browser? Hey all, I need an area of content, defined by a div element. I would like it to have a minimum width of 550px, and a minimum height of 500px. However occasionally not everything will fit inside the box. Occasionally the box will contain a picture or word or flash file that exceeds 550px wide. When this happens, I'd like the box to be able to stretch to become wide enough to fit the big word/picture. Likewise when there is too much text, or a picture that is too long, I'd like the box to become tall enough to contain everything. My first attempt was using min-width and min-height. The height worked great, but since divs are block elements, the width would always be 100% instead of 550px. So I then tried adding "display: inline-block;". This made the width work, but now the text didn't automatically go to the next line when it reached the right of the box; instead, the box just increased in width. So to sum it up, I need something like this to have a width and height of 550/500: <div id="test">This sentence is small</div> But this one to stretch to the size required to contain the long word: <div id="test">adsfasdfasdfadfadfasdfasdfasdfasdfadsfasdfasdfadsfasdfasdfasdfasdfad sfasdfasdfadsfasdfasdfadsfasdfasdfadsfasdfasdfasdf</div> basically i want to span an absolute div 100% height and width to cover the whole browser window.. IE fails at this.. what are some methods used to get around this? Hi, I have a layout to build and I want to make it as accessibile as possible to the user. I therefore want to allow the user to be able to determine the site font sizes while also keeping the layout look as good as possible. The only way I have done this so far is by setting the width and height of other elements (div's mostly) using the em type. Is this ok? Or I am doing this totally wrong? Regards, Sim085 Hi, I have a page where I want to display some preformatted code inside a bordered box that has a fixed width/height with automatic scrolling. I can do this with a DIV + several css styles. However, when I generate the same file with Perl/CGI, The width/height stops working (at least not on my browser, Mozilla 1.1). Here is the file that works: Code: <html>
<head>
<style>
.textarealike{
overflow: auto;
border: 2px solid #0000FF;
color: #000000;
height: 30;
width: 350;
font-family: "Courier New";
font-size: 10pt;
padding: 5px;
}
</style>
</head>
<body>
<div class="textarealike"><pre>
Some stuff
Some stuff
Some stuff</pre></div>
</body>
</html>
and here is code that doesn't: Code: <!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.textarealike{
overflow: auto;
border: 2px solid #0000FF;
color: #000000;
height: 30;
width: 350;
font-family: "Courier New";
font-size: 10pt;
padding: 5px;
}
</style>
</head>
<body>
<div class="textarealike"><pre>
Some stuff
Some stuff
Some stuff</pre></div>
</body>
</html>
The only difference is the DOCTYPE header generated by the CGI script..... and I have no idea why this is: Can anyone help me out? Thanks, Frank Hey all, I'm playing with an idea to include a 100% width/height log_in iframe to be displayed only if $_SESSION[uid]==''; (user not logged in) utilizing the following in a remote style.css to "show" the home page behind the iframe via opacity of 10%, while the iframe blocks access to it untill user logs in. My problem is that width:100%; height:100%; doesn't work, while pixel width & height does in the following: Code: iframe {
position:absolute;
top: 0px;
left: 0px;
width:800px;/*works*/
height:800px;/*works*/
/*width:100%; doesn't work*/
/*height:100%; doesn't work*/
z-index: 100;
filter:alpha(opacity=10);
-moz-opacity:.10;
opacity:.10;
}
Hi there Has anyone encountered a bug in IE (6) of extra width, when applying css height property to a div? I set the width of div, via margin Code:
div#footer {
margin: 0px 9%;
height: 40px;
}
When height is specified, the width of the footer is 1px bigger on either side, then other elements with same margin, but no height. This does not happen in other (gecko) browsers! Anyone know a solution, (tantek won't be precise enough with %) ?? I'm new to css web design and am attempting my first full layout. What I would like to do is have a hanging picture in the upper-righthand corner of the page that overlaps the header and content sections. All is well, until I specify a width or height on the content section. Although it looks fine in Firefox, IE either: a) moves the content section down or b) squishes the content to the side (if <!--<?xml version="1.0" encoding="utf-8"?>--> is in the html) Here's some much-simplified code to illustrate the problem: 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="images/style_test.css" rel="stylesheet" type="text/css" />
<title>Sandbox</title>
</head>
<style type="text/css">
#header {
background-color: #cccccc;
border: 1px solid #564b47;
}
#content {
background-color: #c6dedf;
border: 1px solid #564b47;
width: 100%;
height: 400px;
}
#hanging {
float: right;
background-color: #ccff99;
border: 1px solid #564b47;
margin: 20px;
padding: 0;
width: 300px;
height: 300px;
clear: right;
}
#footer {
background-color: #cccccc;
border: 1px solid #564b47;
clear: both;
}
</style>
<body>
<div id="hanging"><code>#hanging {<br>
float: right;<br>
background-color: #ccff99;<br>
border: 1px solid #564b47;<br>
margin: 20px;<br>
padding: 0;<br>
width: 300px;<br>
height: 300px;<br>
clear: right;<br>
}</code><p>This SHOULD overlap header & content.</p></div>
<div id="header"><code>#header {<br>
background-color: #cccccc;<br>
border: 1px solid #564b47;<br>
}</code></div>
<div id="content"><code>#content {<br>
background-color: #c6dedf;<br>
border: 1px solid #564b47;<br>
width: 100%; /* hanging doesn't like this */<br>
height: 400px; /* or this in IE*/<br>
}</code></div>
<div id="footer"><code>#footer {<br>
background-color: #cccccc;<br>
border: 1px solid #564b47;<br>
clear: both;
}</code></div>
</body>
</html>
Anyone know a work-around or how to fix this? Thanks! 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! The problem I have has arisen whilst trying to create a horizontal and a vertical navigation menu using <li> tags. It is best illustrated by the following example: Code: <div style="width:100%;height:50px;"> <ul> <li style="border:1px solid black;">Hello</li> <li>World</li> </ul> </div> <br /> <div style="width:100px;height:100%;"> <ul> <li style="border:1px solid black;">Hello</li> <li>World</li> </ul> </div> and the CSS Code:
div {
border:0;
background-color:#888888;
}
ul {
margin:0;padding:0;
}
ul li {
float:left;
list-style:none;
background-color:#CCCCCC;
height:50px;
width:100px;
}
The <div> tags are set to 50px height and 100px width respectively. When an <li> element is placed within the div with the same height or width they display the way I intended. However once a 1px border is applied to the <li>'s then in IE the border is counted as part of the width or height. In Firefox the border will add 2px to the starting height and width giving the effect of width:102px or height:52px;. This is massively frustrating as I need each <li> to have the 1px border. It looks different in each browser (I have not tested it in netscape nor opera, but I suspect they will display the same as Firefox.) Can anyone provide a fix to get get round this please? Thank you in advance. Hi. What's em, pt, pc, px, ex, % when declaring width, height or position in CSS? It seems people use different measurement. What exactly are those? Any help will be appreciated. Thanks. Hi to all, and thanks a million in advance for help. I have developed a simple online cms and everything is setup correctly but i am stuck at one place. I am unable to make width to 100% when b div is empty i mean a div = 50% width, b div = 50% width, how set it up that when a div is empty then b div goes to 100%width and when b div is empty then a div is 100% width. i hope got my question. because currently i have set in this way. wrapper div = 980px width, a div = 50% width, b div = 50% width, wrapper div end so when a div is empty then b div is still present and that area is empty it destroy the whole look. thanks arsslan |
|||||||