14 replies [Last post]
breakfast3001
Offline
Regular
Last seen: 16 years 39 weeks ago
Timezone: GMT+1
Joined: 2005-03-06
Posts: 23
Points: 0

Hello everybody!

I'm trying to go the CSS way with my website, and stop using tables, and using DIVs instead. Now I've come across a problem, that I would like to solve (of course...)
Here's a little explanation:
I'm trying to create a kind of tab-menu for my website.
You can see a working example at http://vyncke.be.tc
That example is done with a table, and works fine.
But I am trying to accomplish the same with div-tags, but I'm experiencing some trouble "glueing" the two div's together...
Between two "buttons", there should be a little bit of space. But in that "space", a bottom-border is wanted, to have it look like one piece. Trouble is, the bottom-border doesn't start right where the other div ended...
It might be not that good explained, so if you have questions you can certainly ask them and I'll ask them as good as I can!
My divs have the following CSS class:

.smainmenuitem{
	position:absolute;
	margin-top: 20 px;
	height: 30 px;
	width: 10%;
	border-top-width: 1;
	border-top-style: solid;
	border-top-color: #A3A393;
	border-right-width: 1;
	border-right-style: solid;
	border-right-color: #A3A393;
	border-left-width: 1;
	border-left-style: solid;
	border-left-color: #A3A393;
	background-color: #F6F6EE;
	cursor: default;
	text-align: center;
	font-family: Tahoma,Verdana;
	font-size: 14;
	padding: 3;
}

And in the HTML code, they look like this:

<!-- MainMenu bar -->
<div class="smainmenuitem" style="margin-left:5%">Item1</div>
<div class="smainmenuitem" style="margin-left:15%">Item2</div>
<div class="smainmenuitem" style="margin-left:25%">Item3</div>
<div class="smainmenuitem" style="margin-left:35%">Item4</div>
<!-- End of MainMenu Bar -->

Is there something I can do, so they really stick together?
I have uploaded the example code (where you can clearly see they don't stick together at all, but between those buttons, I will put some space as I said, but once I get why this is happening).
http://users.skynet.be/fa777962/CSSWebsite/test.htm

Can anyone help me please? Thanks in advance!

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 25 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Unwanted space between two DIVs

Hmm :?

I'm not quite sure what you're trying to fix to be honest, could you be a little more specific?

On another note there are some nasty things afoot here. Your page sort of works in IE but falls over in a heap in other browsers.

You have no Doctype for starters. See http://www.alistapart.com/articles/doctype/ for details

Also you choice of tags seems a little odd.

Rather than

<div class="title">Downloads updated!</div>

<div class="text">I decided to upload.... blah </div>

Which has no semantic meaning, I would recomend something like

<h2>Downloads updated!</h2>
<p>I decided to upload.... blah </p>

Further your CSS is really very long winded. You can make it much smaller, easier to read and maintain, by using short hand. For example.

You have

	border-top-width: 1;
	border-top-style: solid;
	border-top-color: #A3A393;
	border-right-width: 1;
	border-right-style: solid;
	border-right-color: #A3A393;
	border-left-width: 1;
	border-left-style: solid;
	border-left-color: #A3A393;

Which can be reduced to

	
        border: 1px solid #A3A393;
	border-bottom: 0;

Also note that all non zero measurements need units (in this case px I guess).

It probably seems picky but getting it right at the begining will save you much hairpulling and pain later.

breakfast3001
Offline
Regular
Last seen: 16 years 39 weeks ago
Timezone: GMT+1
Joined: 2005-03-06
Posts: 23
Points: 0

Unwanted space between two DIVs

Thanks for the help!
Changing this all has fixed my problem.
But I'm facing another one right now (I'm quite new to CSS)
The same link as above, but now it seems like the "Submenu" bar, is shorter than the real content area. They should be equally long, and I have no idea why this is happening.
They both have the same margin-left and width property.
Any idea how come?

And one more thing I am facing: the overflow:auto; doesn't seem to work in IE, but does in FF and the others. Any ideas on that one?

Thanks in advance!

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 17 years 40 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

Unwanted space between two DIVs

As briski says, you could do with improving the semantic meaning of your HTML a little - set up the main/sub menus as lists, surround paragraphs of text with <p></p> tags, etc.

If you make sure that the markup itself validates before adding styles, this can also help you out later (if the HTML's valid, then at least you're starting out with a 'stable foundation' to build upon) - for example, I noticed that the 'Recommended' list that appears on the right-hand side is missing <ul></ul> or <ol></ol> container tags.

All that aside, however, the answer to your question is... padding!

The .content rule has padding: 10px, meaning that div.content is 20 pixels wider than div.splitter and div.submenubar - you need to add the declaration padding: 0 10px; to both the .splitter and .submenubar rules within your stylesheet!

cheers,

Stuart

breakfast3001
Offline
Regular
Last seen: 16 years 39 weeks ago
Timezone: GMT+1
Joined: 2005-03-06
Posts: 23
Points: 0

Unwanted space between two DIVs

Thank you for that!
It is solved now.
Your tips are most welcome and I have changed my document to fit the suggestions you made, and it is now XHTML 1.0 Strict Validated.
I'll get back into coding it now (still have some things that don't show up - there's a border under the submenubar, but it doesn't show up for some reason, I still have to find it Laughing out loud)
Also, does anyone know about the overflow:auto thing that does not show up?

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 17 years 40 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

Unwanted space between two DIVs

With the HTML/CSS as currently shown, both IE6 and Firefox look pretty similar to me...

If you're looking to have a scrollbar on the edge of your content container (which is why I assume you've set an overflow: auto declaration) then don't forget to set a height within the .content rule as well! Smile

