|
HTML - Help Adding A 3 Column To My Blog Layout
Hi! This is was my blog looks like at the moment: http://neverrgrowold.blogspot.com/ I would like to add a 3rd column to my 2 column layout. I know this will mean resizing the other two columns which I know how to do.. I just have no idea to add another column to the right.
Here is the html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<title>Never Grow Old</title>
<style type="text/css">
#navbar-iframe{height:0; visibility:hidden; display:none;}
body
{background-color: #000;
font: normal 10pt Trebuchet MS;
color: #e5e5e5;
cursor: crosshair;
line-height: 75%;
scrollbar-face-color: #ddd;
scrollbar-highlight-color: #fff;
scrollbar-3dlight-color: #ddd;
scrollbar-darkshadow-color: #ddd;
scrollbar-shadow-color: #fff;
scrollbar-arrow-color::#fff;
scrollbar-track-color: :#ddd;}
a:link, a:visited, a:active
{color: #e5e5e5; text-decoration: none; text-transform: none; font: normal 8pt Trebuchet MS; cursor: normal;}
a:hover
{text-decoration: ; text-transform: None; font: normal 12pt Trebuchet MS; cursor: normal; color: #FF4C79;}
blockquote {font: normal 8pt trebuchet ms; color:#e5e5e5; padding:5px; border-left:7px solid #ddd; background-color:#000;}
blockquote:hover {-moz-border-radius:4px; padding:5px; border:2px solid #000; }
blockquote:first-letter {background: #000; font: italic 15pt "Georgia"; color: #FF4C79;float: padding: 5px; text-transform: uppercase;}
.head
{text-align: center; font-family: impact; font-size:12pt; color:#CCFF66; text-align: left; text-transform: none; line-height: 9pt; font-style: none; background:#000; padding: 5px; }
.content
{font-size: 9pt; font-family: Trebuchet MS;color:#e5e5e5; background: #000; line-height: 14px; padding:10px; border: 2px solid #111; }
.headline1{font:normal 30pt Courier New; color:#e5e5e5; letter-spacing:-3px; text-transform:uppercase; line-height:100%; }
</style>
<script type="text/javascript">
/***********************************************
* Disable select-text script- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
//form tags to omit in NS6+:
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reDisable(){
return false
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reDisable
}
</script>
<script language=JavaScript>
<!--
//Disable right click script III- By Renigade (renigade@mediaone.net)
//For full source code, visit http://www.dynamicdrive.com
var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</script>
<body>
<div style="position: absolute; top: 10px; left: 188px; width: 500px;">
<span class="headline1"><img src="http://i44.tinypic.com/bfoq69.png"/>
</span><br>
</div>
</div>
<div style="position: absolute; top: 440px; left: 525px; width: 600px;">
<Blogger>
<div class="head">@ <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> </div>
<div class="content"><$BlogItemBody$></div><p>
</Blogger>
</div>
<div style="position: absolute; top: 440px; left: 190px; width: 310px;">
<div class="head">Welcome! </div>
<div class="content">
<div><img src="http://24.media.tumblr.com/avatar_66b2c19ef795_64.png" align="left" /><font color=#e5e5e5>I believe we never truly grow old unless we let ourselves. You'll find anything and everything to do with your childhood if
yyou grew up anywhere between the late 80's to the early 2000's. So sit back, enjoy your stay, and take a trip down memory lane ;)
</font></div>
<p>
</div><p>
<div class="head">Memory Lane.</div>
<div class="content">
ghghghghh
</div><p>
<div class="head">Support</div>
<div class="content">
Place your tagobard here,
<a href="http://cbox.ws">Cbox</a> recommended<BR>
</div><p>
<div class="head">Links</div>
<div class="content">
Place all your links here,<br>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>
</div><p>
<div class="head">Looking Backwards.</div>
<div class="content">
<BloggerArchives>
<BloggerArchives>
<a href="<$BlogArchiveURL$>"> <$BlogArchiveName$></a>
</BloggerArchives></a><br><br>
</div><p>
<div class="head">Credits</div>
<div class="content">
Designer @<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>,<br>
Basecode: <a href="http://www.blogskins.com/me/sacrificelove-">sacrifice</a><a href="http://love--bites.blogspot.com">love-</a><br>
</div><p>
</div>
</body>
I've been trying to figure it out with my basic html knowledge for a while now and I can't get it, I would be really appreciative if someone could help me out. Thanks!! Similar Tutorialsi know very basic html, i have taken some free script to create a blog layout for my website: http://www.williamhessian.com/bloglayout.html however, even using the original code that i was given, i cannot get the sidebar to appear on the actual side. it constantly wants to appear below the other content. i think this is probably a simple problem, but i cannot figure it out. any help is much appreciated. also if you see any other script problems while you are viewing source please let me know. suggestions are very welcome. william Hello all, I use Internet Explorer 7 which is also the browser I preview my layouts on. I've had problems with my layouts looking like they should on Firefox for the longest time and I think it's time I tried correcting the problem. When I load my blog on Firefox the entry box overlaps with a portion of the image. The entry box's height is also too long on Firefox. I do know that coloured scrollbars don't show up on Firefox so that's not a problem. My main issue is that the basic arrangement of the boxes of my layout is completely messed up on Firefox. Here's the HTML: Quote: <html> <head> <title>o.d.c v41: i am more than you will see.</title> <style type="text/css"> A:link { text-decoration: none; font-weight: bold; color: #924146 } A:visited { text-decoration: none; font-weight: bold; color: #924146 } A:active { text-decoration: none; color: #000000 } A:hover { text-decoration: line-through; cursor: default; color: #000000 } body {background-color: #E6DDD0; scrollbar-face-color: #E6DDD0; scrollbar-highlight-color: #E6DDD0; scrollbar-3dlight-color: #E6DDD0; scrollbar-shadow-color: #E6DDD0; scrollbar-arrow-color: #E6DDD0; scrollbar-track-color: #E6DDD0; scrollbar-darkshadow-color: #E6DDD0; font-family: tahoma; color: #000000; text-align:justify; margin: 0px; font-size: 8pt;} .entry {position: absolute; top: 80px; left: 163px; width: 514px; height: 481px; border-left: 1px solid #52191D; border-right: 1px solid #52191D; border-top: 1px solid #52191D; border-bottom: 1px solid #52191D; padding: 10px; letter-spacing: 0pt; line-height: 9pt; overflow:auto; background-color: #D9B8AE; scrollbar-face-color: #D9B8AE; scrollbar-highlight-color: #000000; scrollbar-3dlight-color: #D9B8AE; scrollbar-shadow-color: #000000; scrollbar-arrow-color: #D9B8AE; scrollbar-track-color: #D9B8AE; scrollbar-darkshadow-color: #D9B8AE;} .image {position: absolute; top: 50px; left: 680px; border-left: 0px solid #52191D; border-right: 0px solid #52191D; border-top: 0px solid #52191D; border-bottom: 0px solid #52191D;} .links {position: absolute; top: 50px; left: 163px; width: 514px; height: 10px; border-left: 1px solid #52191D; border-right: 1px solid #52191D; border-top: 1px solid #52191D; border-bottom: 1px solid #52191D; padding: 6px; text-align: center; background-color:#D9B8AE;} </style> <script type="text/javascript" src="http://www.haloscan.com/load/tripwires"> </script> </head> <body> <div class="image"> <img src="http://img.photobucket.com/albums/v628/yelen/mewithtext.jpg"> </div> <div class="entry"> <center><font color=#BC6A6F><b><u>%%short_description%%</u></b></font></center> <p align="right"><i>written: %%time%% on %%date%%</i></p> <P> %%entry%% <P><P><P><P> <P align="right"> <font size=1.5><a href="javascript:HaloScan('%%page_name%%');" target="_self"><script type="text/javascript">postCount('%%page_name%%');</script></a></font> <P><P> <p align="center"><a href="%%prev%%">previous entry</a> || <a href="%%next%%">next entry</a> <P><center><hr width=90% noshade color=#000000 HR size="1"></center><P> <b> Previously:</b><br> %%older_entries%%<P> <br> <P align="center"> <!--WEBBOT bot="HTMLMarkup" startspan ALT="Site Meter" --> <script type="text/javascript" language="JavaScript">var site="s13cyelen"</script> <script type="text/javascript" language="JavaScript1.2" src="http://s13.sitemeter.com/js/counter.js?site=s13cyelen"> </script> <noscript> <a href="http://s13.sitemeter.com/stats.asp?site=s13cyelen" target="_top"> <img src="http://s13.sitemeter.com/meter.asp?site=s13cyelen" alt="Site Meter" border=0></a> </noscript> <!-- Copyright (c)2002 Site Meter --> <!--WEBBOT bot="HTMLMarkup" Endspan --> <!-- Begin Nedstat Basic code --> <!-- Title: like i could care --> <!-- URL: http://offence.diaryland.com --> <script language="JavaScript" src="http://m1.nedstatbasic.net/basic.js"> </script> <script language="JavaScript"> <!-- nedstatbasic("ABZB6g7C7XYY5+UwEEa7SkNbtBHg", 0); // --> </script> <noscript> <a target="_blank" href="http://v1.nedstatbasic.net/stats?ABZB6g7C7XYY5+UwEEa7SkNbtBHg"><img src="http://m1.nedstatbasic.net/n?id=ABZB6g7C7XYY5+UwEEa7SkNbtBHg" border="0" nosave width="18" height="18"></a> </noscript> <!-- End Nedstat Basic code --><P> </div> <div class="links"> <a href="http://offence.diaryland.com/index.html">new</a> <a href="http://offence.diaryland.com/older.html">old</a> <a href="http://offence.diaryland.com/bio.html">bio</a> <a href="http://offence.diaryland.com/omake.html">extras</a> <a href="http://offence.diaryland.com/layout.html">layout</a> <a href="http://members.diaryland.com/edit/notes.phtml?user=offence">notes</a> <a href="mailto:yelen.dean14[at]gmail.com">email</a> <a href="http://offence.diaryland.com/poetry.html">poetry</a> <a href="http://www.fanfiction.net/~hisashilovesyelen" target="_blank">fanfiction</a> <a href="http://www.fictionpress.com/~hisashilovesyelen" target="_blank">originals</a> <a href="http://offence.diaryland.com/faveentries.html">favourites</a> <a href="http://www.diaryland.com">host</a> </div> </body> </html> Here's the link to my blog: http://offence.diaryland.com I have VERY basic knowledge of HTML, as I'm sure is obvious. Any help is, therefore, greatly appreciated. I am very new to HTML and cant figure out why my 3-column layout isnt working. I cant seem to get my columns to line up side-by-side without overlapping ... HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!-- Created with the CoffeeCup HTML Editor 2006 -->
<!-- http://www.coffeecup.com/ -->
<!-- Brewed on 9/9/2010 12:48:26 PM -->
<head>
<title>Zone Map</title>
<style type="text/css">
#head {
position: relative;
left: 0px;
width: 250px;
height: 20px;
font-family: times new roman;
line-height: 8px;
font-size: 14pt;
font-weight: normal;
text-decoration: none;
text-align: left;
color: #c3bd24;}
#content {
left: 0px;
width: 250px;
font-family: times new roman;
line-height: 16px;
font-size: 10pt;
font-weight: normal;
text-decoration: none;
text-align: left;
color: #938461;}
#dotted{
width: 225px;
border-top: 2px dotted #c3bd24;
}
#container {
width: 800px;
}
#col_right {
position: relative;
float: right;
width: 250px;
}
#col_center {
position: absolute;
float: center;
width: 250px;
}
#col_left {
position: relative;
float: left;
width: 250px;
}
</style>
</head>
<body>
<p align="center">
<img border="0" alt="" align="left" src="support/image/ZoneMap.png" width="650" height="400"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
<div id="container">
<div id="col_left">
<p id="head"><br>ZONE 1: $750 minimum</p>
<div id="dotted"></div>
<p id="content">
NJ*** all,<br>
NY***Long Island to Islip,<br>
MD** to Salisbury,<br>
PA** Pittsburgh-Williamsport-Wilkes Barre,<br>
VA** Richmond-Front Royal,<br>
WV* to Martinsburg, Fairmont,<br>
DE** all</p>
</div>
<div id="col_center">
<p id="head"><br>ZONE 2: $1,500 minimum</p>
<div id="dotted"></div>
<p id="content">
NY** Syracuse-Albany-Long Island,<br>
CT** Hartford-New Haven,<br>
PA** west of Pittsburgh-Erie,<br>
OH** Sandusky-Columbus, Ashland,<br>
VA** south of Richmond-Roanoke,<br>
WV* south and west of Fairmont to Bluefield,<br>
MA* Pittsfield-Buzzards Bay-Monomet</p>
</div>
<div id="col_right">
<p id="head"><br>ZONE 3: $2,500 minimum</p>
<div id="dotted"></div>
<p id="content">
VA** south and west of Roanoke,<br>
TN***Chattanooga-Nashville,<br>
KY** Hopkinsville-Madisonville,<br>
IN***Evansville,<br>
IL***Urbana, Chicago,<br>
MI</p>
</div>
</div>
</body>
</html>
I've attached the code for a template I'm wanting to use. I want to add a column to the left side of the page that runs the length of the page. Is there anyone out there who can assist me with the code to do that. I'd be exceedingly grateful. I'm afraid I'm table dyslexic. Thanks in advance to anyone who can help. This is both HTML and CSS-oriented. Current CSS code pertaining to the layout: Code: #listnav {
background: url('../images/listnav-bg.png') top left repeat-x;
width: 25%;
padding: 8px;
float: left;
}
#content {
width: 75%;
padding: 8px;
float: right;
}
#footer {
}
#main-wrapper {
width: 85%;
}
HTML: HTML Code: <div id="main-wrapper">
<div id="listnav">
<!-- some spacer stuff here so i can actually see stuff (no static height set) -->
</div>
<div id="content">
<!-- some spacer stuff here so i can actually see stuff (no static height set) -->
</div>
</div>
The result is that the listnav box shows up on the far right side and the content box shows up below it on the left hand side. Any ideas? :| So I found this perfect layout my mathew taylor and Im dissecting it to understand the layout and css. My first questions off the bat are, how does he get the links at the top to be indented? I cant see where he placed the command so that their is an inch of indent and then the links start. Also, how does he make it so the links at the top intersect with a black line the spans the header? I really dont see this in the html where the black line is. And lastly, if i want to create a banner for my website in the header how do i go about doing that in the space above the links and spanning the header. I really want to create a clean title in photoshop and place it there but I dont know what dimension width and heighth to use. Thanks http://matthewjamestaylor.com/blog/perfect-3-column.htm Hi guys, I have a problem. Whenever the left column is larger than the right column, it stretches the div, but the background doesn't go on. The content just flows out. Is there any way I can fix this? http://automata.firephoenixnet.com/74s/ Thanks in advance guys. HI all, Pretty new to web design and I was having some trouble centering my columns, or rather having my columns evenly space between each other in my wrap and from my warp borders. Also, I'm using a background image as my wrap border and for some reason there's a gap at the top and bottom of my pages. HMTL attached Any ideas? Thanks Hello, I need to create a 3 -column lay out with the left and right columns having 200px each and the middle column take the rest. Here is my html markup: HTML Code: <div style="width: 100%"> <div style="width: 200px; float:left;">Left column</div> <div style="width: 100%; float:left;">Middle Column</div> <div style="width: 200px; float:left;">Right Column</div> </div> It's not working for me . Please help. Hi everyone! I would like to add some small icons in the branch of a tree in my layout. Can anyone suggest a way to do it? Should I use an image map? The icons will be links that open in an external page. Thanks! http://heartless-ink.com/inked/main.html Hi There, Pulling my hair out over this. For the life of me, cant make it work: http://www.cowboytuffwebsitedesign.c...cialdeals.html I've used positive padding negative margin to stretch both div's heights to match each other. But the content div, when needed to be higher than the menu div, will overflow its content past the container divs bg. As well the footer will only clear past the menu div, not the content div. HELP! PLEASE! I can copy and paste HTML right into the thread if needed. Thanks Hi I am new to this site, I am having problem in my non blog site. I was trying to integrate wordpress blog in my non blog site. I am nearly done only few issues. Here is the site http://www.zipanatomy.com/blog/ 1. the post titles are coming some other way, without linking and some coding. 2. down to the footer, I have called a footer.php file which is from the non blog site and is in the root directory, the problem here is, they are linking to the wordpress log folder. 3. And one more issue is when I click the categories and do any search from the sidebar, that are opening on the extreme right of the page instead of in center. please, advices from the pros where I am getting wrong. thanks in advance, chander Hi I've built a website for my karaoke show, and would like to add a blog page to the site. Rather than 3rd party, I'd prefer to have my own blog on my own domain to increase traffic for the SE crawlers. I was wondering... - what some good options are ie what blog software to use - if I can have a blog that somehow incorporates Facebook and Twitter (i've seen Facebook connect, but I'd like something that posts my blog messages to my Facebook and Twitter pages) I currently have a Typepad blog on there, but as I said, I'd prefer to have my own blog code, not third party. The site is www.billygoatkaraoke.com.au , and I'd really like the blog to stay on the site - I'm thinking that I'll have a blog page open up over the goat when someone clicks on the BLOG link. Cheers Shaun I am Blogging Special Focus on Technology, Blogging,Internet, Top News Stories, Online Money Making, Search Engine Related.Thank You for Reading This. Please! Simply Share your views. Hi All, I've finally successfully gotten a blog up on my organizations website but I am having a lot of trouble getting it to look like the other pages. I used a template for my main page and tweaked it a lot (www.cleaneducation.org). The main template is mostly html with a css file. I had never seen how blogs were done until now and see that there is no html index at all but only a php file associated with a css file... So my question is how to I get my html/css template to convert to the necessary type (assuming php/css) for the blog. The blog is an internal blog for the directors (myself included) to keep in touch with one another and to keep up to date so if it's really hard to get it to look like the main template it isn't a huge deal but if it's possible I personally would prefer it. Oh yeah, I am using wordpress for my blogging software (really easy install through the hosting company I use). heres a link to my blog http://leader-of-our-nation.tumblr.com/ heres my coding <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Theme: The Minimalist v1. Design: The Minimalist (http://minimalist.co) --> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head><a href="http://leader-of-our-nation.tumblr.com/"><img src=< href="http://s1218.photobucket.com/albums/dd412/tappzstar/?action=view&current=loonbannerresize.jpg" target="_blank"><img src="http://i1218.photobucket.com/albums/dd412/tappzstar/loonbannerresize.jpg" border="0" alt="Photobucket"></a></a></a> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>{Title}{blockostSummary} | {PostSummary}{/blockostSummary}{block:SearchPage} | {lang:Search results for SearchQuery}{/block:SearchPage}</title> <meta name="description" content="{MetaDescription}" /> <meta name="if:Show description" content="1" /> <meta name="if:Show search" content="1" /> <meta name="text:Twitter name" content="" /> <meta name="text:Google Analytics ID" content="" /> <link rel="shortcut icon" href="{Favicon}" /> <link rel="alternate" type="application/rss+xml" title="{Title}" href="{RSS}" /> <!-- Styles --> <link rel="stylesheet" href="http://static.tumblr.com/f1whv92/Mp9l6ewcg/reset.css" /> <style type="text/css"> I use blogger and I have a search bar on my blog. It's on my navbar and I need to move it to the right so I can add more links but I don't know how to move it. Can I get some help please? To see for yourself my blog is: http://freebielink.blogspot.com/ I am using wordpress blog. I have a simple site that is hosted by my school. I was wondering if it where possible to embed the blog within my blog page on my website? Hi Everyone! I'm new to this forum. I have this problem about commenting in blogs. how should you know if you can use html codes in blogs if you're commenting? Hi there, I'm desperately seeking help regarding an effect I want to create on my blog. My blog is created on tumblr ( the address being www.bogeyland.com) and I want to create an effect by were the next image fades in when you scroll down the screen. A good example is on this blog which was also made using tumblr (www.thisisnthappiness.com) Please can somebody give me a code as to how its done.I've tried looking at the source but I don't know where to begin. Thanks alot guys, greatly appreciated. |
|||||||