|
HTML - Aligning Text Left/right On Same Line Also At Bottom Of Screen
I get how to align two sections of text, one at the left of screen and one on the right, but how do I put this line at the bottom of the screen? I tried pretty much every combination now, bottom:0, vertical-align:bottom, vertical-align:text-bottom, with and without a parent div container, nothing works! The moment I try to put the line of text at the bottom of the screen the left/right alignment would be messed up or it wouldn't show at all. It seems html only allows you to align it left/right OR bottom/top, but not both?
Any help is appreciated. This is what I have so far: Code: HTML:
<div style="clear:both;" id="bottom">
<p class="left">Text to go on left.</p>
<p class="right">Text to go on right.</p>
</div>
CSS:
#bottom {
bottom:0;
}
.left {
float: left;
}
.right {
float: right;
}
Similar TutorialsI am attempting to have a table cell that is outlined. No matter how much text ends up in that table cell, the top part should align to the top, and the bottom part should align to the bottom. The cell size/border needs to be consistent across the row (which is why I didn't just float some divs). I have spent hours looking online, and have found various "solutions" that do not in fact seem to work. Here is my 'sample' code. I know that the valign isn't working, I just put it in there so it makes sense "logically" what I am trying to do. Thank you in advance for any help you can provide. Code: <table width="600">
<tr>
<td style="border:1px grey solid; width:150px;">
<table valign="top">
<tr>
<td>Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!</td>
</tr>
</table>
<table valign="bottom">
<tr>
<td>Float at the bottom!</td>
</tr>
</table>
</td>
<td style="border:1px grey solid; width:150px;">
<table valign="top">
<tr>
<td>Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!</td>
</tr>
</table>
<table valign="bottom">
<tr>
<td>Float at the bottom!</td>
</tr>
</table>
</td>
<td style="border:1px grey solid; width:150px;">
<table valign="top">
<tr>
<td>Float at the top!</td>
</tr>
</table>
<table valign="bottom">
<tr>
<td>Float at the bottom!</td>
</tr>
</table>
</td>
<td style="border:1px grey solid; width:150px;">
<table valign="top">
<tr>
<td>Float at the top!Float at the top!Float at the top!</td>
</tr>
</table>
<table valign="bottom">
<tr>
<td>Float at the bottom!</td>
</tr>
</table>
</td>
</tr>
</table>
How can I make the text appear at left bottom... I have 3 taGS RETURNING DATA FROM sql: <p> #TOC# </p> <p> BUSINESS POLICY TRADEMARK REGULATIONS. </p> <p> #Qry.USERSIGN# </p> I want the text from this tag to appear one after other at left bottom: For example: This is basic algebra lesson. BUSINESS POLICY TRADEMARK REGULATIONS. Smith How to do that? Any advise is appreciated.RosieGp Hi, I am writing various things on one line - such as Previous, Back to Main Menu and Next - but would like to align the differently e.g. I would like "previous" to be aligned to the left of the page, "back to Main Menu" in the middle and "Next" on the right side. I have tried pressing space bar - but am only able to do one space in Dreamweaver. Any ideas? Thanks. I want to align some text on opposite sides of the same line, ie: (but obviously without the underscore) <<<previous_____________________________________________________________ next>>> and I'm not sure how as if I just use p align, the "next" will be one line below the "previous"... any suggestions? thank you! I'm trying to position text, links and pictures to follow one after the other, but it doesn't work. I want to see "Homepage" on the left corner of my webpage "Next" on the right corner of my webpage Unfortunately this command doesn't work properly. <div style="text-align:left;solid 2px #ff0000;"><a href="F:\Webcomic\Website Folder\NWvisuals-Index.html"> Home</a> <p align=right><a href="F:\Webcomic\TheEyeoftheWorld3.html">Next</a></div></p> It makes the "Next" go down a line, instead of being in the same line of the "Homepage". Also, on that vein, is there any way I can align images and text on the same line without using spaces*? As in: <p align="left">Hello</p> <p align="center">Hello</p> <p align="right">Hello</p> But they all should stay on the same line. Any guides, or even links to tutorial about my issue would be appreciated. I've been trying to google for a while, it's becoming frustrating. *I think the problem with spaces is that people with different resolution would see the text in different places than I want them to see. Hi, I want to put images on the top left and topright corners of my website, but I want the images to rotate (they'd change when the page reloads).. How would I do that? Not sure if this is strictly a HTML problem or not >.< this is my site http://www.melbourneparkour.com.au/ as you can see the hyperlinks in the news and announcements section all align to the left and mess up the formatting of the site, the sentences just don't make sense. OTHER INFO. i use a wordpress blog to actually write the posts http://www.backend.melbourneparkour.com.au/ then i use a bit of php to call that info into the website <?php require_once('../brisbaneparkour_sub/backend/wp-blog-header.php'); query_posts('&showposts= 15&order=DESC'); while (have_posts()) : the_post(); ?> <h2><?php the_title(); ?></h2> <p><?php the_content(); ?></p> <?php endwhile; ?> not sure if that effects it. The confusing bit is that i do exactly the same here www.brisbaneparkour.com.au and there are no problems. same code, css, html, php etc, but different results. apologies if this is in the wrong place, im not sure exactly what is causing it. Hi, How do I get my table to be flush with the top and sides of the screen? Currently there is a spacing in automatic between. Thanks Hi all, I would like to create a fairly basic site where there are three areas. 1) The Banner which is pinned to the top of the screen. 2) The Main Body which will enlarge dependant on different screen sizes (Both width and depth) 3) The footer which is pinned to the bottom of the screen. The top banner is OK, and the enlarging widthways is OK, but I can't figure out how pin the footer to the bpottom of the screen and enlarge the main body to fill the gap. Any help you can offer is muich appreciated. Dont know how to explain this but i have some flash centered in the middle of the screen and i would like to put a image that to the left and right of the centered flash im running at 1024x768, i did seem to manage this but when i tried a higher resolution the flash stopped center and the left and right image kept to the left and far right of the screen when what i wanted is the left and right image to stay flush left and right to the centered flash. Below is my code minus the left and right image, could someone help me add a image to the left and right of the centered flash, so even if the resolution is increased the left and right image will stay flush with the centered flash. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
<!--
body {
background-color: #000000;
}
-->
</style></head>
<body >
<table width="770" border="0" align="center">
<tr>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="swflash.cab#version=7,0,19,0" tppabs="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="770" height="70">
<param name="movie" value="bombay-logo-top.swf" />
<param name="quality" value="high" />
<embed src="bombay-logo-top.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="70"></embed>
</object></td>
</tr>
<tr>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="swflash.cab#version=7,0,19,0" tppabs="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="770" height="400">
<param name="movie" value="main.swf" />
<param name="quality" value="high" />
<embed src="main.swf" main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="400"></embed>
</object></td>
</tr>
<tr>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="swflash.cab#version=7,0,19,0" tppabs="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="770" height="100">
<param name="movie" value="time.swf" />
<param name="quality" value="high" />
<embed src="time.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="100"></embed>
</object></td>
</tr>
</table>
</body>
</html>
hey, simple question here i just cant get it to work though. i want to align some text to the bottom and to the right of a table <table width="100%" cellspacing="0" border="0" cellpadding="18" height="75%"> <tr> <td bgcolor="000000" width="10%"> <img src="graphics/spacer.gif" width="100" height="1"> </td> <td bgcolor="ffffff" width="90%" valign="top"> <h2>Welcome to the Darwin Soccer Clubs Official Website</h2> <hr color="black"> <p>Here we strive to bring you all the latest news from the club by keeping you updated on the results from all our games throught out the season, the roster so you will never forget when your teams, where your teams playing and who there playing. <br><br> Also check out the new <a href="p4potw.html">Player of the week</a> page to see if you have made it to number one!</p> <p align="right" valign="bottom"> THIS IS THE PART I CANT GET TO WORK</p> </td> </tr> i dont no why.. and try not to think about the other writing in the table this is for my studies i am doing. cheers </table> What HTML code creates a bar that stays at the bottom of the screen, even when the paged is scrolled Like the Wibiya toolbar does http://wibiyareview.com/ Thanks James Hi guys I've spent the best part of two hours attempting this and have been failing. Miserably. What I'm trying to do is NOT to create a body background, but create an image, which will sit at the bottom of my browser window, regardless of it's size, and then go BEHIND other elements such as tables / images if my browser window size causes overlap. All help appreciated, thanks in advance. Antonz Hello there, I am pretty new to web programming. I am currently having problem with Iframe's height. here's what happen. I have a page with 2 Div. First div is the header with menu. The 2nd Div Contains 2 Iframes. The first Iframe is my title bar location, and the 2nd iframe is my content location. The menu and title bar location is fine. When I click on something from the menu bar, it changes both the title bar and the content page. I did it like this because I don't want my title bar to scroll up when my content page is longer. So here's my problem: for the 2nd Iframe which contain my content, I couldn't set the height properly so it will fill and extend to the bottom of the screen when resolution is high. Also i don't want a scroll bar to the whole website, but only to the 2nd iframe. here's an example. I made a very simple version of what is exactly my problem. So is easier to read on the forum. index.html's code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body scroll="no"> <div id="apDiv1" scrolling="no"> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> </div> <div id="apDiv2" scrolling="no"> <iframe src="123.html" style="position:absolute; width:780px; height:35px; top:240px;" scrolling="no"> </iframe> <iframe src="abc.html" style="position:absolute; width:780px; height:100%; top:275px;" scrolling="yes"> </iframe> </div> </body> </html> 123.html's code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body> 1234567 </body> </html> abc.html's code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> </body> </html> Notice, I have a long TEST there. because i want only the iframe to scroll, but not the whole website. Anyone know a solution to this? How do I align the 2 flash objects on this page to the same line? website is www.gpostal.net I can seem to get the 2 flash objects on the same line Man I have such a hard time with this and I have come across it again. Please see the screen shot below. In the red box you will see 2 check boxes. I want those check boxes moved up there where the text is that says "Move text up here". Here is the code for that fieldset... Code: <fieldset>
<legend>Default Picture</legend>
<input name="imagefile1" type="file">
<div class="checkBoxes">
<input id="default" type="checkbox"> Set as Default<br>
<input id="default" type="checkbox"> Remove Picture
</div>
</fieldset>
Here is the CSS for the checkBoxes Class... Code: .checkBoxes {
float: right;
}
Is their anyone that can help me out with this? I would post a link but the page is in a password protected area so it is restricted. -Thanks Ok I am having a brain fart moment and it is just one of those days when nothing is working. I am trying to align two divs on the same line but it isn't happening like I want. One of the divs is higher then the other. This is the page.... http://www.mesquitechristmas.com/local/browse.php It is at the top where it says "Mesquite Christmas Display Finder" on the left and "Account Profile | Log Out " on the right. Not the text on the right is where I want it. I need to bring the text on the left down to where the text on the right is. Hope I didn't confuse anyone. I have tried float: left on both of them and cleared them both and set widths and display inline etc. I have tried all kind of combination and can not get them to line up. I even set them inside of a div and no luck. The combination I have now is the closest I can get it without it completely breaking the layout. HTML... Code:
<div class="headerTitle">
<h2>Mesquite Christmas Display Finder</h2>
</div>
<div class="loggedIn">
<?php if($_SESSION['email']){
echo"Account Profile | Log Out";
} ?>
</div>
CSS... Code: .headerTitle {
text-align: left;
}
.loggedIn {
text-align right;
}
Any suggestion? -Thanks Hi all, I'm tearing my hair out trying to correct the following error. I have one page on my site (the only long page) that has a 1px white line at the bottom in Firefox. It doesn't appear in IE and doesn't appear in my other pages (they all run off the same header and footer files). I was wondering if you could help. Page in question is http://free-uk-bets.co.uk/bet365.php. I've run the page through the W3C validator for HTML and CSS and it passes. I'm using HTML 4.01 Transitional encoding. I think it may have something to do with the height of the divs. Please could someone help? please help me. im trying to align both left and right side in the same line but it doesnt seem to work. im trying to line up the "Boys Varsity" and "Girls varsity" together. please help me out. here is the html im trying to figure out: <p style="float: left; width: 32%; text-align: left;"><u><strong>BOYS VARSITY<br> </strong></u>******* 12<br> ******* 11<br> ******* 12<br> ******* 12<br> ******* 12<br> ******* 12<br> ******* 12<br> <br><u><strong>BOYS JUNIOR VARSITY<br> </strong></u>******* 12<br> ******* 9<br> ******* 12<br> ******* 11<br></p> <p style="float: left; width: 32%; text-align: center;"></p> <p style="float: left; width: 52%; text-align: right;"><u><strong><br> GIRLS VARSITY</strong></u><br> ******* 12<br> ******* 12<br> ******* 11<br> ******* 10<br> ******* 12<br> ******* 11<br> ******* 10<br> </p> |
|||||||