# Formatting A Webpage Properly?



## OrbitzXT (Jul 7, 2011)

I'm trying to build a website for my company using Expression Web 4. I began with a template but am now running into some problems. If you look quickly at the homepage of the site:

http://www.miladcontracting.com/index.htm

When your browser is not wide enough, there is a scrolling bar up top purely for the header. While I do intend on shrinking the size a bit, I would still like to know what I need to do so that scrolling bar up top does not appear, even if the browser cannot fit it.

Edit: I managed to do what I want...kind of. If I edit the masthead's style, and set overflow to hidden it behaves how I want. But what if I want it hidden AND a scrolling bar on the bottom of the browser, not the top. At the moment, it hides the parts that do not fit, but there is no scrolling bar on the bottom of the browser.


----------



## W1zzard (Jul 7, 2011)

depends on what you are trying to do with the design.

do you want the outermost container to be fluid width ? or fixed width centered ? what about the gray space to the left and right, constant width? percentage?

fixed width REALLY makes your life easier, it's what most of the sites use today (TPU is fluid width, but we are awesome)


----------



## OrbitzXT (Jul 7, 2011)

TPU definitely is awesome, agreed. As for what I want...I'm a complete novice and just want it to "look right". If you reload www.miladcontracting.com now, I managed to get it where the top is just hidden and a scrolling bar appears on the bottom. But the middle area leaves a gray behind that doesn't look right with the top part. Sorry for my horrible explanation, I don't know the proper terminology.


----------



## W1zzard (Jul 7, 2011)

define "look right"

you probably want to give the container with the flash inside, the style "overflow:hidden"


----------



## qubit (Jul 7, 2011)

W1zzard said:


> depends on what you are trying to do with the design.
> 
> do you want the outermost container to be fluid width ? or fixed width centered ? what about the gray space to the left and right, constant width? percentage?
> 
> fixed width REALLY makes your life easier, it's what most of the sites use today (TPU is fluid width, but we are awesome)



Yeah, I have to say that fixed width does look amateurish. Fluid fills your whole screen, regardless of its resolution, so it's much more useful and professional.

And yup, TPU is indeed awesome.


----------



## OrbitzXT (Jul 7, 2011)

Yup that did exactly what I wanted, thanks so much Wizzard!


----------



## OrbitzXT (Jul 7, 2011)

How would I go about doing a "fluid" page properly? Or is that difficult for a beginner like myself?


----------



## W1zzard (Jul 7, 2011)

your page is fluid right now. try resizing your browser window. once you go narrow bad things will happen like content disappears or the grey box drops down


----------



## OrbitzXT (Jul 7, 2011)

W1zzard said:


> your page is fluid right now. try resizing your browser window. once you go narrow bad things will happen like content disappears or the grey box drops down



Oh okay, that's good then. What size banner at the top would you recommend? I think I did 1200x100 pixels. That seems to be too big. Maybe 1000x100?


----------



## digibucc (Jul 7, 2011)

900-1000px is as big as i would go, i would try to do 800 or so width if you can make it work.
small and centered imo is cleaner and better than too large and getting cut off on smaller screens...


----------



## OrbitzXT (Jul 7, 2011)

I don't know what I changed but when the webpage becomes too narrow, the scrolling sidebar on the bottom is no longer there like it was 20 minutes ago. When I change the overflow setting for the container that has the flash video to Inherit, the scrolling sidebar is there but it doesn't quite look right...as in it doesn't line up with the banner up top. Setting overflow to hidden as it currently is makes it look right, but there is no scrolling sidebar. Any idea what I'm doing wrong?


----------



## digibucc (Jul 7, 2011)

scrolling sidebar at the bottom?
the flash image fader, or the "sed cursus dignissim" box? or neither?


----------



## OrbitzXT (Jul 8, 2011)

When the webpage becomes too narrow and you can't see the sides there should be a bar along the bottom of the browser to scroll side to side isn't there? I had it on my page yesterday, something I changed made it not appear even when things get cut off. Is it because nothing is really getting cutoff (Aside from the top banner) when you make the page more narrow?

Also I just noticed, what is with the gray boarder surrounding my webpage? It seems like a lot of wasted space. How can I do away with that?


----------



## digibucc (Jul 8, 2011)

that's just the scrollbar, sidebar is like a widget that sits on either the left or right
side of a page, holding a menu or advertisement, or some other piece of info.

in styles/layout.css you have overflow set to hidden, inherit & auto.

overflow should be set to scroll to allow scrolling. (css overflow property)

the gray space is there as a background, so the larger your screen is virtually (not physical
size, but the number of pixels it shows) , the more gray space you'll see.

you'll want to set your resolution to 1280x1024 , as well as maybe 1280x720, and decide based
on that whether it is too much space or not.  I would guess it will be too little space.


----------

