|
CSS - Controlling Spaces
is there a way using css to control how much space is below and above a form button, because I have a lot of form buttons and the space between them is killing my design.
Thanks Similar TutorialsHas anyone seen a template somewhere that can help style a page for printing to an index card? Thanks, James Im trying to control how the text formats within a div tag, that sits inside a menu. The text appears when you rollover the items in the submenu and I want extra information to appear but when it does, it doesnt wrap 'correctly' I have the menu sitting he http://www.electronical.org/tmp/playsongs/ If you rollover 'Products > playsong titles', you will see some blue text appears at the bottom of the submenu. How do I format this so it is the width of the submenu and wraps to the length of it? Thanks for any help. Hi.. another question for the CSS mastas out there. I have a table taht I have applied a class to: PHP Code: <table class="middle" cellspacing="0" cellpadding="0" border="0"> <tr> <td> <img border="0" src="images/spacer.gif" width="1" height="1"> </td> <td align="left"> <p class="customHeading">aaaa</p> </td> <td> <p align="right"> <a class="importantLink" href="">aaa</a> | <a class="importantLink" href="">aaa</a> | <a class="importantLink" href="">aaa</a> </p> </td> </tr> <tr> <td colspan="3" valign="top"> <table class="content" cellspacing="0" cellpadding="0" border="0"> <tr> <td align="left">aaa:</td> <td><input type="text" name="aaa" size="22" class="formField"> </td> <td><a href="#"> <input type="submit" value="SEARCH" class="formButton"> </a> </td> </tr> </table> </td></tr></table> .middle { width: 760px; height: 360px; background-color: #FFFFFF; } .content { background-color: #FFFFFF; font: 13px Arial, sans-serif; padding: 2px; margin-left: auto; margin-right: auto; } The issue I'm having is that I can't seem to control the height of the outside tables first row. It seems to just take on a size depending on how I set the height in the element. Can I not place a height tag in the <td>'s for that row to set it at a fixed height? I'm trying to determine the best way to design a UI for a PHP application. There is a header portion with menu choices and a footer portion. There is also a background image 'picture frame' that sits in between the header menu and footer and gets loaded depending on the user's preferences. None of these three scroll. Within that picture frame, there is a center screen with a scrolling application. This portion would load different screens based on what was picked as a menu choice, and the user would scroll in the application if the particular screen were longer. Is the best way to do this using frames, or is there a better choice in terms of speed, browser compatibility, etc.? Thanks for your suggestions. Hello: I'm building a website for a broad audience. I need there to be an option for text to be resized for those who have trouble with reading screens. I am trying to have the text on HTML pages be changeable through CSS. Two examples I offer are 1. wired.com 2. 1and1.com On the top right corner of the screen, there are options to change the text size without switching to a new HTML page. I believe this is done using CSS (perhaps Live StyleSheet Selector). I'm not really sure. I would like for the user the have the option to change the font-size by clicking, not by repositioning the window (then the size changing relative to window size). If anyone can help me, I would really appreciate it. Thanks! Deanna Okay, I tried to see if this question was already answered on the forums, but I got ADD so I gave up. I'm making a nav bar out of a list and CSS. The bar is perfect, except for the height will not extent each extremity. Here's the CSS: Code: .navigation {
width: inherit;
height: 53px;
margin: 0px;
margin-top: 63px;
background-image:url(file-bin/images/navigation_background.png);
background-repeat:repeat-x;
background-position:center;
}
.navigation ul, .navigation li {
display: inline;
list-style:none;
padding:0px;
margin:0px;
}
.navigation li a {
border-left: 1px solid #FFF;
padding-left: 20px;
padding-right: 20px;
text-align: right;
}
Here's the HTML: Code: <div class="navigation" align="right"> <ul class="navigation"> <li></li> </ul> <ul class="navigation"> <li><a href="#"><img src="file-bin/images/space.png" height="53" width="1" align="absmiddle" border="0" />Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </div> Thanks for the help in advance! - Logan In a simple vertical list, the bullets are offset to the right of the container. Is it possible to control the amount of offset? hi guys, silly question i want to make a certain portion of my text smaller, but when i put a span like this around it: <span style="font-size: 10px;"> then only the plain text, and not the links, decrease in size... what should i add? thanks glog When a Text Input is disabled, is there a way to control the visual characteristics such that it's not as subdued, or use different colors for the text / background? Hi, I am using a javascript drop down that does include CSS to control the font style, size etc. It works great in IE. Mozilla is ignoring all CSS, both in the js code and my style sheet, when I change the text size via View/Text Size in the top menu bar of the Mozilla browser). How do I get Mozilla to bow down and take it (the code, that is ) Just to note, I have tried adding the CSS info from the javascript to my style sheet. No different results. Thanks! I want to know how I could possible control all the elements inside a table that is inside a div with an id. This is possible correct? So if I have: Code:
#header { width: 900px; }
And then something like this: Code: <div id="header"> <table> <tr> <td> </td> </tr> </table> </div> I'd like to then have something like: Code:
#header.table,td {padding-left: 10px;}
Which I am hoping would put a 10px padding on all the td's in the table and nothing else. Is my syntax right? I'm using a two column layout (main, sidebar), and within the main column, there is a section that breaks into two columns. I'm using this code:
Code: <div>
<p>Some main column content</p>
</div>
<div id="inner_col_wrap">
<div id="col_left">
<p class="col">Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
<div id="col_right">
<p class="col">Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
</div>
<div>
<p>Some more main column content</p>
</div>
The problem is that some of the content that follows the two column block ("Some more main column content") is pushed up into the "col_right" DIV when "col_left" and "col_right" are not equil ("col_right is shorter than "col_left", and there is space at the bottom). How to keep the conent that follows the two column block out of it? Hello, I have question regarding proper use of CSS, so I can get web site layout to display properly in both IE and Firefox. At the moment it's laid out properly in FF, but I have some problems with IE. The cells of a table "deform" while browsing in IE. This is how it looks like: URL http://i38.tinypic.com/5ffe6q.gif Here is html of the cells in question: Code: <table class="cHs" width="1000" border="0" align="center" cellpadding="0" cellspacing="0" background="pic/topcenter.jpg"> <tr> <td colspan="3" class="cHs" width="1000" height="145"><img src="pic/logo.jpg" border="0"> </td> </tr> <tr> <td class="cHs" background="pic/left.jpg" width="47" valign=top></td> <td class="cHs" align=center width="906" background="pic/backcen.gif" class=interior valign=top> <td class="cHs" background="pic/right.jpg" width="47"></td></tr><tr><th align="left" valign="top" scope="row" height=\"37\" background="pic/bottom1.gif"></th><td class="cHs" height="37" width="906" background="pic/bottom2.gif" align="center" valign="top"> </td> </tr> </table> Here is used CSS: Code:
table.cHs{ background: transparent;
border: none;
}
td.cHs { border: none;
}
Does anybody see a problem? Thanks in advance. Hi I've trying to use a UL list to display a menu on my site. I'm having a problem with spacing tho. No matter what I do, there always seems to be a slight space between the LI elements. Code is as follows: PHP Code: #menu { margin: 0; padding: 0; list-style: none; } <ul id="menu"> <li><a href="thestore.php"><img src="images/menu_thestore.gif" width="195" height="36" border="0" alt="The Store" onmouseover="this.src='images/menu_thestore_over.gif'" onmouseout="this.src='images/menu_thestore.gif'" /></a></li> <li><a href="steel_toe_cards.php"><img src="images/menu_steeltoe.gif" width="195" height="36" border="0" alt="Steel Toe Cards" onmouseover="this.src='images/menu_steeltoe_over.gif'" onmouseout="this.src='images/menu_steeltoe.gif'" /></a></li> <li><a href="locations.php"><img src="images/menu_locations.gif" width="195" height="36" border="0" alt="Locations" onmouseover="this.src='images/menu_locations_over.gif'" onmouseout="this.src='images/menu_locations.gif'"/></a> </ul> Would it be something to do with the fact I'm using images as menu options?? There's always a slight space between them, and I can't figure out why! Hi everyone, I am working on a conceptual design with basic js rollovers and css. When I center the divs I get a small horizontal space between the divs. I have only tested this in firefox. My css for each div is: #foo{ margin: 0 auto; text-align: left; background: #006600; width: 800px; } and the page can be seen he bdgplans.com/concept/roll2.html I'm new to CSS, so I apologize if this is quite elementary. www.thinkblue2008.com Among the obvious stylistic things I'm working on, I need to get the deadspace areas figured out first. Basically, how can I a) get the columns to automatically extend (ie, white down to the footer) b) get rid of the space between Thanks, in advance, for your time and patience. I have an asp page that displays some text which is formatted by a stylesheet. The colour of the text box depends on the text itself. For example, the information displayed is a risk. If the risk is 'None', the box is white, if it is 'High', the box is red, etc. The class is determined programmatically, according to the actual risk. In the stylesheet I have a class called 'None', another called 'High', etc. The problem I have is that one of the risks is 'No Risk' which obviously has a space in it. The text MUST say 'No Risk' so the solution is not to have text with no space in. How do I create a class in my stylesheet called No Risk? If I type it literally, with the space, it doesn't recognise it. I have a procedure that selects the Risk from a database table. The asp page has the following line to set the class: Response.Write "<td class=" & chr(34) & Replace((rs.Fields.Item("risk").Value) , " ", "") &"2" & chr(34) & ">" & (rs.Fields.Item("risk").Value) & "</td>" Any help would be very gratefully receive it as I am rapidly running out of hair! Thank you. Hello folks, I have this page Code: (chep-net.com/main_nav) and on the left side of the table cell it always renders a small space. I tried cellpadding 0. Did I miss something? At http://www.glish.com/css/7.asp there is a 3 column layout, I have taken it and put it all inside one containing <div>. I am trying to get the columns to have spaces between them, but they won't seperate without going to the bottom of the page. Here are the relevant styles: Code:
#main {
margin:auto;
width:800px;
}
body {
margin:10px 10px 0px 10px;
padding:0px;
}
#leftcontent {
float:left;
width:180px;
height:400px;
background:#fff;
border:1px dashed #000;
}
#centercontent {
float:left;
margin:auto;
background:#fff;
width:400;
height:1000;
border:1px dashed #000;
}
html>body #centercontent {
margin-left:auto;
margin-right:auto;
}
#rightcontent {
float:left;
width:180px;
height:400px;
background:#fff;
border:1px dashed #000;
}
The first and second columns separate but not the third Code: <div id="main"> <div id="banner"> <h1>TITLE</h1> </div> <div id="leftcontent"> <h1>leftcontent</h1> </div> <div id="centercontent"> <h1>centercontent</h1> </div> </div> <div id="rightcontent"> <h1>rightcontent</h1> </div> </div> Thank you [EDIT] Nevermind, after looking at the "Nested Float" example on glish, I just nested it and float:right. If anyone is interested here is the updated #rightcontent style (now called #main #rightcontent) Code:
#main #rightcontent {
float:right;
width:180px;
height:400px;
background:#fff;
border:1px dashed #000;
}
All you have to do is change the name and the float. |
|||||||