Mon, 2004-05-10 13:26
I want to set up a box in a box in a box type layout, with floating elements in the innermost box.
The results of my efforts can be seen here.
(The CSS is here.)
Looks reasonable if the window is wide enough (the "Club message" and "Charities" texts then appear next to the address area), but if the window is made narrrower, these texts drop below the address. Also, the white area that contains the address and other texts does not fully align with the grey heading areas.
I want the texts to the right of the address to stay to the right, even when the window is narrowed; I also want the white area to be the same width as the grey.
I've been trying all sorts of combinations, but with no success -- what you see is my best effort!
Can anyone help, please?[/url]
Thu, 2004-05-13 11:44
#1
Boxes in boxes in boxes...
I'm sorry that no-one has been able to suggest a solution to the above problem. I guess it's too difficult! Can anyone, then, suggest a iste/forum/whatever, where I might have more success in finding the information required?
Thanks.
Thu, 2004-05-13 13:40
#2
Boxes in boxes in boxes...
I did look at it, but sorry all of your CSS was messy and did not have the time to give you a fix.
Basically your code is doing what you designed it to do. Floats are designed to drop when there is not enough room for them.
Maybe you could have a fixed size containing div to hold the floats so that they will not be squashed and forced down.
Other
I could not understand why you had a 200 odd pixel left margin? I think you are designing based on the size of your monitor not based on how you would like everyone to see it.
You seem to be trying to use the voice family hack, yet have not attributes after them.
Regards
Day
Thu, 2004-05-13 15:28
#3
Boxes in boxes in boxes...
Thanks for the response.
The left margin is there in order to be able to take something else when (if) I can sort this problem out.
A fixed size would not resize were the viewer to resize the window, would it?
Sun, 2004-05-16 14:39
#4
Boxes in boxes in boxes...
No would not
You could try using %'s
I think first of all you should be asking yourself a question.
Is it my intention to be a web designer?? or am I just looking to get a site up and running for my use??
If the answer is the latter then I would suggest you get a reasonable WYSIWYG editor like front page or something else. I am not critisising, as that is how I started off. A WYSIWYG editor is a great way to see how things are done and learn html. From there you can move on to CSS.
other -
a) you have a script at top of your page which means that IE will not correctly pickup the doc type and will move in to quirks mode, incorrectly interpretating the box model.
b) you have some Iframe opr some type of script at the bottom of your page which looks strange.
Regards
Day
Sun, 2004-05-16 15:05
#5
Boxes in boxes in boxes...
Both a) and b) are code added to my own code by the Wanadoo server. Whether this is there or not, the behaviour is the same (tested locally).
I think that perhaps the problem is poorly defined. What I want to achieve, using CSS, is the following to have three elements, Row A, Row B, Row C, if you like, though Row C will, in fact, contain more than one line of text..
The three elements make up a unit. The first two elements contain a single line of text each; they have the same colour background. The third element (the large one) has a different colour background and can contain two parts: a left side that will be a name and address and a right side that will contain some additional information that might or might not be present. The left and right-hand texts should be vertically aligned with each other (tops match) and should expand and contract with the window.
All elements must have the same width as each other, including when the window is expanded or contracted. The height of the third element is variable.
Mon, 2004-05-17 05:14
#6
Boxes in boxes in boxes...
Which can be done in either tables or CSS. (Easier with tables and a WYSIWYG editor)
I looked at your code and CSS and estimated about an hours work to fix it (for me, but then I can be slow sometimes 
although it may be easier to restart as you have CSS that does not seem to relate to anything plus excess code. Anyway hence may question about wanting to be a web developer or just getting it to work.
If Web developer we can direct you to all the different CSS resources which will get you started, or for example
This took me ten minutes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html>
<head>
<title>Untitled</title>
<meta name="keywords" content="put keywords here seperated by comma's" />
<meta name="description" content="put a description here" />
<meta name="robots" content="all" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
body
{
color: #000000;
background: #ccddee;
margin: 18px;
font-size: 12px;
font-family: verdana, trebuchet ms, arial, lucida sans, helvetica, sans-serif;
padding: 0px;
}
p { text-align: justify; }
a:link
{
text-decoration: none;
color: #cc0000;
font-weight: bold;
}
a:visited
{
text-decoration: none;
color: #cc0000;
font-weight: bold;
}
a:hover
{
text-decoration: none;
color: #222222;
font-weight: bold;
}
h1 { font-size: 22px; }
h3 { font-size: 10px; }
h1, h2, h3
{
margin: 0px;
padding: 0px;
}
hr
{
width: 50%;
}
table#content
{ position: relative;
border: 0;
margin: 0px 0px 10px 202px;
}
.texttitle
{
font-weight: bold;
font-size: large;
color: #ffffff;
border: 1px solid #000000;
border-bottom: 1px;
margin: 0px;
padding: 5px;
background-color: #444444;
}
.texthead
{
font-weight: bold;
color: #ffffff;
border: 1px solid #000000;
border-bottom: 1px;
margin: 0px;
padding: 5px;
background-color: #444444;
}
.textmain
{
font-family: palatino, georgia, verdana, arial, sans-serif;
color: #000000;
font-size: small;
font-weight: normal;
background: #efefef;
border: 1px solid #000000;
border-top: 1px solid #000000;
line-height: 120%;
padding: 10px;
}
.textmain a,
.textmain a:link,
.textmain a:visited,
.textmain a:active,
.textmain a:hover
{
font-weight: normal;
text-decoration: underline;
}
.textaddress
{
font-family: palatino, georgia, verdana, arial, sans-serif;
color: #000000;
font-size: small;
font-weight: normal;
background: #efefef;
border: 0px solid #000000;
border-top: 0px solid #000000;
line-height: 120%;
padding: 10px;
width: 40%;
}
.message
{ margin-bottom: 20px;
padding: 10px;
padding-left: 20px;
font-size: 12px;
font-family: Arial, Verdana, Geneva, sans-serif;
font-style: normal;
color: black;
width: 60%;
}
</style>
</head>
<body>
<table id="content">
<tr>
<td>
<div class="texttitle">Argentina</div>
<div class="texthead">2001 Elvis Presley Fan Club Official De Argentina<span style="font-size: 14px; font-style: italic; font-weight: normal"> email: <a href="mailto:[email protected]">dummy email link</a></span></div>
<div class="textmain">
<table>
<tr>
<td class="textaddress"><div>David Neale<br>Address line 1<br>Address Line 2<br>Address Line 3<br>Maybe a telephone/Fax number</div></td>
<td class="message"><div><span style="font-weight: bold;">Club message:</span> A message to the members and potential members.<br><span style="font-weight: bold;">Club charities:</span> An indication of charities supported..</div></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
using some of your styles, and tables. It now also sits 202px from left which you had overidden with a float: right anyway.
As I said it will depend on which path you want to take.
Quote:
Both a) and b) are code added to my own code by the Wanadoo server. Whether this is there or not, the behaviour is the same (tested locally).
Actually behaviour may be same, but your doc type makes no difference, as the Wanadoo code makes IE render your site in Quirks mode. You should ask themn to put all the code at the end instead. (if they can)
Regards
Day
Mon, 2004-05-17 07:38
#7
Boxes in boxes in boxes...
The extra coding is for other elements, which are not part of the problem, but which will be used in the final layout.
Your solution does not produce the required result, either in Safari or in IE. Also, you use tables, rather than pure CSS. Never mind, thank you for your attempt. I'll look around to see if I can find a CSS solutioin to it: I'm sure one exists!
Again, thanks for the try.
Mon, 2004-05-17 11:31
#8
Boxes in boxes in boxes...
Yes a CSS solution does exist but it takes quite a few hacks, hacks like these -
http://www.csscreator.com/css-forum/ftopic3186.html
http://css-discuss.incutio.com/?page=BoxModelHack
http://www.positioniseverything.net/guests/floatIndent.html
http://www.positioniseverything.net/explorer/doubled-margin.html
http://www.positioniseverything.net/explorer/escape-floats.html
Don't fall into thinking that pure CSS must always be used, unless you plan to become a web developer and want to learn all about it. If all you want is good results on your page and you are a newbie, then use tables. They will be supported for many years yet, and until browsers are more compliant (more specifically IE) tables will give you less headaches.
From your code I get the impression you are quite new to html and CSS, and that is why I am asking you the question of what you are looking for.
If you do want to get into CSS then the links above will help you get to some sites that have good links. I would also suggest you look here http://www.csscreator.com/links/linkspage.php
But if you just want to get your pages working correctly then relook at the code I gave you, as -
It should work exactly the same in all browsers,
It no longer sticks out the side,
Text does not drop when you resize, and
If you need to reposition it, it will be easy.
Note - the biggest item I fixed was the left margin of 202px which was totally ignored as you were floating the contained items to the right, and would have always been ignored as per the code. This will make the box move back towards the centre and may be why you think it is not working correctly.
Regards
Day