Table outside the container

[amazeballs]

I am wanting a couple of links and a large phone number to go above the container, and range left and right. I want them to stay the width of the container but on window re-sizing they are floating off out into the background. How come? I set as a table, but still no joy what am I doing wrong (lots u may say!!! , no really, had a few flamings already but am willing to learn)

[www.downthealleyandupthestairs.com…](http://www.downthealleyandupthestairs.com/ “Down The Alley and up the Stairs”)

Also as still pretty green to web work, how come when specified the background still wont tile? Image large and blurry in safari & firefox but will show small in Dreamweaver design view. Have I got an over-riding rule somewhere?

**MOD EDIT – CODE STRIPPED**

[Paulie_D]

Simple answer. Don’t use a table.

I’m on my phone at the moment but I’ll look at your code later.

Could you stick it in Codepen in the meantime?

[amazeballs]

Think this is right place? http://codepen.io/anon/pen/orFeA
Take a look :-)

[Paulie_D]

In general, delete the table and put the content inside the container (as it’s already where you want it…in the middle).

However, if you want it separate from the container then here’s the general idea.

http://codepen.io/Paulie-D/pen/HDrqk

[amazeballs]

Cheers Paulie. Just a quickie. take a look at http://codepen.io/anon/full/Jgnjb I have the telephone number centred above the container ok, and now want the face book ‘like’ above the container ranged right to align with it. Should I make a new rule to do this? If so how do I get it to be the same width as the container, as it is a fluid layout so is all in %.
Ps. any clue as to why the nav bar wont go full width?

[Paulie_D]

I’m sorry…this could take a while.

There’s so much extraneous stuff in your codepen that it will take some time to strip it out and see what is what.

Also, any images you have linked to won’t show up because the are not on a webserver.

[Paulie_D]

You have two divs , one with a class of ‘telephone’ and one with an id of #social. There is some malformed code in the social div so you might want to take a look at that. It should be…

[Paulie_D]

I really think you should be looking to bring these inside your container since everything else is in there.

It is going to be very difficult to maintain the telephone number in the center of the viewport AND have something aligned to it’s direct right on the same level. Margins just don’t really work that way.

I’m not saying it’s impossible but it probably make more sense just to have your social div underneath the telephone number and centered as well.

[Paulie_D]

As for your main navbar, I assume that this is the one just below the image?

If so, the div DOES go fully across the page but I’m not sure you want the navbar full page width. Won’t this interfere with your sidebar?

If you only want it to be the width of the content section then it make sense to either bring it inside that div or give it the same width.

If you want the list items to be wider then you’ll have to give them greater widths or more padding. In fact, I wouldn’t set a width on the li, let their size be dictated by the ‘a’ links.

[amazeballs]

The Nav Bar is supposed to look like this : http://www.webstockbox.com/css/50-cool-css-menus-free-source-codes-tutorials/ (see example no 5) http://www.andrewsellick.com/examples/vista-menu/ So the buttons are a bit wider than they are now, ( will do what you suggested about the padding). But the nav bar goes the width above the side bar – or as you say will that do something nasty? As you can tell I am a newby but will at least I am learning from my mistakes as I ;-) Any tips or advise appreciated.

[Paulie_D]

If the div with an id of ‘main-nav is supposed to go across the full page then you’re going to have to give it a height (which seems to be 29px) and set some sort of background image.

You know…to be honest, we’re kind of working in the dark here…do you have an image of what the completed website is supposed to look like?

If you don’t…you really should.

[amazeballs]

Hiya, I have a PDF showing the layout my friend wanted doing. Can I PM you with it? My nav bar now all the way across but the styling will show in live view on Dreamweaver but as soon as its in a Browser it drops it? Have a screen recording. Could you take a look?

[Paulie_D]

I don’t have a problem with a PM. I may have to post an image here though to get more help. If that’s a problem then you might want to consider an alternative.

[Author]

Posts