Click to See Complete Forum and Search --> : Two side pictures
IncaWarrior
10-12-2003, 10:08 PM
I have a nice little site which has a table with three parts. The tow outer sections have a picture repeating down, and the middle has the content. I have the left box completely empty, and the background for the page is the picture for that side, but the problem is that for the right side i have just <td background="pic.jpg"> which works, but isn't really good HTML. I want to know if there's any other way of doing this, especially if i can get rid of the table completely, but if not then that would work.
PeOfEo
10-12-2003, 11:09 PM
<head>
<style type="text/css">
#left {
position:absolute;
width:150px;
top:0px;
left:0px;
padding:0px;
z-index:-1;
width:150px;
}
#right {
position:absolute;
width:150px;
top:0px;
right:0px;
padding:0px;
z-index:-1;
}
</head>
<body>
<img src="url" id="left">
<img src="url" id="right">
</body>
The z-index stuff allows the content to overlap your images. I set it a -1 so it will be a background but z-index you might find not working in older browsers, but it should work on all modern graphical ones. You can play with the width top and right and left settings too. jUst replace the 'url' with your left image url in the first one and yor right image url in the second.
*Note If you use a <div id="left"> <div id="right"> you can use this code to create two columns you can put stuff in going down the middle. A similar layout to the one I just mentioned is here http://bluerobot.com/web/layouts/layout3.html
IncaWarrior
10-13-2003, 10:15 PM
well that won't repeat the image, but i'm just using my table and setting td.r to have the background image repeating down so it's all good now... well better
spufi
10-14-2003, 11:01 AM
If you want to use the image as a background and have it repeat, define it in your CSS.
http://www.w3schools.com/css/css_reference.asp#background
IncaWarrior
10-14-2003, 03:48 PM
yep, that's what i have as the class "r" of td
PeOfEo
10-14-2003, 05:32 PM
So just use the
background: #00ff00
url("something")
repeat
within the divs in the code I gave you. It should work.
IncaWarrior
10-14-2003, 07:13 PM
i used:
TD.r {background-image: url("popbgr.jpg"); width: 100px;}
PeOfEo
10-14-2003, 08:21 PM
But dont use tables, tables are a bad layout... If you used css you could do the same stuff from an external file one time and have it affect all of your pages and that would save you a whole lot of bandwidth and time and work.
IncaWarrior
10-14-2003, 08:56 PM
well in this case since it will be used by non-blind people, and on PC's, the table isn't that bad
so what are you suggesting i do with the external file and no tables for my single pages site?
spufi
10-14-2003, 10:17 PM
Originally posted by IncaWarrior I want to know if there's any other way of doing this,
especially if i can get rid of the table completely, but if not then that would work.
*ahem* ;)
And if you use more than one page, you pretty much are already better off using a externally linked style sheet.
PeOfEo
10-14-2003, 10:33 PM
css style sheets are designed for layout tables are not. Here is an example of where tables fail. Go to the main page of this forum and hit refresh. Notice any changes in the size when this loads? Imagine if this were happening on your site, where would the text wrap? Also like I said before tables are mcuh ehavier objects, they will increase the load times for your users and kill your bandwidth especially because all those extra lines of code are on every page. The style sheet only has to be loaded one time and it will work on all pages. Look at my layout for my site for example. If I used extencive tables it would be twice as much code. I am not using multiple pages but I very easily could be, infact for a new site I am working on I am. This much less code to worrie about on every page really decreases work time for me.
IncaWarrior
10-15-2003, 03:13 PM
on the other hand, the extra 3 lines of code for the table do make it so i don't get a bottom scroll bar, and the page make the most use of the browser space
i still want to know how to just make side borders and a dynamic middle
PeOfEo
10-15-2003, 04:57 PM
http://bluerobot.com/web/layouts/layout3.html
IncaWarrior
10-15-2003, 05:38 PM
well that's a bit messy, i prefer my source and page to be a but neater looking
I have the image repeating forever down both sides of the page
spufi
10-15-2003, 05:53 PM
Originally posted by IncaWarrior
well that's a bit messy, i prefer my source and page to be a but neater looking
I have the image repeating forever down both sides of the page
How is that code messy? There are obvious hacks in there, but it wouldn't take much to tweek it to have it do what you want to.
PeOfEo
10-15-2003, 09:18 PM
The css looks a whole lot more organised then your code is now
from your site
<table>
<tr>
<td width="100"> </td>
<td > <br>
<div align="center">
<h2>Welcome To The Links of Populous Page</h2>
<table>
<tr>
<td> <a class="special" href="http://www15.brinkster.com/poplinks/#info" onMouseOver="document.images.pic1.src='incawarrior3.gif'" onMouseDown="document.images.pic1.src='incawarrior.gif'" onMouseUp="document.images.pic1.src='incawarrior3.gif'" onMouseOut="document.images.pic1.src='Incawarrior2.gif'">
<img src="Incawarrior2.gif" border=0 name="pic1" alt="IncaWarrior"></a>
</td>
</tr>
</table>
<a href="#fan"><b>Fan Sites</b></a><br>
<a href="#group"><b>Groups/Clans</b></a><br>
<a href="#down"><b>Downloads</b></a></div>
<br>
<br>
<BR>
<a href="http://www.populous.net/">http://www.Populous.net</a><BR>
<a href="http://www.populous.ea-europe.com/">http://www.populous.ea-europe.com</a><br>
<BR>
<p> The official Populous website </p>
<a href="http://www.strategyplanet.com/populous/"> http://www.strategyplanet.com/populous/</a><br>
<BR>
<p> New Worlds / Populous Reincarnated - The Populous site where you can
download custom made multiplayer levels and discuss Populous on the forum.
<!--Fansites-->
<br>
<BR>
<a name="fan"></a>
<h3>Fan Sites</h3>
<br>
<BR>
Even if you do indent and even if you do not nest, tables are messy and hard to keep track of css is just basically setting a set of what is going to happen one time. My site uses tables to control the content in the middle due to ie bugs but the code overall is very well organised because I used css for layout. This new site I am working on now is also extreamly organised (though it also uses a table to control an image due to ie bugs). I have 1/3 as much code as I would with tables, actaully probably less because I will be using a drop down menu and keeping track of all the cells would be horrid.
spufi
10-15-2003, 11:39 PM
Sometimes it helps to look at a person's website that they are working on. ;) For a pure CSS layout, you are going to have issues trying to repeat the background all the way down in a case like yours. You would have to create a long image that's super thin and repeat it with in a <div> tag which contains the rest of your info. How wide the image is sets how wide your <div> tag can go. The good thing is that you can make a really small image file if you make it thin enough. A image that is 750px wide and 5px high might work. I don't know off hand how big it would be in terms of file size. You could resize it down to 1px high if need be. I can't imagine an image having that big of a file size at that height. Anyway, you could then center the <div> tag and use a tableless layout that way. Looking at the rest of your code, I code get your code down to a fraction of what it was doing the way I just suggested and rewriting most of the other stuff you have. I think you could make your layout much more compact.
IncaWarrior
10-16-2003, 08:54 PM
ah but you see then my page wouldn't work as nicely when the user had a different file name. I tried a bunch of things with the long version of that image, with many attemts to resize that background, and i did in the end manage to get a background that would change, but it would only change once.
<table>
<tr>
<td width="100"> </td>
<td >
...
</td>
<td class="r"> </td>
</table>
not all that much really, i think most people can keep track of something like that. (the nested table is just to take care of the picture)
you just have to accept that sometimes the CSS way isn't the best way for some situations
PeOfEo
10-16-2003, 09:45 PM
It is if you would have used code like that of bluerobot. Nested tables are never to solution ever. I might go for a table using colspan or something but I will never accept a nested table. Tables kill bandwidth make a site unorganized and are horrible in older browsers. Try using a nested tabled in ns4 -. The code on bluerobot for the three columns will do what you wish put an image in the #nav divs and your content in the center then play with the values to position them. Like make the divs go all the way to the top and to bottom.
IncaWarrior
10-17-2003, 01:40 PM
it makes the site neater to view if the borders are actually background instead of repeating imges which kill innocent monkeys (hey if you got to choose what tables kill!).
Do you know a way to make it so the imgage can expand evenly out like it does now without using a table? i would like to know, so then i wouldn't need the nested table
what i want to do in my site is not use the side bars, just have borders that stay the same width, repeat to the page length, and the middle section expand without the sides
the blue robot layout is not what i want to do. Besides, if we're bringing compatiblity with all browers then try using the blue robot one in IE4.5/mac
spufi
10-17-2003, 02:09 PM
Originally posted by IncaWarrior
ah but you see then my page wouldn't work as nicely when the user had a different file name.
Huh? This makes no sense at all.
Originally posted by IncaWarrior
I tried a bunch of things with the long version of that image, with many attemts to resize that background, and i did in the end manage to get a background that would change, but it would only change once.
Again, I'm not exactly sure what you are talking about here. Why does the background need to change?
spufi
10-17-2003, 02:40 PM
Ok, if you are going to use a table based layout(again, I wouldn't), you don't need nested tables. Here's the basic code to make it work in a more "proper" form of code. Note that I made the width of the sides the same even though your background images aren't. You need to make your images the same width. You can then shrink them done to 1px high for even faster load times. At that small of a file size, then the images will load super quick even on a 56K modem.
Here's the CSS for your <table>
table { width:100%; }
#right { background-image:url(popbgr.jpg); background-repeat:repeat-y; width:140px; }
#left { background-image:url(popbgl.jpg); background-repeat:repeat-y; width:140px; }
Here's the HTML.
<table cellspacing="0" cellpadding="0">
<tr>
<td id="left">non-breaking space code<td>
<td id="middle">All your main text goes in here</td>
<td id="right">non-breaking space code<td>
</tr>
</table>
IncaWarrior
10-17-2003, 03:33 PM
that's almost exactly what i have... the nested table has nothing to do with the layout
for that first quote "file name" = screen size (that's just me doing too many things at once)
the second one is that i tried using one image instead of the two i have now. the one's i'm currently using are only 10 pixals tall (both together are under 1.5KB and having taller images puts less strain on the processor)
what i have now is:
table {width: 100%; border:0; height: 100px;}
TD.r {background-image: url("popbgr.jpg"); width: 100px;}
the left side i can just use the page background so i don't need it there.
that's not really more "proper" than i have.
I feel like i'm repeating myself a bit here...
PeOfEo
10-17-2003, 04:07 PM
You should still not be using a nested table, just use a div and use %'s for the widths and make it 100%. You said above that that table has nothing to do with your layout so why are you clinging to it? You could also use margins to spread the div and top right left and bottom positioning.
spufi
10-17-2003, 06:01 PM
Originally posted by IncaWarrior
the second one is that i tried using one image instead of the two i have now. the one's i'm currently using are only 10 pixals tall (both together are under 1.5KB and having taller images puts less strain on the processor)
what i have now is:
the left side i can just use the page background so i don't need it there.
that's not really more "proper" than i have.
I feel like i'm repeating myself a bit here...
Less strain on a processor? Fill a 100px by 100px section with a 100px by 100px image and then fill the same section with a 5px by 5px image that's repeated. The 5px by 5px image will fully load many times faster. Granted with the image sizes we are talking about in your case the difference in minimal. If I were working for a client though, I would make my images as small in size as I could.
Take the code you have and then shrink down your table to 80% and have the table centered. All I would have to do it center the table and change the table width to 80%. You would do the same, but you would also end up changing your code to what mime would be now. My way is a more consistant way of coding it, and would look better in a real world situation.
You asked for a better way of doing it, and beyond going the tableless way I mentioned before, and definging the table like how I did, I can't really think of a better way of doing it.
IncaWarrior
10-17-2003, 11:30 PM
your way only has 2 differences from my way, so i think it'll be ok...and what's considered a real world situation?
if you have an image that's only one pixal tall, then you have to repeat it a few thousand times, then it does put a small strain on the processor. my images repeat every 10 pixals and doesn't repeat a pattern in that 10 pixals.
why would i make the table 80%? that would make the border floating in the middle of the page instead of against the sides
i still want to know about making the image change the correct way.
spufi
10-19-2003, 03:14 PM
Real world situation means within a job situation. If I took your code and showed somebody what I did, they would wonder why I did it that way. Do both ways work for what you want? Yes, but my way is the more consistant way of doing it.
Processor strain is basically irrelevent when you are talking about downloading content from the internet. It's the size of the files that your are trying to download.
I was using the 80% wide table as an example of why my code is more flexibile over yours.
Well, I'm kicking a dead horse, but I already talked about two different ways I would do it. If those aren't better for you, then that's all I got.
PeOfEo
10-19-2003, 04:55 PM
It would be a lot easier to pick up css early instead of learning tables then fighting to learn css.... The best way is to use full css but oh well you can't show everyone that you just need to let them figure it out for themselves spufi.