|
CSS - <span> Not Remaining Inline?
Hi, there.
I've created a simple 2-column list using a <span> to justify items I want in the right column to the right edge of the containing <div>... everything is working fine in Firefox, but have just noticed that Internet Explorer is punching all the spans down one line. I thought spans were purely inline, so this is a little confusing! Here's the CSS I'm using: Code:
#300px-LIST {
width:300px;
margin:0px auto;
text-align:left;
padding:0;
}
.right {
float: right;
}
...and the HTML: Code: <div id="300px-LIST"> LINE 1 LEFT<span class="right">LINE 1 RIGHT</span><br /> LINE 2 LEFT<span class="right">LINE 2 RIGHT</span><br /> LINE 3 LEFT<span class="right">LINE 3 RIGHT</span><br /> </div> Any pointers gratefully received! Similar TutorialsI am a 3week knewb to css. I was wondering if anyone could explain to me when I would use: div or display:block div or span span or display:inline thank you Hi all, I've got a problem on my hands. I've been restructuring the site I work on from their FrontPage code to complete XHTML + CSS. I always thought that by using span's that I could make a block level element display inline, but keep all of it's block level uniqueness, such as height and width and other items, but would display right next to other elements. Works great with headers and such but not with boxes. I created a 4 <span> system inside a centered div, figuring they'd all work. But span's don't keep their block level uniqueness, so nothing displayed at all! I fixed 3 of these 4 by putting their background images inside the spans, which I wanted to avoid, but it works so I won't complain on that. Now I have this. Code: <div id="bigdiv"> <span id="maptop"><img src="images/2004/new_main_front/wel_left_top.jpg" alt="Welcome!" /></span><span id="feattop"><img src="images/2004/new_main_front/feat_right_top.png" alt="" /></span><br /> <span id="mapbot"><img src="images/2004/new_main_front/wel_left_bot.jpg" alt="" /></span><span id="featbot">This is where things will go.</span><br /> </div> Span id featbot has no images, it has a repeat-x background so that I can place and change text in there at will. Because of this, and it being a span, it wraps only to the size of the text, which isn't good. I found a display: inline-table (displays as a table, but inline, pretty obvious), which works great in Safari for OS X, but not in IE 6 or Firefox on Windows. How would I structure this correctly so that it actually does work? Here is an image showing the design and how it's set up (ignore the gradients, they're not being used). As you can see where featbot is, that's where text will go, the others are images, so they display right. Suggestions? I'm really confused here... Thanks. a div works with this style, but a span does not. i want part to be left (defalut by the css file style applied), and then the inline span style to be to the right. not working: Code: echo "<a title='".$link['desc']."' href='".$linkurl."' class='cmenulink'>".$link['title']."</a>"; echo "<span style='text-align: right; padding: 1px;'>In: ".$link['in']." Out: ".$link['out']."</span><br />"; if you don't know php... Code: <a title='abc' href='abc.com' class='cmenulink'>ABC</a> <span style='text-align: right; padding: 1px;'>In: 999 Out: 999</span><br /> Hi I'm struggeling with the following: I have some span elements inside a td. If I apply padding to a span then the padding is flowing outside the td (above and below the borders of the td). Why does that happen and is there a way to make the td to autogrow to fit all the span's inside? Se example code below Code: <table border="0" cellpadding="0" cellspacing="0" align="center" style="width:300px; margin-top:50px;"> <tr> <td style="background-color:gray; text-align:center; border:1px solid black;"> <span style="margin-right:20px;">First</span> <span style="margin-right:20px;">1</span> <span style="margin-right:20px;">2</span> <span style="margin-right:20px; background-color:orange; padding:10px;">3</span> <span style="margin-right:20px;">4</span> <span style="margin-right:20px;">5</span> <span style="">Last</span> </td> </tr> </table> ******* UPDATE ******* I found this link today: http://css-discuss.incutio.com/?page=FormattingContexts which says (among other things): ************************* Only one thing impacts the vertical space between inline elements: the line height. Normally, the line height is based upon the line height for the text in that line, or the height/padding/border/margin of any replaced items. The element on a line with the largest line height or replaced height is the one to define the vertical space that line takes up. Height, padding, border or margins on text do not impact the line height or the container height. Instead, borders, padding and margins overlap from line to line. If you want to give an inline text element some padding and border, make sure you give it some extra line height, too, or else it will overlap with whatever else is above or below it. ************************* So does that rule mean that I have no way to make my TD autogrow in relation to the padding applied to the SPAN in the example above? Is there any working workarounds for this...? I am trying to make sure that the body div takes up all the available space in div container (the parent div), however: Code: height: 100%; makes it take up 100% of the whole page, not just the container. Here is my source code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Home -- OpportunIT</title> <link href="main.css" rel="stylesheet" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="alternate" type="application/rss+xml" title="OpportunIT News Feed" href="http://www.sphinxgaming.com/OpportunIT/" /> <link rel="shortcut icon" href="favicon.ico" /> </head> <body id="test"> <div id="container" class="rounded-corners"> <div id="header">OpportunIT</div> <div id="nav-menu"><ul> <li><a href="?page=home">Home</a></li> <li><a href="?page=software">Software</a></li> <li><a href="?page=about">About us</a></li> <li><a href="?page=contact">Contact us</a></li> </ul></div> <br/><br/> <div id="body"> Welcome to OpportuneIT!<br/> <br/> <b>What's New:</b><br/> <a href="?page=sinc">SiNC Framework Announced</a><br/> SiNC is a framework used to manage computers and networks in a secure,<br/> reliable, easy to learn and use way. SiNC can make almost any network<br/> management tasks simpler, such as transferring a file over a secure<br/> connection, running commands on or even remotely controlling computers,<br/> checking the status of various servers, computers and online services<br/> automatically, simplifying networked programming tasks and managing network<br/> security.<br/> <br/> <a href="?page=home">Renamed and Redesigned!</a><br/> We have been renamed to OpportuneIT, and are working on a brand new<br/> website... Stay tuned for more info on this.<br/> </div> </div> </body> </html> Code: html, body {
height: 95%;
}
#container
{
height: 100%;
width: 95%;
margin-left: auto ;
background: #FFFFFF;
margin-right: auto ;
}
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu
{
margin-left: auto ;
margin-right: auto ;
width:40em
}
#nav-menu li
{
float: left;
margin: 0 0.15em;
}
#nav-menu li a
{
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
#body
{
height:auto;
width: auto;
margin-left: auto ;
background: #FFFFFF;
margin-right: auto ;
padding: 5px;
}
#header
{
margin:0px;
padding:0px;
background: #000000;
width:auto;
height:54px;
font-family:Verdana;
font-size:30px;
text-align:center;
color:#FFFFFF;
border-bottom: #AAAAAA solid 5px;
}
#footer
{
margin:0px;
padding:0px;
background: #000000;
width:auto;
height:24px;
text-align:center;
color:#FFFFFF;
}
.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 19px;
border-style:solid;
border-width:20px;
}
Thanks in advance. Ok so I have a logowrap layer which is at 100%. I have the actual logo set with 'float:right;' with a width of 900px. Now i have a layer just before that with float:left;, but i want to set the width with the remaining space, so all resolutions will render it the same way, whether it be a 1280*760 - or whatever. CSS: Code:
#logowrap {
width:100%;
background-color:#000000;
}
#logonavtext {
float:left;
color:#0099FF;
padding:2px;
}
#logonavtext ul {
list-style:none;
}
#logonavtext li {
display:inline;
margin-right:30px;
}
#logowrapimg {
float:right;
width:900px
}
HTML: Code:
<div id="logowrap">
<div id="logonavtext">
<ul>
<li>[ I ]</li>
<li>[ II ]</li>
<li>[ III ]</li>
<li>[ IV ]</li>
<li>[ V ]</li>
<li>[ VI ]</li>
<li>[ VII ]</li>
<li>[ VIII ]</li>
<li>[ IX ]</li>
</ul>
</div>
<div id="logowrapimg">
<?php
include('scripts/logorandom.php');
?>
</div>
<div class="clear">
</div>
</div>
Any help would be great. Of course If you have a better way, I would more then welcome it. This is something I've never been able to figure out a good solution for. I've found a few posts about the same issue, but in more specific terms. Quite often they also speak about how to fill the entire viewport in some way. Anyway. Let's say we have a container: <div id="container"></div> Inside this container we have sort of a caption element. An element that is dynamic in height. Font size, padding, margins and the like will affect how high it gets in the end. <div id="container"><h2>My Dynamic Height caption</h2></div> Now. If i add another "sub container" in there. How do i make it take up the remaining space (height) of the parent container, no matter the size of the parent container and no matter the size of the sibling's dynamic height content (the h2 in this example) <div id="container"> <h2>Caption</h2> <div id="subContainer"> I want this div to be as high as what's left of "container" </div> </div> I know I can do this with javascript, calculating exact dimensions of subContainer based on the current environment. I even have a CSS solution, making "container" position relative and positioning subContainer absolute with left,right,bottom = 0 and top = somewhat close to how high the h2 is. Any other ideas? Hello, I would like to know how to do this: I have a fixed-size div and several inner divs in it, positioned vertically (on top of each other). I want the last div's size to be equal to the size of the fixed-size div minus all the other divs (currently, one other div). Example: I have a form, which has a certain height. The form has a header and a section (div) with 3 inner checkbox divs (columns), and I want the checkbox divs to scroll if they overflow the main div and in effect the parent div. Is there any way to do this? Thanks! EDIT: Here is a live example. (in this example, there's an extra div within the child div holding the checkboxes) Currently, instead of the desired solution each checkbox div is 70% of the height of the main parent. helenas flower abode.com / pictures.php?width=800&height=1118&picturediv_height=366&pngalt=.png&js=1&action=search EDIT2: I changed the structure of the site and the page link as well, and you can't see the temp. fix in Firefox and possibly in IE7 (tested in IE6). EDIT3: Anyone? I'm (noobishly) developing a site and want a menubar of fixed size at the top, with the remaining area of the window filled with a div containing the scrolling content. It's height should be effectively 100% - size of menubar. When I tried 100% height it natually was the full screen height, but then the whole page is full screen height plus the height of the menu bar. Does anyone know how to size a div to meet my needs? Here is the basic structure i'm working with: Quote: <div id="header'> header goes here </div> <br clear="all"> <div id="leftbar">dynamically generated content from php here</div> <div id="map"> map here </div> the styles: Quote: #header{ height:42px; width:100%; background-image: url(../images/header/header_spacer.jpg); background-repeat:repeat-x; text-align:right; } div.leftbar{ float:left; width: 400px; height:100%; overflow: scroll; z-index:1; } div.map{ float:left; } The Problem: In all browsers the height of the leftbar is : 100% of the entire page as opposed to 100% of the entire page minus the size of the header element. This causes a scroll bar to appear on the page. Any ideas on how to solve this problem? If I don't define a height of 100% the leftbar div doesn't scroll at all. A good example of what i'm trying to accomplish here is : maps.google.com . Notice how on that site, the left menu bar scrolls, but is always 100% of the remaining page length (after the search stuff on top). thanks in advance. Hi. See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should. Please also read some comments in the code. Code: <html><body><center><br><br> Why does image not force the outermost span to be at least as high as image?<br> If the text are long enough and gets below the bottom border of image it look good though.<br><br> NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br> In my real application I'm using an <a href=" ...> around the outer span in examples below.<br> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;"> <span style="display:block; float:left"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0"> </span> <span style="display: block; color: white;"> Text here. </span> </span> </td></tr></table> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left"> Text here. </span> </td></tr></table> </center></body></html> Hi, I am currently trying to produce a website using CSS style sheets. I have used 'span' to position and align blocks of text on the page. All looks well, but when I try and validate the page I get an error message that says the <p> and <ol> tags cannot be used within <span> tags. Can anyone suggest anyway round this? Many thanks x hi, i have a chunk of dynamic text coming in. it can have html links in it. so something like: 'blah blah blah <a href="site">link text</a> blah blah' im trying to stylize the dynamic text with CSS. i can get the font size and everything to work but i can't get the link text to behave like i want it to. here's what i have: PHP Code: //the css class .articleDesc { font-family: verdana, arial, geneva, sans serif; font-size: 12px; font-weight: none; text-decoration: none; color: #000000; } //trying to make all links red, doesn't work a.articleDesc { color: #FF0000; } //php print '<span class="articleDesc">' . $dynText . '</span>'; the links just come out default, ie. blue and purple... anyone know what's wrong here? Hi, Code: <tr><td colspan="2" height="5"></td></tr> <tr><td width="30%" align="right">City</td><td>This is supposed to be some content</td></tr> How do I imitate structure of the table above. In the example below the text between <span> if too long ends up on new line below <label> How do I make sure that it stay on right side? Code: <div><label>City</label><span>This is supposed to be some content when too long appears below span not below label</span></div> Thank you. I'm a novice with CSS and HTML so the following may seem elementary to most of you. I'm a retail vitamin store owner with a website, (URL address blocked: See forum rules) . We do very well with our store front and are getting better and better with our online discount vitamin store. Our web master has programmed our site so we can easily insert new products. This is done in the <body>. Recently I've wanted to add some spice with color and formatting . At first I was doing this with something like <FONT FACE="Verdana, Helvetica, Arial" size="4" color="006600">. But now as I get into CSS and double checking all code with W3.org, it doesn't like this approach. Now I'm trying <span id="enzymatic" class="prod_description"> in the <body> with span#enzymatic p { color: green; } span#enzymatic h4{ color: blue; } etc. in a CSS definition file. It all works well, but W3.org still doesn't like where I've inserted the code. If you go to our page: (URL address blocked: See forum rules)=country-life-seniority-multivitamin You will get among other "errors" the following message: <h4>Seniority ™ Multi-Vitamin Capsules </h4> The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). Any hints as to what basic rules I'm breaking? Be kind. Many thanks, healthyphil Why is this? Code: <div style='margin:0 0px 5px 3px;text-align:center;background-color:#EEEEEE;padding:4px 0;border:2px solid #CCCCCC;'> <span style='color:#888888;font-weight:bold;font-size:10px;'> RECENT BLOGS </span> </div> different than this? Code: <div style='margin:0 0px 5px 3px;text-align:center;background-color:#EEEEEE;padding:4px 0;border:2px solid #CCCCCC;'> <span style='color:#888888;font-weight:bold;font-size:10px;'>RECENT BLOGS</span> </div> Why is IE7 adding its own padding when i don't add a nl between the span and the content within the span? It's the display:block issue that also happens with images. But I just can't understand why IE7 would add spacing there, the 2 above are almost identical. Hello, Well this is a very simple question ... how can Iset the width of a span from CSS? Basically I tried setting the span with from CSS however the span size remained wrapped to the text inside rather then taking the width I desire. I check some interent forums, and found out that if I set the float:left the width is taken, but my span is no longer is place! is there a way to set the span width without having to set thr float:left option? thanks and regards, Sim085 I am creating a page where I will list OS names, and when I mouse over the name I would like to display the versions in the database for the corresponding name. The problem I am having is that I'm trying to use span to display the versions but I keep getting a document.all.menu1.style is null or not an object. Here is my code. I don't seewhere it's not working since I got this code from a tutorial and the tutorial code works just fine. <STYLE TYPE="text/css"> #menu1 { display : none } A:link {color:black; text-decoration:none} A:hover {color:blue; text-decoration:underline} </STYLE> <td bgcolor="#DCEBEB"> <SPAN onMouseOver="document.all.menu1.style.display = 'block'" onMouseOut="document.all.menu1.style.display = 'block'"> <img src="../../images/plus.gif">AIX<br> </SPAN> <SPAN ID="menu1" onClick="document.all.menu1.style.display = 'none'"> <img src="../../images/minus.gif"><a href="http://www.test.com">Testing 1</a><br> <img src="../../images/minus.gif"><a href="http://www.yahoo.com">Testing 2</a><br> <img src="../../images/minus.gif"><a href="http://www.cnn.com">Testing 3</a> </SPAN></td> I'm wondering is is it possible to have a <div> tag where a left <span> can stick to the left and a right <span> to stick to the right. What I'm looking for is .... ============================================ =[blah blah] (lot of spaces here) [blah blah]= ============================================ Code:
div.divTop
{
margin: 0px;
padding: 8px 0px;
width: 600px;
color: #000000;
font-weight: normal;
font-family: verdana;
font-size: 10pt;
font-style: normal;
text-indent: 20px;
}
span.spanTitle1
{
font-size: 16pt;
}
span.spanTitle2
{
font-size: 10pt;
}
[code]
[code]
<div class="divTop">
<span class="spanTitle1">blah blah1</span>
<span class="spanTitle2">blah blah2<img src="....."></span>
</div>
Edit: Can't make the ASCII text work here..... |
|||||||