As a test I’m trying to convert one of my old sites to a box model design and I’m running into a bit of a problem with the navigation menus. Here’s one of the pages:
The only way I could recreate the drop down menus and logo so they overlap the elements below them was to reorder the inline boxes so the header elements are further down in the site window, which I’m assuming means they are higher up in the actual page position. Plus, I had to specify negative padding values for the logo and menu to push them up over the elements below them.
Is negative padding permitted or is it considered bad formatting? Are there somethings, like this, that are just too difficult to do with inline layouts?
I try to avoid negatives when I can avoid them. The solution? Instead of moving it down the page in Freeway then using a negative margin to move it up, just use the z-index property!
Add the following code in Page > HTML Markup (Before End Head);
Don’t forget that you can apply the z-index attribute to nested elements to
raise or lower their position.
Also, negative margins but not padding, please
–
Ernie Simpson
On Wed, Feb 13, 2013 at 10:58 PM, RavenManiac email@hiddenwrote:
As a test I’m trying to convert one of my old sites to a box model design
and I’m running into a bit of a problem with the navigation menus. Here’s
one of the pages:
The only way I could recreate the drop down menus and logo so they overlap
the elements below them was to reorder the inline boxes so the header
elements are further down in the site window, which I’m assuming means they
are higher up in the actual page position. Plus, I had to specify negative
padding values for the logo and menu to push them up over the elements
below them.
Is negative padding permitted or is it considered bad formatting? Are
there somethings, like this, that are just too difficult to do with inline
layouts?
Negative padding is illegal. Seriously. And any time you use something like this (which the browsers will attempt to understand and interpret) you are setting yourself up for the potential of your page rendering differently in different browsers. That’s because when you go off the tracks like this, whatever the browsers come up with is up to them. When you code to the standards, they are all held to that standard, and unless you’re talking about IE < 9, will arrive in more or less the same exact layout.
Walter
On Feb 14, 2013, at 3:53 AM, Ernie Simpson wrote:
Don’t forget that you can apply the z-index attribute to nested elements to
raise or lower their position.
Also, negative margins but not padding, please
–
Ernie Simpson
On Wed, Feb 13, 2013 at 10:58 PM, RavenManiac email@hiddenwrote:
As a test I’m trying to convert one of my old sites to a box model design
and I’m running into a bit of a problem with the navigation menus. Here’s
one of the pages:
The only way I could recreate the drop down menus and logo so they overlap
the elements below them was to reorder the inline boxes so the header
elements are further down in the site window, which I’m assuming means they
are higher up in the actual page position. Plus, I had to specify negative
padding values for the logo and menu to push them up over the elements
below them.
Is negative padding permitted or is it considered bad formatting? Are
there somethings, like this, that are just too difficult to do with inline
layouts?
Negative padding is illegal. Seriously. And any time you use something like this (which the browsers will attempt to understand and interpret) you are setting yourself up for the potential of your page rendering differently in different browsers. That’s because when you go off the tracks like this, whatever the browsers come up with is up to them. When you code to the standards, they are all held to that standard, and unless you’re talking about IE < 9, will arrive in more or less the same exact layout.
Walter
Thanks for the info Walter. For me, I think a combination of floating elements and inline design is best given my current skill set. Any problem with combining both?
Nope. Just don’t break out the Item / Extended if Freeway won’t let you set a negative padding! Generally speaking (there are a few, fairly geeky exceptions) if Freeway won’t let you enter a particular value through the Inspector, it usually has a very good reason for doing so.
Walter
On Feb 14, 2013, at 9:03 AM, RavenManiac wrote:
On 14 Feb 2013, 12:24 pm, waltd wrote:
Negative padding is illegal. Seriously. And any time you use something like this (which the browsers will attempt to understand and interpret) you are setting yourself up for the potential of your page rendering differently in different browsers. That’s because when you go off the tracks like this, whatever the browsers come up with is up to them. When you code to the standards, they are all held to that standard, and unless you’re talking about IE < 9, will arrive in more or less the same exact layout.
Walter
Thanks for the info Walter. For me, I think a combination of floating elements and inline design is best given my current skill set. Any problem with combining both?
I just want to pipe in here that while negative margins are okay, negative padding is a no-no. You can use a negative margin to practically achieve the same effect.
Now, how did I add code to the list? Simple. I used Markdown. To write inline code, place two “`” (back-ticks) before and after the text that you want to display as code. The result? <head> is inline!
To create blocks of code (like I did in my earlier reply), simple create a new paragraph by pressing enter and indent each line by four spaces, which creates:
