Web page layout

Video Tutorials

Web page layout

Increase font size Decrease font size Reset to default

 

Keep up with the latest Developments development blog rss feed

 

Tips and Tricks tip and tricks rss feed

 

Last Updated
2010-08-08

 

Tables, Layouts and CSS Grids

go to top arrow Controlling table styles

I have been working with the Autocode tab to import Excel files into a page. The issue I have is that the fonts are way too big and the text is wrapping.

I have excel sheets that contain 800+ products (one product/row, so I need a small font (Arial 8)and no text wrapping. The excel sheet has only 8 columns.

In my existing website, I just save the excel sheet as a web page and insert it using Notepad.

Any help would be appreciated.

Answer

You could just embed the spread sheet as you would in any website.

The best way is to save the file as .txt rather than .html (you can just change the extension name) and then load it as an external script file.

You could just copy the whole table text into the text field of SEO CMS but beware that line breaks in the text are converted to new lines in the page which really mess things up.

The benefit of exporting the html table from excel is that it comes with all the formating codes however that's not good practice these days as it's better to have only content in the page and all design controlled in the separate CSS files.

Option 2

The table generator under the auto code button should be much more powerfull as you can control your own design in CSS.

The simple way to change the text size is by selecting a different text style from the drop down style list in the table generator.

If you have a basic knowledge of html you can create your own table style and design by making a new style template. Look in project setup in the setup screen and that will tell you where the default directory is located on your machine. In there is table styles folder you can add your own template to based on our examples.

Another way is just to add some styles to your existing style sheet. Open the style editor tab (you can only see this if you have allow design changes and show style button activated) and add the following or similar in the stylecolor.cc section. If you look down this file you will see a subtable section where you can control the table style.

.subtable {

background: rgb(250,250,250);

border:3px solid rgb(0,0,0);

font-size: 0.7em;

}

go to top arrow add extra column or tag for news

Hi

i want to make something like a news-section on the right hand (with the blue cross) which will be seen on all pages.

Is this possible with something like hidden pages or can i add the text in an extra textfile?

Thank you for your help

Regards, Alex

using fresh registered 3.61

Answer

There are a number of ways to do this.

The easiest is to use CSS grids. Forget the technical stuff all you have to do is select the grid on in the contents section and choose a width for each section and whether it floats one after another or starts on the next line.

However

This only works if you have a template with CSS grids in the code.

It was a recent addition so only some of the templates include it.

If you look at our tutorials in this master domain there are examples and code to add to your existing template.

Other ways include embedding RSS feeds or including other pages as windows or frames that include the news content. You will need to be able to code a little to do this.

There are lots of good html discussion forums that will advise you how to do this in any site.

Question 2

Thank you for your help.

What i do not understand is how i manage the content of 2 grids whith the CMS. Please ememer that i want to have the content of the right area permanent on every page like the menu on the left.

At least, if i have content wich is not availaible ober the left hand menu, how cam i add this in the same design? I would prefer as input the same way as i add content for the "normal" pages.

Answer

There are lots of ways it can be done but it's difficult to say which is the best without know full clear details.

For the same content on each page probably the best method is a standard html code include using asp php or shtml. this is easy integrate in Pure SEO CMS providing you know the html.

The best place to ask is a German website design discussion forum. This is a standard website design technique.

go to top arrow How to add multiple columns

I wish to have two columns of text on one of my web pages, but find I am unable to do so.

Can you help?

Answer

There are several ways to do this although you templates may no do both by standard.

The originall way used on older templates was to select the number of columns using the column box. This is in the add content section in the second menu bar just right of adding submenus. you need to click on columns menu to open the box then just add your number of columns.

This method gives two columns throughout every page.

The new way is the css grid approach. The latest version has grid button just to the right of the code generators button in the add content page.

This lets you add different sized columns throughout any page.

They both rely on template and CSS codes so you may need ot check which standard you are at.

go to top arrow Text size changes

How do i open up text boxes and change font sizes from the default settings. one is over lapping my text.

Answer

Opening popup text boxes requires html code but it's not too difficult.

You can change the text size in the style editor. Make sure you make backup copies of template and .css style sheets first.

The text sizes are kept in the styetext.css. You have to know the correct CSS format but its not difficult follow what weve done and change things.

We don't tell people how to do it here but there are loads of good html training and supports sites out there. just read these.

Alternately the CSS Wizard will allow you to create new website designs without any coding.

go to top arrow Create a CSS grid based site

CSS grids look an interesting way to create websites. There are a number of standard grid examples about that let you place content anywhere within a grid layout on the page.

I'm thinking we could have a drop down list on the paragraph section to specify where in the grid that information would be placed. That could give an infinitely variable layout or just a standard site. adding 2 or 3 paragraphs on one line then one on the next etc etc

go to top arrow Warning: No grid tags found

Hi All,

I love this software and will upgrade as soon as I make a few dollars.

I hope ím in the right forum section?

I get this message when I build my site and im not sure where to get these tags or how and where to insert them? (Warning: No grid tags found)

Can anyone help a Noob

Answer

Glad you like it.

CSS grids can make fantastic sites but it was quite a late addition so most of the standard templates don't inlcude it.

It is quite easy to add the relevant CSS codes and this support site inlcudes the information for how to do this.

We have also found that if you are using a mainly text site then the em width version works well but if you have lots of pictures then make the px grid size match the different pictures.


Menus | Pictures or images | Links and Adsense | General advice | Online shop | Design templates | Online forms | Hosting websites | Layout + CSS grids | scipts tags etc | Accessibility | Top
© Copyright Your Company Ltd , all rights reserved.