Problem with my site's text area

  Red Devil 22:44 02 May 2007
Locked

Hi all,

I'm having an issue with a website of mine that I'm redesigning - click here - and I can't seem to work out a solution to it so I'm hoping that one of the bright sparks that frequent here can help! ;)

Basically, the main text area is supposed to occupy a fixed portion of the screen - see click here to see how I'd LIKE it to work - BUT instead if will adjust to fit the text/photo content placed in this text area - see click here to see the "screwed up" version.

Now, I've done all the styling/positioning/defining of the text area using CSS positioning, etc.

Is there any way to achieve what I'm looking to achieve using CSS or do I have to go away and rethink the way I've approached this?

This is the CSS file I've used to style the site:-

body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
color: #FFFFFF;
background-color: #000066;
}
td,th {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
color: black;
background-color: #CCCCCC;
}
#header {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
background-image: url(/Images/RoofFascia.gif);
background-repeat: repeat-x;
}
#navlist {
color: white;
background-color: #000066;
padding: 5px;
list-style-type: none;
margin-top: 180px;
margin-left: 0px;
}
#navlist a {
display: block;
color: white;
background-color: black;
text-decoration: none;
padding-left: 7px;
border-bottom: 1px solid #000066;
border-top: 1px solid #000066;
width: 198px;
}
#navlist a:hover {
color: white;
background-color: gray;
}
#navlist a:active {
color: red;
background-color: gray;
}
#maintextarea {
color: #000066;
background-color: white;
/*background-image: url(../Images/HeaderNew.GIF);*/
background-repeat: no-repeat;
background-position: center;
padding: 5px;
position: absolute;
top: 190px;
left: 225px;
margin-right: 15px;
}
#footer {
background-color: #000066;
text-align: center;
color: white;
font-size: x-small;
line-height: 4em;
margin: -5px -5px -15px -5px;
}
.ImagePlacingRight {
float: right;
padding: 5px;
width: 260px;
text-align: center;
color: #993300;
}
.ImagePlacingLeft {
float: left;
padding: 5px;
width: 260px;
text-align: center;
color: #993300;
}
.mainlink a {
text-decoration: none;
font-size: small;
font-weight:bold;
color: red;
}
.mainlink a:hover {
color: #00CC00;
}
.mainlinkTop a {
text-decoration: none;
font-size: medium;
font-weight:bold;
color: red;
}
.mainlinkTop a:hover {
color: #00CC00;
}
.navlistImages {
color: white;
background-color: #000066;
padding: 5px;
list-style-type: none;
margin-top: 10px;
margin-left: 0px;
}
.navlistImages a {
display: block;
color: white;
background-color: #000066;
text-decoration: none;
padding-left: 7px;
border-bottom: 3px solid #000066;
border-top: 3px solid #000066;
width: 150px;
}
.mainNavbar {
text-decoration: none;
color: #00FF00;
}
.mainNavbar a {
text-decoration: none;
color: #FF00FF;
}

Any help that anyone can provide in solving this conundrum will be greatly appreciated.

Many thanks

  Eric10 14:08 03 May 2007

Hi Red Devil,

I can't see a way within the CSS of making it do what you want without setting a fixed width for the 'maintextarea' which will prevent it expanding to fill higher resolution screens. I've tried one or two methods that worked in IE but not in Firefox.

The best I can offer is a workaround. It appears that the 'maintextarea' only expands across the screen when there is a full length line of text on the page, so why not include a line of text that is long enough to word wrap. Set the text colour to white and reduce the line-height to minimise its effect on the layout of your page.

I have experimented with a CSS class of:

.fixwidth {
line-height: 20%;
color: #ffffff;
}

and used it inside the 'maintextarea' div on your 'BracesNew.htm' page like this:
<div class="fixwidth">w w w w w w w w w w w w w w w width setting text w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w</div>

The spaces between the letters allows the line to break at will. This works in IE, Firefox and Opera.

  Red Devil 20:53 08 May 2007

Hi,

I did consider that myself as an option but was hoping there was something native to css that would achieve the same thing.

Your solution is a little more elegant than the one I had in mind so I've incorporated your code into my css file and it works perfectly.

Many thanks.

  Eric10 12:39 09 May 2007

I'm glad it was of some help Red Devil. After I had posted I noticed that in Firefox and Opera you can just see the descender of the letter 'g' when the line is at the bottom of the page. This can easily be rectified by either changing this part of the text from 'width setting text' to something like 'set text width' which doesn't have any descenders or just leave it out and use more of the letter 'w' to take up the space.

  Red Devil 17:03 13 May 2007

I noticed that myself so put in an extra paragraph after the code to hide the text where necessary.

Your help's been very much appreciated as I've now been able to fully update my site over the lest couple of days with the new site design.

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Xiaomi Mi Mix 2 review

See mcbess's iconic style animated for Mercedes-Benz

iPhone X news: Release date, price, new features & specs

Black Friday 2017 : date, sites participants & bonnes affaires