I've just tried that in IE6 and Firefox, and it seems pretty consistant too (can't say for other browsers though...)

cheers,

Stuart

breakfast3001
Offline
Regular
Last seen: 16 years 39 weeks ago
Timezone: GMT+1
Joined: 2005-03-06
Posts: 23
Points: 0

Unwanted space between two DIVs

Thanks for the reply, once again.
You are right, I have forgotten to set a height, but when I set one:
height: 80%;
It shows up right in FF, but not in IE (6).
That was a bit my problem.

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 17 years 40 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

Unwanted space between two DIVs

breakfast3001 wrote:
but when I set one:
height: 80%;
It shows up right in FF, but not in IE (6).
That was a bit my problem.

Ahh, a percentage!

You should add a height: 96% declaration to your body rule.

NOTE: I've only tested this in Firefox 1.0.3, IE6, and Opera 8 - you'll need to check it in Safari and Mac IE 5.2.x !

cheers,

Stuart

breakfast3001
Offline
Regular
Last seen: 16 years 39 weeks ago
Timezone: GMT+1
Joined: 2005-03-06
Posts: 23
Points: 0

Unwanted space between two DIVs

Thank you once again!
You are really helping me out here, but these are things I can't seem to find on the internet...

I'm still facing some "height" trouble though.
I've got like four "horizontal" layers.
The buttons (Item1,Item2,Item3,...)
the "splitter" bar - which is juste some kind of yellow used as spacing.
then the submenubar (SubItem1,SubItem2,...)
And then the content.
I would like to place them so, that they fit smoothly to each other.

The first has a margin-height of 20px and a height of 20px, and a padding of 3px
So I though the following layers, should have a margin-height of 46px. (20 + 20 + 3 + 3 (top & bottom padding))
That doesn't seem to be right, it seems that that number is too small.
And I don't see why.
Can you help me (once again)?

Thanks in advance!

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 17 years 40 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

Unwanted space between two DIVs

I would think about putting the top menu and submenu within a single container (call it, say, header) and then position THAT in the following way:

HTML:

<div id="header">
  <div class="smainmenuitem">Item1</div>
  <div class="umainmenuitem">Item2</div>
  <div class="umainmenuitem">Item3</div>
  <div class="umainmenuitem">Item4</div>

  <!-- SubMenu bar -->
  <div class="submenubar">Subitem1 :: Subitem2 :: Subitem3 :: Subitem4</div>
  <!-- End of SubMenu Bar -->
</div>

CSS:

div#header {
  position:absolute;
  margin-top: 32px;
  margin-left: 5%;
  width: 75%;
  background-color: #F6F6EE;
  padding-right: 20px;
  _padding-right: 0;  /* note this is a fix for IE6 */
}

Then remove the position:absolute; / margin-top: 20px; declarations from the .smainmenuitem and .umainmenuitem rules, and change the .submenubar rule to:

.submenubar {
  height: 1.5em;
  clear: both;
  background-color: #E6E6DB;
  border-top: 1px solid #A3A393;
  border-bottom: 1px solid #A3A393;
  border-left: 1px solid #929282;
  border-right: 1px solid #929282;
  width: 100%;
  font-family: Tahoma,Verdana;
  font-size: 11px;
  padding: 0 10px;
  _padding-right: 9px;  /* note this is a fix for IE6 */
}

This should then give you a better starting point and make it easier to make adjustments. Please note that this is just quickly put together and may require a few adjustments (allowing for you to remove the invalid IE6 hacks in the CSS.

Oh, and also note that you should remove margin-width: 0; and margin-height:0; from your body rule as these declarations are illegal!! Smile

cheers,

Stuart

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 14 years 20 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

Unwanted space between two DIVs

Stuart wrote:

<!-- SubMenu bar -->
<div class="submenubar">Subitem1 :: Subitem2 :: Subitem3 :: Subitem4</div>
<!-- End of SubMenu Bar -->

Stuart ive never seen the above subitem1 :: subitem2 bit - what are the :: for, what does it do?

don't mean to hijack, just a sneaky 'while ou mention it'

Freddy

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 17 years 40 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

Unwanted space between two DIVs

fatfreddy wrote:
Stuart ive never seen the above subitem1 :: subitem2 bit - what are the :: for, what does it do?

Hi Freddy,

It's not my site, it belongs to breakfast3001, so I don't know.

Personally, I would have gone with unordered list items for the submenu but that may have started to confuse matters, so I left most of the HTML alone. Lists can still be used once breakfast3001 is happy with the layout issues.

cheers,

Stuart

breakfast3001
Offline
Regular
Last seen: 16 years 39 weeks ago
Timezone: GMT+1
Joined: 2005-03-06
Posts: 23
Points: 0

Unwanted space between two DIVs

It's just a lay-out thingy ...
I was going to make the things links (<a href..>s that is;))
But I am most interested in Stuart's solution using lists... if you could make me a little example?
I'm still kind of trying to sort it out (the height of my splitter seems not to change, even if I set height to 1px...)

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

Unwanted space between two DIVs

There are many examples of both horizontal and vertical list nav bars at this site which you can study.

http://css.maxdesign.com.au/listamatic/

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

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 17 years 40 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

Unwanted space between two DIVs

Listamatic's got a whole load of options (the simple horizontal list may suit here)

EDIT: Hugo beat me to it!! Smile

As for your splitter, you might find the best way is to either use a border or background image with the submenu container instead, like this:

HTML:
...
<div id="submenu">
  <ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
  </ul>
</div>
...

CSS (border):
div#submenu {
  border-top: 3px solid #abc;
  ...
}

OR
CSS (background image):
div#submenu {
  background: url(splitterline.gif) repeat-x top left;
  ...
}

Hope that helps!

Stuart