|
HTML - Create Column On The Left And Right
Hey,
I have a sample page he www.darkdayssoftware.com/indexotheridea.html How do I make space for and create a column down the left and right (e.g. a space for adverts) and ensure that when I resize the web paste, the main column in the middle doesn't overlap the column to the left, and similarly the column on the right doesn't overlap the column in the middle? Thanks Similar TutorialsHi all, Im afraid im getting a little frustrated. My fault.. Im new here but need your help. I run a forum, phpbb3 based but the style im currently using is very much HTML based. I am looking to have a left hand column within my forum but really dont know how to do it, well to add to what i already have. I think for you to know what style docs i have you would have to have a look yourself or look at my existing source code.. http://www.pricelessparrots.com/phpbb3/ Ok i have the new style ' VistaX '. This link will take you to the original download: It can be found he It seems this style is mostly created using HTML. Could someone please tell me how to add a left hand column to the page. I would like it to be on the left hand side all the way down after the header. I thought i would have a go at it but becoming increasingly frustrated with it. such a simple thing but i cannot get it. Do i float it, using css or what? I thought about using a seperate page to create the table and then include it into the doc but this doesnt work either. Plz help.. Paul What would be the best way to center the items listed in the left column? Thank you. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.11 Transitional//EN">
<html><head>
<title>test</title>
<script src="java.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="styles.css">
<style type="text/css">
.test{background-color:#ffdead;}
#header {
width: 830px;
margin-left: auto;
margin-right: auto;
margin-top: -15px;
background-color: #ffdead;
}
#header_table {
width: 75%;
border-collapse: collapse;
border: solid 1px;
border-color: #b7b7b7;
}
.header_bar {
padding: 0px;
margin: 0px;
border-bottom-style: solid;
border-bottom-width: 10px;
border-bottom-color: #b7b7b7;
background-color: #800000;
width: 150px;
border-collapse: collapse;
border-right-width: 0px;
border-left-width: 0px;
}
.header_body {
padding: 0px;
margin: 0px;
border-left-style: solid;
border-left-width: 1px;
border-left-color: #b7b7b7;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #b7b7b7;
}
</style>
</head>
<body bgcolor="#ffffff">
<table id="header_table" align='center' cellpadding='0' cellspacing='0'>
<tr>
<td class="header_bar" colspan='2'> </td>
</tr>
<tr>
<td align='center' colspan='2'>
<img src="imgi/img11.jpg" height="134" width="461">
<img src="imgi/topimg2.jpg" height="160" width="309">
</td>
</tr>
<tr>
<td class='header_body' valign='top' width="200">
<form action="login.asp" method="post">
<table width="100%" height="100%" align='center' cellpadding="0" cellspacing="0" border="0" >
<tr><td valign="top" class='header_bar' colspan='2'> </td></tr>
<tr>
<!-- SIDE MENU -->
<% If Session("PMMS_IN") = "True" Then '// CHECK IF MEMBER IS LOGGED IN ALREADY %>
<!-- MENU FOR LOGGED MEMBER ONLY -->
<td colspan="2"><br><br>Welcome <i><%'=Session("PMMS_NAME")%></i><br /><br /></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="profile.asp">My Profile</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="_purchase.asp">Purchase</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="newsletter.asp">Newsletters</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="members.asp">Member List</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="members_by_group.asp">Group Member List</a></td>
</tr><tr>
<td width="15">º</td>
<td><a class="lnk" href="file_cate.asp">File Repository</a></td>
</tr><tr>
<td width="15">º</td>
<td><a href="login.asp?logout=True">Log Out</a></td>
</tr>
<!-- [ MENU FOR LOGGED MEMBER ONLY ] -->
<% Else ' IF NOT LOGGED IN THEN SHOW THE LOGIN FORM%>
<!-- INCLUDE LOGIN FORM -->
<br><br><td colspan='2'><br><br>Username:<center><br /><input class="textbox" type="Text" name="username" value="<%=Trim(Request.Cookies("USERNAME"))%>" maxlength="25" size="20" /></td>
</tr><tr>
<td colspan='2'><br>Password:<center><br /><input class="textbox" type="Password" name="password" value="" maxlength="25" size="20" /></td>
</tr><tr>
<td>
<br><input type="Checkbox" name="rem" value="1"<%If NOT Trim(Request.Cookies("USERNAME")) = "" Then%> checked<%End If%> />Save Username<br />
<input style="width: 50%;" type="Submit" value="Login Now" /><br /><br /><a href="reminder.asp">Password Reminder</a>
</td>
</tr>
<tr>
<td>
<br />
<input type="Hidden" name="mode" value="login" /><input type="Hidden" name="ref_page" value="<% If Len(Trim(Request.QueryString("ref_page"))) = 0 Then%><%=Request.ServerVariables("URL") & "?" & Request.QueryString%><%Else%><%=Request.QueryString("ref_page")%><%End If%>" />
<!-- [ INCLUDE LOGIN FORM ] -->
<% End If %>
</td>
</tr>
<tr>
<td>
<br /><br />
<img src="img/linkimg1.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="index.asp"> HOME</a><br /><br>
<img src="img/linkimg3.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> FAQ</a><br /><br>
<% If Session("PMMS_IN") = "True" Then '// CHECK IF MEMBER IS LOGGED IN ALREADY %>
<img src="img/_example/arrow_gray_top_inverse_b.gif" width="15" height="14" alt="" border="0" /><a class="MainMenuLNKExample" href="login.asp?logout=True">LOG OUT</a>
<% Else %>
<img src="img/linkimg2.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> REGISTER</a><br /><br>
<% End If %>
<img src="img/linkimg4.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> TERMS OF USE</a><br /><br>
<img src="img/linkimg5.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> CONTACT US</a><br /><br />
</a>
<!-- [ SIDE MENU ] -->
<br /><br />
</td>
</tr>
</table>
</form>
</td>
<td class='header_body'>
<!-- MAIN PAGE CONTENT -->
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 could be an HTML or CSS problem, but I can't figure out what's causing this and it's driving me nuts! The left column on my website will not stay a fixed width of 175px in IE 8. That seems to be the only browser having a problem. Here's the link: http://www.jrsart.net/testarea/paull...cientists.html I've linked the page that has it the worst, but if you visit the other pages and keep an eye on the left column's border, you'll see it keeps moving. Please help! I'm rapidly running out of time to fix this issue, so any advice would be greatly appreciated! I have a left menu column but it's not stretching down the length of the page. The page is quite long and when the links are finished on left column it just ends and as it has abackground colour it looks a little strange. It is floated left and the main_section is also floated left. It is the main section div that is long. I was thinking because this is in a div that the left coumn is also in that the left column would therefore stretch to the length of it's parent div. Any ideas? http://absolute-websites.com/services.html is the link so you can see what I'm talking about. Here is a section of the HTML : HTML Code:
<div class="left_column">
<div class="breadcrumb"><p><a href="index.html">home ></a>services</p></div>
<div class="icons"><p><a href="services.html#websiteProduction"><img src="images/webIcon-01.png" title="web building" alt="web building icon"/></a></p></div>
<div class="icons"><p><a href="services.html#hosting"><img src="images/hostingImgIcon-01.png" title="Hosting & Domain Names" alt="Hosting & Domain Names icon"/></a></p></div>
<div class="icons"> <p><a href="services.html#seo" ><img src="images/seo2Icon-01.png" title="Search Engine Optimisation" alt="Search Engine Optimisation icon"/></a></p></div>
<div class="icons"> <p ><a href="services.html#marketing"><img src="images/advertsIcon-01.png" title="Marketing" alt="marketing icon"/></a></p></div>
<div class="icons"><p ><a href="services.html#design" ><img src="images/designImgIcon-01.png" title="Design" alt="Design icon"/></a></p></div>
<div class="icons"> <p ><a href="services.html#photo" ><img src="images/photoIcon-01.png" title="Photoditing" alt="Photoediting icon"/></a></p></div>
<div class="icons"> <p><a href="services.html#video" ><img src="images/videoIcon-01.png" title="Video Production" alt="Video Production icon"/></a></p></div>
</div>
<div id="main_content" class="fl">
<h1 class="h1SecHead" >>SERVICES</h1>
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. Good day, I am brand new here in this forum. So many knowledgeable folks here. I am relatively new to web design. I typically use templates and themes and tweak them. I can navigate a CSS doc and html to make changes, etc. However, I have a client who has an existing site that she wants to keep the aesthetic of and so I am using what the previous designer left. It is a simple html page with tables. Simple enough. Very elegant visually. No need to SEO really so it works. She has asked if we can make the left column of a two column table scroll independently. The page content is about over 6000px. The scroll column will contain a page outline and other text that will include internal targeted links. This is outside my skill set, but I want to learn. Have searched the net and found some suggestions but want it to be clean and ended up here. There is no style sheet other than the ie6 sheet. Page is he http://www.themedeaproject.com/proposaltestpage.html no graphics are loaded. Can anyone point me to a good tutorial or have any suggestions? Thanks! BlueEyedMonkey aka Tatyanna In html left to right <marquie behaviour but i want right to left the text comes from right to left and left standard positin whch command do i need to use? please provide thanks for helping Hi , I have an odd HTML question. In my company we make procedures (stuff that we think we need written down in case we need to repeat it), which we update on a regular basis. Whenever we go to do an install, update, fix, etc. and we need a procedure, we print it out and then head off with it (we make red lines as necessary.) All of these are in HTML and stored in CVS. One of the engineers (she is not terribly familiar with HTML and turned to me) asked me if I could make a little "box" to the left of a list. The steps of the procedure are a bunch of <li> tags, having a nice box to the left to check it off as you go through them would be great. This stumped me. The best that I could do was make a one-celled table inside the <li> tags (the HTML for which I've posted) in order to get the impression of a "box" where you can check off a step that you just completed. Is there any way to put that box on the left? If you look at the end of this post I made a simple ASCII representation of what I would like to accomplish. Code: <html>
<head>
<title>
Example
</title>
</head>
<body>
<ol>
<li>
<table border="1">
<tr>
<td>
</td>
</tr>
</table>
Do stuff...
</li>
<li>
<table border="1">
<tr>
<td>
</td>
</tr>
</table>
Do stuff...
<ol type="a">
<li>
<table border="1">
<tr>
<td>
</td>
</tr>
</table>
Do sub-step...
</li>
<li>
<table border="1">
<tr>
<td>
</td>
</tr>
</table>
Do sub-step...
</li>
<li>
<table border="1">
<tr>
<td>
</td>
</tr>
</table>
Do sub-step...
</li>
</ol>
</li>
<li>
<table border="1">
<tr>
<td>
</td>
</tr>
</table>
Do stuff...
</li>
</ol>
</body>
</html>
Code: +---+
| | 1) Do stuff...
+---+
+---+
| | 2) Do stuff...
+---+
+---+
| | a) Sub-step...
+---+
+---+
| | b) Sub-step...
+---+
+---+
| | c) Sub-setp...
+---+
+---+
| | 3) Do stuff...
+---+
I want to add a left vertical sub navigation... but i want it to look similar to this one! RamVideos I dont know where to start... Thanks In Advance! people are telling me that have to horizon scroll (left to right) to see this page: http://www.girlsincsoaz.org I tried it on different machines, including a laptop and I don't have to, what can be the problem? TIA Good day , I want to create a menu in my div block but the menu will be like this Categorie <-- this is the title Plastic <-- this is 3 categorie hard <-- type of plastic soft wood metal my problem is that I would like that when you click on a categorie the type would appear and the other categories would go down to give some room for the type. I tryed to use a menu builder from coffecup but it wont put under like I would like. Can someone help me please . thanks in Advance Marc After some good help from Horus_Kol i made a panel to the left on my website: But now i created alot of stuff on my website, and then i found that something was wrong if there is too much text on the page (sorry, i can't explain it so good ): here is the HTML Code: Code: <html> <head> <title>Urne's Website - About</title> <link rel="stylesheet" type="text/css" href="style/style2.css"> <div id="container" style="width:100%;"> <div id="header"> </div> <div id="left" style="width:30%;float:left;"> <a href="index.html"><img alt="Home2 (15K)" src="img/Home2.png" height="50" width="200" border= "0px"/></a> <p><a href="Community.html"><img alt="Community (15K)" src="img/Community.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Tracks.html"><img alt="Tracks (17K)" src="img/Tracks.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Videos.html"><img alt="Videos (15K)" src="img/Videos.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Images.html"><img alt="Images (15K)" src="img/Images.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Other.html"><img alt="Other (13K)" src="img/Other.png" height="50" width="200" border= "0px"/></a><p/> <p><a href="Trackup.html"><img alt="Track Updates" src="img/trackup.png" height="50" width="200" border= "0px"/></a><p> <p><a href="Settings.html"><img alt="Settings (13K)" src="img/Settings.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Search.html"><img alt="Search (14K)" src="img/Search.png" height="50" width="200" border= "0px"/></a><p> <p><a href="About.html"><img alt="About (12K)" src="img/About.png" height="50" width="200" border= "0px"/></a></p> </div> </head> <body> <div id="main" style="width:70%;"> <h1>Other Things</h1> </div> </body> <div id="footer"> <img alt="Pretty Plant" src="img/Pretty+Plant.png" height="200" width="200" align="right" border= "0px"/> <p><b><u><h3>Pretty Plant 3D Model</h3></u></b></p> <p>This plant i made in September, and was made for this website. You can use it if you want to your track, or any other thing, but if you want to upload it to your website, then please contact me on my e-mail (look in the readme.txt that comes with the plant). <br>Convert the plant to any other format if you want, but please keep the readme.txt unmodified, and safe.</br> <p><a href="dload/Pretty+Plant.zip"><img alt="Download Pretty+Plant.zip" src="img/Download.png" height="50" width="200" border= "0px"/></a> <hr /> <img alt="Urne's World infodocument" src="img/No+pic.png" height="200" width="200" align="right" border= "0px"/> <p><b><u><h3>Urne's World Infodocument</h3></u></b></p> <p>The "Uworld" Project is still going around, and in the beginning i was planning alot, about how the track should be etc. <br>The infodocument contains pictures, and track information about the 5 tracks Urne's World include. Urne's World should be aviable for Download in October/November 2008.</br> Enjoy the reading! </p> <p><a href="dload/UW+Project.doc"><img alt="Download UWorld Project.doc" src="img/Download.png" height="50" width="200" border= "0px"/></a> <hr /> <img alt="Bone Island Light Pack" src="img/No+pic.png" height="200" width="200" align="right" border= "0px"/> <p><b><u><h3>Bone Island Light Pack</h3></u></b></p> <p>Alot of people uses wrong Brightness & Contrast settings wich will cause alot of darkness in Bone Island, so i made this ligth pack to help all thoose who cant drive this amazing track because it's too dark. <br>Hope it helps!</br></p> <p><a href="http://www.mediafire.com/?xvy1gjwxll1"><img alt="FC" align="right" src="img/FC.png" height="50" width="200" border= "0px"/></a> <a href="ihttp://www.mediafire.com/?v2ygm4n7cpu.ico"><img align="right" alt="Extreme" src="img/Extreme.png" height="50" width="200" border= "0px"/></a></p> <hr /> <img alt="Other Pisa Grandprix GFX" src="img/new+pisa.png" height="200" width="200" align="right" border= "0px"/> <p><b><u><h3>Other Pisa Grandprix GFX</h3></u></b></p> <p>Before me & Crone made the update pack for Pisa Grandprix, Crone took this nice picture, to use as GFX for Pisa Grandprix. Please feel free to download, if you like this one better than the 2 other images!</p> <p><a href="img/new+pisa.png"><img alt="Full Size" src="img/FS.png" align="right" height="50" width="200" border= "0px"/></a> </div> </div> Is there any way to make this work so everything is aligned the way that the other text are? Reference: http://test6.waltonstreetwebdesign.com/ So right there on the home page, "A Warm Welcome" is in an h1 tag, most of the regular text is inside <p> tags except for the test text. Why in the world is the right align of the <p> tags a little to the left of the text not inside the <p> tag and the <h1> tag? hello 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'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 My webmaster is on vacation and I am trying to post a News Release on our website. This is a very basis question: The copy on this page is centered, and I want to align it left. Here's the page: http://www.247-direct-mail-services.com/news/ Seems to me, this is the style sheet html for this page: <p style="font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; text-align:left; color:#ffffff;"> But it's not showing this font nor aligning left. I don't know how to fix this. Hoping to get input. Thx. Hi, I want to put images on the top left and topright corners of my website, but I want the images to rotate (they'd change when the page reloads).. How would I do that? The layout of my page, like that of many pages, consists of a bunch of divs inside divs. Whenever I specify the width or height of a div, there appears a space to its left, three pixels wide. This gap also appears when I substitute a standard image (img) for a div. Some of these divs are floated left; others are not. In the latter case, floating left actually gets rid of the space, but causes other problems as I don't really want those ones floated left. Setting the borders, margins, or padding to zero (or a negative number) does not affect the 3px gap. I am using IE7. Hello! How can I center the divs and keep this arrangement? I have the bg centered and would like the divs to be also, without using the margin-left tag since it will only look centered on some screens. Thank you very much for your assistance! www.rkgrant.co.cc |
|||||||