|
CSS - Two Bits Of Text One To The Left And One To The Right Of The Same Line
i wish to have two bits of text show as described in subject
this is the code i have at present. i know that i have used a style for an image but how do i do this for text ? thanks Code:
<style>
img.floatRight {
float: right;
margin: 15px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 3px;
}
</style>
left text here<b class="floatRight"> right text here</b>
Similar TutorialsHi. I'm reasonably new to tableless-design, and i've run into the common problem of aligning one bit of text to the left of a line and another to the right. I have searched the web and have found several means of achieving this, but in my case there is an image combined with a inline list (horizontal menu) that needs to be aligned left, and another combination of text and images to the right. | [image] text .... right-side text | This might seem rather simple, but it becomes more complicated: the entire block needs to be padded on the top in order for the text not to appear cramped up at the top, and the left-margin and right-margin of the image is then set to the corresponding negative values in order for it to still be displayed precisely in the top left corner. I have found this to be the only cross-browser compatible method. All the methods I have experimented with to align the two sides on left and right have either resulted in the image and text to be incorrectly (vertically) aligned or be displayed in different lines, even when the image is not used as part of the alignment-method. Any help or suggestions will be greatly appreciated. Thanx hi, this is my first post so go easy with me! I am trying to use css to make a top navigation bar, with an image to the left and an ul to the right, i want to ul to be in line with the bottom of the image so that it forms a nav bar but i am doing something wrong...! below is what i think is the relevant code and css.... any help appreciated!! If i need to upload the rest of the pages then let me know. i'm coding in php but this bit is all html so i guess that doesnt really matter for now, i'm new to web development, its part of a uni assignment! Code: HTML <div id="header"> <p align="left"> <a href="index.php"> <img src="/images/GATlogo.jpg" width="150" height="150" alt="Home" border="0" /></a> <ul> <li><strong><?php echo "$heading"; ?></strong></li> <li><img src="/images/login.gif" border="0"/><a href=" Login.php">Login</a></li> <li><img src="/images/register.gif" border="0"/><a href=" Register.php">Register</a></li> </ul> </div> Code: CSS #header{
vertical-align: top;
text-align: right;
border: solid thin #999999;
margin: 0px 0px 0px 0px;
background: #336699;
font-family: MS Trebuchet, MS Verdana, Univers, Helvetica, Arial, sans-serif;
color: #ffffff;
height: 155px;
}
#header li {
display: inline;
list-style: none;
padding: 40px;
}
#header a:link {
color: #ffffff;
text-decoration: none;
}
#header a:visited {
color: #ffffff;
text-decoration: none;
}
#header a:hover {
color: #ffffff;
text-decoration: none;
}
#header a:active {
color: #ffffff;
text-decoration: none;
}
Hi guys, Nearly ditched tables for good! Just got the last bits too do. Only problem is the length of the sidebars, can anyone explain how to make them go all the way down to the footer bar all the time? The right hand bar now goes down but only because it is full of line breaks, and as a perfectionist, i would like to ditch this and use CSS!!! Also, it goes all topsey-turvey in firefox, so if someone could explain why so I can fix it? CSS below, output of whole site is at http://www.generating-sets.com/index.new.php Note that the links on there currently revert back to the old style until the layout is fixed i can't make it fully live. its been fun trying to get it to all work with CSS, its looks better than tables too! PHP Code: h1 {font-size: 1.4em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h2 {font-size: 1.3em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h3 {font-size: 1.2em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h4 {font-size: 1.1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h5 {font-size: 1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} a:link {color: #ffffff; text-decoration: none;} a:visited { color: #ffffff; text-decoration: none;} a:hover {color: #dedbcb; text-decoration: underline;} a:hover {color: #dedbcb; text-decoration: underline;} body {margin: 0; padding: 0; font-family: sans-serif; font-size: .7em; line-height: 1.4em} div#header {padding: 2%; text-align: center; background-color: #0e2e3b; color: #ffffff; margin-bottom: 2px; border-bottom: solid #ffffff 1px} div#navbar {padding: 0%; text-align: center; background-color: #0e2e3b; color: #ffffff; margin-bottom: 0px; border-bottom: solid #ffffff 1px} div#newsbar {padding: 1%; text-align: center; background-color: #0e2e3b; color: #ffffff; margin-bottom: 0px; border: 2px #ffffff solid; position: relative; left: +0px; bottom: +3px; right: -3px; max-height: 160px; width: 100%;} div#footer {padding: 0%; text-align: center; color: #ffffff; clear: both; background-color: #0e2e3b; border-top: solid #ffffff 1px} div#maincontent {padding: 2%; text-align: justify; margin-left: 150px; background-color: #0e2e3b; color: #ffffff; margin-bottom: 2px; border-right: solid #ffffff 1px; border-left: solid #ffffff 1px} div#leftcolumn {padding: 2%; float: left; text-align: right; background-color: #0e2e3b; color: #ffffff; width: 150px; height: auto; } div#rightcolumn {padding: 2%; float: right; text-align: right; background-color: #0e2e3b; color: #ffffff; width: 10px; bottom: -1em; top: +1em;} I'm having a bit of mental block. How do I achieve the following: 100% width div LEFT SPAN (left aligned) | MIDDLE SPAN (centre aligned) | RIGHT SPAN (right aligned) I thought it was possible in one div rather than having to go the three column layout route? How does one align the text to the left of a div? I have "text-align:left;" specified, however the text is centered when it is too narrow to fill the screen. The URL of the page in question is http://what-is-what.com . If you type an illegal character, such as "=", in the Ask box then the narrow text that is returned appears centered. Other narrow pages on the same site do the same, of course. Tested in Firefox 1.5.0.7 on Ubuntu. Confused yet? What's the best way to accomplish this? page testimonials.css Main.CSS If you look at the page, you will see that I have the "signature" of the testimonial giver aligned right, but I would like the two p elements to be aligned along their left edge as well (but on the right side of the page, with everything flowing around any images)... I tried floating them right, which and clearing the floats, but then the testimonials don't flow around the images... can this be done without getting divitis? I'm having cross-browser compatibility with my website. On the right hand side I want to have images on the right and text to its left. I've tried variations of html/css but one seems to work with one browser and then not with the other. In safari it looks fine right now. http://www.ryanbuckley.ca/photos/ Can anyone help with this little annoyance? Thanks in advance! Ryan How do I create centered left-justified text? I want it to look something like this: +---------------SUPPOSE THIS IS MY PAGE---------------+ This paragraph is centered with respect to the page, but note that the text is wrapped around and left-justified within the paragraph. +-----------------------------------------------------+ Can I achieve that with CSS without using tables and manipulating cell widths and cell alignments? . hi, i'm wondering whether anyone here knows something that i don't about this... here's some code: Code: <div style="position:absolute; left:30px; top:90px; width:380px; height:80px; border: 3px double #000000; padding:10px; padding-top:5px; line-height:150%"> <table width="380" height="80" border=0 cellspacing=0 cellpadding=0> <tr> <td valign="middle"> <div align="center" style="width:380px;"> <span style="font-size:11px; text-align:left;"> aligned to the left.<BR> but is it centered?<BR> i think not.<BR> </span> </div> </td> </tr> </table> </div> i'm able to achieve vertically centered text in the table cell, and i can center it or align it to the left, but so far in my experimenting i haven't found a way to have text that is aligned to the left, centered in the div. i could always just add a bunch of padding-left on the div so that the text is pushed over and looks nicer although it is not centered, but i'm wondering whether there's a way to do it the way i originally planned to.. thanks very much for looking at this. 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 guys I'm in the process of getting my site together, and it's coming along fairly well. I've been using Firefox for testing, and haven't noticed anything wrong. However, when I checked it in IE8, text that I have explicitly left-aligned is now sitting centred on my page. I have validated the code, and there are no problems. I'm just confused... Here is my code: Code: <span style="text-align:left;">Jarryd Pearson</span><br /><br />
<table align="left">
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td class="contact">
Phone:
</td>
<td class="contact">
####
</td>
</tr>
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td class="contact">
Mobile:
</td>
<td class="contact">
####
</td>
</tr>
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td class="contact">
Email:
</td>
<td class="contact">
####
</td>
</tr>
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td class="contact">
Postal Address:
</td>
<td class="contact">
####
</td>
</tr>
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
</table>
And here's my CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background: #0d1866;
color: #CCCCCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
a {
color: #FFFFFF;
text-decoration: underline;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
paypal {
border: none;
}
img.footer {
border: none;
width: 88px;
height: 31px
}
td.contact {
vertical-align:top;
}
tr.rule {
padding: 0px;
}
/* DIVS */
div#main {
padding: 2px;
margin: 2px;
}
div#text {
width: 650px;
height: 370px;
vertical-align: top;
overflow: auto;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 10px;
}
I apologise if this has been posted before. I did a search, and couldn't seem to find this particular issue. If someone has already posted this, please point me in their direction! Thanks Jarryd Trying to achieve this: I'm having trouble figuring out how to float the right ad space correctly. This is what i've got so far: http://gatehouse.graffetto.com/floating_divs.html Code: Code: <html>
<head>
<style type="text/css">
.mainDiv {margin: 0; border: 1px solid black; padding: 10px; width: 600px; float: left;}
.image {height: 100px; width: 100px; background-color: red; float: left;}
.rightAd {float: right; background-color: blue; height: 250px; width: 300px; clear:right; margin-top: 300px;}
</style>
</head>
<body>
<div class="mainDiv">
<div class="image">test</div>
<div class="rightAd">test</div>
<div class="textDiv">
Text content
</div>
</div>
</body>
</html>
I know this is simple i just can't figure it out for some reason.. thanks for any help. Hi! Have been bashing my head against the wall with this one for a while now, so I thought maybe someone here could help me out a bit. Basicly, this sums up the issue: (sorry for the pure-text link, it didn't allow me to put up a propper one... >.<) http://img205.imageshack.us/my.php?image=cssiebug.png So, what I want is that the search field stays put, no matter how much text is entered into it. This works in all the other browsers, thought it's still a bit buggy, but I think I can fix that. Here is the code that should be of interest in this issue: Code:
<div id="bannerContent">
<!--{{{-->
<div id="logo">
<a href="<?PHP echo $home ?>" target="_self"></a>
</div>
<div id="search">
<form>
<input type="text" class="searchField" name="uSearchQuery">
<input type="submit" class="searchSubmit" name="uSubmitQuery" value="" onFocus="this.blur()">
</form>
</div>
<!--}}}-->
</div>
Code:
#bannerContent
/*{{{*/
{
width: 800px;
height: 158px;
}
#logo
/*{{{*/
{
background: url("../images/layout/logo.png") no-repeat;
width: 394px;
height: 56px;
position: relative;
top: 51px;
left: 24px;
float: left;
}
/*}}}*/
#search
/*{{{*/
{
width: 331px;
height: 32px;
position: relative;
top: 62px;
left: 58px;
display: inline;
float: left;
}
.searchField
{
background: url("../images/layout/search_field_bg.png") no-repeat;
width: 266px;
height: 32px;
border: none;
outline: none;
float: left;
<?PHP
if (!$agentIE && !$agentFF)
echo 'padding-left: 10px;' . "\n";
else
echo 'padding: 8px 0 0 10px;' . "\n";
?>
}
.searchSubmit
{
background: url("../images/layout/search_button.png") no-repeat;
width: 55px;
height: 32px;
margin-left: -10px;
border: none;
outline: none;
cursor: pointer;
float: left;
}
/*}}}*/
/*}}}*/
Thanks a bunch in advance! I have a header wrapper for a column heading that sets the width and background of the column header. In that column header I have a tag for the header title, which is aligned left. Know, I find that the customer wants to add an "As of Date", on the same line, but wants it aligned right. Is this even possible to do? I cannot seem to come up with the correct .css code that would allow me to do this. html code Code: <div class="wide_column_header"><span class="headerbartext">Make Your Enrollment Selection</span><span class="headerbartextright">As of 3/31/2008</span></div> css tags: Code:
.wide_column_header {
float:left;
width:558px;
margin:0 0 0 5px;
background-image:url(../images/wide_header.jpg);
height:21px;
font-size:100%;
font-weight:900;
line-height:100%;
vertical-align:bottom;
color:#fff;}
.headerbartext {
font-size: 12px;
font-weight:bold;
text-align:right;
padding-left:15px;
line-height: 140%;}
.headerbartextright {
font-size: 12px;
font-weight:bold;
text-align:right;
padding-right:15px;
line-height: 140%;}
I'm having problems getting my text to show up on the same line. I'm not sure what I'm doing wrong. Here is my code: Code: <div id="subtitle"><b>What Personal Information Is Collected?</b> <div style="font-size:7px"><a href="#whatinfo">SEE MORE DETAILS</a></div></div> The "subtitle" CSS is external: Code:
#subtitle {
font-family:sans-serif, arial, verdana;
font-size:9pt;
background-color:#cccccc;
padding-left:6px;
}
I don't understand why the "SEE MORE DETAILS" link showing up on a second line? I want it at the end of my subtitle. Thanks for your help in advance. i am trying to do something like: <h6>blah</h6><span class="note">*blah</span> but *blah is appearing underneath the h6 which is fair enough but how do i make it appear on the same line? i cant for the life of me think of a css property that lets me do that? Hello, more issues(!) I'm using "text-decoration: line-through" to cross out retail prices - catalogue style. The trouble is, when the effect is used with certain numbers like "8" and "3", the numbers become unreadable and it looks like we're charging more than the retail price on some products. My boss likes the effect, so I need to find out how to raise the height of the line-through. Does anyone know how I can do this, or any other methods (such as border control) that will be more effective. Many thanks! I'm not that familiar with css yet...so this might be a stupid question. I'm creating this website for my department. on the index page, there are several lists of links. between the links there is line spacing. but some link name is too long it got wrapped under. the wrapped under text also have line spacing. this makes the viewer feels that there are 2 links instead of one. how can i make the wrapped under text go right under without the line spacing? here is the link if you wanna see how it looks like now. http://www.scienceevents.uwaterloo.ca/ for example under the first left hand side menu, international year of astronmy is one link. but it looks like 2 links. how can i make them move together? this is the css for the primary nav Code:
#primary_navigation {
background:url(../images/primary_navigation_bg.jpg) no-repeat; /* This controls the background image on the home page. */
width:960px;
height:200px;
margin-top:20px;
font-size:0.75em;
clear:both;
}
#primary_navigation ul {
list-style:none;
margin-left:-20px;
height:110px;
}
#primary_navigation ul li {
line-height:2.0em;
margin-right:5px;
}
Hi How can I wrap a long line of text inside a fixed width div? |
|||||||