Text Box Problem

[wbmkk]

Hi

I am developing a web site, but need some advice please. I am a beginner, by the way, only reading my first HTML and CSS book within the past few weeks.

Each page will have numerous text boxes on screen, each colored differently

Reading through various books etc I note that there is a serious problem with some old IE browsers, meaning boxers can be a bit problematic to position. I therefore need some simple advice, considering I am very new to this web creation lark, how best to overcome the problem.

Just to add some clarification first, on my proposed site the boxes will not actually touch each other at all, but will be laid out, like bricks in a wall (with the gaps where the cement would go)

I understand the problem concerns margins and padding, so I was thinking of keeping the padding and margin properties at zero for each of my boxes, set sizes for each box and make sure the font inside is small enough not to force the boxes to extend.

Taking this in effect, will the infamous IE box model problem still be a problem

If so, has any reader got a link to am ‘easy to understand’ hack ?

Last question, I was reading that more than one CSS style file can be linked to a web site. Would it be feasible to have various styles sheet options, then on the home page of my site, ask the user to pick a browser. The style sheet could then be set as required; no doubt there is a Java script to do that

Many thanks for any input given !!

 

[brpcraig]

It's hard to say without actually seeing your page. I would suggest starting by making all of the inputs inline with each other. Make a small margin and contain them in an appropriately sized div. They should word wrap giving them the effect you want.

If this doesn't work for you post your page online and I can help you further.

 

[wbmkk]

Thanks brpcraig

I am still at the early stages, so there’s nothing really to show; I’ve just been practising various things up until now.

On my proposed site, there will be a header with horizontal navigation buttons directly underneath.

Now the tricky bit …

Below, I want each page to be made up of numerous text boxes, each coloured differently, but not quite touching each other, perhaps 6 rows in total with 4 boxes on the 1st, 3rd and 5th rows and 5 on the 2nd, 4th and 6th rows

Imagine a wall built with different coloured large-size bricks, between thick beds of black mortar.

The boxes are to have a fixed height. If any text overruns downwards, I’ll use the overflow property. I will not need any horizontal scrolling as there will not be much text on each row

I might have a left navigation area too, but that would be pretty simple. I’d then just have to either reduce the number of text boxes in the main body or reduce their widths

thanks !

 

[PixelPusher]

To create the "brick wall" effect, I would either use an list for each row or float a set of divs within a container div. Use css to style the height and width for each brick (text box). If you are going to use lists, just stack four list on top of each other. If you use divs, they will automatically wrap.

To create the mortar between them, use margins to space the text boxes apart from one another, and set the background of the container to the mortar color.

If you need an example let me know.

 

[wbmkk]

Hi Pixelpusher, thanks for your reply

Firstly, a bit of background

A very kind chap on another web design forum provided me with the following code details

CSS
#container { width: 860px; margin: auto; }
.clear { clear: both; width: 100%; height: 0; visibility: hidden; }
.left { float: left; width: 250px; margin: 5px 10px; } /*top & bottom 5px, sides 10px*/
.right { float: right; width: 300px; margin: 5px 10px; }

Markup:-
<div id="container">
<div class="left"><p>..........</p></div>
<div class="left"><p>..........</p></div>
<div class="right"><p>..........</p></div>
<div class="clear">&nbsp;</div> <!--forms invisible barrier between rows-->
<div class="left"><p>..........</p></div>
<div class="left"><p>..........</p></div>
<div class="right"><p>..........</p></div>
<div class="clear">&nbsp;</div>
</div>

I tried messing about with this and it seemed to work without any problems

I added a background colour, just so I could see the boxes and even added an extra line of 3 boxes.

I opted to only use the ‘left classes’ really because I couldn’t see how the right class fitted in and everything seemed to work all right. Maybe I am missing something, as the right class was obviously used for a good reason.

I added a border to each and have been adding some text and still all is OK, but I have hit on a bit of a snag

I want to use different border and background colours for each box.

Would the easiest way just to re-write the code and styles, but instead of a single class or maybe two (if I do need the right one for a particular reason) just write a class for each box, for example ‘box1’ ‘box2’ … ‘box 20’ etc etc

If you could provide an example, I could have a look and it might give me a bit more knowledge.

I only read my first HTML book a few weeks ago.

Regards from the UK !

Brian