# Solved: Using CSS to code a website without using a lot of HTML



## tjc15 (Mar 16, 2011)

Hi,

I am trying to remodel my website and in the process figure out how to write a CSS where it automatically has a certain menu bar, logo, and title on every page of my website that uses that a given CSS code. Mainly the menu bar.
I would also like it to look like a big upside-down 'L' with the blue running through the title down the menu bar and beyond with a border on the inside all the way. (confused yet? I am)
I am currently using an unordered list to create a menu bar on my page.
If you would like to look at my code the page is http://www.notmybattle.com/ and the css is in http://www.notmybattle.com/main.css. 
Is this even possible or do I just need to go to every page on my site and add HTML?
If you can send a response with an example of how to do this it would be appreciated.:up:

Thanks,
tjc15


----------



## Ent (Apr 11, 2009)

Unfortunately CSS only defines the style of the page-what the various elements look like. 
It cannot define what is actually there, including but not limited to navigation bars. It might be able to do your L shape, though I admit I don't quite know what you're after with that regard.

Depending on the software package you're using to create the site, it may be possible to define a _template_, or set of HTML that every page is based on. Doing this in Dreamweaver for example you would have the navigation menu, footer, and anything else that's site-wide stored in a single template, and all pages would be based on that template. What program are you using?

In theory one could also have javascript auto-create the HTML needed, such that each page only needs to link to the JavaScript file. This however is not advisable. If someone has JS disabled as many do, they won't be able to use the site at all. Google and other search engines may have trouble indexing your site (less of an issue if you only do it to the navigation bar, but an issue nonetheless) and also importantly that isn't what javascript is there for. It's much better to use each component for its stated purpose, and that means HTML for actually defining what's on the site.

There are ways to automate such changes with a specifically crafted program. If templates aren't an option I can help with that if you like, but I'd need to know *exactly *what you're after beforehand (a page before and after making the changes would be best). Telling the computer what to do is slightly harder than giving the same instructions to a human because there cannot be any ambiguity (on the other hand, there won't be any misunderstandings between the program and the computer). It might take a bit of time.

PS: I really enjoyed reading heresy.htm. There's a lot of good stuff in there


----------



## tjc15 (Mar 16, 2011)

Hi and thanks for answering Ent,

I am actually not using any software to do this other than notepad. I have attatched a rough sketch of what I want. The black line are defining the basic sections. The blue areas are what I need colored in the dark blue color of the menu bar, and the hot pink lines are borders that show up while on the page. I missed the one in between the logo and title but at least we know. If you need a logo just grab a black or white box like opening paint saving the image right away and using that.  If this isn't enough info just let me know and I will provide as much as I can.










Thanks again,
tjc15


----------



## Ent (Apr 11, 2009)

tjc15 said:


> I am actually not using any software to do this other than notepad.


Now that is really impressive. Still it doesn't make things easy though when it comes to applying a change to the site.

Anyway, what is your focus here? Do you need help setting up the CSS according to the diagram you lay out, or do you need help deploying that layout to all of your pages?


----------



## tjc15 (Mar 16, 2011)

I mainly need help with the layout written in notepad if possible, but if you know of an easy way to apply to all pages I'm all ears. I'm already using an external stylesheet like you can see in the html.

Thanks,
tjc15


----------



## ehymel (Aug 12, 2007)

If you're trying to make something like a template where every page of your site has the same header, footer, and perhaps left-side navigation links, you need a scripting language on your server, like php or asp.net. Each page would then run an "include()" command to pull in the header, another include for the footer, etc. A quick google search for a good tutorial site yield this one, which looks pretty intuitive.

Note that this has nothing whatsoever to do with css. css will only specify how things look (font sizes, colors, borders, layout, etc.).


----------



## tjc15 (Mar 16, 2011)

Do you know a way in css to make the color go down the side of the page like I was wanting? I can make it go down but it makes the entire page the same length as I specify in the css for the distance. This is not what I want. Here is what I have as of now... 
html: www.notmybattle.com/studies.html 
css: www.notmybattle.com/home.css

tjc15


----------



## Ent (Apr 11, 2009)

Here's a few ideas for you, it all depends on what you really have in mind.

