Strategy to Positioning this Text on Side Windows

HTML & CSS
1

Hello everyone,

I want to start this thread off with a confession: I have been using three different techniques to moving elements. The first one is using padding attributes. The second one is using margin attributes. The third one involves whenever I randomly think I need to use absolute or relative positioning, and then using top, left, right, bottom attributes.

SO!

With all that laid out, I should strategize on how to move this side window text into good position. The website is http://www.productreviewsbytyler.com You can see on the side windows how the text is incorrectly positioned.

Should I encompass the side windows’ content into a nested div and just move the div as one?

2

I gave you the code to place those side panels in your previous post.:slight_smile:

However, it seems you are adding more and more to those side panels now and changing then from a simple one off element into fully fledged columns now with content all the way down each column. You seem to be building this backwards as you really should start with a top down approach and start at the top, control the flow and build the page downwards with a logical progressions of elements.

It looks like a simple fixed width 3 floated column layout is what you are after now so you just need a fixed width wrapper to hold the columns then float three columns of correct width across the page and contained by the wrapper. Then you can stack the content in each wrapper starting at the top and building downwards and not starting at the middle and sticking things above and below willy nilly.

You need to think about the design a bit more and not just bolt things on as the whim takes you. Plan your work, structure your html and then style it as required. You seem to have taken the opposite approach :slight_smile:

The code I gave you before would offer a short term fix but I suggest you clearly mark out what you want to do on those side columns and what content they need to hold as content really should come first and design second.

3

Hm… Right on. I agree. This positioning stuff is just getting too crazy, and my work here just appears to be stapled up together meticulously. I can learn to be a better planner and organizer for my HTML. HTML first, then style it. :confused:

As far as the content you see for the side windows at http://www.productreviewsbytyler.com, this is the layout that I was aiming for (it just needs to be in a 3-column float). I do not aim to add any more content to the side windows for now- I’m sure of that.

So, in a 3-column float, I know I can make a wrapper left, wrapper center, wrapper right and assign float:left and float:right to left and right wrappers respectively. But how does this really work to float 3 columns? In the other thread, I thought we were talking about meticulously positioning that image (the quick fix).

4

Yes just float the three columns of the correct width and then make the wrapper the same width as those three floats and use margin:auto to center the whole lot.

Here are a few quick fixes for the page:


#container { margin:auto }
#leftside, #rightside {
	height:auto;
	min-height:700px;
}
* html #leftside { height:700px }
* html #righttside { height:700px }
#wrapper { width:auto }
#leftside .sideWindowHeaderText { margin:250px 0 0 120px; }
#rightside .sideWindowHeaderText { margin:250px 0 0 20px; }
.sideWindowHeaderText { width:140px }
#rightside { background-position:50% 65px }
#emailbox {
	bottom:auto;
	top:542px;
}
.sideWindowLinks { margin-left:90px }
#rightside .sideWindowLinks { margin-left:-10px }
.sideWindowLinks li { top: 0; }

However, without being rude that page could do with help from a proper designer as it looks a little bit of a mess and is very difficult to read.:slight_smile:

There are also too many things tied to widths and heights and the page has little flow. You can’t really just draw something and then expect it work on a webpage as there are so many other things to take into consideration. If you wanted graphical side panels then they really should be constructed in a way that allows them to expand width content. The same goes for your middle dotted line section and it should grow and shrink with the layout using background slices and repeated graphics and not just one big image.

Some things are viable and some are not and at times you have to make the right decision that something won’t work on the web.:wink:

5

Yeah, I think you’re right. I know how it can be done though. Would I need to make a new horizontal image for those windows and allow the page to spread horizontally. The side links need to be bigger, and therefore, more legible.

I think I may have improved it at http://www.productreviewsbytyler.com. The welcomestatement was hard to read, so I fixed that problem. I changed the emailbox image to text that’s easily read.

It’s odd that when I add margin-right to the leftside, the welcomestatement falls like 500px. Why is that??

6

There isn’t a room for a margin right on #leftside so something’s got to give.

You have three floats with widths that add up to the containers width. None of the floats can have margins as well.