15 replies [Last post]
1000i1
Offline
Regular
Last seen: 14 years 38 weeks ago
Timezone: GMT+1
Joined: 2006-05-07
Posts: 18
Points: 0

I'm trying to design a layout for a web page, what you'll see is just the layout, I'm not planning on sell the page with that colors Tongue.

Basically I've got 4 problems, the most important for me to solve is number 4. If you find any other inconsistencies please let me now.

Ok so the page is this: http://theriskshop.net/css/
The css is: http://theriskshop.net/css/css2.css

And the problems are the following:

1- On the blue section will be the logo, wich will be integrated on the background but I want it to be a link, so I've put an invisible floating box over it. It works well on FF but not in IE as it moves the links to the right.

2- On the red column I've got a problem when I put links larger than the width of the column, when this happens I get unexpected results, basically the whole page moves and everything gets out of place, a big mess.

3- In the center part, the text with style where I've got an hour and some title, I want these two boxes to go one after another, as if they were table cells, but when the title one contains 2 lines of text, the second line places under the hour, and I like it to start in the same place as the first line, where the hour ends.

4- The light green part is actually a div which has a transparent background, to achieve this I've put inside a div, two divs, one with the background and one with z-index:2 with the text, so I can get opaque text. The problem is that I want the containing div to have overflow, but as the div which contains the text has the z-index: 2, it doesn't detects that there's some overflow.

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 11 years 45 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

Several problems with layout

Hi,

Couple of things:
1. you are operating in quirksmode, because you do not have a doctype.
2. Your CSS and HTML have several errors. You need to validate. Wink
3. I think you may be making this more complicated then it needs to be. You may want to google "three column layouts."

- r

1000i1
Offline
Regular
Last seen: 14 years 38 weeks ago
Timezone: GMT+1
Joined: 2006-05-07
Posts: 18
Points: 0

Several problems with layout

Ok, thanks for the reply, but I don't think you solved much:

1- I don't know anything about doctypes, but I can say that even if I put <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> or some other doctypes I've tried the result is the same, and i must add that in IE I don't get the mouse reaction of a link when I move it over the logo part. I've read that I can't place a div inside an <a> tag as <a> is inline and <div> block, some suggestions???.

