|
CSS - How To Make Imgs Have A Standard Space
Hi,
I was wondering if it is possible to make a div, where only the images have a margin. How would I do that ? Can anyone help me thx! greez Similar TutorialsOK...thbbt. Situation 1 (the one that works as I want) Code: <table style="width: 100%">
<tr>
<td style="width: 15em">Column 1</td>
<td>Column 2</td>
</tr>
</table>
In Situation 1, the second column expands to be all of the remaining width. This is good. Situation 2 Code: <table style="width: 100%">
<tr>
<td style="width: 15em">Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</table>
In Situation 2, column 2 and 3 share the remaining space. I want column 2 to take no more than exactly the space it needs. I want column 3 to expand to take all the remaining space. The only way I've found that (sorta) works is to actually use the old HTML width="" attribute and make it a percentage that's impossible. If you make it 95% or something, then all the other columns squeeze down pretty far. The issue with this approach is that it ignores the style width of the first column and just crushes it as much as possible. Anyone have an idea? Thanks Tim First off, I apologize if my explanation is bad. Also, please refer to the link below. You will have to delete from the spaces from the URL because I was not allowed to post a url since I am a new user :/ http://img240. imageshack. us/my.php?image=forumexplanationje5.jpg This is what I want to do... I want to make a "table" in css. I want to make the "table" always be 890px. The css for the orange items would be .orange { margin:0px; padding:20px; } Now, I want the width of the orange items to be the width of the text in them + the padding. So basically the width is going to be dependant on the text in the tag. My problem is that I don't know how to make the blue part fill up the rest of space without knowing what the width of the orange part is. Please help, thanks. So I've only been building layouts with CSS for 2 yrs now and I guess I've never really had this issue before (though I imagine it's an easy one). On the page I'm building I have a text area that starts off with a rough paper texture thats about 400 px tall (with text on top) and I want the rest of the text on top to overflow into a different y-repeat background image. I got it to work PERFECTLY in IE7, but firefox has been nothing but a pain. I know that I'm close since one browser is showing it correctly, but I need either a firefox-only fix or an overall fix that won't mess up the way IE7 displays it. To keep from posting the whole document I'll post the reference on my HTML page and the CSS itself (I can add more later if need be) CSS: Code: #textbgtop {
width: 886px;
min-height: 580px;
background-image: url(img/TextBGtop2.jpg);
background-repeat: no-repeat;
padding-left: 14px;
padding-right: 14px;
}
#maintextarea {
width: 886px;
background-image: url(img/TextBGrepeat.jpg);
background-repeat: repeat-y;
}
HTML REFERENCE: Code:
<div id="maintextarea">
<div id="textbgtop">
TEXT GOES HERE....I am running an DO WHILE statement that pulls content from a mySQL DB. The content is all displaying correctly. As it is, the page displays fine in IE7, but on firefox the top image is in the proper place, but the TextBGrepeat img is directly below it, and then the text overflows in the main page background, THEN the bottom nav bar is placed below that.
</div></div>
I don't know if I've provided enough information but does anyone see an obvious error? If not I can definately post more but I would need to modify some specifics. Thanks in advance for any help! -crazygol4 I'm working on a tabbed content Interface to be used at the bottom of some pages in a CMS. Works in FF but only partially in IE (sometimes). The tabbed portion of the interface is set up with CSS and background images. In IE im having trouble getting them to show properly but only on 1 layer. When the Javascript changes the display property of the div it brings up the appropriate background image. But only on 3 of the 4 content divs. The fourth panel "Specs" or the div#panel4{} is displaying ok, except that it will not bring up the image for the div#TopRight4 Here is the code, and a link to a test page so that you can view it in action... any ideas? html4strict Code: Original - html4strict Code <html> <style type="text/css"> <!-- body {margin:0;padding:0;} div#container {position:absolute;left:20px;top:20px;width:631px;} div#panel2, div#panel3, div#panel4 {display:none;} div#panel1 {display:block;} div#panel_style{margin-top:5px;} div.panel_links1{width:131px;float:right;text-align:center;line-height:47px;vertical-align:50%;} div.panel_links2{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links3{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links4{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links a{text-decoration:none;} div.panel_links a:hover{color: gray;text-decoration:underline;} div.panelTopLeft{ background-image:url(images/CP_top_left.gif); width:100%; height:47px; float:left; } div.panelTopRight1{ background-image:url(images/CP_Four_Tab4.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight2{ background-image:url(images/CP_Four_Tab3.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight3{ background-image:url(images/CP_Four_Tab2.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight4{ background-image:url(images/CP_Four_Tab1.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelCenterLeft{ background-image:url(images/CP_center_left.gif); background-repeat:repeat-y; width:100%; float:left; height:100%; } div.panelCenterRight{ background-image:url(images/CP_center_right.gif); background-repeat:repeat-y; background-position:100% 0; width:100%;height:100%; float:right; } div.panelLowLeft{ background-image:url(images/CP_low_left.gif); background-repeat:no-repeat; width:631px; float:left;} div.panelLowRight{ background-image:url(images/CP_low_right.gif); background-repeat:no-repeat; width:6px; height:6px; float:right;} --> </style> <script language="JavaScript" type="text/javascript"><!-- var divArray = new Array('panel1','panel2','panel3','panel4'); function setDisplay(objectID){ for ( var i = 0; i < divArray.length; i++ ) { var d = document.getElementById(divArray[i]); d.style.display = (d.id==objectID)?'block':'none'; } } --></script> </head> <body> <div id="container"> <div id="panel1"> <div class="panelTopLeft"> <div class="panelTopRight1"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4">Options</div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>Blah Blah Blah</p> </div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel2"> <div class="panelTopLeft"> <div class="panelTopRight2"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3">Features</div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>More Blah Blah Blah</p> </div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel3"> <div class="panelTopLeft"> <div class="panelTopRight3"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2">Swatches</div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>Still Some more Blah Blah Blah</p></div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel4"> <div class="panelTopLeft"> <div class="panelTopRight4"> <div class="panel_links1">Specs</div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>And the last bit of Blah Blah Blah</p></div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> </div> </body> <html> Test Page I am just wondering if there is such a thing as a standard way of writing html to suite a standard css. So that, for example you could download a new 'standard' css file and have it work straight away with your old html. Sometimes the guys on oswd.org come pretty close, but the html always looks messy. Rogue div tags all over the shop. Can anyone point me to a resource on this, or a design forum where they practise it? Thanks. C I thought that setting properties for a and a:hover like this: PHP Code: a { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #960000; text-decoration: none; border-bottom: 1px dashed #960000; } a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #FFFFFF; text-decoration: none; border-bottom: 1px dashed #FFFFFF; } would apply a dashed bottom border to a standard link (which it does, marvellously). I also thought any other a classes would override this. Such as: PHP Code: a.nav { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #960000; } a.nav:hover { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #FFFFFF; text-decoration: none; } Which doesn't work (until I set a border-bottom property of 0). Is there a way to get around this so I don't have to set a 0 bottom-border on all other link types? how is that some websites can make the standard toolbar and the address bar disappear upon entering the website I downloaded a pre built template (which I never do but I needed something fast) and after validating the website I noticed they used a lot of standard tags like figure, header, footer, and article. The validator does not like that one bit. Please see he Validator Is there a way around this as far as adjusting the doc type or anything? Will this at all hurt SEO rankings? Thanks! Ok, Normally I have no problem centering divs, but somehow I cannot get this to work. I have the following code: PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <style> .img-shadow { float:left; background: url(shadowAlpha.png) no-repeat bottom right !important; background: url(shadow.gif) no-repeat bottom right; margin: 10px 0 0 10px !important; margin: 10px 0 0 5px; } .img-shadow img { display: block; position: relative; background-color: #fff; border: 1px solid #a9a9a9; margin: -6px 6px 6px -6px; padding: 4px; } </style> </head> <body> <table width="800" border="1"> <tr> <td> <div class="img-shadow"> <img src="image.jpg" alt="test"/> </div> </td> <td> <div class="img-shadow"> <img src="image.jpg" alt="test"/> </div> </td> <td> <div class="img-shadow"> <img src="image.jpg" alt="test"/> </div> </td> </tr> </table> </body> </html> It creates a CSS dropshadow and border around the image. That is working perfectly, but on my thumbspage I'd like to have three per row, neatly centered within the table cell. Because of the float:left; it won't center. Obviously removing the float:left; will mess up the drop shadow, so I am looking for another solution. Wrapping it in another div and center it, won't work as well. I am probably overlooking the obvious here, but I cannot see it. Can someone help me out here? Cheers, Ronald Hi all, I've got a standard 'submit' button that I've applied a CSS style to, with this code: <input type="submit" name="sign in" value="sign in" style="font-weight: bold; color: #FFFFFF; font-size: 10px; border: 1px solid #FFFFFF; background: #A4B1C1;"> The only problem I'm having is that in IE, there's a black border around it, but in Firefox, there's only the white border stated in the CSS style. Can anybody tell me how I can fix this? Cheers. I have googled it and searched through this forum as well. And found pretty much the same advice. However it does not appear to work for me. My CSS file has the following: Code:
body {
padding: 0;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #000000;
font-size: 12px;
line-height: 15px;
text-align: center;
}
.largeLink{
font-size: 14px;
}
.bodyTextSm{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;}
div#pageContainer{
margin-top: 5px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
...
and my php file contains: Code:
<body bgcolor="#000000" onLoad="MM_preloadImages('/images/TopNav_r1_c1_f2_online_movies.gif','/images/TopNav_r2_c3_f2_online_movies.gif','/images/TopNav_r2_c4_f2_online_movies.gif','/images/TopNav_r2_c5_f2_online_movies.gif','/images/TopNav_r2_c6_f2_online_movies.gif')">
<?php include_once("GoogleAnalytics.php") ?>
<!--The following section is an HTML table which reassembles the sliced image in a browser.-->
<!--Copy the table section including the opening and closing table tags, and paste the data where-->
<!--you want the reassembled image to appear in the destination document. -->
<div id="pageContainer">
...
And I am not getting the page to center. What gives? So the typical reason that I see people's images disappearing on hover has something to do with repositioning and substituting new images, etc. My case is that my hover code changes the opacity, that's it, and only to about .4 at the very very most. My solution works when slowly mousing over the image, however rapidly hovering/leaving the image causes the image do disappear for a period of time, as though the browser is re-requesting the image. Maybe that's the case? I'm not an expert on CSS. I can't seem to include a link due to some "akismetspam" phrase not being found? Hello is there a way to make it so hyperlinks are not decorated as the default blue? I have the following css which I've attempted to make it so the text '.com' is always white, but it defaults to the standard link color. html: <td class="nodecoration"><a class="nodecoration" href="http://www.somesite.com">.com</a></td> css: Code:
td.nodecoration {
background-color: #003399; color: white; width: 120px; height: 30px; font-family: "Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center;
}
A:link.nodecoration {text-decoration: none}
A:visited.nodecoration{text-decoration:none}
A:active.nodecoration{text-decoration:none}
a:hover.nodecoration{text-decoration:underline}
I've been trying to get all the space out of IE, tried line-height and all of that, and nothing. Any hack to take out all of the space gaps so I can later on put some small margin? Thanks in advance In the following code...why is there a space between the two div's?? 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=iso-8859-1">
<style>
#header { background-color: cadetblue; }
#footer { background: blue; }
</style>
</head>
<body>
<div id="header">
<p>This is my header.</p>
</div>
<div id="footer">
<p>This is my footer.</p>
</div>
</body>
</html>
If I remove the <p></p>'s from each sentence the spacing disappears. If I add a "border: 1px solid black;" to each style the spacing disappears. I don't want to know how to make it go away. I want to know why it's there? I mean shouldn't the paragraphs be fully enclosed inside the div's? Such that no spacing should appear between the div's? Any insight anyone might care to share with me would be most appreciated. Thanks. Carlos hey What i want is to have one line with a select box and a submit button on it. But when i put those 2 elements in a form it takes up 2 lines. How can i make it so that the form wont require an extra line? http://cirqueamongus.bdigia.com/main/ http://cirqueamongus.bdigia.com/x.css Page is valid XHTML1.1 and CSS. However, IE 6 causes a space to appear between my header div and my menu divs. Firefox and opera display the page just fine thanks for the help. Also, if you're using IE Mac, it might display funny there, as well. If you can give me information on what's happening there, I would also appreciate it. Hi everyone, I know this is probably an easy fix but I'm going cross-eyed trying to find the problem. Basically the top of the site has a nice space above the header with a horizontal row of links in IE however FF ignores the space and the links are pushed down on the header itself. I downloaded firebug for FF which is great and has saved me a ton of time the last few weeks but I'm just not seeing this. Thanks for any help http://karenwilliamson.com/joom5/ At some point, something I did caused my website to have around 400 pixels of white space above it. My site is very simple but I can't seem to figure out the cause. I'm hoping someone can take a look and figure it out. Thanks for any help, Chris HTML CODE: http://www.bottomtimedesign.com CSS CODE: Code:
@charset "utf-8";
/* CSS Document */
body {
background-color: #FFFFFF;
text-align: center;
}
/*defines web page dimensions and centers page */
#pagedimensions {
background-color: #DCDBC9;
border: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
width: 1024px;
height: 768px;
text-align: left;
}
#mask {
position: absolute;
left: 575px;
top: -45px;
}
#sign {
margin-left: 50px;
float: left;
margin-right: 50px;
}
#snorkel {
position: absolute;
top: 390px;
left: -39px;
}
#header {
float: right;
margin-right: 20px;
margin-bottom: 0px;
margin-top: 10px;
}
#content {
margin-left: 50px;
margin-right: 155px;
position: static;
margin-top: 300px;
}
|
|||||||