|
HTML - Resolved: Newbie Question About Adding Columns With Css And Without Tables
Hello, just starting here
I complete the HTML an CSS tutorials at http://www.w3schools.com/ I also downloaded a trial for coffeecup I am helping a local business with their website, it is very simple, just content and a couple of pictures. For some reason, as much as I google it up I cannot figure out how to add a left column to the site. the examples I find, even free templates from Amaya use tables. I dont want to use tables, I guess I need to use div? But if that is so, how do I position my column? It seems w3schools gave me a good start but I am having problems putting the concepts together. If you can direct me to the right answer, or recommend a book or tutorial that actually builds a simple site with a couple of columns in good design, I would really appreciate it. But I dont want to use tables as I learned it is not best practice Thank you! Similar TutorialsHey everyone, I have a music video website and on each genre page, I want to build a table to list each band along with a thumbnail image. I know how to do this, however, I can't figure out how to add a cell without completely throwing off the rest of the table. For example, if I alreay have a 3 column table with Aerosmith, Alice Cooper and Chris Isaak in those 3 cells in the first row but I want to add a Beck video (which would need to go between Alice Cooper and Chris Isaak alphabetically), it throws off the cells in that row and in all the other rows of the entire table. I thought about using 1 cell tables for each band but I can't get them to sit next to eachother, they will only stack one on top of the other. Can someone give me some advice or direction? Does that make sense? I would like to know if it is possible to have a table column on top of a column??? In my table, I have a column that contains an image. Next I want to put text on top of the image. I am good up to this point, but when I put the text in this particular column, it is left justified and is not giving me the look I want. So, can I add another column on top the one with the image in order to be able to get some white space between the background image and the text on top???? To see what I am talking about, take a look here. It is the right hand column. You'll see how the text just does not look right the way I have it. Thanks for any suggestions. Vance Hi Everyone, hoping someone can help me here, i'm totally new to html. i work in digital advertising and project manage web development, but i don't know how to troubleshoot html problems, particularly across browsers. The website in question is www.forbetterorpurse.com I built it using the sitebuilder provided by the hosting company. I have two problems (that i know of anyway haha!) 1. The table to the left has somehow increased in width. I don't think I altered anything but no doubt it's something small 2. if you compare the site from IE to Firefox, the background of part of the content area is yellow compared with grey. It's supposed to be grey. if anyone has any ideas or can point me in the right direction, it'd be greatly appreciated! Thanks I have some nested tables (collapse/expand kinda table). How can I align the columns of each nested table, if all are expanded I want to see all the columns underneath symetrical. I have attached the screenshot of what I am getting with the following code: HTML Code: <head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.collapsed
{
display: none;
}
table#container
{
background-color:#FFFFFF;
border: solid #000 3px;
width: 400px;
}
table#container td
{
border: solid #000 1px;
}
table#sub
{
background-color:#FFFFFF;
border: solid #000 0px;
width: 400px;
}
table#sub td
{
border: solid #000 1px;
}
.toprow
{
font-style: italic;
text-align: center;
background-color: #FFFFCC;
}
.leftcol
{
font-weight: bold;
text-align: left;
width: 1%;
background-color: #CCCCCC;
}
</style>
<script language="javascript" type="text/javascript">
//***collapsible rows
function outliner(evt)
{
evt = (evt) ? evt : (window.event) ? window.event : "";
var oMe;
if (evt.srcElement)
{
oMe = evt.srcElement;
}
else if (evt.target)
{
oMe = evt.target;
}
if (evt.srcElement)
{
//for IE
var child = document.all[oMe.getAttribute("child",false)];
}
else
{
//for Firefox
var child = document.all[oMe.getAttribute("child",false)];
}
//get child element
//if child element exists, expand or collapse it.
if (null != child)
child.className = child.className == "collapsed" ? "expanded" : "collapsed";
}
function changepic(evt)
{
evt = (evt) ? evt : (window.event) ? window.event : "";
var uMe;
if (evt.srcElement)
{
uMe = evt.srcElement;
}
else if (evt.target)
{
uMe = evt.target;
}
var check = uMe.src.toLowerCase();
if (check.lastIndexOf("expand.gif") != -1)
{
uMe.src = "images/collapse.gif";
}
else
{
uMe.src = "images/expand.gif";
}
}
</script>
</head>
<body onclick="outliner(event)">
<table id="container" border="1">
<thead>
<tr class="toprow">
<td />
<td>Parameter</td>
<td>Value</td>
<td>DataType</td>
</tr>
</thead>
<tr>
<td class="leftcol"> </td>
<td>name</td>
<td>Mark</td>
<td>String</td>
</tr>
<tr>
<td class="leftcol">
<a><img border="0" alt="expand/collapse" class="expandable" height="11" onclick="changepic(event)"
src="images/expand.gif" width="9" child="s2" p21="p21" p22="p22" p22="p23"></a>
</td>
<td>composite</td>
<td>100,200,red</td>
<td>CompositeType</td>
</tr>
<tr>
<td colspan="4" bgcolor="cyan" class="collapsed" id="s2">
<table id="sub">
<tr>
<td> </td>
<td>X</td>
<td>100</td>
<td>Int32</td>
</tr>
<tr>
<td> </td>
<td>Y</td>
<td>200</td>
<td>Int32</td>
</tr>
<tr>
<td class="leftcol">
<a><img border="0" alt="expand/collapse" class="expandable" height="11" onclick="changepic(event)"
src="images/expand.gif" width="9" child="s3"></a>
</td>
<td>color</td>
<td>134,122,234</td>
<td>Color</td>
</tr>
<tr>
<td colspan="4" bgcolor="cyan" class="collapsed" id="s3">
<table id="sub">
<tr>
<td> </td>
<td>R</td>
<td>134</td>
<td>Int32</td>
</tr>
<tr>
<td> </td>
<td>G</td>
<td>122</td>
<td>Int32</td>
</tr>
<tr>
<td> </td>
<td>B</td>
<td>234</td>
<td>Int32</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Hi, I'm hoping someone can help me figure out how to fix a page on my website that uses a bunch of tables. The tables are aligned vertically but not horizontally. Also, the text doesn't wrap around the images and I think I finally figured out that I have too many columns in each table (I think). But if someone can help point me in the right direction with these tables so that they look properly aligned I would appreciate it greatly. The web page is http://www.polymerclayprojects.com/beadtemplate.htm Thanks in advance... Larry So we have the script for a perfect 3 column webpage. And one with a header. And one with a footer. And one with a header and a footer. But now I would like to build a 3 column website with something else. Look at your screen. Then imagine 3 columns. The left column 15%, the middle column 70% and the right column 15%. Draw imaginary lines. Now draw a line between the left and right column say 40 px from the top of the screen. Then again take the below standing script and draw a line between the two columns 20 px from the bottom. Does anyone know how to do this? HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>driekleur pagina</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
}
#linkerkolom {
width:15%;
height:100%;
float:left;
background-color:#333333;
}
#middelste_kolom {
width:70%;
height:100%;
float:left;
background-color:#fff;
}
#rechterkolom {
width:15%;
height:100%;
float:left;
background-color:#333333;
}
</style>
</head>
<body>
<div id="linkerkolom"></div>
<div id="middelste_kolom"></div>
<div id="rechterkolom"></div>
</body>
</html>
I need help. I have a page but its centered. I still have white non used space on both sides that i would like to use to post links and what not but im not too great with tables. My test website is down below. Id like to keep the same dimensions of the page where it is now, but need to be able to use the blank white space on the sides to post links and extra text and what not. Can anyone help? www.militarycheapskate.com Hi all, I really don't know much about web programming but I want a easy way to send a number to a server and then that server display the number until a new number arrives, the number will be ASCII I have setup a windows based IIS server and created a default.html page Thanks and sorry for being a total newbie! Steve P.S. This is not a hit counter. Sorry, that my title is not more precise, i just don't know how to describe or search for what Im looking for How do I make a sort of rectangle/shape in a specific color, and write on top of it? (I have just learned the div-position tag, so I guess I'll use that for positioning...) Thanks for your time! Ok so I am having a problem trying to figure out how to get my drop down box values into my text box. Any help would be appreciated. Here is my code so far. DROP DOWN BOX: (works) <select name="Bands" style="width: 142px"> <option selected="selected">Bands</option> <option value="Creed">Creed</option> <option value="Moop">Moop</option> <option value="ESB">ESB</option> <option value="Metallica">Metallica</option> </select><br /> TEXT BOX (I want to put the value from the text box after Fav_Band =) <div class="style3"> <textarea name="BAND" style="width: 746px; height: 66px" class="style4">Fav_Band="" </textarea></div> <br /> Hi all, I'm feel really stupid but I have a very simple question. I need to revert the colors of this page: http://pastehtml.com/view/bb17uy02t.html The background should be black and the text white. Can someone please help me out? Thanks in advance. Kent Hey y'all... I am not very well-versed in html use at all but have a good question for all of you that are. I am in need of being able to somehow "read" from the background html source the physical location (no, not the URL, the location on the page itself) of hyperlinks and data entry fields (both location, length, etc.) on web pages. I really do not even know if this is possible. Am I an idiot or is this possible for most web pages? Many thanks for your responses in advance..... i am new to html, and recently started working with css. i made some buttons in my menu, and am trying to change the appearance when i rollover with the mouse. my question is if it is possible to change the appearance of one button, when i rollover a different one. for example, all the buttons are normally brown, except the link to the page i am currently on is green. when i rollover the "contact" button, i want it to turn green, and the current green button, "home" to turn back to brown, even though the user hasn't clicked on the link yet. then even if there are no mouse clicks, when the user moves the mouse back off of the "contact" link, it goes back to brown, and the original "home" button goes back to green. i know i am probably making this more confusing than it needs to be, but not sure how exactly to explain it. thanks in advance... Can someone tell me why there's a black border around the "PACK SIX" tile at the bottom of my page when I try to apply a href link to it? Losing my mind here. Thanks here's the link: https://www.bogeypro.com/index.asp?P...=Custom&ID=122 I've create an easy html page and I wanted to attach it to my website. But no one link doesn't to that new page. The page's name is, christmas-ornaments.html I think maybe the problem is this symbol, - Hope to get your advaice, friends. _________________________________ I created a "style.css" file and linked my index.html to it. I put this code into the style.css: Code: body {
background-color: green;
font-color: white;
font-family: Verdana;
}
Now, the index page has a background color of green, and the font is Verdana, but the font color is not white? Can somebody tell me what needs to be done for the font to appear white? Hello, total newbie here so please be gentle. The start of my source code is: <head> <title>INSERT TITLE HERE</title> <meta name= "description" content="INSERT DESCRIPTION HERE"> <meta name="keywords" content="INSERT KEYWORDS HERE"> </head> <style type="text/css"> <!-- body { background-image: url(.. What I am finding is when I load the page and save it via FTP to the hosting server, everything before the line <style type="text/css"> disappears totally from the souce code... What am I doing wrong? Thanks, Pete For those who may not know, I am trying to teach myself HTML. I have an understanding about some of the basics and now I want to expand on that. I have a navigation map pretty much set up and appears to be working so far. The problem is that when I upload it and view it in IE, the image that I am using has a blue outline around it. To me this indicates a link and it is throwing the whole look of this page off. The code I have so far is as follows: <td width="228" height="811"</td> <img src="../junk/images/a2.jpg" usemap="#navmap"/> <map id="navmap" name="navmap"> <area shape="rect" coords="2,0,243,29" href="index.htm"/> <area shape="rect" coords="1,37,243,68" href="about.htm"/> <area shape ="rect" coords="0,75,243,105" href="outsource.htm"/> <area shape="rect" coords="0,114,243,143" href="bookkeeping.htm"/> <area shape="rect" coords="0,190,243,220" href="computer.htm"/> <area shape="rect" coords="0,229,243,257" href="peachtree.htm"/> <area shape="rect" coords="0,266,243,294" href="web.htm"/> <area shape="rect" coords="0,304,243,332" href="business.htm"/> <area shape="rect" coords="1,341,243,372" a href="contact.htm"/> </map> </td> I would really like to be able to do away with the blue outline around the image so that everything flls back into place. I would appreciate it if someone could take a look at my code and suggest any corrections I need to make to fix this. Thanks for your time, Vance Hi all, first timer. I was wondering... When you type in the address bar www.google.com/maps It loads the page just fine. For my advertising this it would be nice if I could get my page loading without ".html" It just looks cleaner. I was wondering how does one achieve this? ( No it isn't my first page its a secondary ) Regards, Mike. I need a bit of help with some images within the cell of a table. In this cell I have a background image that I am hoping will adjust to fit the varying heights of my table on different pages (some pages have more info and are therefore taller - for lack of a better description). In this same cell, and on top of the background image, I have the navigational image and it all seems to work exactly the way I want it to, with one exception. The exception is that when I view the page, the navigational image is much to low in the cell. I have done a bit of reading and unless I am just flat out not looking in or for the right information, I can't find anything that looks like it could be a solution. You can see what I am trying to explain here. You can see just how low the navigational list is and I would like to have it moved more towards the top of the cell. I am pretty sure that I can move it up if I use a lt of " " but I don't think this would be the best way to go. I am sure there is a way to do this so if any of the experts here have a suggestion as to how to fix this or where to look for information about moving the images around in a cell I would greatly appreciate any help. Thanks, Vance |
|||||||