|
HTML - Left Sidebar Text Shows Up On Right Side
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 Similar TutorialsHi. i Nead help here i try get adsence on left side of the site. i have try driffent codes but it wont change from right side to left. Code: <div style="text-align:left"><script type="text/javascript"><!-- google_ad_client = "pub-6922170130422170"; /* 300x250, skapad 2011-02-07 */ google_ad_slot = "0334614029"; google_ad_width = 300; google_ad_height = 250; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div>';} Any one can tell me what am doing wroung and how i get it on left side? I'm wondering how I would fill in the left and right side of the body. Right now it's centered at 800px so I have the left and right side just white. *--><body> <div id="page" align="center"> <div id="content" style="width:800px"> I'm not sure what else you'd need to see, so please let me know. For example this news site: www.kstp.com I'm wondering how I would get the blue sides like this site has. Thanks in advance 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> I'm just starting to get into HTML / CSS and I had a question I was hoping someone would be able to give me a hand with... The page I'm working on has a logo in the top left corner that gets cut off when the browser window is reduced to a smaller size. The left navigation bar, however, always appears in the browser window, regardless of size. I'd like to have this left side "anchor" to include the logo so that it always appears. Please let me know if you require additional information or if I have not described the issue clearly enough. Thank you! Hi guys, I need a little help with something thats seems pretty easy but for some reason i can't get it to work. this is my website: www.theblindtaste.com what i would like to do is to reverse the order of the posts shown on the sidebar_left.php. as it is i feel it is a little repetitive since 2 of the same posts are featured in the middle of the page. this is the sidebar_left.php code: ------------------------------------------------------------------------- <!-- begin r_sidebar --> <div id="sidebar_left"> <h4 class="featuredtitle"><?php echo cat_id_to_name(ot_option('hp_side_cat')); ?></h4> <?php $recent = new WP_Query("cat=" .ot_option('hp_side_cat'). "&showposts=" .ot_option('hp_side_num') ); while($recent->have_posts()) : $recent->the_post();?> <div class="sidecontent"> <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_post_thumbnail( 'home-side' ); ?></a> <h4><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h4> <?php the_content_limit(50, ""); ?> <a class="morelink" href="<?php the_permalink() ?>" rel="bookmark"><?php _e("Read More", 'organicthemes'); ?></a> <div class="clear"></div> </div> <?php endwhile; ?> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Left Sidebar') ) : ?> <div class="widget"> <h4>Widget Area</h4> <p>This section is widgetized. To add widgets here, go to the <a href="<?php echo admin_url(); ?>widgets.php">Widgets</a> panel in your WordPress admin, and add the widgets you would like to <strong>Left Sidebar</strong>.</p> <p><small>*This message will be overwritten after widgets have been added</small></p> </div> <?php endif; ?> ------------------------------------------------ thank you for your help ! tbt Below is a link to a page on my site: http://www.freewebs.com/jaceyanimation/about.htm As you can see, the text is displacing the sidebar, and the sidebar displaces the text whenever i swap round the codes. Could someone take a look at the source code below and suggest an answer?: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML><HEAD>
<TITLE>Site Template</TITLE>
<link rel="shortcut icon" href="http://www.freewebs.com/jaceyanimation/favicon.ico">
<style>
<!--
body {
background-color: white;
font-family: verdana, sans-serif;
font-size: 10px;
text-align: center;
}
td {
font-family: verdana, sans-serif;
font-size: 10px;
}
.outer { padding: 4px}
.header {
border: 1px solid #416A9C;
background-color: #ffffff;
margin-bottom: 10px;
padding: 4px;
font-weight: bold;
font-family: verdana, sans-serif;
font-size: 16px;
background-image: url(http://www.YOUR-SERVER-HERE.com/catbk.gif);
width: 100%;
color: #416A9C;
}
/* The sidebar div contains a table with .holder class and a td cell with .sidebar class */
#sidebar {
width: 100px;
padding: 0px;
}
#sidebar .holder {width: 100px;}
.sidebar {
border: 1px solid #416A9C;
padding: 6px;
font-size: 10px;
text-align:center;
background-color: #ffffff;
}
.sidebarlinks {
padding: 0px;
font-size: 10px;
text-align:center;
background-color: #ffffff;
}
.sidebartitle {
border: 1px #416A9C solid;
color: #ffffff;
padding: 4px;
font-size: 14px;
font-weight: bold;
text-align: center;
background-image: url(http://www.YOUR-SERVER-HERE.com/headingbk.gif);
}
.sidebarsubhead {
border: 1px #416A9C solid;
border-bottom: 0px;
background-color: #416A9C;
padding: 2px;
font-size: 12px;
text-align: center;
background-image: url(http://www.YOUR-SERVER-HERE.com/catbk.gif);
}
.spacer {height: 10px}
#forum {
padding: 0px;
padding-left: 10px;
}
#forum .holder { width:100%;}
.forum {
padding: 0px;
border: 1px solid #416A9C;
background-color: #ffffff;
}
.forumtitle {
border: 1px #416A9C solid;
color: #ffffff;
padding: 4px;
font-size: 14px;
font-weight: bold;
text-align: center;
width: 100%;
background-image: url(http://www.YOUR-SERVER-HERE.com/headingbk.gif);
}
hr { height: 1px; width: 100%; color: #416A9C; border:0px}
a, a:link { color: #416A9C; text-decoration: none}
a:visited { color: #416A9C}
a:hover { color: #416A9C; text-decoration: underline}
a.nav {
height: 20px;
width: 100%;
padding: 4px;
margin-bottom: 1px;
background-color: #ffffff;
border: 1px #416A9C solid;
color: #416A9C;
font-weight: bold;
}
a.nav:hover {
background-color: #416A9C;
color: #ffffff;
}
-->
</style>
</HEAD>
<BODY>
<a href="http://www.freewebs.com/jaceyanimation/index.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%201.PNG" border="0" alt="Jacey"></a><img src="http://www.freewebs.com/jaceyanimation/Part%202.PNG" border="0" alt=""><br>
<a href="http://www.freewebs.com/jaceyanimation/index.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%203.PNG" border="0" alt="Home"></a><a href="http://www.freewebs.com/jaceyanimation/about.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%204.PNG" border="0" alt="About"></a><a href="http://www.freewebs.com/jaceyanimation/product.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%205.PNG" border="0" alt="Products"></a><a href="http://www.freewebs.com/jaceyanimation/game.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%206.PNG" border="0" alt="Game"></a><a href="http://www.freewebs.com/jaceyanimation/animation.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%207.PNG" border="0" alt="Animation"></a><br><img src="http://www.freewebs.com/jaceyanimation/Part%208.PNG" border="0" alt="">
<div id="sidebar">
<table class="holder" cellpadding="0" cellspacing="0" width="100">
<tr>
<td align="center" valign="top" class="sidebarsubhead">Internal Links</td>
</tr>
<tr>
<td class="sidebar">
<a href="http://www.freewebs.com/jaceyanimation/index.htm">Home</a><br>
<a href="http://www.freewebs.com/jaceyanimation/about.htm">About</a><br>
<a href="http://www.freewebs.com/jaceyanimation/product.htm">Products</a><br>
<a href="http://www.freewebs.com/jaceyanimation/game.htm">Game</a><br>
<a href="http://www.freewebs.com/jaceyanimation/animation.htm">Animations</a><br>
</td>
</tr>
<tr>
<td class="spacer"> </td>
</tr>
<tr>
<td align="center" valign="top" class="sidebarsubhead">External Links</td>
</tr>
<tr>
<td class="sidebar">
<table cellpadding="4" cellspacing="1" border="0" width=105" align="center" class="bordercolor">
<DIV ID=oDiv STYLE="position:absolute; width:105px;
height:45px;">
<SPAN STYLE="width:105px">
<tr>
<td width='98%' class='windowbg2' valign='top'>
<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="down" scrollamount="2.5">
<a href="http://beauxbatons22.proboards103.com"><img src="http://i263.photobucket.com/albums/ii158/MHadmins/MHbanner.gif" border="2.1" alt="Magical Hogwarts"></a>
</td>
</tr>
</div>
</table>
</span>
<a href="http://www.freewebs.com/jaceyanimation/index.htm"><img src="http://www.freewebs.com/jaceyanimation/minibanner.gif" style="border-color: red" border="2.1" alt="Jacey Animation"></a>
</td>
</tr>
<tr>
<td class="spacer"> </td>
</tr>
</table>
</div>
</FONT></Body></HTML>
I'm using tables and I have text inside one table. When I add line height to text so it looks good in IE6, Safari and Google Chrome, it looks wrong in FireFox and Opera. Every line is over each other. How could I fix this? Here is the code from start to end of the text part: Code: <html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
<title>my site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-image:url('tausta.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
line-height: 5%;
}
.style2 {color: #
color: #999999;
color: #999999;
}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #999999; line-height: 5%; }
.style5 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #999999; line-height: 5%; font-weight: bold; }
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="page">
<table id="Table_01" width="912" height="543" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="14" width="176" height="542" valign="top"><div align="right" class="style1">
<p class="style2"> </p>
<p class="style2"><strong><u>FILES:</u> </strong><u><br>
</u><br>
<br>
<br>
<br>
</p>
</div>
<p align="right" class="style5">Images: </p>
<p align="right" class="style4">images1 <br>
<br>
<br>
<br>
</p>
<p align="right" class="style5">Videos: </p>
<p align="right" class="style4">video1 </p>
<p align="right" class="style4">video2 </p>
<p align="right" class="style4">video3 </p>
<p align="right" class="style1"><span class="style2">1 - video4 </span></p></td>
Dear Htmlforums I only got 1 simple question! If i got a site with a comment box, where people can post a comment, and i want the comment they post to be shown on another side? Like when i go to www.whatever.com and post a comment ( Hello ) then the ( Hello ) comment will be shown at my other side with a comment box? What is the code for that? Can I use the (now deprecated) align attribute to do this ....? For the sake of simplicity, say I have 3 paragraphs of text. I want the first placed above an image, the 2nd next to it, and the 3rd below it. I can get the text to the left or right of the image, but when I resize the window, the 3rd paragraph can crawl upwards, and then appear right next to the image. I want to force the text placement as I described above. Thanks 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! http://www.gouramidesign.com/portfolio.aspx#webdesign See that website, how it opens a lightbox type of thing, but wth the image on the left side and then a text on the right side ?What scripts does that website use? I currenty use prettybox, a jquery script, but I dont want to JUST display images, io want to have a website portfolio and thi sis EXACTLY what I've been looking for! 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. 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;
}
I'm having some trouble trying to get the following page to show the three link columns centered, side by side: http://centralmusic.com.previewmysite.com/links.php EDIT: for reference, the title LINK is properly centered, and the ARTIST column should be directly below that, as is seen on the contact page I've tried every trick you can find on google, but nothing seems to work while the float tag is involved, and if I remove the tag then the divs arn't side by side. I've found that if I make a containing DIV with a FIXED witdth, it will center THAT div within it's parent using the margin: 0 trick. however, the 3 interior divs still float to the left of that container div. so if the containing div is wider then the total width of the interior divs, they do not appeared center (however on this page I COULD make use of equal column widths, but it doesn't end up being FF friendly). Alright so I actually tried a couple more things after typing that last paragraph. On this page: http://centralmusic.com.previewmysite.com/gallery.php I find that what i described so far is true, however on the first page i referenced, putting a containing div around the 3 columns made no apparent difference. I'm going to start double checking my code and comparing the two pages for differences to see what I'm doing wrong (on both pages though, the goal is to have a number of divs centered vertically, side by side). If anyone has any comments or hints to help me out that'd be great, but I'll definatley be posting back later with an update once I get a chance to try a few more things. Hi folks, I have a table and in one cell I have two images that normally appear side by side but when an a adjacent cell (or any cell in the same row) gets too large the images end up appearing on top of one another... is there some way to force them to stay side by side? I'd rather not have a table within the cell in question although i suppose i could if there's not some html or css way to make it work. Thanks in advance, Michael Hello i am having some trouble aligning some checkboxes. I am trying to get them to sit side by side horizontally but when i do this with absolute positioning i will click the first set and it will check the second so i have to go way to the left of the first set to check mark it. Sorry for the butchered script. Thanks <div> <tr> <td height="40"> <label for="budget" class="label">Budget: From</label> <input name="budget" type="text" id="budget"> <span class="from">To</span> <label for="to" class="from"></label> <input name="to" type="text" id="to"> </td> </tr> </div> <tr> <td> <input name="boxesh" type="checkbox" id="home" value="walkdis"> <label for="home" class="checkboxes">Home</label><br> <input name="boxesb" type="checkbox" id="BoatDock" value="walkdis"> <label for="BoatDock" class="checkboxes">Boat dock</label><br> <input name="boxesv" type="checkbox" id="viewofwater" value="walkdis" title="Check the ones you want"> <label for="viewofwater" class="checkboxes">View of Water</label><br> </td> <td> |
|||||||