Need advice about how to modify the layout of CSS template (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

m@rio -> 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...[:o]

Thanking in advance for any advice or suggestion.



Tailslide -> RE: Need advice about how to modify the layout of CSS template (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).



jaybee -> RE: Need advice about how to modify the layout of CSS template (9/16/2005 5:04:38)

Welcome to Outfront!

Did you understand that? [:D]



Tailslide -> RE: Need advice about how to modify the layout of CSS template (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!



jaybee -> RE: Need advice about how to modify the layout of CSS template (9/16/2005 10:55:42)

Perfick!



m@rio -> RE: Need advice about how to modify the layout of CSS template (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 -> RE: Need advice about how to modify the layout of CSS template (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.





bobby -> RE: Need advice about how to modify the layout of CSS template (9/16/2005 20:00:09)

you might also want to google SSI (Server Side Includes).

SSI looks like this:

<!--#include file="directory/filename.txt" -->

And depending on your server you can configure it to work on .htm or.html pages, .shtml... whatever you need it to be. Windows servers will deafult to parse SSI on .asp pages... provided ASP is supported.

(If you're on Unix or Linux server google .htaccess or SSI to find out more)



m@rio -> RE: Need advice about how to modify the layout of CSS template (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 -> RE: Need advice about how to modify the layout of CSS template (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).




m@rio -> RE: Need advice about how to modify the layout of CSS template (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 -> RE: Need advice about how to modify the layout of CSS template (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">



jaybee -> RE: Need advice about how to modify the layout of CSS template (9/18/2005 5:32:11)

The code you are including should not have the <html> <head> <body> tags or any of the meta tags.

So for example, your footer include file should only have the following in it:

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/>



m@rio -> RE: Need advice about how to modify the layout of CSS template (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...






jaybee -> RE: Need advice about how to modify the layout of CSS template (9/18/2005 14:40:46)

What you're using is fine.

I use various different tools depending on what I'm doing. Dreamweaver I have but rarely use. I work with notepad, Stylemaster 3.52 and HTML Kit (which is free).

FTP, I use Core FTP Lite or Filezilla both of which are also free.



m@rio -> RE: Need advice about how to modify the layout of CSS template (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 -> RE: Need advice about how to modify the layout of CSS template (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.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
8.984375E-02