15 replies [Last post]
linutzy
Offline
newbie
Last seen: 16 years 31 weeks ago
Joined: 2005-10-17
Posts: 4
Points: 0

I have built a 3 box layout site th the following format:
----------
|Banner|
----------
|CSS Nav Bar|
-----------------------------------------------------------------------
|Box1| | Box2 | |Box3|
| | | | | |
| | | | | |
-----------------------------------------------------------------------
| Footer |
------------------------------------------------------------------------

Sorry for the added description. I'm just wondering if there is any specific CSS code for my noob question.

1) In the CSS Nav Bar I have some links (link1 , link2, link3) as an example.
2) I would like to be able to click link1 so that in box1 I see new links available (chapter1, chapter2,chapter3)
3) Then when I click chapter1, the actual text of that chapter will appear in Box2.
4) Box3 is there for other reasons and can be ignored.

I was just wondering if there is a CSS way to open new links and information in seperate CSS boxes.

An example would be nice if possible.

Also although I am not a complete perfectionist I did try to CSS validate my site and was not happy with the results. Wondering if anyone can take a look at what I might be doing wrong.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Re: CSS Beginner/proper way of using links and boxes

linutzy wrote:
I was just wondering if there is a CSS way to open new links and information in seperate CSS boxes.

Not really.

Assuming all the information was in one page, you could use :hover or :focus pseudo styles to hide/reveal different information. CSS changes aren't permanent, once the :hover state ends or :focus changes the page will revert to its default settings. This is ok for things like menus but is unlikely to suitable for main content. To achieve what you want with main content you either require javascript, frames or multiple pages.

Multiple pages is the most common solution used by most websites. Wink Use SSI or a scripting language to avoid having to duplicate large parts of your html on each page.

linutzy wrote:
Also although I am not a complete perfectionist I did try to CSS validate my site and was not happy with the results. Wondering if anyone can take a look at what I might be doing wrong.

You'll need to post a link for that :?

linutzy
Offline
newbie
Last seen: 16 years 31 weeks ago
Joined: 2005-10-17
Posts: 4
Points: 0

Thanks Chris

The link is www.tishi.net/testcss.html

It's just a site I'm building to "doc" some of my Linux and C information so I don't have to carry so many of my books and papers.

Multiple Pages is what I want to use, but am trying to figure out a way not to have it break box1 and box2. Some format rules are in order I guess.

Maujor
Maujor's picture
Offline
Regular
Rio de Janeiro, Brazil
Last seen: 5 years 28 weeks ago
Rio de Janeiro, Brazil
Timezone: GMT-2
Joined: 2003-11-21
Posts: 46
Points: 2

CSS Beginner/proper way of using links and boxes

Hello,
Firstly lets validate your HTML and CSS.
HTML:
1-) You have had used TWO <div id="content"> into your HTML code! One before and other after the <div class="spacer">&nbsp;</div>. Get rid of the one after.
2-) Add the alt attribute for your header image:

<div id="headerblock">
<img src="Header.jpg"  height="220" width="700"
 border="0" alt="put a descripton for image here"></div>

CSS:
You set color:grey for a:link. Wrong spell ! The correct is gray
And be aware: validator results return "Warnings" isn't CSS errors.

Maurício "Maujor®" Samy Silva
Site: http://maujor.com
Books: http://livrosdomaujor.com.br

linutzy
Offline
newbie
Last seen: 16 years 31 weeks ago
Joined: 2005-10-17
Posts: 4
Points: 0

Thanks for the help Maujor.

I did as you asked. Funny how this site lookes okay in 1280X1024 in IE and even FF but Safari yuck.

Just wondering if there is anything else that is sloppy? Is there anything else that you can say needs a bit of work before I try to figure out how links in one box changes content in another?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 31 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: Thanks for the help Maujor.

linutzy wrote:
Is there anything else that you can say needs a bit of work before I try to figure out how links in one box changes content in another?

Your layout is far too wide. Not everyone has a screen res set higher than 1024 x 780 and people hate having to scroll horizontally to view content.
Also, you don't need to do &nbsp; &nbsp; &nbsp; &nbsp; to indent your paragraphs. You can use text-indent instead.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 3 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Re: Thanks for the help Maujor.

linutzy wrote:
I did as you asked. Funny how this site lookes okay in 1280X1024 in IE and even FF but Safari yuck.

Care to elaborate? What do you mean, even Firefox? Is there some reason FF WOULDN'T display it properly? Oups

Verschwindende wrote:
  • CSS doesn't make pies

Maujor
Maujor's picture
Offline
Regular
Rio de Janeiro, Brazil
Last seen: 5 years 28 weeks ago
Rio de Janeiro, Brazil
Timezone: GMT-2
Joined: 2003-11-21
Posts: 46
Points: 2

CSS Beginner/proper way of using links and boxes

Tyssen pointed out:

