size and resizing browser window issue

[Violet_82]

Hi there,
I am in the process of designing my new photography website.
Now, I roughly know the layout but I am not sure how to deal with resizing the browser window issues. In other words, I want my website to resize nicely when I resize the window, rather than having buttons, divs and all the rest to overlap and go crazy.

In my previous website I simply didn't deal with the issue at all as you can see http://antobbo.webspace.virginmedia.com/photography/home.htm, if you resize you simply need to keep scrolling to view the content (is it called fixed width? - sorry I am not very well-versed in that), whereas on this site I attempted to resize everything nicely when you make the window smaller, although I wasn't that successful as you can see http://antobbo.webspace.virginmedia.com/martintest/project_1.htm.

What I would like to do is something similar to this say http://www.londondrum.com/planner/10-best-photos.php, you make the windows smaller and everything resizes ok.

Has that something to do with min-height and min-width ?
I really don't know where to start from, so any hint or link to relevant resources would be great. I thought I better do this before I start developing the site so that I don't have to make too many radical changes after I write the css
thanks

[Felixius]

Hi Violet 82,

I am pretty sure that you want a site that can expand and contract to a certain width. Height is going to be an issue for content.

There is an article I came across that might help you.

http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

I hope this puts you on the right track.

Felixius

[Violet_82]

Hi Felixius,
thanks for the link, yes, that is what I was looking for.
I think I have sorted it out http://antobbo.webspace.virginmedia.com/photogallery/home.htm although now I am facing another problem. When I wrote this post I didn't add the navigation in as yet, and today when I added the top navigation buttons I realized that I need to resize them as well, and I am finding it pretty difficult. Here's what I have done. At the moment I have

.navigation li
{
...
width:150px;
...
}

and that's because the width of the buttons is 150 px.
If I resize the windows as the situation is now, the buttons, as you would expect, cascade into one another.

If in the css I replace the 150 px with

width:9%;

that works fine and the buttons resize when I make the window smaller but it doesn't resize the text, so what happens is that the text eventually outgrows the buttons, and that doesn't look good at all.
I could obviously set a minimum width for the navigation, the same way as I have done for all the other divs but if I do that and if say I want to have larger buttons so that they cover the whole length of the page (and I think I will be doing that because as it is at the moment the buttons take only half of the page and I am not quite happy with the way it looks) I can't have a minimum width that small can't i?

any suggestion?
thanks
any

[floatingDivs]

Hi Violet_82,

The answer is very simple. Chances are you are assigning specific (pixel-based) widths to various divs and lists. So, let's say you gave the div containing your social media information a width of 150px (inside the sidebar div). Let's also assume you gave your main content area ("content" + "sidebar") a width of 75%/25% of the parent container. As you continue to resize the browser and make it smaller, the proportions between the "content" and "sidebar" divs remain relatively the same because of the "liquid" widths (75%/25% of whatever the browser's window size is), but the social media wrapper has a FIXED width of 150px, so no matter how small the window gets the social media div will be 150px. Assuming that 75%/25% ratio is intact and the browser width is < 600px (so sidebar is less than 150px), it's bound to push the social media icons down or ruin the layout of your site.

If I get some time tonight, I'll make it clear (as I'm sure the above doesn't make sense). Basically, if you want it to look good in resized windows, it may be time to use percentage based widths in favor of pixels.

[Felixius]

Hi Violet,

Navigation styling is a very subjective art. Having said that, this is my preferred solution. I would prefer to keep my buttons the same width as it is a landing space for either fingers on a tablet/device/mouse. However, in a fluid design, I would prefer it to be centred.

.navigation
{
	width:100%;
	margin:auto;
	background:#000;
}
.navigation ul
{
	list-style: none;
		height:70px;
	border: 1px solid magenta;
	width:760px;
	margin:0 auto;
}

Problem - While you probably won't be adding buttons regularly, the red highlighted style will need to be changed when adding or subtracting buttons or even borders of buttons and thicknesses. The issue is gone if you have set it up and aren't making changes.

Anyway, that is my take on it ^_^

Felixius

[Violet_82]

HI thanks both for the feedback.
@floatingDivs: it actually makes sense, so I had a go myself and attempted to change pixels to percentage.
Now I have the outer div "outer_wrapper" at 100% (the blue border), then the yellow one "inner_wrap" which houses the content at 98%, the heading at 98% and most importantly the

.navigation ul

at 79% and the actual buttons

.navigation li

at 19.5%. I didn't get the percentage values from anywhere, I simply tried different combinations till I matched the values I had in pixels.
Now, even if I have everything in percentage I still need a minimum width otherwise, say for the buttons, the text as mentioned in my previous post outgrows the buttons.
Also, one big issue I have is with images. Here I have inserted one http://antobbo.webspace.virginmedia.com/photogallery/home.htm just to show you. The picture size is 500x333 whereas my minimum width is, in the above link, 450px. The problem is obvious here, so I suppose I have to increase my minimum width to 500px. This is to say that I can't give percentage to everything, like I can't do that with images because the picture won't resize. Now I know these things are probably obvious to you guys but I am still trying to get my head around this business of liquid layout

@Felixius: I actually did something similar to that in my next version, I gave the list a minimum width of 760px, now I have changed it though because I changed the size of the buttons and I have inserted the picture although I was working on the

.navigation ul

and not

.navigation

. I thought that when I use a list, list in this case, and give it a class name, like in this case "navigation", I could only work on

.navigation ul

and

.navigation li

. I tried to make some changes using

.navigation

but nothing actually happened.

One thing I don't understand: if I have everything in pixels, say, and I want to convert everything to percentage how do I calculate the right size?
thanks

[Felixius]

Hi Violet,

Just a warning that I am shooting from the hip here... I hope that what I wrote works and makes sense...

I use a plugin called firebug on firefox. It is really useful to see the cascade as well as what is working and what isn't in the cascade. Sometimes you want to affect an item that is deep inside the cascade, but it doesn't work due to a universal style (which can be solved by increasing the scope of your style reference - which can get very long!)

While I cannot class myself as an expert, I would have to say that if you treat the following items as containers, and as you go deeper, the container sits in outer container and so on(in general). ^_^

The DIV.NAVIGATION contains the UL container which contains your LI container which contains your A.

Each item (and if the A is displaying as a block) can be styled and affect the cascaded items down the line.

SO! (heh) If you want to affect the div.navigation container and you have things further down the cascade (such as the ul or the li or the a) that override any changes, then any items in the .navigation will therefore be overridden.

Phew!

I think that is the best explanation I can do without my coffee ^_^

The great thing about firebug is that it will show your stylesheet items that are being overridden by crossing it out. This is a great indication that in reference of the item being viewed, whether your styling code is functioning as intended.

As for the pixel to percentage conversion... um...

I guess it would be dependent on the min-width of the page. If your page width is say, 950px, and you have 5 buttons...

((min-width/#of buttons )/min-width)*100

950/5 = 190
190/950=.2
.2*100=20%

Then fine tune the percentage for any padding and/or borders?

Oh wow... is that right? um -_^

Felixius

[Violet_82]

Thanks for that, the div explanation is crystal clear : - )!

About the percentage, in your example:
950/5 = 190 fine, to calculate the width of each button
190/950=.2 (why do you do this?)
.2*100=20% fine

In the meanwhile I will tweak the minimum width to house the image
thanks for all your help : - )