1: Set the background colour of the body to be that blue colour. Then create a new to hold the section you indicate with white in your image, and specify it to be different.

2: If you want the navigation bar and head (blue bits) to remain where it is at all times (with the rest of the content scrolling) you could use

```
position: fixed;
```
. That will only work if you're sure that these sections will fit on the screen at once, which yours may not. This would effectively create a smaller screen for working in.

ehymel is correct in his method of applying the same components to pages (dependent on your host providing PHP. However you'd still need to go through adding the include() statements. Anyway we can cross that bridge when we come to it.


----------



## tjc15 (Mar 16, 2011)

I wasn't really thinking of having it in the same place but I will talk to my group and see what they want to do. In the meantime is there any way to as you scroll down to just have the colored bar go down the side of the page and not move? Like it was part of the background and not a seperate piece that always followed you around as you browse. Kind of like the bar on the right side of this page over there -> and further up the screen.

I have started on the new page of what I want it to look like the links are up ^ above. Post #7.

Is there a way to make a menu go right in the center of the screen (additional to the main menu sidebar)?

Thank you guys again,
tjc15


----------



## Ent (Apr 11, 2009)

This (in the zip file, as I don't have a site to upload to) is roughly what you'd wind up with if you go for my first option. 
Obviously it could still be tweaked a bit from its current state.

I don't know quite what you mean by having a menu in the center?


----------



## tjc15 (Mar 16, 2011)

What I mean is --- How can I put a list of links in the same format as the menu bar in a column at the center of the page? Every time I try something goes haywire.

As far as the solution you gave in post 10 I don't see where this solves the problem below. (I'm very new to website design and css btw)

If you look at www.notmybattle.com/studies.html this is what I am wanting except for the red on the bottom of the menu bar to go all the way down to the bottom of the page. I can do this but I put in something like 100000000px for the bottom (margin or padding can't remember which) and it looked my computer. This solution would leave much empty space on short documents in the text area and very little in the larger documents. Is there a way to give it a variable based on length of the document so it only extends as far as the text?

I'm sorry i'm so new to this and make it hard on you.

Sincerely,
tjc15


----------



## Ent (Apr 11, 2009)

Did you take both the html and CSS files out of the zip before you looked at it? On my machine it looks like the first attachment when there is a lot of text, and like the second when there isn't much text. What is wrong with it according to your specifications?


----------



## tjc15 (Mar 16, 2011)

It comes up like the attatched screenshot. I'm using Internet Explorer and that may be why it comes up differnet in yours than mine.

tjc15


----------



## Ent (Apr 11, 2009)

What attached screenshot? It works when tested in IE 8.


----------



## tjc15 (Mar 16, 2011)

sorry had to add it
I don't know what ie i have on this system
I think it is 8
did you notice that it appears as if it is pulling from two css files in the html or am I seeing it wrong?


----------



## tjc15 (Mar 16, 2011)

correction ie 7
Grandparents computer


----------



## Ent (Apr 11, 2009)

By way of explanation, you used absolute links to refer to your CSS file. Obviously I couldn't edit the CSS file on your sever, so I created a relative link and placed your original in comments to prevent it from being lost. Only the bottom one actually does anything. I'll get back to you when I see what's wrong with that browser.


----------



## tjc15 (Mar 16, 2011)

i'll be waiting
Your CSS validates according to the W3C CSS validator so I don't have a clus what is wrong.


----------



## Ent (Apr 11, 2009)

What is going wrong is Microsoft's stupid browser. IE is well known to be far from standards compliant, and the earlier the version the worse that is. 
It seems that IE7 thinks it has slightly more space to play with for 100% than it actually does, and then knocks the element down when it realizes it doesn't fit. The attached version should hopefully work with your IE7. I've simply lowered the 100% width to 99.5 so that it doesn't use up the extra few pixels it thinks it's entitled to. 

I cannot test anything at IE6 level though.


----------



## tjc15 (Mar 16, 2011)

It looks really good. Thanks!


----------



## Ent (Apr 11, 2009)

Thank you. I do suggest that you find a way to test it on IE6, there are still many (far far too many) people using IE6 as a browser, and it may not work there.


----------



## tjc15 (Mar 16, 2011)

Ok:->


----------

