|
HTML - New Tact For Sidebar. Help Needed.
With the help of OleTom I was able to add a sidebar to the background of my blog
Thread he http://www.htmlforums.com/html-xhtml...ar-111661.html. I could not fix the problem that it looked different in Fixefox and IE, and changed as you magnified and reduced the webpage. I thought of a new approach and thought I'd ask if this seems doable. If you look at my blog; muttonpizza.com I can increase the padding on the right so that I could have room for a sidebar on the top right in the content body. I would want it to stay in position along side the newest post. I believe this would keep it's size relative to the rest of the page, no matter what browser or size viewed. Here's an example of this: http://thehousingbubbleblog.com/index.html I hope I've explained this. I can post my code for the HTML help. Thanks. Similar TutorialsHi, I got this template, ( see picture below) Could someone help me to get rid of the side bar on the left but everything else should be as it is. I've attached the index.html as well as the style.css file. Thank you Hi guys I was hoping someone could tell me what is the code for the sidebar nav in this site: http://cloud9fabrics.com/ I really liked it and was hoping to use it in my site, but I couldn't figure it out with all the text and scripts. Could anyone kindly tell me the code so I can use it? Thank you so much! Natalie http://tinypic.com/r/1t4igj/5 How can I make a floating social media sidebar like this one? Hi I want several features on my homepage to repeated throughout the website on every page, such as the sidebar, the logo etc. In Dreamweaver, i can link the homepage logo to another page but it won't let me link it to more than one. Is there a command or piece of code that will link each feature to all the pages on the website? Thanks in advance Ox Really hoping someone here can help me! Ok so, I am using the theme he http://www.tumblr.com/theme/10375 Basically, I was trying to change the width of the entire theme to my liking. So in the coding I changed every "900px" to "600px" The code: http://www.heypasteit.com/clip/08PT However in doing that, the "sidebar" of the theme moved down to the footer and I've been looking through the code, trying to change some different things and I just can't figure out what to do to bring it back to the right side. Please help? Thank you kindly hello all, i am trying to make a sidebar menu like the one at http://www.famousfootwear.com/Shoppi...ts.aspx?N=6208. the idea is that the user would be able to narrow their search, and as they refine it the links that do not apply would collapse. i have been searching for a while and i have no idea what kind of menu i am looking for so if there is a name for this sort of thing i'd love know. or if there is a template? thanks in advance, i need a shove in the right direction! Hello im new as you can see In Firefox this website "http://gregg.hostzi.com/" (Friends death metal band, has swearing in it) The alignment of the news bar is in the correct position. This is what i want it to look like. When people surf in Internet Explore they get the sidebar all messed up as you can see. My question is how do i align back up? so looks like what it is in Firefox. I hope i have explained what is needed, please ask if you need any further information. Thanks alot. 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 started up a blog recently and used an already made up template. I've altered it a bit to my tastes (still kept all previous credit obviously) but i'm having a hard time putting in a right sidebar in the HTML code. There's already a left sidebar and the main content body but i'm wanting to add a right sidebar to this to balance out the layout. I've tried copying the same html code of the left and altering it to make it right but it doesn't seem to work. If theres anyone that can help me with this it would be greatly appreciated. If anyone wants to see the blog layout and/or html code as present then please do ask. thanks in advance! I have my sidebar to the bottom center. I want it to the left of my content. l-------------l ----------------------------------------------------------------- l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l------------ l l----------------------------------------------------------------l That's what I want it to look like. Here's my code right now; <center><TR height=*> <TD bgcolor=2f2f2f valign="left"><font color=eaeaae> <CENTER> <BR><BR> <TABLE border=0> <TR width=25%><TD bgcolor=green><CENTER><FONT SIZE="+3"><A HREF="index.html">Home</A></FONT></CENTER></TD></TR> <TR><TD bgcolor=darkgreen><CENTER><FONT SIZE="+3"><A HREF="characters.html">Characters.</A></FONT></CENTER></TD></TR> <TR><TD bgcolor=green><CENTER><FONT SIZE="+3"><A HREF="mguide.html">Mission Guide</A></FONT></CENTER></TD></TR> <TR><TD bgcolor=darkgreen><CENTER><FONT SIZE="+3"><A HREF="contact.html">Contact</A></FONT></CENTER></TD></TR></center> </CENTER> </font></TD> <TD valign="left"> Hi The sidebar appears on the bottom of the website I'm editing when I try to add it.I'm not the original webmaster,he abandoned it and I'm helping my friend redo it.We're both inept at html. InstanceBeginEditable name="EditRegionRightSide" --> <!-- InstanceEndEditable --> <h1>MySpace Page</h1> <p><a href="http://www.myspace.com/kellimaroney" target="myspace"><img src="graphics/myspace.gif" alt="Click Here to visit my MySpace page" border="0"></a></p> <p>Don't forget to visit me at <a href="http://www.myspace.com/kellimaroney" target="myspace">myspace.com/kellimaroney</a></p> <div align="center"><br> Check out the <a href="http://movies.groups.yahoo.com/group/kellimaroneyfans/?yguid=188954506" target="_blank">Kelli Maroney Fan Club @ Yahoo! Groups</a><br> </div> <div> <h1 align="center">Follow me on...</h1> <ul class="hnav" style="margin-left: 30px;"> <li><a href="http://twitter.com/Kellimaroney" title="Twitter"><img src="images/twitter.gif" alt="Twitter" width="32" border="0" height="32"></a></li> <li><a href="http://www.facebook.com/kellimaroney?ref=profile" title="Facebook"><img src="images/facebook.gif" alt="Kelli's Facebook Page" width="32" border="0" height="32"></a></li> <li><a href="http://www.youtube.com/user/lovesnerds" title="YouTube"><img src="images/youtube.gif" alt="Kelli's YouTube Channel" width="32" border="0" height="32"></a></li> </ul> </div> <br style="clear: both;"> <br> <div align="center"> <script type="text/javascript"><!-- amazon_ad_tag="kellsonl-20"; amazon_ad_width="120"; amazon_ad_height="600"; amazon_color_border="206BA2"; amazon_color_logo="FFFFFF"; amazon_color_link="206BA2"; amazon_ad_logo="hide"; amazon_ad_title="The Official Kelli Maroney Amazon.Com Store"; //--></script> <script type="text/javascript" src="http://www.assoc-amazon.com/s/asw.js"></script> </div> <script type="text/javascript" src="http://www.assoc-amazon.com/s/link-enhancer?tag=wwwkellimaron-20"> </script> <noscript> <img src="http://www.assoc-amazon.com/s/noscript?tag=wwwkellimaron-20" alt="" /> </noscript> </div></td> </tr> </tbody></table> <p> </p> <table width="798" border="0" cellpadding="0" cellspacing="0"> <tbody><tr> <td><img src="graphics/t_photo.gif" width="798" height="8"></td> </tr> Hello, I have about 25-30 pages on my site. It has a link navigation menu and a sidebar on the left with newsletter opt in, products for sale, etc... I was wondering if there was a way to change/ edit the contents of the sidebar on EVERY PAGE without having to manually go in and change the updated HTML code on every single page. Is there a script that i can use to make this happen that I can just edit the sidebar and it will "update" the sidebar on all 30 pages accordingly?? Rather than manually doing this 30 times for every page my website is http://www.optimumtennis.net thanks in advance Okay. So I need some serious help! I just got a Tumblr and I'm trying to figure out how to replace the little avatar default, in the left sidebar, with an actual picture of me. I was just going to paste the whole HTML code in here but it says it's too big. So here's the link to the code: http://www.cherrybam.com/layouts/pla....php?layout=61 And here's the picture of me I'd like to use: http://static.tumblr.com/xs03htv/5D1logaoa/photo_49.jpg I would certainly appreciate the help! Please and Thank You! I have the same sidebar which I would like to use on more then one page of my website. I don't want to have to put it on each page individuality because this is a pain whenever I have to edit it. What I want to be able to do is have one file that is the html of my sidebar and have that show up on each of my pages. But I don't know how to do that. Anyone else know? At the moment I have my sidebar located in a directory above the pages I want it in. Side bar: http://www.invader-stu.com/holland/g...y_sidebar.html A few of the pages I want to put it in: http://www.invader-stu.com/holland/g...s/cartoons_01/ http://www.invader-stu.com/holland/g...s/cartoons_02/ http://www.invader-stu.com/holland/gallery/comics/ http://www.invader-stu.com/holland/g...mics/comic_01/ http://www.invader-stu.com/holland/g...mics/comic_02/ I just made my website - http://www.lucaschu.com to showcase my film work. I'm know little to nothing about HTML and have just modified someone elses. The left sidebar says RSS and ARCHIVE. I want to replace RSS and ARCHIVE with ABOUT and CONTACT. So in my HTML I found this: <!--{block:IfShowRSSAndArchiveInSidebar}--> <h2><a href="{RSS}">{lang:RSS}</a></h2> <h2><a href="/archive">{lang:Archive}</a></h2> <!--{/block:IfShowRSSAndArchiveInSidebar}--> The above HTML seemed to be controlling my sidebar so I modified it to this: <!--{block:IfShowRSSAndArchiveInSidebar}--> <h2><a href="/about">{lang:About}</a></h2> <h2><a href="/contact">{lang:Contact}</a></h2> <!--{/block:IfShowRSSAndArchiveInSidebar}--> I was trying to make the ABOUT icon link to lucaschu.com/about & the CONTACT icon to lucaschu.com/contact The CONTACT was successful but the ABOUT failed. The word ABOUT just didn't show up. I suspect it has to do with the RSS? Help me to do this! Here is what I'm dealing with: http://kr3t3n.com/premiership/ Look at the left sidebar, where the Arsenal links are. I need to put that 10t in the right side, i have used: < li >< a href="http://www.arsenal.com" >1. Arsenal< p style="float:right;width:25px;height:16px;margin:0;padding:0;display:inline;" > 10t < /p > < /a >< /li > but it seems to be wrong, can you please tell me where I'm wrong?!?! Any help with this GREATLY appreciated. Having a problem with my sidebar breaking as I add text to the page. See he http://www.thebigfootdemo.com/landingpage Can someone point me in the right direction as to what to look for in the code that might be causing this? I'd like the sidebar (green area) to adjust it's height with the amount of text I put into the page. We need the height of the child div to go 100% of the parent div in other words. If I add too much text, the bar breaks as you will see. Thanks so much in advance, Jeff I am running into a wall trying to add a sidebar to my tumblr blog. muttonpizza.com I could play with the html code enough to tweak my blog (mostly through trial and error and picking things up on w3schools.com). But I want to add a top left sidebar with the "About this Blog" box I now have at the bottom of my page. And maybe a right sidebar with links. I've done a lot of Googling for help and trying different codes I've found to get this but I just don't have the code right and I cannot figure out where to place it in the code page. I do not have a sidebar at present. I know this should be easy (everything is easy when you know how:-) But I just can't get it to work. First, please tell me how to post my code here. (Could not find it in FAQ) Have a look at my site Can anyone tell me what on earth happened in my sidebar? All of a sudden, the space under the poll I have on the right hand side extended, making my site fill up with blankl space (u can scroll down and see what I mean). I didn't do anything, it just happened on its own. Can anyone see why this is happening?? Thx. hi there, i am kind of new to programming and am currently trying to use divs to create a sidebar for my website. I am currently using divs to create a container, a signin banner, a header, content and a footer. I would like the content div split into two further divs though, a left and a right, could someone please help me? below is the html and the css code which i am using... HTML Code: <body>
<div id="container">
<div id="signin-bannerdiv">
<table align="right">
<tr>
<td width="50" align="left">
<p><a href="signin.php" class="a">Sign-In</a></p>
</td>
<td align="left" width="10">
|
</td>
<td width="60" align="left">
<p><a href="register.php" class="a">Register</a></p>
</td>
</tr>
</table>
</div>
<div id="banner">
<?php include ("header.html"); ?>
<?php include ("menu.html"); ?>
</div>
<div id="content">
content
</div>
<div id="footer">
<?php include ("footer.html"); ?>
</div>
</div>
</body>
Code: body {
background: url(images/backgroundmain2.gif) no-repeat center top;
margin: 0px auto;
}
#container{
width:1000px;
position:relative;
margin: 0px auto;
}
#signin-bannerdiv{
height: 60px;
width: 1000px;
background:url(images/signin-banner2.png) repeat-y left;
margin: 0px auto;
text-align:center;
position:inherit;
}
#banner{
width:1000px;
height:175px;
margin: 0px auto;
position:inherit;
}
#content{
background-color:#FFF;
width: 1000px;
height:auto;
min-height: 416px;
margin: 0px auto;
position:inherit;
}
#footer{
background-color:#E0E0E0;
width:1000px;
height:58px;
position:inherit;
margin: 0px auto;
}
|
|||||||