|
CSS - How To Set The Spacing Between The Elements Inside A Div
I have a div, which inherits properties from a style sheet. I can't change the style sheet, but I can apply inline properties to the div.
How can i make the elements contained in the div have a little space between each other? The equivalent when using a table would the the cellSpacing attribute. thanks Similar TutorialsHi, q)I have a horizontal menu of 4 text buttons on top on screen and another bit of text on the left of it . I have a text element on far left and 4 text elements on far right . The whole section is in a div tag which displays it in a horizontal bar of 10% height. To place the text elements of far right I use float but this displays it on line below where i want it. I want text on far left and menu on far right (no spaces between each link) all in the same line. Code:
#t1 a {font-size:10px;
font-family:verdana;
font-weight:bold;
border:1px outset aqua;
background-color:aqua;
color:#000000;
text-decoration:none;
display:inline;
width:15%
word-spacing: 0;
}
...
<div id="t1">
This is the
place where the logo goes
<a href="#">Java Script</font></a>
<a href="#">Dynamic HTML</font></a>
<a href="#">Java Script</font></a>
<a href="#">Dynamic HTML</font></a>
</div>
Here is the example: http://rocketjump.ath.cx/~maddumb/spaced.html I am testing this out in FF and IE6, the spacing between left and main in IE is different than it is in IE. It is wider in IE. How can I get this fixed? Also how can I get left and main to line up pixel by pixel, in one browser this is off by one pixel. I just noticed this, but if I put "font-size: %" in body {} and make it a small value left and main overlap. Should I using something other than em for my units? I want my site to have readable text (not too small, but not large enough to be ugly) and give the user the ability to resize without ruining the layout too much. Hi, I was wondering if it's possible to space out seperate blocks of text within a <ul> element? So for instance: Code: <ul> <li>Caption1 Caption2 Caption3</li> </ul> In that code I want to have each word spaced out a set amount. I guess I'm basically trying to emulate table rows, but I can't use tables for what I'm trying to do. How do i layout elements within a div without effecting everything outside the container div? this has been frustrating me, everything on the page seems to get effected. i want the div (question) and the div (answer) next to each other..... i thought position:relative does this since it changes position from the container div. The below code has the div(answer) below the div(question). I put top:0px; and position:relative assuming they both start at the top of the container div. Code: <div id="adult"> <?php echo "<ul><li>test1</li></ul>"; ?> </div> <div id="qanda"> <?php echo " <div id='questions'> <ul id='questionsul'> <li><font color='#FFFFFF' face='Century Gothic' size='5px'>QUESTION</font><font color='#FFFFFF' face='Arial' size='5px'>?</font></li> </ul> </div> <div id='answers'> <ul id='answersul'> <li><font color='#D99C29' face='Century Gothic' size='5px'><a href='answer.php?id=1&search=$search' style='text-decoration:none' class='Options6'>Answer</a></font></li> </ul> </div> "; ?> </div> <div id="amount""> <?php echo "<ul><li>test3</li></ul>";; ?> </div> <div id="results"> <?php echo "<ul><li>test4</li></ul>"; ?> </div> <div id="contributing"> <?php echo "<ul><li>test5</li></ul>"; ?> </div> <div id="advert"> <?php echo "<ul><li>test6</li></ul>"; ?> </div> </div></div> CSS Code:
#questions{
position:relative;
top:0px;
text-align:left;
}
#answers{
position:relative;
top:0px;
text-align:right;
}
#adult{
width:700px;
margin:0 auto;
}
#qanda {
width:700px;
margin:0 auto;
}
#amount {
width:700px;
margin:0 auto;
}
#results {
width:700px;
margin:0 auto;
}
#contributing {
width:700px;
margin:0 auto;
}
#advert {
width:700px;
margin:0 auto;
}
Well I'm running into just a few difficulties trying to enclose a object inside of another container. The problem is that the container does not repeat the background when I lengthen the boxes within it. Can someone with a excellent CSS eye take a look at this and let me know what I'm doing wrong. I've played with overflow:auto; but the problem is that I need to set the width of the container at 990px, and it doesn't seem to work if I statically set the width. http://www.obelix.ca/templates/index.html 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? Ok, so maybe I don't understand the display attribute quite right. What I'm doing makes sense to me, but it's not working right when displayed. I have a div that is set to display inline (so that I don't have to use floating). Since inline elements can't have height/width attributes, i have another div inside of it, with display set to block. This inner div has height and width attributes. Now, if I place another similar structure (block div inside inline div) in the code, the two outer divs /should/ (in my mind) render side-by-side with the heights and widths of their child div's. When I try it though, it displays everything as block-type. Any ideas? PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title</title> <style type="text/css"> img{ border: 0px black solid; height: 200px; } div.outerholder{ display: inline; } div.innerholder{ text-align: center; height: 200px; width: 267px; margin: 0px; padding: 0px; display: block; } div.centerme{ text-align: center; margin-left: auto; margin-right: auto; } </style> </head> <body> <div class="centerme"> <div> <div class="outerholder"> <div class="innerholder" style="margin-right: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> <div class="outerholder"> <div class="innerholder" style="margin-left: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> </div> <div> <div class="outerholder"> <div class="innerholder" style="margin-right: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> <div class="outerholder"> <div class="innerholder" style="margin-left: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> </div> <div> <div class="outerholder"> <div class="innerholder" style="margin-right: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> </div> </body> </html> P.S. It also doesn't center properly in FF, but that's secondary... In this sample code, I would like the form to actually be positioned befor the things that follow it in the code, but I just can't figure out how to do this. The document I want to use it on will not be 100% CSS, and maybe even inside a table. How might this be done? You can see the code in action HERE. Code:
<html>
<head>
<title>Test</title>
<style type="text/css">
.input-box
{
color: #26a;
background: #feb;
border: #26a solid 1px
}
#div1, #div2, #div3, #div4
{
padding: 10px;
margin: 0 auto;
overflow: auto;
display: none;
border 1px;
}
fieldset
{
position: absolute;
left: 50%;
margin-left: -100px;
width: 200px;
padding: 10px 10px 10px 10px;
}
search_label
{
width: 4em;
float: left;
text-align: right;
margin: 0 1em 10px 0;
clear: both
font-family: verdana,tahoma,arial,helvetica,sans-serif;
}
</style>
<script type="text/javascript">
//<![CDATA[
function change(which) {
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
document.getElementById('div4').style.display = 'none';
document.getElementById(which).style.display = 'block';
}
//]]>
</script>
</head>
<body onload="change('div1');">
<h1>Switch Divs</h1>
<form method="post" action="">
<fieldset>
<legend>This is my form</legend>
<label><input class="radios" checked type="radio" name="search_field" value="name" onclick="change('div1');" />Last Name</label><br />
<label><input class="radios" type="radio" name="search_field" value="city" onclick="change('div2');" />City</label><br />
<label><input class="radios" type="radio" name="search_field" value="state" onclick="change('div3');" />State</label><br />
<label><input class="radios" type="radio" name="search_field" value="zip" onclick="change('div4');" />Zip Code</label><br />
<div id="div1">
<input class="input-box" type="text" name="search_name">
</div>
<div id="div2">
<input class="input-box" type="text" name="search_city">
</div>
<div id="div3">
<select name="search_state" size="1">
</select>
</div>
<div id="div4">
<input class="input-box" type="text" name="search_zip">
</div>
<div><input type="submit"></div>
</fieldset>
</form>
<p>Some Content</p>
<table border="1" width="100%">
<tr>
<td>Some other Content</td>
</tr>
</table>
</body>
</html>
Hi, I have a realy strange problem that I'm hoping someone can shed some light on. I've been building a new site, nice html and css, but seemingly randomly the layout completely breaks in Firefox 3, IE7/8 is always fine. This only occurs in page sections where there is a block level element (heading, div, para etc) inside of an anchor. <a href=""><h2>Some text</h2></a> Using firebug I saw that the html gets duplicated like so: <a href=""></a> <h2><a href="">Some text</a></h2> - notice that in this one the h2 and <a> have switched places! <a href=""></a> and after a bit of experimenting I found that removing the h2 made it work, and that everything's fine as long as a block level element isn't inside the <a>. In the stylesheet the anchor has display:block; Does anyone have any idea why this is happening, and why in FF only? I've been building sites for 3+ years and have never seen this before! Thanks. Hello all, I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly. The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements. Code:
#wrapper-body ul.staff-list{
list-style-type:none;
padding-top:10px;
position:relative;
}
#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
#wrapper-body ul.staff-list li{
float:left;
width:230px;
position:relative;
padding:8px 0 8px 15px;
z-index:1;
}
#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
#wrapper-body ul.staff-list li p{
padding:0 0 9px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list li small{
padding:0 0 5px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list-clerks li span{
color:#A6302B;
display:block;
float:left;
}
#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
#wrapper-body ul.staff-list li div.staff-list-detail{
display:none;
background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
padding-bottom:3px;
margin-top:-15px;
left:4px;
z-index:10;
top:15px;
position:absolute;
}
#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }
#wrapper-body ul.staff-list li:hover div.staff-list-detail{
display:block;
}
An image of what is happening below: Thanks for reading! Thanks for taking the time to read my question. The contents in my .ContentContainer are positioned differently in IE6 and FF. I want them to look like FF. What is wrong with my CSS that makes IE6 have more space on the left side of the green globe than FF? My goal is to have the 2 blue vertical lines line up. They line up in FF and IE7, but not in IE6. www.scopicdesigns.com/ZoneAll/index.htm Thanks, Brad Hello All, I wanted to ask a question. I'm having trouble with spacing between two divs. Here's the site I'm working on: johnraymondonline.com/mjbfoundation/ The problem is that I'm trying to put a 20pixel margin between the bottom footer div (that contains "test test") and the div just above it. I'm not having much luck at all. I've done a clear and also have checked the divs several times to see if I've missed any. I've even put a div between with some height and that doesn't work. I'm not sure if one of the div's above it has a fixed height. Any help would be greatly appreciated! Thanks! This is starting to bug me this problem, but on my site www.readinginfo.co.uk the background image (inner shadow and small gradient) at the top is playing up. It doesn't seem to want to align all the way over to the left, however as is always the way, it is working in firefox, ie7, 8 and safari. I've tried some of the ie6 fixes mentioned but I have the sneakiest of feelings that it is to do with the form element (the search box), positioning absolutely just bumps it over to the side. Thanks in advance for any reply!! Hi there, we have created the following list menu and we want to reduce the space between the left hand page margin, and the disc, at the 1st part of the text closer. Example: This is what we see now. | Text Here Example: This is what we would like to see. | Text Here Any suggestions? ul a, li a{ margin:0; padding:0; } This is my first time ever working with CSS. I am trying to put together a site; however, I am havings some setbacks straight out of the gate. I am trying to get the navigation bar to align up against the header. How do I eliminate the spacing between the header and the navigation bar? I have tried the padding: 0; method with no luck. PLEASE HELP! I have a drop down menu that works great in Chrome but in IE 9 I am getting spaces between my images for my navigation bar. My HTML is as follows... HTML Code: <ul id="nav"> <li><a href="#"><img src="../../images/global/header/home_btn.jpg" width="77" height="29" border="0" /></a> <ul> <li><a href="#" style="color:#000;">About Asthma</a></li> <li><a href="#" style="color:#000;">Treatment</a></li> <li><a href="#" style="color:#000;">Taking Control</a></li> <li><a href="#" style="color:#000;">Lifestyle</a></li> <li><a href="#" style="color:#000;">Resources & Support</a></li> </ul></li> <li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li> <li><a href="#"><img src="../../images/global/header/kids_btn.jpg" width="66" height="29" border="0" /></a></li> <li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li> <li><a href="#"><img src="../../images/global/header/allergy_btn.jpg" width="67" height="29" border="0" /></a></li> <li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li> </ul></li></ul> I have tried everything in my CSS to eliminate the spacing between the image files with no luck. Does anyone see what I am doing wrong here? Hi Guys I am having trouble trying to work out a bug that is creating a space between two div containers. To see what i mean click here for web page the css can be viewed here in firefox the two containers appear correctly but in internet explorer there is a 10px space between them. Could it have something to do with the background images? The div containing the login form also drops down in ie and i am convinced this is related to the main problem i am facing. Does anyone have any ideas as to what the problem is. Any help would be much appreciated! I am new to doing layouts in CSS and have a page (on an existing site) that I just did using CSS. The problem that I am having is that the "content" div has unwanted space above and below the div. I have padding & margins set to zero for the content div. Page is he http://www.prairieplugs.com/Sample1/sample1.htmlhttp://www.prairieplugs.com/Sample1/sample1.html CSS is he http://www.prairieplugs.com/Sample1...ieplugscss1.css Below is the CSS that is applicable: Code: body {
margin: 0px;
padding: 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: .9em;
color: #000;
background-color: #008F13;
background-image: url(images/bgbottom.jpg);
background-repeat: repeat-x;
background-position: bottom;
background-attachment: fixed;
}
#wrapper {
width: 900px;
margin-right: auto;
margin-left: auto;
padding-top: 15px;
}
#wrapper #header {
background-image: url(images/headerSamp1.jpg);
margin: 0px;
padding: 0px;
height: 276px;
background-repeat: no-repeat;
}
#wrapper #nav {
background-color: #FFF;
background-image: url(images/navSamp1.jpg);
background-repeat: no-repeat;
height: 60px;
width: 900px;
margin: 0px;
padding: 0px;
text-align: center;
}
#wrapper #content {
background-image: url(images/contentSamp1.jpg);
background-repeat: repeat-y;
margin: 0px;
width: 900px;
background-color: #FFF;
padding: 0px;
}
#wrapper #footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-repeat: no-repeat;
height: 79px;
background-color: #FFF;
background-image: url(images/footerSamp1.jpg);
margin: 0px;
padding: 0px;
}
#wrapper #nav ul {
margin: 0px;
list-style-type: none;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #060;
}
#wrapper #footer p {
text-align: center;
margin: 0px;
padding-top: 25px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#wrapper #nav ul li {
display: inline;
border-right-width: 3px;
border-right-style: solid;
border-right-color: #000;
font-size: 1.2em;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
#wrapper #nav ul li.last {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#wrapper #nav ul li a:visited {
text-decoration: none;
}
#wrapper #nav ul li a:hover {
color: #000;
text-decoration: underline;
}
#wrapper #nav ul li a {
text-decoration: none;
color: #FFF;
}
#wrapper #content p {
font-family: Tahoma, Geneva, sans-serif;
font-size: 1em;
text-align: left;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 15px;
}
|
|||||||