Space Inside The Menue

[Cologne]

Hi,

how does it work to get some space in the menu?

on the left side I want:

HOME - REVIEW - NEWS

and on the left:

CONTACT - IMPRESSUM


so like that:

HOME - REVIEW - NEWS - here the space - CONTACT - IMPRESSUM


How do i have to do that?

Denis

[Ray Borduin]

I would create it with a placeholder for where you want the space and then manually update the page to remove the spaceholder and override the css width attribute for that menu item inline using a style attribute.

[Cologne]

? I dont get that :-(

Any example?

[Ray Borduin]

No examples that I know of. Where do you get stuck?

1) Create the menu with a placeholder for that section
2) Delete the placeholder
3) update the width

Where do you get stuck?

[Cologne]

I created a simple menu

http://www.localhero.de/menu.php

there I created a PLACEHOLDER.

where should i delete it?

[Ray Borduin]

Replace:
<a href="#" class="link">PLACEHOLDER</a>

with:
<a class="link" style="width:200px">&nbsp;</a>

in the menu include file

[Cologne]

Hi, the space is shown, but it got a hover effect, this should not be :-)

How can I stop that roll-over effect?

Denis

[Ray Borduin]

Do you have a url where I can view what you have so far?

[Ray Borduin]

Looks like this would work:

<li class="link"><a style="width: 200px; background-color: rgb(153, 200, 193);">&nbsp;</a></li>

[Cologne]

Yes that works.

http://www.localhero.de/menu.php

But why do you give it a class name?

[Ray Borduin]

I just copied what was already there. You may not need the class name.

[Cologne]

Hi Ray,

that works fine.

now I tried something else. with no FIXED width.

http://www.localhero.de/index10.php

Between SUCHEN and EINTRAGEN i need a placeholder with no PIXEL number, just, one, that pushes both away?

how does that work?

[Ray Borduin]

I think you need to use fixed widths and margins to accomplish this, you can always go in and add custom css to change the particular margin attributes of a given list item.

[Cologne]

hmmm,

nearly the whole day I try to setup an design using CSSMenuWriter and SCULPTOR.

in iE everything is great, FF sucks, all the time.

I thought those extensions are so that i dont have to do such work.

if so, i can better code on my own.


when I do it in sculptor, why isnt it fixed in ALL BROWSERS, i thought that guru did it?

Denis

[Justin Nemeth]

Denis, in general IE does not follow all web standards, so that is why it appears to be working when the other browsers are not. If the page is not looking good in Firefox that generally means the CSS is telling it do something and Firefox is doing exactly what it says. That might look incorrect, but it should just be a matter of adjusting a few things to work. I usually design for Firefox (or Safari/Chrome) first since I know those are standards compliant browsers. Then I test in IE, and in general that will look fine too since the code has been made standards compliant from the start.

I would recommend approaching your page in steps. First, use sculptor to make a page and verify it looks good. Adjust any of the CSS as needed to get the page working good first and foremost. Then add a menu to your page. Using the built in presets, these should look pretty good together. Once you start modifying the menu, do just one thing at a time and test. If it starts to break, you will then know exactly what setting is causing the problem and you can try another approach.

The tools are designed to work out of the box, true, but they also allow full customization and just like anything with CSS, that can introduce browser issues. The presets for both tools give a solid starting point with standard code.

[Cologne]

stop me if i am wrong,

but its written "Output pages support Internet Explorer 5.5 – 7.x, Firefox 2 – 3.x, Safari 2 – 3.x, Opera 9 – ENHANCED "


but I will try it your way. ;-)

[Cologne]

I get closer and closer!

http://www.localhero.de/_index.php

slowly it gets where i want it. but the top and bottom space in the content is diffrent in iE and FF :-)


any solutions?

[Justin Nemeth]

yes, try explicitly styling your p tags. p tags tend to render differently in the different browsers. Try something like this:

p {
margin: 0 0 10px 0; /* gives 10px space at the bottom */
padding: 0;
}