Quote:
Your layout is far too wide. Not everyone has a screen res set higher than 1024 x 780 and people hate having to scroll horizontally to view content.

That's true.
I suggest to make a liquid layout using percentages for widths in order to accomodate to screen resolution.
Make a backup copy of you document and use these new CSS rules:
#content {
font-size: 12px; 
line-height: 20px; 
font-family: Verdana, Geneva, Arial, sans-serif; 
background-color: #74C8f6; 
text-align: left;
margin-right: 1.5%;
margin-left: 1.5%; 
height: auto;   
	}

.col1 {
padding: 3px 3px 3px 3px;
font-size: 12px;
line-height: 10px;
text-align: right;
float: left;
width: 20.0%;
height: auto;
border-style:solid;
border-color:black;
background-color: #B4DAFF        
	}

.col2 {
padding: 3px 3px 3px 3px;
margin-left: 0.5%; 
margin-right: 0.5%; 
border-style:solid;
border-color:black;
float: left;
height: auto;
width: 54%; 
background-color: #B4DAFF
    	}

.col3 	{
padding: 3px 3px 3px 3px;
font-size: 10px;
float: left;
width: 20.0%; 
height: auto;
border-style:solid;
border-color:black;
background-color: #B4DAFF
	}

There is a sintax error in your CSS: (validate it again)
#header {
...........
hight:100%; /* correct is ==> height:100%; */
}

Maurício "Maujor®" Samy Silva
Site: http://maujor.com
Books: http://livrosdomaujor.com.br

linutzy
Offline
newbie
Last seen: 16 years 31 weeks ago
Joined: 2005-10-17
Posts: 4
Points: 0

Yeah I didn't mean it as a dig against FF

I prefer to use all browsers. Again I thank you for your knowledge and time. I will adjust the code as directed. I actually coded this with about 5 examples from the web, www.w3schools.com, using notepad and vi so you'll have to excuse my lack of experience. No WYSIWIG.

Just wondering is it good practice to use auto or an actual value?
Example below:

height: auto;
}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

CSS Beginner/proper way of using links and boxes

If you can - its very good to stick with height:auto. That way your design can grow with content and adjust to font-size changes.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 31 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

CSS Beginner/proper way of using links and boxes

Is height & width: auto the same as not specifying a value or are they used mainly when you want to override a specific value that has been inherited?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

CSS Beginner/proper way of using links and boxes

Tyssen wrote:
Is height & width: auto the same as not specifying a value or are they used mainly when you want to override a specific value that has been inherited?

auto is the default. So yes, it is the same as not specifying a value, which also means you should only need to specify auto when you are trying to override another less specific style rule. width and height are not (never?) inherited, although the "total width" of a block element defaults to 100% of the width of the display context it resides within.

Maujor
Maujor's picture
Offline
Regular
Rio de Janeiro, Brazil
Last seen: 5 years 28 weeks ago
Rio de Janeiro, Brazil
Timezone: GMT-2
Joined: 2003-11-21
Posts: 46
Points: 2

CSS Beginner/proper way of using links and boxes

The auto CSS value is very useful in some "hacks".
Below an hack to simulate min-height for IE that uses height:auto.

selector {
    min-height: 200px;
    height: 200px;  /* for IE that does not understand min-height and treat height as min-height  */
    }
body > seletor {
    height: auto;  /* for compliant browsers in order to override the previous fixed height */
    }

Maurício "Maujor®" Samy Silva
Site: http://maujor.com
Books: http://livrosdomaujor.com.br

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

CSS Beginner/proper way of using links and boxes

Maujor, I understand that your code works - or it would do if you spelt selector the same way both times Wink, however I don't think it good practice to write incorrect CSS and then use a specially targetted rule to correct it. Its better to write correct CSS and then use a targetted rule to fix a specific browser problem.

So...

some_selector { min-height: 200px;}
* html some_selector {height: 200px;}

Or better still, in IEs case, use IE conditional comments to load any extra/overriding styles in a separate style sheet.

Maujor
Maujor's picture
Offline
Regular
Rio de Janeiro, Brazil
Last seen: 5 years 28 weeks ago
Rio de Janeiro, Brazil
Timezone: GMT-2
Joined: 2003-11-21
Posts: 46
Points: 2

CSS Beginner/proper way of using links and boxes

Chris..S:

Quote:
I understand that your code works

Am not the authors code. I've posted the code only for point out an example of auto CSS value.
If it's or not the best pratice is another issue.
Personally I hate any kind of hacks, but unfornate we can't live without they. The star hack for IE isn't better than a child selector, or is it? or maybe? or depends upon each situation? or this is an unansewerable question?.

Maurício "Maujor®" Samy Silva
Site: http://maujor.com
Books: http://livrosdomaujor.com.br

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

CSS Beginner/proper way of using links and boxes

The point is Maujor that you are writing in a problem and using another rule to correct that problem, it's a case of how you look at in a logical manner.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me