11 replies [Last post]
roei
Offline
newbie
Last seen: 13 years 13 weeks ago
Joined: 2007-08-26
Posts: 5
Points: 0

Hi

I want to ask you a question about CSS.
I re-built my web site using DIV tags and CSS. I didn't use tables this time.
My goal is to make the main content look like a movie screen and stretch horizontally for any screen resolution.
The problem is that the "content" div collapses to the bottom and the site doesn't look right. I need it to float to the left and stretch if necessary.
I can't fine what I am doing wrong. I will appreciate it if you can take a look at the web site and the code and tell me what my mistake is.
I made only one page so there is not much to look through.
My site address is: http://www.telepatia.co.il/new/index.htm and is in Hebrew so don't mind if you can't read the font or you get gibberish.
If you have any more recommendations, I will take it seriously.
Thanks in advance,
Roei

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Not sure what you're after

Not sure what you're after with this, It fills the screen and is fluid width.

You need to clear up a couple of things:

You have used an ID more than once which isn't allowed so your #bar will need to change to a class.

You have used a Windows character set, I would change that to a utf-8 version.

When submitting posts give it a few seconds and if things are slow let it time out before re-submitting, I've removed the duplicates

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

roei
Offline
newbie
Last seen: 13 years 13 weeks ago
Joined: 2007-08-26
Posts: 5
Points: 0

Hi Hugo, I made the some

Hi Hugo,

I made the some changes. I also put the content div at an absolute position. I also used a script that updates the width of the content div and the size of the text if it viewed by 800*600 screens. I still have a problem: If I shrink the window, the content div protrudes to the left. Can't I make it stay in place and change its width while changing the browser window size?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Yes you can , by not stating

Yes you can , by not stating widths allowing the element at block level to take all available viewport width or if requiring a narrower than viewport width using margins to push the elements edges in.

It is not a good idea to use position absolute nor to try and start scripting these sorts of aspects of main layout.

You can also work with em widths to achieve sizing according to the browser/user font size set, which is the 'Elastic' approach.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 12 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Bored, and just checking up on Hugo

A lazy Sunday afternoon, and bored. So here's an example of what Hugo's talking about.

Just the selector rules that I changed are shown. N.B. It's a Good Thing® to spend a few bytes to make the stylesheet easily human read with line feeds and indention.

No changes to the html markup were made. It's nice to see valid markup. You should change to a strict DTD for any new document.

body { 
  background-color:#fff; 
  font: 14px arial; 
  color:#000; 
  text-align: right; /*set text alignment globally*/
  direction:rtl; 
  margin: 0 5px; 
  }

#container {
  display: inline-block; /*part 1 of IE6 tripswitch hack*/ 
    /*see http://www.tanfa.co.uk/css/examples/tripswitch-demo.asp for 
      Claire Campbell's tripswitch hack*/
  margin: 8px 0 5px; 
  overflow: hidden; 
    /*see http://garyblue.port5.com/webdev/floatdemo.html */
  border: 1px solid #000; 
  background: white url(faux-col-ddd.png) right repeat-y;
    /*see attached image for "faux column" hack, Google for explanation*/
  }

#container {
  display: block; /*part 2 of IE6 tripswitch hack*/
  }

#side {
  font-size: 12px; 
  float:right; 
  width:200px; 
  background-color:#ddd; 
  }

#content{ 
  line-height: 18px;
  margin-right: 200px;
  padding-right: 10px;
  }

#content h2 {
  font-size: 19px; 
  font-weight: bold; 
  color: #000; 
  padding-top: 5px; 
  margin-bottom: 5px;
  padding-bottom:4px;	
  border-bottom: 2px dashed #f60;
  }
	
#links ul {
  line-height: 40px; /*centers text vertically (specific to this) in container*/
  margin-top: 10px;
  text-align: center;
  }

cheers,

gary

AttachmentSize
faux-col-ddd.png 191 bytes

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

roei
Offline
newbie
Last seen: 13 years 13 weeks ago
Joined: 2007-08-26
Posts: 5
Points: 0

kk5st, you are the

kk5st, you are the man!
Thank you for the time you spent to correct my css. I appreciate it very much.
I will look over and over again at your solutions to study my mistakes.
I wasn't aware of the hacks you put in the code an all.
To preserve the side div 1px left border with using the "faux column" hack, I re-made the background at 201px wide with black 1px border and it works.
One more question: I want to put the links at the link div apart from each other and it is wrong in FireFox. How do I do that?

Roei
:thumbsup:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote:Bored, and just

Quote:
Bored, and just checking up on Hugo

Laughing out loud

Clearly a good job that you did, naturally I had forgotten that it would be easier to just post a layout example. Socrates where are you :rolleyes:

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 12 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Naw, Hugo had the fix, I

Naw, Hugo had the fix, I just demonstrated it.

Inline elements don't have margins. Try this.

#links ul { 
  overflow: hidden;
  line-height: 40px; /*centers text vertically (specific to this) in container*/
  margin: 10px auto 0;
  width: 485px; /*pick a number*/
  padding: 0; /*zeros indention on Safari/Konqueror and Moz/Gecko*/
  }

#links li { 
  text-align: center;
  float: right;
  width: 12.5%;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

roei
Offline
newbie
Last seen: 13 years 13 weeks ago
Joined: 2007-08-26
Posts: 5
Points: 0

In IE it doesn't look well...

In IE it doesn't look well...

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 12 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Hugo wrote:<snip> naturally

Hugo wrote:
<snip> naturally I had forgotten that it would be easier to just post a layout example. Socrates where are you :rolleyes:

Some folks can learn the abstract and produce the concrete. Others can deduce the abstract from real examples. I fall more into the second category.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 12 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

roei wrote:In IE it doesn't

roei wrote:
In IE it doesn't look well...

What, specifically, is the problem?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

roei
Offline
newbie
Last seen: 13 years 13 weeks ago
Joined: 2007-08-26
Posts: 5
Points: 0

In FireFox the bottom links

In FireFox the bottom links line looks fine.
In IE the valid html link goes under the rightmost link and expands the link div height.
How do I solve this?