Layout Queries
Hi guys,
I've got a few layout questions I'd like to ask you. I'm currently making a website:
http://www.cmdirector.neosurge.net/index.php
Now, I know there is no banner there yet, so I won't bother asking what you think of the layout.
1. I've been told that in resolutions greater than 800x600, the tables are way out to the sides. Is it possible for me to be able to have it so that I can include CSS without the tables being out to the side and without losing the design I have currently got for 800x600?
2. In Netscape, apparantly, when you move over one of the navigation buttons the page does not fit to the screen and a horizontal scrollbar appears. How can I correct this?
3. On the index.php, I'm using CuteNews. In the box where the picture "News" is shown, how can I get it the text to wrap around it because at the moment it looks stupid. My current news template is:
<table border="0" width="450" cellspacing="1" cellpadding="3">
<tr>
<td width="100%" style="text-align:justify">
<b>{title}</b>
</td>
</tr>
<tr>
<td width="100%" style="text-align:justify">
<font style="font-family:georgia, verdana, arial, sans-serif;color:#666; font-size:14;">{short-story}</font></td><img src="http://www.cmdirector.neosurge.net/images/news.gif" border="0" Alt="News" align="right" hspace="2" vspace="2">
</tr>
<tr>
<td width="100%">
<table border="0" style="border-top: 1px dotted #f2f3f3" width="450" cellspacing="0">
<tr>
<td width="220"><i><font style="font-family:georgia, verdana, arial, sans-serif; font-size:11; color:black;">Posted on {date} by {author}</font></i><br> </td>
<td width="168" ><div align=right><font style="font-family:georgia, verdana, arial, sans-serif; font-size:11;">[full-link]Read More ...[/full-link] [com-link]comments ({comments-num})[/com-link]</font>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />4. On this page:
http://www.cmdirector.neosurge.net/about.php
I will have a set of links for that section. Is it possible to have the content to then load in the box next to it without "leaving" the page.
If you could answer any (or all) of these questions, then I would be EXTREMELY grateful!
Busy posted this at 21:36 — 6th December 2003.
He has: 6,151 posts
Joined: May 2001
on line number 9 of the above example you have an image between your and tag
My screen doesn't like going bigger than 800x600 so can't see your problem, but if you have two content tables and you want a fixed width, just have 3 tables
<table width="760"><tr><td><!-- left table starts here -->
<table width="300"><tr>
<td>contents of left table</td>
</tr></table>
</td><td><!-- right table starts here -->
<table width="460"><tr>
<td>contents of right table</td>
</tr></table>
</td>
</tr></table>
this is just typed off the top of my head so it should include cellpadding, spacing, border, CSS etc as needed.
if you want the table to sit in the middle of the screen on bigger than 800x600 add align="center" in the first table tag, if you want it left, dont add anything (unless you have a center tag before the table)
You really need to validate your code as you have some shocking stuff in there (the first table for example), your also mixing up CSS and HTML, margin is CSS and td doesn't need to be a CSS class, same as table as they are html tags and just need the name in CSS file and nothing in html file (like body)
Timewell posted this at 23:11 — 6th December 2003.
They have: 344 posts
Joined: Jun 2002
Hmm...I tried the three table method but it didn't work. It's not that I want it to have a fixed width, I want to lessen that gap on anything higher than 800x600 because it looks stupid in higher resolutions.
I fixed Point 3 with some playing around with the template and adjusting the image size. What are your opinions on how it looks now?
I put the class thing like so, to have the border on the table looking like it is there. So, it has one border for the actual td, rather than a border for the table.
Regarding Point 4, I've been told that an iFrame or DHTML would solve this problem. Do you agree and do you think it is worth the bother doing? Would an iFrame slow the page down at all?
Thanks for your help though guys!
no1golfpro.co.uk - High quality golf equipment at competitive prices.
Suzanne posted this at 00:53 — 7th December 2003.
She has: 5,507 posts
Joined: Feb 2000
CSS
.news { border: 0;width: 450px;}
.news td { margin: 1px;
padding: 3px;
border: 0;}
.title { text-align: justify;
font-weight: bold;}
.shortstory {font-family:georgia, verdana, arial, sans-serif;
color:#666;
font-size:14;
border-bottom: 1px dotted #f2f3f3;}
.dateAuthor { font-style: italic;
font-family: georgia, verdana, arial, sans-serif;
font-size:11px;
color:black;
padding-bottom: 11px;
width: 220px;}
.articlelink { width: 168px;
text-align: right;
font-family:georgia, verdana, arial, sans-serif;
font-size:11px;}
#newsimage { border: 0;
float: right;
margin: 2px; }
HTML
<table class="news"><tr>
<td class="title">{title}</td>
</tr>
<tr>
<td class="shortstory">{short-story}
<img id="newsimage" src="/images/news.gif" Alt="News">
</td>
</tr>
<tr>
<td class="dateAuthor">Posted on {date} by {author}</td>
<td class="articlelink">
[full-link]Read More ...[/full-link]
[com-link]comments ({comments-num})[/com-link]</td>
</tr>
</table>
OR
HTML
<div class="news"><div class="title">{title}</div>
<div class="shortstory">{short-story}
<img id="newsimg" src="/images/news.gif" Alt="News" /></div>
<div class="dateAuthor">Posted on {date} by {author}
<div class="articlelink">
[full-link]Read More ...[/full-link]
[com-link]comments ({comments-num})[/com-link]</div>
</div>
</div>
Suzanne posted this at 00:57 — 7th December 2003.
She has: 5,507 posts
Joined: Feb 2000
A fixed with or a design that allows flexibility are your options.
Use standards, validate your code, if the problem persists, then ask. Troubleshooting mixed up code takes quite a long time.
See my previous post.
Using DHTML or Javascript, or reloading the page, or using iFrames. I haven't looked at the content so I don't know how critical it is. If it's critical, reload the page with the information.
HTH.
Timewell posted this at 20:08 — 8th December 2003.
They have: 344 posts
Joined: Jun 2002
Ok...well Point Number 4 is fixed due to Query Strings now.
Do you think this CSS is better then?
#news {position: absolute;
top: 155px;
right: 10px;
}
#news2 {
position: absolute;
top: 155px;
left: 10px;
}
#td {
border: solid 3px #003399;
}
HTML
<div id="news2"><table width="280" margin="20" bgcolor="#AEC9E4">
<tr>
<td id="td">
Navigation
</td>
</tr>
<tr>
<td id="td">
<a href=about.php?page=test>The Team</a>
</td>
</tr>
</table>
</div>
Thanks very much for your help!
no1golfpro.co.uk - High quality golf equipment at competitive prices.
Timewell posted this at 20:30 — 8th December 2003.
They have: 344 posts
Joined: Jun 2002
I've added the third table to the About Us Page:
http://cmdirector.neosurge.net/about.php
But it had no effect in higher resolutions.
Suzanne posted this at 23:50 — 8th December 2003.
She has: 5,507 posts
Joined: Feb 2000
No.
You still have design stuff in the HTML instead of in the CSS, why are you using absolute positioning in a table layout?! You don't need the tables for that section at all, really, but regardless, ID is a unique value -- you can't have two things on one page with the same ID.
#news2 {
width: 280px;
padding: 20px;
background-color: #AEC9E4;
}
.newsitem {
border: solid 3px #003399;
}
<div id="news2">
<div class="newsitem">Navigation</div>
<p class="newsitem"><a href=about.php?page=test>The Team</a</p>
</div>
However, it would be even better to use an unordered list for navigation.
Timewell posted this at 19:51 — 9th December 2003.
They have: 344 posts
Joined: Jun 2002
Thanks for that!
I use absolute positioning because I thought it was the correct way to position tables. What other way would you suggest positioning? Do you think this is why my tables look weird in resolutions above 800x600?
I'm still yet to solve the Netscape problem. I've checked my preloader and nav scripts and they seem fine.
But obviously, they aren't.
no1golfpro.co.uk - High quality golf equipment at competitive prices.
Timewell posted this at 20:29 — 9th December 2003.
They have: 344 posts
Joined: Jun 2002
I've used the CSS how you have suggested. But there seems to be a couple of problems.
Firstly, the tables aren't aligned. I presume I was supposed to use absolute positioning etc now?
Secondly, there is a rather large gap between the two boxes, eg "Navigation and Team", and I haven't a clue how to decrease it.
Thirdly, in the content box, the border only goes round the heading and not around everything.
Many thanks for your help, it is all appreciated and at least it is teaching me a few lessons in how not to design a site.
no1golfpro.co.uk - High quality golf equipment at competitive prices.
Timewell posted this at 20:22 — 10th December 2003.
They have: 344 posts
Joined: Jun 2002
I've fixed the problem in which I said it was Netscape, actually it was Opera. Basically, I had a table around the banner, so I removed it and it worked. Bit of a stupid mistake really...
That means there is only 2 problems left to be solved. The site being viewable in higher resolutions...and my crappy code!
no1golfpro.co.uk - High quality golf equipment at competitive prices.
Timewell posted this at 20:23 — 13th December 2003.
They have: 344 posts
Joined: Jun 2002
Any solutions guys?
Thanks!
Timewell posted this at 21:16 — 16th December 2003.
They have: 344 posts
Joined: Jun 2002
I understand that I may be annoying you guys by posting, yet again, but I'd like help and obviously, I would be very grateful.
It's just these 4 niggling problems with my code.
1. If you look at the index, and then the About page the tables change size yet they are exactly the same size in the CSS. Also, there is a visible gap between the two tables, ie. you can see the background, in one and not the other. Would it be possible to get this gap back?
2. I don't seem to be able to position the borders around the text properly. For example, on the About page - in the Breadcrumbs navigation the border takes up two lines and the text is only on one line. Then, below that, there is a border on "Normal Stuff" yet not on the rest of the page - can you explain why that is?
3. Is it possible to reduce the gap between the two blue border boxes so it looks like the index page?
4. The 800x600 problem is still unsolved. I know you have suggested that it is the CSS and I shouldn't use absolute positioning but I've tried that and it failed. There must surely be another way to get the tables aligned with the banner.
Sorry for being such a pain in the arse, but I really need these problems fixed, yet I want to learn from the mistakes I've made. I will be very grateful if you could help me at all.
Thanks guys!
no1golfpro.co.uk - High quality golf equipment at competitive prices.
Suzanne posted this at 21:26 — 16th December 2003.
She has: 5,507 posts
Joined: Feb 2000
http://validator.w3.org/check?uri=http%3A%2F%2Fcmdirector.neosurge.net%2Fabout.php&doctype=%28detect+automatically%29&charset=utf-8+%28Unicode%2C+worldwide%29
also, you need content to hold tables open.
given that you haven't validated your code, I'm leery to suggest that "trying" non-absolute positioning was a failure because it was non-absolute so much as a failure because you had other errors.
Timewell posted this at 19:14 — 17th December 2003.
They have: 344 posts
Joined: Jun 2002
Right, well I've gone away and validated the code now. I then went and deleted absolute positioning from the stylesheet and tried again - this did not work either. However, with absolute positioning, it was all aligned. So perhaps just leaving it on that would be ok for now?
I didn't understand what you meant when you said that content held tables open. I have content, it's just that the tables aren't going around it...
no1golfpro.co.uk - High quality golf equipment at competitive prices.
Timewell posted this at 18:39 — 22nd December 2003.
They have: 344 posts
Joined: Jun 2002
I can only presume that no-one is willing, or knows how to, help me?
Suzanne posted this at 18:52 — 22nd December 2003.
She has: 5,507 posts
Joined: Feb 2000
The problem is that there is no clear question here. You need help, that much is clear, but with what? What, specifically, is not working?
Give us a mockup and we can help you. The urls you've provided appear to be working. What isn't working?
Edit: you also still have the code errors that were thwarting your layout from last time. When you fix them, you won't have those particular layout issues.
Timewell posted this at 19:27 — 23rd December 2003.
They have: 344 posts
Joined: Jun 2002
Ok then. I'll go and validate my code - although it had only 1 error left in HTML Transitional - I couldn't get rid of that for some reason. If it fails after validating it for HTML Strict then I'll come back and tell you and I'll make myself a bit more clearer.
no1golfpro.co.uk - High quality golf equipment at competitive prices.
Suzanne posted this at 19:30 — 23rd December 2003.
She has: 5,507 posts
Joined: Feb 2000
Please see the file attached to my previous comment.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.