|
HTML - Move Text To The Left
Hello. I have text at the top right, "A Site for All Nations to Share their Knowledge!" and I need to move it to the left a bit so its not overlapping the sun image.
I appreciate You! Similar Tutorialshello the original website is 'http://www.buddysauctions.com/ and when u scroll down you can see that the "Member Login" box is on the left. I wanna move it to the right like me photoshop print screen i know that i have to cut the php code from my php file and create a new php file and put it in but i dont know how to put it exactly where my printscreen shows. thanks a lot for your interest i hope you can help me ) thanks again edit: i also would like to have some empty boxed under the member login so i can put adverts in them edit2: my member login box as you can see in the printscreen PHP Code: <tr> <td><FORM name=loginForm action="login.php" method=post> <div align="center"></div> <table width="262" border=0 align=center cellpadding=5 cellspacing=0> <tbody> <tr valign=center> <?php if(!isset($_SESSION["userid"])) { ?> <td colspan="2" background="http://www.overclock.net/images/bgyell2.gif" class="sideheadingtd" ><strong><img src="http://www.overclock.net/images/squareswhite.gif" width="10" height="12" align="absmiddle"> <font size="2" face="Arial, Helvetica, sans-serif" font color="#ffffff">Member Login</font></strong></td> </tr> <tr valign=center> <td bgcolor="#f5f5f5"> <div align=right><font color="#000000" size="1"><strong><font face="Verdana, Arial, Helvetica, sans-serif">Username</font></strong></font></div></td> <td width="97" bgcolor="#f5f5f5"><font color="#000000"> <input name=UserName class="box1" size="13"> </font></td> </tr> <tr valign=center> <td bgcolor="#f5f5f5"> <div align=right><font color="#000000" size="1"><strong><font face="Verdana, Arial, Helvetica, sans-serif">Password</font></strong></font></div></td> <td bgcolor="#f5f5f5"><font color="#000000"> <input name=Password type=password class="box1" size="13"> </font></td> </tr> <tr align=right> <td colspan=2 bgcolor="#f5f5f5"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="67%"><p class="style2"><a class="insidelink" href="signup.php">:: Signup Now::</a><br> <a class="insidelink" href="lostpassword.php">:: Lost Password ::</a></p></td> <td width="33%"> <div align="left"> <font color="#000000"> <input type="submit" name="Submit" value="Sign In" class="btn"> </font></div></td> </tr> </table></td> <?php }?> </tr> <tr align=right> <td colspan=2> </td> </tr> </tbody> </table> <div align="center"></div> </FORM></td> </tr> I have the following Web Page: 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> <meta content="en-gb" http-equiv="Content-Language" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> </head> <body > <div style="margin:auto;text-align:center"> <div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div> <div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div> <div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div> </div></body> </html> If I add another DIV with an image inside it, the images all move to the left by 8 to 10 pixels. This is the second version of the page: 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> <meta content="en-gb" http-equiv="Content-Language" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> </head> <body > <div style="margin:auto;text-align:center"> <div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div> <div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div> <div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div> <div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div> </div></body> </html> I have no idea why the page center moves to the left, but it means that I can't get my page banner to appear the same on every page. (I've stripped out all the extra content and codes to just leave the offending images.) I primarily use Firefox, but the same is happening in IE and Opera. Can anybody tell me what's happening? (I apologise if this is a well known, frequently asked question, but I couldn't find an answer and this is driving me up the wall, so any help is appreciated.) Hi I have a form which posts back using mailto: method="post" enctype="text/plain" So all the lines in the emial which the form sends look like this: line1= form text line2= more form text line3= more form text is it possible to remove the line1= ? so the email would look like: form text more form text more form text I have removed the name of the form field element as a test on line 1 so it looks like: =form text line2= more form text line3= more form text But you can see it still holds the = Can I get rid of this too? Thanks in adv.. Hi, I am newbie to HTML , I am trying to move the content in html page up/down on clicking of arrow images. HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Scroll</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.top{
position: absolute;
top:0;
right:0;
background-image: url('uparrow.png');
background-size: 16px 16px;
width: 16px;
height: 16px;
}
.btm{
position: absolute;
display:block;
background-image: url('downarrow.png');
background-size: 16px 16px;
width: 16px;
height: 16px;
bottom: 0;
right: 0;
}
</style>
<script type="text/javascript">
function scrollup(objId){
alert("Scroll UP");
console.log(objId);
var a = document.getElementById(objId).style.top;
console.log(a);
}
function scrolldown(objId){
alert("Scroll DOWN");
var b= document.getElementById(objId).style.btm;
console.log(objId);
console.log(b);
}
</script>
</head>
<body>
<div id="scrollDiv" style="btm:0px">
This is what i like to say.
</div>
<div class="top" onclick="scrollup('scrollDiv')"></div>
<div class="btm" onclick="scrolldown('scrollDiv')"></div>
</body>
</html>
Can somebody help me in this. Regards, Murali I am trying to move my title text further to the right. However, when I do (by adding more  , the title breaks into another line instead of moving further to the right. I have tried manipulating the margin px, but it isnt changing. I am not familiar with manipulating floating text. How do I accomplish this? Here is my current code: <td align="center" valign="top"><table width="655" border="0" cellspacing="0" cellpadding="0"> <div style="background:url(/offices.jpg);margin:0;"><br/><br/><span style="float:right;margin:0px 150px 198px 0px;"><font type="Arial Narrow" size="5"><b> &nbs p; &n bsp; <font color="#4E4848">My title</font></b></font> </span> 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 For some strange reason if I want to have an ad or image on the left of my text article usually i put a div code around whatever it is like.. Code: <div style="DISPLAY: block; FLOAT: left; MARGIN: 0px 10px 0px 0px"> </div> This works GREAT in firefox but then i was shocked when i went over to Internet explorer and tested my site there using the latest browser.. it doesnt acknowledge that code and so the ad or the image ends up being above my article instead of nicely on the left and the text wrapped around it on the right like you see in firefox Any ideas how to get around this? Maybe a fix that works for ie. and firefox? thank you guys and gals in advance Hi. I can't figure out how to have all the tables on my site aligned to the centre yet have the text in them aligned to the left. In other words I want 2 margins either side of the central body of my site. How can I do this? Thanks. Hello all- This is my first post on HTML forums, and I hope ya'll can help me out with this issue. I feel really dumb...and think that my problem is probably a simple one, but I can't figure it out. I've got a left sidebar, coded to float left in CSS, and in dreamweaver it shows up appropriately. However, whenever I look on firefox or ie, the left shows up on the right. I've also got an orange background image that DOES show up in the correct spot. I'm wondering if my problem could be related to the fact I've got the image listed under main-content, not the left sidebar. I've moved that line in the CSS, but it didn't help. Here is a link to my problem: http://www.durhamsafekids.org/main.html Here is my CSS code: Code: body {
font-size: 62.5%;
background: url(images/top-bdr.jpg) repeat;
}
p, li {
font: 1.2em/1.8em Sabon, sans-serif;
margin-bottom: 10px;
}
h1 {
font: 2.0em "Helvetica Neue", sans-serif;
color: white;
height: 0px;
}
h2 {
font: 1.8em "Helvetica Neue", sans-serif;
color: #99cc33;
margin-bottom: 10px;
}
h4 {
font :Georgia, "Times New Roman", Times, serif;
color: #0078AA;
}
h3 {
font :Georgia, "Times New Roman", Times, serif;
color: #333399;
}
ul {
margin-left: 25px;
}
img {
border: none;
}
#page-wrap {
background: white;
width: 960px;
margin: 10px auto;
}
#page-wrap #inside {
margin: 10px 10px 0px 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#main-content {
background: url(/images/left-sidebar.gif) repeat-y white;
padding-left: 230px;
padding-top: 20px;
}
#header {
background: #ffffff;
text-align: center;
}
#menu {
background: #ffffff;
}
#left-sidebar {
width: 185px;
float: left;
padding-left: 15px;
padding-top: 20px;
}
#footer {
background: #99cc33;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
color: #006699;
font-size: 12px;
}
.footer a:link {
/* Applies to unvisited links in class mainNav */
text-decoration: none;
font-weight: bold;
color: #006699;
}
.footer a:visited {
/* Applies to visited links in class mainNav */
text-decoration: none;
font-weight: bold;
color: #006699;
}
.footer a:hover {
/* Applies to links under the pointer in class mainNav */
text-decoration: underline;
font-weight: bold;
color: #006699;
}
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_drop_2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.preload1 {background: url(menu/three_1.gif);}
.preload2 {background: url(menu/three_1a.gif);}
#nav {padding-left:217px; margin:0; list-style:none; height:38px; background:#fff url(menu/three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(menu/three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(menu/three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(menu/three_0a.gif) no-repeat right top;}
#nav li:hover a.top_link {color:#fff; background: url(menu/three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(menu/three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(menu/three_1a.gif) no-repeat right top;}
/* Default list styling */
#nav li:hover {position:relative; z-index:200;}
#nav li:hover ul.sub
{left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:110px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:110px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:108px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #bbd37e;}
#nav li ul.sub li a.fly
{background:#bbd37e url(menu/arrow.gif) 100px 6px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#6a812c; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#6a812c url(menu/arrow_over.gif) 100px 6px no-repeat; color:#fff;}
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:110px; top:-4px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:110px; z-index:400; height:auto;}
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#6a812c url(menu/arrow_over.gif) 110px 6px no-repeat; color:#fff; border-color:#fff;}
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#bbd37e url(menu/arrow.gif) 110px 6px no-repeat; color:#000; border-color:#bbd37e;}
And here is my HTML code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" />
<title>Durham County Safe Kids</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
</head>
<body>
<div id="page-wrap">
<div id="inside">
<div id="header"><!-- #BeginLibraryItem "/library/header.lbi" --><img src="images/Header2.jpg" alt="Durham County Safe Kids" name="headerimage" width="775" height="200" border="1" style="background-color: #CCCCCC">
<!-- #EndLibraryItem --></div>
<div id="menu"><!-- #BeginLibraryItem "/library/menu.lbi" -->
<span class="preload1"></span>
<span class="preload2"></span>
<ul id="nav">
<li class="top"><a href="library/index.html" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#nogo2" id="safety" class="top_link"><span class="down">Safety</span></a>
<ul class="sub">
<li><a href="#nogo3" class="fly">Vehicle Safety</a><ul>
<li><a href="#nogo4">Car Seats</a></li>
<li><a href="#nogo5">Spot the Tot</a></li>
<li><a href="#nogo6">Hyperthermia</a></li>
<li><a href="#nogo7">Distracted Driving</a></li>
</ul>
</li>
<li><a href="#nogo8">Poison Prevention</a></li>
<li><a href="#nogo9">Wheeled Safety</a></li>
<li><a href="#nogo10">Firearms Safety</a></li>
<li><a href="#nogo11">Water Safety</a></li>
<li><a href="#nogo12">Home Safety</a></li>
<li><a href="#nogo13">Pedestrian Safety</a></li>
</ul>
</li>
<li class="top"><a href="#nogo54" id="events" class="top_link"><span>Events</span></a></li>
<li class="top"><a href="#nogo55" id="links" class="top_link"><span>Links</span></a></li>
<li class="top"><a href="#nogo56" id="photos" class="top_link"><span>Photos</span></a></li>
<li class="top"><a href="#nogo57" id="about" class="top_link"><span>About Us</span></a></li>
</ul>
<!-- #EndLibraryItem --></div>
<div id="left-sidebar">This Text should be in the Orange Left Sidebar.</div>
<div id="main-content"><img src="images/preventingunintentionalinjury.gif" alt="" width="529" height="127" align="right" /><br /><br />
<h2>This website is currently under construction. Please come back soon!</h2>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div style="clear: both;"></div><!-- #BeginLibraryItem "/Library/footer.lbi" -->
<div id="footer">
<table align="center" width="50%" border="0" cellspacing="1" cellpadding="1">
<tr>
<th scope="col"><span class="footer"><a href="index.html">Home</a></span></th>
<th scope="col"><span class="footer"><a href="#">Safety</a></span></th>
<th scope="col"><span class="footer"><a href="#">Messages</a></span></th>
<th scope="col"><span class="footer"><a href="#">Links</a></span></th>
<th scope="col"><span class="footer"><a href="#">Photos</a></span></th>
<th scope="col"><span class="footer"><a href="#">About Us</a></span></th>
</tr>
</table>
<br>
<center><font size="+2" color="FFFFFF"><strong>Durham County Safe Kids</strong></font></center>
</div><!-- #EndLibraryItem --></div>
<div style="clear: both;"></div>
</div>
</body>
</html>
As you can see from the linked screenshot, the text shows up on the right side of the page, not in the orange box. http://www.durhamsafekids.org/dskscreen.jpg Thanks all! ~Jeff hi i'm new to htm, infact new to making websites at all. i spent ages writting an intoduction, but some one deleted it. i have started writting my first HTML page : http://normington.superfreehost.org/...age%204.1.html so far it's just some embeded movies from youtube. my first problem is that i want to align text to the left of the video and centered vertically. my second problem is that when i view the page source through mozilla i find some extra text that i cant see if i view the page in wordpad. "<!-- Paste this code into the body section, not the head section of the page --> <script type="text/javascript"><!-- ch_client = "b0redum"; ch_non_contextual = 0; ch_keywords = "tech,free"; ch_linkStyle= "style3"; //--></script> <script src="http://scripts.chitika.net/static/linx/chitika_linx.v3.js" type="text/javascript"> </script> <div id="PaypopupStartCode" style="display:none"> </div> <script language="JavaScript1.1"> if (typeof(paypopupScriptStart) == 'undefined') {var paypopupScriptStart = false;} if (!paypopupScriptStart) { document.write(unescape("%3Cscript")+' src="http://www.bu520.com/popup.php?'+(new Date()).getTime()+'&id=azzamartin&pop=enter&t=1&subid=107931&blk=1&fc=-1"'+unescape("%3E%3C/script%3E")); paypopupScriptStart = true; } </script> <noscript> </noscript>" what does this text do, and how do i move it? any advice about my page would be apprichiated, items to add etc, the next thing i want to do is make a comments page. is this an easy thing? thanks for your help, Normington. 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;
}
Hi all. Please look at: http://bartending.com/drinks_recipes/Sangria.html The box towards the bottom of the middle section which starts out as: 1 Comment is a <tr><td> in a table, however, I can't get it to move closer to the one above it. I tried adding style="margin-bottom:0px;" to the previous <tr>, but that didn't work either. Any help you have would be much appreciated =) Light and Love and Healing to you, -Patrick Arden McNally I have these images and text. Is there any code I can use to move these 7 lines over to the right a little? Thanks. Code: <font face="Arial" color="#000000" size="3"><IMG src="/images/hphone.gif"> <a href="?action=login"> Home</a><br><br> <IMG src="/images/hphone1.gif"><a href="?action=register"> Register</a><br><br> <IMG src="/images/hphone2.gif"> <a href="?action=faq"> FAQ</a><br><br> <IMG src="/images/hphone3.gif"> <a href="? action=terms"> Terms Of Use</a><br><br> <IMG src="/images/hphone4.gif"> <a href="?action=contact"> Contact Us</a><br><br> <IMG src="/images/hphone5.gif"><a href="?action=forgotpass"> Forgot Password</a><br><br> <IMG src="/images/hphone6.gif"><a href="?action=forgotusername"> Forgot Username</a><br></font> I've been trying to move the top navigation on this website I'm creating for a restaurant, but it won't move right. Here is the index page: http://www.organicgardencafe.com/web...02-3-2010.html and the css: #color1 a:link{ color:#03F; text-decoration:none; font-weight:normal; } #color1 a:visited { color:#03F; text-decoration:none; font-weight:normal; } #color1 a:hover {color:#39F; text-decoration:none; font-weight:normal;} #color1 a:active {color:#03F; font-weight:normal; } #color2 a:link{ color:#FFF; text-decoration:none; font-weight:normal; } #color2 a:visited { color:#FFF; text-decoration:none; font-weight:normal; } #color2 a:hover {color:#e4cb54; text-decoration:none; font-weight:normal;} #color2 a:active {color:#FFF; font-weight:normal; } body{ background-color:#e4cb54; } div.temp{ background-position: center top; background-image:url(images/blanktemplate.jpg); background-repeat:no-repeat; height:960px; width:1440px; } navigation bar --!> li.home{ margin-left:100px; } li.about{ margin-left:38px; } li.menu{ margin-left:40px; } li.knowledge{ margin-left:38px; } li.ordering{ margin-left:36px; } li.classes{ margin-left:40px; } li.press{ margin-left:28px; } #major_nav ul li { float:left; display:inline; font-family:Helvetica; font-size:16px; color:#FFF; ; } #major_nav ul { margin-left: 200px; margin-top:10px; width:900px; } #news ul li a{ list-style-type:none; } #mission{ font-family:Helvetica; font-size:13px; float:right; width: 230px; height:300px; clear:left; margin-right:12px; text-align:justify center; margin-top:35px; } #pictures{ margin-right:185px; margin-left:10px; float:right; clear:both; width:503px; margin-top:98px; } #whatsnew{ float:right; width: 50px; clear:left; margin-top:115px; margin-right:20px; } #new1{ float:right; clear:left; margin-right:10px; margin-left:50px; margin-top:115px; } #new2{ float:right; clear:both; margin-right:260px; margin-left:10px; margin-top:115px; } div.newsletter{ font-family:Arial Narrow Normal, sans-serif; color:#404e3e; font-size:24px; margin-left:280px; margin-top:140px; margin-bottom:0px; } li.follow{ font-family:Arial Narrow Normal, sans-serif; color:#404e3e; font-size:24px; margin-left:238px; margin-top:20px; margin-bottom:0px; } div.giftcards{ font-family:Arial Narrow Normal, sans-serif; color:#404e3e; font-size:20px; margin-left:275px; } div.info{ font-family: Helvetica; font-size:14px; color:#FFF; margin-left:275px; margin-top:5px; } div.boston{ margin-left:270px; } .blue{ color:#039; font-size:17px; text-align:center; } .new_sub1{ display:inline; font-family:Helvetica; font-size:20px; color:#10155d; margin-bottom:10px; } .new_sub2{ display:inline; font-family:Helvetica; font-size:14px; } .new_sub3{ display:inline; font-family:Helvetica; font-size:13px; } .email_list{ list-style-type:none; margin-left:240px; } .email_sub1{ font-family:Helvetica; font-size:14px; margin-top:0px; } .email_sub2{ font-family: ; font-size:14px; margin-top:10px; } .email_sub3{ font-family: Helvetica; font-size:14px; color:#FFF; margin-top:7px; margin-bottom:40px; } .new2_sub1{ display:inline; font-family:Helvetica; font-size:20px; color:#10155d; } .new2_sub2{ font-size:13px; font-family:Helvetica; margin-top:20px; list-style-type:circle; margin-left:15px; } .new2_sub3{ display:inline; font-family:Helvetica; font-size:13px; margin-left:18px; } .adress{ text-align:center; color:#404e3e; margin-top:40px; margin-right:450px; float:right; clear:both; } I'm trying to transfer the work i did on one page and move it to my new page. I want to move this content: Code: <ul > <p><strong>Alberta</strong></p> <li>Airdrie</li> <li>Brooks</li> <li>Calgary</li> <li>Camrose</li> <li>Cochrane</li> <li>Edmonton</li> <li>Fort McMurray</li> <li>Grande Prairie</li> <li>Leduc</li> <li>Lethbridge</li> <li>Medicine Hat</li> <li>Okotoks</li> <li>Red Deer</li> <li>Saint Albert</li> <li>Spruce Grove</li> </ul> <ul> <p><strong>British Columbia</strong></p> <li>Abbotsford</li> <li>Campbell River</li> <li>Chilliwack</li> <li>Courtenay</li> <li>Duncan</li> <li>Kamloops</li> <li>Kelowna</li> <li>Nanaimo</li> <li>Penticton</li> <li>Port Alberni</li> <li>Prince George</li> <li>Vancouver</li> <li>Vernon</li> <li>Victoria</li> <li>White Rock</li> </ul> <ul> <p><strong>Manitoba</strong></p> <li>Altona</li> <li>Brandon</li> <li>Dauphin</li> <li>Flin Flon</li> <li>Morden</li> <li>Neepawa</li> <li>Selkirk</li> <li>Steinbach</li> <li>Stonewall</li> <li>Swan River</li> <li>The Pas</li> <li>Thompson</li> <li>Virden</li> <li>Winkler</li> <li>Winnipeg</li> </ul> <ul> <p><strong>New Brunswick</strong></p> <li>Bathurst</li> <li>Campbellton</li> <li>Caraquet</li> <li>Dalhousie</li> <li>Edmundston</li> <li>Fredericton</li> <li>Grand Falls</li> <li>Moncton</li> <li>Oromocto</li> <li>Saskvillee</li> <li>Saint John</li> <li>Saint Stephen</li> <li>Shediac</li> <li>Sussex</li> <li>Woodstock</li> </ul> <ul> <p><strong>Newfoundland and Labrador</strong></p> <li>Bay Roberts</li> <li>Carbonear</li> <li>Channel-Port aux Basques</li> <li>Conception Bay South</li> <li>Corner Brook</li> <li>Gander</li> <li>Goose Bay</li> <li>Grand Bank</li> <li>Grand Falls-Windsor</li> <li>Labrador City</li> <li>Marystown</li> <li>Mount Pearl</li> <li>Paradise</li> <li>Saint Johns</li> <li>Stephenville</li> </ul> Code: ul {
float: left;
width:auto
list-style-type: none;
}
To this page: Code: <div id="content">
<span>
<ul style="list-style-type: none; display: inline-block;">
<li><strong>Alberta</strong></li>
<li><strong>British Columbia</strong></li>
<li><strong>Manitoba</strong></li>
<li><strong>New Brunswick</strong></li>
<li><strong>Newfoundland and Labrador</strong></li>
<li><strong>Nova Scotia</strong></li>
<li><strong>Ontario</strong></li>
</ul>
<ul style="list-style-type: none; display: inline-block;">
<li>Calgary</li>
<li>Kamloops</li>
<li>Altona</li>
<li>Bathurst</li>
<li>Bay Roberts</li>
<li>Amherst</li>
<li>city name</li>
<li>Edmonton</li>
<li>Kelowna</li>
<li>Brandon</li>
<li>Campbellton</li>
<li>Carbonear</li>
<li>Antigonish</li>
<li>city name</li>
<li>Lethbridge</li>
<li>Nanaimo</li>
<li>Dauphin</li>
<li>Caraquet</li>
<li>Channel-Port</li>
<li>Bridgewater</li>
<li>city name</li>
<li>Red Deer</li>
<li>Penticton</li>
<li>Flin Flon</li>
<li>Dalhousie</li>
<li>aux Basques</li>
<li>Glace Bay</li>
<li>city name</li>
<li> </li>
<li>Prince Rupert</li>
<li>Morden</li>
<li>Edmundston</li>
<li>Conception Bay</li>
<li>Halifax</li>
<li>city name</li>
<li> </li>
<li>Tofino</li>
<li>Neepawa</li>
<li>Fredericton</li>
<li>South</li>
<li>Kentville</li>
<li>city name</li>
<li> </li>
<li>Vancouver</li>
<li>Selkirk</li>
<li>Grand Falls</li>
<li>Corner Brook</li>
<li>New Glasgow</li>
<li>city name</li>
<li> </li>
<li>Victoria</li>
<li>Steinbach</li>
<li>Moncton</li>
<li>Gander</li>
<li>New Waterford</li>
<li>city name</li>
<li> </li>
<li>Whistler</li>
<li>Stonewall</li>
<li>Oromocto</li>
<li>Goose Bay</li>
<li>Pictou</li>
<li>city name</li>
<li> </li>
<li>Williams Lake</li>
<li>Swan River</li>
<li>Sackville</li>
<li>Grand Bank</li>
<li>Port Hawkesbury</li>
<li>city name</li>
<li> </li>
<li> </li>
<li>The Pas</li>
<li>Saint John</li>
<li>Saint John</li>
<li>Grand Falls</li>
<li>Springhill</li>
<li> </li>
<li> </li>
<li> </li>
<li>Thompson</li>
<li>Saint Stephen</li>
<li>-Windsor</li>
<li>Sydney</li>
<li> </li>
<li> </li>
<li> </li>
<li>Virden</li>
<li>Shediac</li>
<li>Marystown</li>
<li>Sydney Mines</li>
<li> </li>
<li> </li>
<li> </li>
<li>Winkler</li>
<li>Sussex</li>
<li>Mount Pearl</li>
<li>Truro</li>
<li> </li>
<li> </li>
<li> </li>
<li>Winnipeg</li>
<li>Woodstock</li>
<li>Paradise</li>
<li>Yarmouth</li>
<li>city name</li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li>Saint Johns</li>
<li> </li>
<li>city name</li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li>Stephenville</li>
<li> </li>
<li>city name</li>
<li> </li>
</ul>
<hr>
<ul style="list-style-type: none; display: inline-block;">
<li><strong>Prince Edward Island</strong></li>
<li><strong>Quebec</strong></li>
<li><strong>Saskatchewan</strong></li>
</ul>
<ul style="list-style-type: none; display: inline-block;">
<li>city name</li>
<li>city name</li>
<li>city name</li>
</ul>
<span>
</div><!-- End content-->
Code: @charset "UTF-8";
/* CSS Document */
#wrapper {
background-color:#FFF;
width: 780px;
margin: auto;
}
/* --- navigation starts --- */
#header {
width: 100%;
height: 229px;
margin: auto;
}
#header img {
width: 100%;
height: 100%;
}
ul {
display: block;
width: 100%;
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
width: 111px;
text-align: center;
display: block;
position: relative;
float: left;
}
li ul {
display: none;
position: relative;
z-index: 1;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #617F8A;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a {
background: #617F8A;
}
/* --- navigation ends --- */
/* --- information starts --- */
#content
{
position: relative;
top: 40px;
font-size:16px;
font-family: Verdana, Geneva, sans-serif;
}
#footer {
margin-top: 100px;
text-align: center;
}
/* --- information ends --- */
/* --- Advertising starts --- */
#adverts {
width: 95%;
margin: auto;
text-align: center; /* Only to align alternate image text for visulization */
}
#adverts #addWarning {
float: left;
font-size: smaller;
}
#adverts #single {
clear: both;
}
#adverts #single img {
width: 100%;
}
#adverts .double img {
width: 50%;
display: inline-block;
float: left;
}
#adverts .trible img {
width: 33%;
display: inline-block;
float: left;
}
/* --- Advertising Ends --- */
Hi all, how can we move images like in this website http://www.kagancreative.com/portfolio.html left to right and right to left please help me I have a review page at: http://www.bestsellersworld.com/revi...ightingale.htm I had something under the Amazon.com buy box but removed it. Now I have a space there. I would like the text that starts "What is different about these bodies? " to move over to the left. How can I do this? I have a basic search engine and the results page is a list of the results. The top of the results page is the header, listing the categories while the rest of the page is just a nested loop getting data from the database and listing it in the columns. Does anyone know how to make the header section not move when I scroll down? I would like to have it stay at the top no matter what while I scroll through the list of results. Thanks for your time, sorry if this is a really simple question, or if this is in the wrong forum. I found this script I like and want tou use. But I want to move the CSS from the the HTML file to it's own CSS file. hi, as i try to make a round html table, i encounter a problem with a space, i donna want to make this in css!. Pls someone can help me out with it? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<link rel='stylesheet' href='style.css' type='text/css' />
<title>Awortinkos</title>
<!--Fireworks CS3 Dreamweaver CS3 target. Created Sun Feb 17 22:55:26 GMT+0500 (West Asia Standard Time) 2008-->
</head>
<br> <table align='center' width='60%' cellspacing="4" cellpadding='0'>
<tr>
<td align='center' width='80%'>
<table width="900" align=center cellpadding="0" cellspacing="0" border="0"
style="background-color: #393939; border-bottom-width:0px">
<tr>
<td width="14"><img src="http://www.awortinkos.com/test2/images/1.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="171" style="border-top-style: solid; border-top-width: 1px" bordercolor="#008000" rowspan="2">
<p align="center"><b><font face="Verdana" size="2" color="#FFFFFF">chatroom</font></b></td>
<td width="701" style="border-top-style: solid; border-top-width: 1px" bordercolor="#008000" rowspan="2">
<p align="center"><b><font face="Verdana" size="2" color="#FFFFFF">content</font></b></td>
<td width="14"><img src="http://www.awortinkos.com/test2/images/2.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<td> </td>
</table>
<body bgcolor="#eeeee4" topmargin="0" valign=top leftmargin="0">
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="927" >
<!-- fwtable fwsrc="temp.png" fwpage="Page 1" fwbase="index.jpg" fwstyle="Dreamweaver" fwdocid = "355425286" fwnested="0" -->
<tr>
<td width="13"><img src="http://www.awortinkos.com/test2/images/spacer.gif" width="12" height="1" border="0" alt="" /></td>
<td width="6"><img src="http://www.awortinkos.com/test2/images/spacer.gif" width="6" height="100%" border="0" alt="" /></td>
<td width="179"><img src="http://www.awortinkos.com/test2/images/spacer.gif" width="165" height="1" border="0" alt="" /></td>
<td width="527"><img src="http://www.awortinkos.com/test2/images/spacer.gif" width="484" height="1" border="0" ></td>
<td width="179"><img src="http://www.awortinkos.com/test2/images/spacer.gif" width="166" height="100%" border="0" alt="" /></td>
<td width="7"><img src="http://www.awortinkos.com/test2/images/spacer.gif" width="4" height="1" border="0" alt="" /></td>
<td width="14"><img src="http://www.awortinkos.com/test2/images/spacer.gif" width="12" height="1" border="0" alt="" /></td>
<td width="2"><img src="http://www.awortinkos.com/test2/images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="6" width="13" > </td>
<td rowspan="6" valign="top" bgcolor="#393939" width="6"> </td>
<td valign="top" width="179">
</td>
<td colspan="2" valign="top" width="706">
<p align="center"></td>
<td rowspan="8" valign="top" bgcolor="#393939" width="6"> :</td>
<td rowspan="6" </td width="14">
<td width="2" rowspan="4"><img src="http://www.awortinkos.com/test2/images/spacer.gif" width="1" height="168" border="0" alt="" /></td>
</tr>
<tr>
<td valign="top" width="179" rowspan="2">
</td>
<td colspan="2" valign="top" width="706">
</td>
</tr>
<tr>
<td colspan="2" valign="top" width="706" rowspan="2">
<p> </p>
<p> </p>
<p> </p>
<p> </td>
</tr>
<tr>
<td valign="top" width="179">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </td>
</tr>
<tr>
<td colspan="3">
<table border="0" cellpadding="6" cellspacing="0" width="100%" background="images/menu_back.jpg">
<tr>
<td width="100%" align="right"> </td>
</tr>
<tr>
<td width="100%" align="right" bgcolor="#393939"> </td>
</tr>
</table>
</td>
<td width="2"><img src="http://www.awortinkos.com/test2/images/spacer.gif" width="1" height="22" border="0" alt="" /></td>
</tr>
|
|||||||