|
CSS - Changing Text-align Inline? Span Not Working, Div Is???
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 /> Similar TutorialsHow can i use text-align with inline? So it doesn't line break after, but when you use display:inline with it, it takes away the text-ailgn. Style: Code:
.results{text-align: right; display:inline;}
h3{text-align: left; display:inline;}
html Code: <H3>Audio</H3><p class="results">Displaying Results</p> I 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, 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! 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. I have a <p> tag with text inside of it with a height of 20px and width of 100px. Horizontal text alignment works fine within in, but I want the text to sit in the middle of the tag and I just can't do it. It defaults to sitting at the top. I try vertical-align: middle, but that doesn't work. None of the the vertical aligns do anything in fact OK, I have <h1> and a class .footer_header_link. Both should center the text. But the class code isn't being centered. I thought this would be simple, but I must be overlooking something. Here's my css: Code: h1 {
font-family:arial black;
color:#666666;
font-size:12pt;
margin: 0;
padding: 2px 0;
text-align:center;
}
.footer_header_link{
text-align:center;
font-family:arial black;
color:#666666;
font-size:12pt;
margin: 0;
padding: 2px 0;
}
You can see a sample testhere. Scroll down the 3 column bullet point list. You will see the headers with an underline aren't centered. They have a class of "footer_header_link" Any ideas? thanks Sorry solved problem but can somebody post a definite solution to making a body { text-align:center } style work in both IE and firefox? I would like to delete this thread but I don't know how to, as another thread answered the question somewhat ambiguously. Thanks. When i float my div to the left, i cant seem to get the text to align right, can someone show me a way out of this horriable predicament i have found my self in!! 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> I have the following list that I want displayed horizontally. I chose to do it with display:inline instead of float:left as that seemed to be the only way to get it to center on the page: http://www.jimandkris.com/listtest.html However, now I can't figure out how to get those submenus to align under their respective parent. Hopefully this is an easy one, any suggestions? can someone explain why a specific CSS works in IE but not Mozzila? This is the Page and its the word "button" directly below the logo. Code:
.Page_Title {font-size: 13px;
color: #999;
font-weight: bold;
padding-left: 25px;
background-color: #eeeeee;
}
Any ideas? Thanks. Hi, I have this style for font size. I then use span class to use it, but it only works in IE and not FF. Any ideas why? Have i got something wrong with it? PHP Code: .11px { font-family: verdana, arial, tahoma; font-size: 11px; } Hi all, I have this piece of coding (which I'm pretty new at) that allows a "display:none;" span to appear on a link:hover. It works great in Firefox, but I can't for the life of me find why it isn't working in IE. I did this once with an Unordered List and it worked in IE, but now that I have used a table to structure the menu, it isn't working. here is the site: magicbeanz.blogsome.com I've attached the style sheet and html to this post. The relavent coding should be near the bottom. See #catmenu and the #books, #movies, #other, #hobbies, #games, divs. I really hope someone can help. Thanks in advance!! Oh, and I wouldn't mind some feedback on the coding and design. I'm back to working on my skills after a long break >< Hey there Does anyone know why my code he a.linky:hover .spany{display:block} ...does not work in ie6 but works SWEET in FF? CSS: .linky{z-index:200; display:block; position:relative; cursorointer; } .spany{ display:none; position:absolute; left:0px; top:0px; width:120px; height:120px; background:#ffffff; } a.linky:hover .spany{display:block; } HTML: <a class="linky" href="http://www.domain.co.nz/"> <span class="spany"></span> <img src="http://www.domain.co.nz/thumb.jpg" width="120" height="120" border="0" style="vertical-align:bottom"/> </a> Thanks heaps guys for even looking! i have a parent container ('footer') where i have 2 child elements. the first ('feeds-techs') is floated right, while the second ('footer_text') is displayed inline to get its top border to display properly. 'feeds-techs' is taller that 'footer_text'. what i want is for the container to expand to the height of 'feeds-techs'. i accomplished this using the ":after" pseudo-element. i also want the inline element to rest at the bottom of the container (so that the bottoms of the 2 child elements are even). first, i tried to set the parent container to "vertical-align: bottom;" but to no avail. then, i attempted to use "clear: both;" on 'footer_text', but that didn't work in firefox (i'm assuming because it's an inline element) - it also didn't suit the display i wanted since 'footer_text" was then resting below 'feeds-techs'. i also attempted to use the ":before" pseudo-element on 'footer_text' and setting the height to 100%. still didn't work. then i tried to set the 'footer_text' to "margin-top: 100%;" - still nothing (actually, this caused the top border of 'footer_text' to disappear in ie -- ie sucks sooo bad >:-{ ). i'm wanting to steer clear of [x]html hacks, like a "<div class='clearboth'> </div>", because that's not very pure css and it doesn't suit my semi-obsessive-compulsive disorder. ;-) i'm sure there's a solution out there -- i'll be surprised if you can't solve this problem using pure css. if you would like to see the page in question and my code/stylesheets: page in question (view source for my xhtml) stylesheet (if, for some really odd reason, you need to see my other stylesheets, you'll see their location in the source of my xhtml - you should know where to look) any ideas? CSS Definition: span.votelinks { right: 0; position: absolute; padding: 1px 280px 0 0; background: none; font-size: 12px; font-weight: bold; } Its use in a .tag file: <span class="votelinks"> <a href="${pageContext.request.contextPath}/secured/vote.do?id=${article.id}&type=ARTICLE&good=true"><img border=0 src="${pageContext.request.contextPath}/images/good.gif"/></a> ( ${requestScope.UP_VOTES} ) <a href="${pageContext.request.contextPath}/secured/vote.do?id=${article.id}&type=ARTICLE&good=false"><img border=0 src="${pageContext.request.contextPath}/images/bad.gif"/></a> ( ${requestScope.DOWN_VOTES} ) </span> The problem is that the icons are centered perfectly but the text isn't. Is there a way to only pad the text? Thanks in advance, Mark Hey everyone. When I have text in a span and a tag (maybe any inline element for that matter), it would seem the vertical positioning is different from IE than other browsers. The site I'm having trouble with is here... http://jobs4ecps.ca/ It's only a "soft launch" so far, so please go easy on me about other blemishes The problem area I can use as an example is the top black bar. The text is higher in IE than other browsers. Any ideas on how to level it out? Thanks! Hello All, As this is my first post on the forum, thank you in advance. Although I'm just a beginner with HTML/CSS I will do my best to give back to the community in the future. Currently I am pulling my hair out over what should be straight forward. I am working on a Wordpress site under the 2011 theme, trying to create a row of text made up of an unordered list with the first li left aligned, the second li centered, and the third li right aligned. Unfortunately I cannot get my list to display inline and after researching online and trying for hours I am no closer. I'm using a class because I am going to repeat this multiple times on the page but that shouldn't matter. I'm running OSX 10.6.8 on Safari. I look forward to discovering what I'm doing wrong! Thanks, Ross Hi, I have some simple code as follows: Code: #stars{
width:400px;
height:33px;
}
.star{
width:33px;
height:33px;
background-image: url('images/product_review/star.gif');
font-size:0pt;
}
</style>
</head>
<body>
<div id="stars">
<div class="star">1</div><div class="star">2</div><div class="star">3</div><div class="star">4</div><div class="star">5</div><div class="star">6</div><div class="star">7</div><div class="star">8</div><div class="star">9</div><div class="star">10</div>
</div>
I tried dislpay:inline; for the #stars and the .stars CSS, but inline makes the images disappear. They only show when I remove "inline", but they are stacked in a vertical row. I need them to be horizontal. Here's the link: click here Can someone show me what I doing wrong? thanks I have an alignment issue that is driving me crazy. For whatever reason, the text that I have in a <span> field is dropping too far down for the last line. Here is a screenshot of the relevant text: Yada yada For whatever reason I can't keep the final "Yada" from dropping farther down. It is in the following <td> field: Code: <td style="height: 200px; width: 150px; vertical-align: top; padding-top: 10px"> And the class for the span has the following characteristics: Code: .announcement_body
{
color: black;
font-size: x-small;
}
I can't see what would cause this. I've already tried adjusting the height of the <td> field without any luck. I did get consistent spacing when I added the characteristics "vertical-align: middle", but that made the distance between every line too large. Any idea what I'm missing here? Stephen |
|||||||