|
| |
Need advice about how to modify the layout of CSS template
View related threads:
(in this forum
| in all forums)
|
Logged in as: Guest
|
|
|
m@rio
Posts: 13
Joined: 9/15/2005
Status: offline
 |
Need advice about how to modify the layout of CSS template - 9/15/2005 23:04:12
This is my first post in this forum, a BIG hallo to all of you!
I'm a HTML/CSS coder beginner.
Searching in Google, I had discovered this fine template called Aura
http://www.leorex.com/products/aura/
I'm interested to know how to modify the template to obtain a second layout page with more space for text and image.
Basically, I wonder how to merge the white and right grey contents area into a single column.
I've made a Photoshop composite to better explain.
Original two column template:
http://tinypic.com/dovpyu.jpg
Single one column template:
http://tinypic.com/dovpt4.jpg
I had made some attempt with the only result to destroy the layout...
Thanking in advance for any advice or suggestion.
|
|
|
|
Tailslide
Posts: 6003
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Need advice about how to modify the layout of CSS t... - 9/16/2005 2:54:18
Remove the sidebar <div> from the HTML. Make the main text area full width and add a right hand margin.
Rename the new main content area as whatever1 so that it doesn't get confused with the original in the CSS.
You're going to have to make a new footer graphic without the right hand column bottom in it then apply that to the footer1 div (again to avoid confusion with the normal one).
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 6003
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Need advice about how to modify the layout of CSS t... - 9/16/2005 6:44:16
Sorry - I was in a bit of a rush (could you tell!)
Here you go:
http://www.littleblueplane.com/test/aura.html
What I did was:
rename the container div container1 to differentiate it from the normal container. I then changed the background image rule for container1 so that it included a background image without the right hand column.
I changed the page div to page1 and made it full width.
I changed the footer div to footer1 and added a new background without the right hand column end.
Basically I've added "1" to the end of any element name that needed to change for this page layout - just to make it easier to track for you and so that the other style still works on the other pages. Any graphic that I've added also has 1 on the end of it so you know it's to do with this new layout.
I also combined the CSS stylesheets into one for this excercise - feel free to grab it.
Hope that makes sense now!
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
m@rio
Posts: 13
Joined: 9/15/2005
Status: offline
|
RE: Need advice about how to modify the layout of CSS t... - 9/16/2005 16:48:53
Thanks for the precious information, now I've exactly the template I need, I'm more than happy!
I will spend some time analyzing Tailslide tweak in the attempt to understand more.
I've one more questions:
- Actually the footer copyright information are embedded into each page. There is a way to have the footer text stored in a single file (or inside the .css) and include it in every page ?
Thanks again,
Mario
| |
|
|
|
Tailslide
Posts: 6003
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Need advice about how to modify the layout of CSS t... - 9/16/2005 17:09:51
Yes - you've got a couple of choices there.
You could put the copyright text into the graphic - use Photoshop or PSP or whichever package you prefer.
Or you could use Includes. FrontPage has it's own style of includes which you can search for on this site. Or you could use PHP includes (if you have Linux hosting) which is what I do.
Basically copy the text from the footer (including tags) and paste it into a blank text file and call it footer.php.
Now where the footer text used to be paste this:
<?php include( '/fullpathtoyourfile/footer.php' ); ?
So what this does is calls that .php file and implants it into any page where you have this line. You can change anything in the .php file and it will change globally throughout the site. You won't be able to see the include "locally" only on a web server unless you're running your own web server of course!
Note that you'll need the proper path from the file to the php file. You may need to add a line of code to your .htaccess file (on your webserver) we can help you with that or your web host can do it easily. This extra line of code will mean that the php include will work on your page without changing the suffix to .php.
You may get an error when you try this out - usefully with PHP - the errors are quite informative and usually it's only a case of correcting the path to the file and the error will give it to you!
I'm probably not good at explaining this - but Google PHP includes and you'll get loads of info.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
m@rio
Posts: 13
Joined: 9/15/2005
Status: offline
|
RE: Need advice about how to modify the layout of CSS t... - 9/17/2005 14:58:14
Today I had spent several time in understanding the Tailslide template customization and trying to learn something.
I had not used his ready-to-use template, but preferred to modify the one I've here as learning exercise.
I've customized the graphics layout:
http://www.space-graphics.com/tmp/aura/template1.htm
http://www.space-graphics.com/tmp/aura/template2.htm
I'm quite happy about the result except for the unwanted a little too large gap between top of page and the first two horizontal yellow line...
Tomorrow I will try to add the copyright info embedding, probably using SSI.
I would ask some more question about this template, the first and most important is that the original Aura template
http://www.leorex.com/products/aura/
apparently fail both XHTML1.1 and CSS compliancy test. What's wrong ?
The second question is related about a Breadcrumb Navigation system. Do you suggest something in particular ?
I wish a good week end to all of you!
Mario
| |
|
|
|
Tailslide
Posts: 6003
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Need advice about how to modify the layout of CSS t... - 9/17/2005 17:17:04
Hi Mario
Not sure about the big gap - unless you've already fixed it - looks fine to me...
Far as failing validation goes - there's no advantage currently in using XHTML 1.1 - IE doesn't deal very well with it (if it was using the correct mime type which it's not) So if you add this instead:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
And then get rid of the flash stuff and it validates (I've changed the test version that I did, so you can check it there).
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
m@rio
Posts: 13
Joined: 9/15/2005
Status: offline
|
RE: Need advice about how to modify the layout of CSS t... - 9/18/2005 3:30:28
I've added the SSI directive
<!--#include file="copyright.htm"-->
It work but this add some XHTML validation error, I believe because it's a simple HTML page that miss some CSS formatting. Should I ignore the problem or how to fix it ?
I've also added the "breadcrumb" trail navigation menu using this script
http://www.monster-submit.com/resources/javascript/breadcrumb.html
The page showing the above features is the following:
http://www.space-graphics.com/tmp/aura/template3.htm
The content of copyright.htm is the following:
<html>
<body>
Copyright Space Graphics Imagery, 2005. All rights reserved.<br/>
Valid <a href="http://validator.w3.org/check/referer">XHTML1.0</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.<br/>
</body>
</html>
| |
|
|
|
Tailslide
Posts: 6003
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Need advice about how to modify the layout of CSS t... - 9/18/2005 3:59:36
Hi Mario
You've got a lot of repeated <html> and <body> and </html> and </body>. Some of this may be to do with the SSI. I don't use SSI so I'm not sure if you need the <html> tags etc - certainly in PHP includes you don't need them - just the tags to do with the particular section of code you're transplanting. I'd try it with the <html> and <body> opening and closing tags removed and see what happens.
I'd put a <p> tag around the stuff in the include as well - the validator doesn't seem to like it without that.
Also - you're using some old code with regards the javascript declaration. Remove this: <script language="JavaScript"> and use this instead: <script type="text/javascript">
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
m@rio
Posts: 13
Joined: 9/15/2005
Status: offline
|
RE: Need advice about how to modify the layout of CSS t... - 9/18/2005 12:55:39
Thanks all for this last round of questions.
I had cleaned the code from the unneeded elements leaving only what would be included in the destination page.
Now template 1 and 2 validate perfectly. Template 3 show three errors only.
I'm interested to know which HTML/CSS editor and FTP client you use and what you suggest for managing / editing my possible future web site that will be based on Aura templates, for a planned total amount of ~ 30 pages.
I had previously used FP2003 for the currently on-line web site, but I've managed this Aura template customization with Topstyle Lite, Notepad++ and CuteFTP.
I'm currently evaluating CuteHTML-Pro, NVU and Macromedia Homesite. Apparently both made the same thing and share the same features.
CuteHTML is not very easy to use, I think it's targeted for large project, don't allow visual editing and the interface is a little cluttered.
NVU allow visual editing but I don't like the embedded ftp client
Homesite don't allow visual editing.
Reading the web, the best development tool is Dreamwaver, but is too expensive and complex for the basic task I do...
| |
|
|
|
m@rio
Posts: 13
Joined: 9/15/2005
Status: offline
|
RE: Need advice about how to modify the layout of CSS t... - 9/18/2005 16:15:33
I'm now testing HTML Kit, it's ok. I see many available plugins. Which one do you suggest ?
| |
|
|
|
Tailslide
Posts: 6003
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Need advice about how to modify the layout of CSS t... - 9/18/2005 16:22:15
I use HTML-kit too - can't remember which plug-ins - not many. I also use AceFTP (freebie) which hasn't given me any problems.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