2 - Thanks for reminding me of validating I had totally forgotten, but all the messages I get (I've solved some on my localhost) don't seem to have any connection with the problem I'm having.

3 - I have to take a good look at that, I know it's not the best way of doing it, so any suggestion will be welcomed.

4 - Still no help? Come on !! I know someone might have a clue, so many experienced people arround here, I need that to work. Say anything you have in your head, even silly thinks, maybe they work!!

Thanks for the help.

drhowarddrfine
Offline
Leader
Last seen: 11 years 8 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Several problems with layout

<a> elements only work with inline elements. You can't put that on a <div>

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

1000i1
Offline
Regular
Last seen: 14 years 38 weeks ago
Timezone: GMT+1
Joined: 2006-05-07
Posts: 18
Points: 0

Several problems with layout

I don't mean to be rude, but it'd be nice if you just didn't tell me what I'm doing wrong (and I just said that that was wrong) but give me or suggest me how to solve the problem.

Thanks for the reply anyway, at least you tried to help.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Several problems with layout

It means that <a>s can't go around/outside divs, paragraphs, lists or any other block level element. The only things that can go inside <a>s are other inline elements like images and spans.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

1000i1
Offline
Regular
Last seen: 14 years 38 weeks ago
Timezone: GMT+1
Joined: 2006-05-07
Posts: 18
Points: 0

Several problems with layout

1000i1 wrote:

I've read that I can't place a div inside an <a> tag as <a> is inline and <div> block, some suggestions???.

So I was correct, I already knew that. What I'd like is some suggestion on how to do what I'm trying(which is explained on my first post), it doesn't help me much if you just say that I have a problem wich already know I have.

Ok, excuse me for this replys but it's been a bad day today, maybe I'm not expressing myself clearly, but it's just that I have so many problems and I'm getting 0 solutions when I know most people around here know how to solve most of the problems I have, I know it's not your fault I'm having this problems.

So thanks for the replys, and if anyone wnats to help me, I'll be more than pleased.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Several problems with layout

OK, let's deal with them one by one then and please update your page as we go along. Change this:

<a href='/unipau'>
<div class='link_home'>
</div>
</a>

to this:

<div class='link_home'>
<a href='/unipau'>
</a>
</div>

then set .link_home a to display: block and give it the dimensions of the div.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

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

Several problems with layout

I will provide some help but it will come in stages for a deliberate reason.
First you must understand somethings we are not here to serve this is not a paid for service and we are under no obligation to help anyone, to even slightly demand or expect that help should be forthcoming is wholly contrary to the spirit in which these sorts of forums operate.
please be careful in bringing your frustrations to the forum we all have them and I'm certain many of us may well be under pressure of work

Ok I'll have to stop there as I see that Tyssen has got in first so I'll leave you in his hands and just monitor the thread, and hope things get sorted for you.

Hugo.

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

1000i1
Offline
Regular
Last seen: 14 years 38 weeks ago
Timezone: GMT+1
Joined: 2006-05-07
Posts: 18
Points: 0

Several problems with layout

Ok, thanks for your replys.

Tyssen, if I put it this way I don't get what I want which is a transparent "link-div" because in that place in my background-image I'll have a logo and I want it to be a link to the home section.

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

Several problems with layout

you seem to after what is a very common technique based around setting a header graphic with an anchor link which is fully clickable over it's entire area, and revolves around setting the anchor correctly within either a div or h1 element.

It would help if you updated the link to reflect correct nesting as requested as things progress.

It will probably help you and be clearer how to achieve this technique if you give this link a study which covers the various methods used to achieve this.

http://www.stopdesign.com/articles/replace_text/

Hugo.

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

1000i1
Offline
Regular
Last seen: 14 years 38 weeks ago
Timezone: GMT+1
Joined: 2006-05-07
Posts: 18
Points: 0

Several problems with layout

I've finally come to a solution with the link Hugo provided and some google search, the final code is this:

 
//CSS 
.link_home{ 
  	height: 70px; 
 	width: 100px; 
	float: left; 
} 
 
.link_home a{ 
  	height: 70px; 
 	width: 100px; 
  	display: block; 
} 
 
//HTML 
		<div class='link_home'> 
			<a href='/css'> 
			</a> 
		</div> 
 
 


So problem 1 solved, thanks so much, if you feel like helping on the other 3 problems it'd be great.

PD: I've updated it in the link I provided too.

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 40 weeks 1 day ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

Several problems with layout

Sorry to tell you, but it is not solved yet. In Firefox the links show to the left and in IE they show centered, so obviously more work to be done here. The html does validate but the css doesn't.

Errors 
URI : http://theriskshop.net/css/css2.css 
 
    * Line: 88 Context : .cos 
 
      Property overflow-y doesn't exist : auto 
    * Line: 96 Context : .fons_transparent_b 
 
      Parse Error - opacity=50) 
    * Line: 97 Context : .fons_transparent_b 
 
      Parse Error - -moz-opacity:0.5; 
    * Line: 101 
 
      Parse Error - : 0.5; } .text_fosc 
    * Line: 113 Context : .peu 
 
      Invalid number : background-color pink is not a color value : pink 
 


If you look at the pink section at the bottom of the page in FX there are problems there too.

1000i1
Offline
Regular
Last seen: 14 years 38 weeks ago
Timezone: GMT+1
Joined: 2006-05-07
Posts: 18
Points: 0

Several problems with layout

Ohhh!! I had forgotten about the links moving Sad...
I don't know why I get those validating errors, I don't think the person who made the validator liked pink, because all the explorers put pink in that div, but that doesn't worry me if I change and put it blue I don't get the error anymore. And about the transparency errors.... I got that code from a webpage with a tutorial, and it works fine so I don't care much if the validator doesn't like it.

I'll take a look to those moving links.

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 40 weeks 1 day ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

Several problems with layout

Regarding pink, why not just use #ffc0cb I'm sure that will work.

But what I was commenting on was the way the text displayed in the pink area in Fx, see screengrab below.

1000i1
Offline
Regular
Last seen: 14 years 38 weeks ago
Timezone: GMT+1
Joined: 2006-05-07
Posts: 18
Points: 0

Several problems with layout

I don't care about the colors they're just to help me build the layout, in the end it'll be all transparent with a background image.

The problem with the text is problem number 4, the text is actually inside <div class='text_fosc'> which is inside <div class='cos'> that has overflow auto, but as <div class='text_fosc'> has z-index:2 <div class='cos'> doesn't detect that there's overflow and the scroll bars don't appear. I have absolutely no clue on how to solve this (I really need to have a transparent background). This is my real problem, the other 3 I think that I can figure out alternative ways of doing things, but in this I need it to work with the overflow on 'cos' (if I put overflow on 'text_fosc' it works, but I don't want that).

So ANY advice will be great. Thanks.