|
HTML - Aligning 3 Difficult Divs
Hello there!
I am having some problems with my site at the moment. Since I did not build a big part myself (and have little knowledge of coding), I cannot change something I would like. Check it out he my site As you see, there are two arrows beneath the big scroll. I would like to have one to the left, and one to the right of the big scroll. So, I think I should align the three, but don't know how! This is (I think) the code at the moment. If asked I can give additional info. What's my next step? HTML Code: <div id="bigscroll">
<!-- <div class="nav1l"><a href="javascript: ;" onclick="hide_more_nav();" id="scroll_nb"><span>Back</span></a></div> -->
<!-- <div class="nav1r"><a href="javascript: ;" onclick="hide_more_nav();" id="scroll_nn"><span>Next</span></a></div> -->
<div class="scroll">
<ul>
<?php
$query = "SELECT _img_big, _text_short, _text_big FROM pics ORDER BY _time DESC";
$result = mysql_query($query) or die(mysql_error());
while ($row = mysql_fetch_array($result)) {
echo '<li>
<span class="short">'.vars_decode($row['_text_short']).'<br /><a href="javascript: show_more();">Show more</a></span>
<span class="big">'.vars_decode($row['_text_big']).'<br /><a href="javascript: hide_more();">Hide more</a></span>
<img src="'.$row['_img_big'].'" alt="" />
</li>';
}
?>
</ul>
</div>
<div class="clear"></div>
</div>
Similar TutorialsOk 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 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, so here is my problem. I am pretty new at HTML coding and what not. I just launched a new website, http://reflectiontechnologies.com/ . Basically, I am trying to launch an online backup service for peoples to back up their files. That is up and running and is currently in the beta stage so occasionally, the backup server goes offline. What I want to do is on my server page (http://www.reflectiontechnologies.com/html/horizon.html) is to have a code of some sort that will check the server url (horizon.reflectiontechnologies.com) to see if it responds and if it doesn't, to redirect to a page that says the server is temporarily offline. PS... If you want to beta test the backup server, let me know Also... I had made a page that I updated manually before to redirect to the server or to redirect to a page alerting users that it was down. The problem I had though was that the browser would cache that page thus making it ineffective. Ok here it is..........There is a site that uses a code that I want to use as well. The name of the site is http://www.gamefaqs.com The code does this: Everytime someone logs in it keeps track of each time that they log in. They get a point for each day......not each time they log in. In other words they can't log in and out 10 times and get 10 points. It only works in the sense that they get a point per day. I can only speculate that the code involves a timer feature. After midnight, pacific time, they get another point for that day provided they log in. They don't get another point until midnight again. The code that makes this work is a little beyond my knowledge. If anyone out there knows how to write a code that works similiar to this please let me know. Thanks i want to make my text go from left to right inside my html box. for some reason its only going in the center of the page. ive tried editing the code but to no avail. please help me! heres the address, thanks dale. http://stores.ebay.co.uk/My-Memory-U...WITH-HTML.html and here's the code............... <div align="center"><table border="0" cellpadding="0" cellspacing="0" width="819"> <tbody><tr><td><img src="http://www.use.com/images/templates/bynum/6411/pintop.jpg" width="819"></td></tr> <tr><td align="center" background="http://www.use.com/images/templates/bynum/6411/topbar.jpg" height="80" valign="middle"><font color="#000000" face="arial, helvetica, verdana, sans serif" size="4"><b></b></font></td></tr> <tr><td background="http://www.use.com/images/templates/bynum/6411/midbar.jpg"><div align="center"> <table align="top" border="0" cellspacing="0" width="720"><tbody><tr><td style="background-repeat: no-repeat" width="720"><div align="center"><table style="width: 1px; height: 52px;" border="0" cellpadding="0" cellspacing="0"><tbody><tr> <td><br></td></tr><tr><td> <b>NOTE :</b> why is the text centered i want it from green to green inside the box?.<p> <br><strong><br></strong><strong></strong><br></p></td></tr></tbody></table> <img src="http://www.use.com/images/tran60h.gif" height="60" width="1"></div></td></tr></tbody></table></div></td></tr> <tr><td><img src="http://www.use.com/images/templates/bynum/6411/botbar.jpg" width="819"></td></tr> <tr><td><img src="http://www.use.com/images/templates/bynum/6411/footer.jpg" width="819"></td></tr> </tbody></table> </div> I'll be really impressed if someone is able to figure out this issue. I've wracked my brain and asked around, but no luck so far. However, this looks like a good place to come to for help. The problem is with the splash page at the link below. It works great in IE6 and the new Firefox. However, it doesn't work in Chrome and in IE9, if the zoom is greater than 100%, the size of the page (and the linked buttons) expands beyond the viewable area. The background is constructed from a simple table, with the image broken up into the cells. Any help you can offer is appreciated. http://www.jaguaraudiodesign.com/splash/index4.htm <html> <head> <title>JAGUAR AUDIO DESIGN</title> <link rel="stylesheet" type="text/css" href="PageStyle.css"/> <link rel="icon" href="Icon5.ico" type="image/x-icon"> <link rel="shortcut icon" href="Icon5.ico" type="image/x-icon"> <style> body {background-image:url();} </style> <style> {overflow:hidden; height:100%; width:100%;} </style> </head> <body bgcolor="Black" scroll="no"> <div id="content" align="center" scroll="no"> <table id="table1" scroll="no" border="0" cellpadding="0" cellspacing="0" valign="bottom" width="100%" height="100%"> <tr valign="top" border="0" cellpadding="0" cellspacing="0" align="center" height="90%"> <td colspan="5"><img alt="JaguarSplashPageBlkBg (245K)" src="JaguarSplashPageBlkBg.jpg" width="100%" height="100%" /></td> </tr> <tr valign="top" border="0" cellpadding="0" cellspacing="0" align="center"> <td><img alt="JaguarSplashPageBlkBg2 (7K)" src="JaguarSplashPageBlkBg2.jpg" width="100%" height="100%" /></td> <td><a href="store.htm"><img alt="SplashStoreBtn (5K)" src="SplashStoreBtn.jpg" width="100%" height="100%" border="0" /></td> <td><a href="consulting.htm"><img alt="SplashConsultingBtn (5K)" src="SplashConsultingBtn.jpg" width="100%" height="100%" border="0" /></td> <td><a href="blog.htm"><img alt="SplashBlogBtn (3K)" src="SplashBlogBtn.jpg" width="100%" height="100%" border="0" /></td> <td><a href="tv.htm"><img alt="SplashTVBtn (2K)" src="SplashTVBtn.jpg" width="100%" height="100%" border="0" /></td> </tr> </table> </div> </body> </html> Hello, I ran into this problem today in my Basic XHTML class, and it was enough to stump me and the instructor: if you want to put an unordered list in the middle of a page, but you want the list items to be left-aligned so the bullets are one on top of the other...how do you do it? I started with code something like <div align="center"> <ul type="disc"> <li>Wine</li> <li>Women</li> <li>Song</li> </ul> </div> This centers the list on the page, but it also centers each list item. I tried placing a <div align="left"> around the list items, individually and collectively, but depending on the positioning it either had no effect or it nullified the center attribute completely and gave me a left-aligned list on the left edge of the page. Attempts to change the style of the <li> tag, which I haven't done in months and was never all that good at, failed. I know I can do this in ten seconds by putting the list inside a one-cell table, and with much fiddling I could probably do it with a spacer GIF...but what's the 1.0 Strict way? I have a HTML file with two pictures on. They are like title lines. I need the one to be pushed right up to the top-left, and the other one to strech all the way across. I have a screenshot: http://img80.imageshack.us/img80/6827/screenshotjs.png Have a look. The lines are two pictures, they are split close to the middle. I have a form i am creating for a widget to put on my website but for some reason it does not align all the way to the left instead it is off center. How do i put it to the far left? And then there is a random box that appears in the top, how do I remov this? Thank you HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<input>
</head>
<body>
<form id="form1"
action="https://app.realeflow.com//api/contactSubmit.aspx?id=35151&type=1&ar=30178"
method="post" name="form1">
<script type="text/javascript">// <![CDATA[
function numbersonly(myfield, e, dec) { var key; var keychar; if (window.event) key = window.event.keyCode; else if (e) key = e.which; else return true; keychar = String.fromCharCode(key); if ((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13) || (key == 27)) return true; else if ((("0123456789").indexOf(keychar) > -1)) return true; else if (dec && (keychar == ".")) { myfield.form.elements[dec].focus(); return false; } else return false; }
// ]]></script>
<div id="seller_opt" class="optin"
style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 0pt; WIDTH: 477px; PADDING-RIGHT: 0pt; BACKGROUND: url(http://www.ibuyhousesinsanantonio.com/wp-content/uploads/2012/01/Untitled.png) no-repeat 0pt 50%; HEIGHT: 481px; PADDING-TOP: 55px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial">
<p class="text"
style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >Name:</p>
<div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
<input id="SellerWizard_ownerName"
style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
2px; font-size-adjust: none; font-stretch: normal" name="SellerWizard$ownerName" maxlength="100">
</div>
<p class="text"
style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >E-mail
Address:</p>
<div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
<input id="SellerWizard$ownerEmail"
style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
2px;
font-size-adjust: none; font-stretch:
normal" onkeydown="arrowKeyNavigate(this);" name="SellerWizard$ownerEmail" maxlength="100">
</div>
<p class="text"
style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >Zip
Code:</p>
<div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
<input id="SellerWizard$ownerZip"
style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
2px; font-size-adjust:
none; font-stretch: normal" onkeydown="arrowKeyNavigate(this);" name="SellerWizard$ownerZip" maxlength="15">
</div>
<p class="text"
style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >Mobile
Phone*:</p>
<div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
<input id="SellerWizard$ownerMobilePhone"
style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px 0px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
2px; font-size-adjust: none;
font-stretch: normal"
onkeypress="return numbersonly(this, event)" name="SellerWizard$ownerMobilePhone" maxlength="25">
</div>
<div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
<input
id="SellerWizard_FinishNavigationTemplateContainerID_FinishButton"
class="submit" style="MARGIN: 0pt 0pt 0pt 25px"
onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("SellerWizard$FinishNavigationTemplateContainerID$FinishButton", "", true, "", "", false, false))'
name="SellerWizard$FinishNavigationTemplateContainerID$FinishButton"
value="Finish"
src="http://api.ning.com/files/2FjYylCa-7----tgtm1C84N-wASg37E3PmRpOeW5GET9uz4-SqDzfp9Xn7pslOJrglrucDsLut3pJXluZymZKd-mGJj0vi26/submitbutton.jpg"
type="image"><br>
*Optional
</div>
</div>
</form>
<br>
</body>
</html>
You can see where it doesnt align on the website and another view of it not being where it is suppose to be in an html editor, thanks for any help! So I'm working on a <dl> and using this bit of code as an example: <style type="text/css">dl{ border: 3px double #ccc; padding: 0.5em; } dt { float: left; clear: left; width: 100px; text-align: right; font-weight: bold; color: green; background-color:yellow;} dt:after { content: ":"; } dd { margin: 0 0 0 110px; padding: 0 0 0.5em 0; } </style> <dl> <dt>first item</dt> <dd>definition for first item in list</dd> <dt>second item</dt> <dd>definition for second item in list<br> extending across more than one line</dd> <dt>third item</dt> <dd>definition for third item in list</dd> </dl> That bit works exactly like you'd expect it to. However, when I apply it to my own list I run into a problem and i can't see the problem. Here's the link to my page: http://site.outletpccomputerrepair.c...opups/test.htm whenever I have a second line of <dd>, the alignment messes up. I can't see what to do in order to get the <dd> elements to align properly whenever there's a second line. Please help! Hey, im not too experienced with web design but me and a friend decided to go on an wing and try and make a flash game web page. Everything been going great till i tried adding a add to the top left of the page. Only thing i could do is set an absolute value to the div but it dose not look right in smaller resolutions. Example script: <div style="text-align: left; position: absolute;"> <!-- Begin BidVertiser code --> <script language="JavaScript1.1" src="http://bdv.bidvertiser.com/BidVertiser.dbm?pid=141137&bid=341700" type="text/javascript"></script> <noscript><a href="http://www.bidvertiser.com/bdv/BidVertiser/bdv_advertiser.dbm">internet advertising</a></noscript> <!-- End BidVertiser code --> </div> <div style="text-align: center;"><a href="http://pinkkittens.org/"><img alt="Banner" src="http://pinkkittens.org/images/pinkkittenbannernew.png" style="border: 0px solid ; width: 815px; height: 121px;" align="top"></a></div> <div id="flashcontent" style="text-align: center;"></div> <script type="text/javascript">var so = new SWFObject("http://pinkkittens.org/upward.swf","upward","815","35","8","#FF88B8"); so.addParam("allowScriptAccess","always"); so.write("flashcontent");</script> I want the banner in the middle...the navigation bar right under it and also the ad on the far left...but could only achieve this with a absolute value...any pointers? Web address for better viewing pleasure is http://www.pinkkittens.org/ How would i go about aligning everything on a page so instead of starting on the very left of the page, it starts X amount of pixels away from the side? Also how can i adjust the space between each line of text? Make it a bit wider or smaller..etc Hi All, I've been trying to vertically align the span inside the div, but I have no idea why it's not working. Any clues? 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>
<title>Untitled Page</title>
</head>
<body onload="init()">
<div style="background-color: gray; width: 100%; height: 40px; text-align:right; vertical-align:middle">
<span style="background-color: #CCCCCC; font-size: 9pt">Settings</span>
</div>
</body>
</html>
Gah, I've been sitting here trying to do this for hours and my head is utterly boggled! This is the kind of thing I want, I've tried aligning the text within the table to the bottom and then wrapping it around the image but obviously I'm just a huge, epic failure. Eck. (I don't know if you can catch the longshore-drift of my beautiful art--oh, how I kid you --but the black box represents an image and the lines are text!) Any help would be much appreciated! Thanks lovelies. Hi I am new to this site and very new to html. I just know the basics. My problem is, is there a way to make 1 line of text be split for example have 1 part of the line be aligned to the left and the other to the right. Here is an example, the first part is what is actually happening and the second part is the way i want it to look. This is an example.This is an example This is an example. This is an example. I just realized that my second part of the example didnt come out the way i wanted. So i want the second part to have the first part aligned to the left and the second part aligned to the right. Please help. Its probably really easy but like i said i just know the basics. Thanks in advance for any help that is given Mike hey Guys! Happy new years to all! I need a little bit of help with something that is quite simple (I think). I have a full website set up in three frames header, body and footer. The site is set to have both the header and footer at a fixed position and size. and the body scrolls when needed. The problem is that when the scroll bar appears it moves the page on the body frame and the site doesn't align as it should. It moves to the left the amount of pixels the scroll bar has. How can I maintain the alignment of the body frame, even when the scroll bar appears? I hope that is, in fact, a simple thing and I'll appreciate the help on this! Thanks! Cheers I have a pagination sample that I'm working on and I need a little bit of help getting some links to line up correctly. There is a image link (prev) to start off followed by a bunch of normal text links and capped off by another image link (next). As it stands the text links that are in between the two image links are vertically aligning to the bottom of those images. No matter what I try I can't get them to align to the vertical center. Any ideas or tips would be great. You can view my page at http://mptp.o3world.com/pagination_test.html And here is my page code. 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>Untitled Document</title>
<style type="text/css" media="screen">
body { margin: 0; padding: 0; font: 11px Verdana, Arial, Helvetica, sans-serif; }
#search_pagination p { padding: 16px 0; }
#search_pagination p a { margin-left: 1px; padding: 0 4px; color: #449d02; border: 1px solid #449d02; text-decoration: none; }
#search_pagination p a:hover { background: #449d02; color: #fff; }
#search_pagination p a.button { margin: 0; padding: 0; border: none; }
</style>
</head>
<body>
<div id="search_pagination"><p><a href="##" class="button"><img src="images/button_prev.png" alt="Previous" width="69" height="30" border="0" /></a> <a href="##">1</a> <a href="##">2</a> <a href="##">3</a> <a href="##">4</a> <a href="##">5</a> <a href="##">6</a> <a href="##">7</a> <a href="##">8</a> <span>...</span> <a href="##">14</a> <a href="##">15</a> <a href="##" class="button"><img src="images/button_next.png" alt="Next" width="70" height="30" border="0" /></a></p></div>
</body>
</html>
Hi guys, I need help with IE7. If I open my webpage in Firefox it looks like screenshot1.png but when I open it in IE7 it displays like screenshot2.jpg. A live preview @ http://www.rawox.webege.com/home.php. Does anyone know how to fix this? I'm trying for 2 hours now and I can't get it Thanks in advance, Rawox |
|||||||