22 replies [Last post]
AndyD
AndyD's picture
Offline
Enthusiast
Last seen: 3 years 41 weeks ago
Joined: 2005-03-17
Posts: 160
Points: 48

HI All,
I am trying to layout a page with three columns beneath a header graphic and a horizontal navigation bar. I want to place three groups of products in the content area, a main central column set out as a table format (done already) and two narrower columns with 4 products one above the other on either side of the central colum. I wondered whether this could be done with ul's for everything? My central column is presently layed out as a ul, but placing one on the left leads to the central one losing position and moving down the page.

Cheers
Andy

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

link?

link?

AndyD
AndyD's picture
Offline
Enthusiast
Last seen: 3 years 41 weeks ago
Joined: 2005-03-17
Posts: 160
Points: 48

oops....

oops....

orange-house.co.uk/Shine/index_blonde_hnav3.htm

I wanted to try and have a column either side of the central column... oh and on another thread I mention that the dropdown component of the nav drops under the central box.... just in case you didn't read that...

Do I have to float each of the ul or enclose each in a div and float that perhaps...?

Cheers
Andy

AndyD
AndyD's picture
Offline
Enthusiast
Last seen: 3 years 41 weeks ago
Joined: 2005-03-17
Posts: 160
Points: 48

"Oh Marge"-in

I tried playing with margins for the uls but only seem to have bjorked it in FF, and making it almost acceptable in IE.... oh damn!!!

orange-house.co.uk/Shine/index_blonde_hnav3.htm

Andy

AndyD
AndyD's picture
Offline
Enthusiast
Last seen: 3 years 41 weeks ago
Joined: 2005-03-17
Posts: 160
Points: 48

I have tried centreing the

I have tried centreing the central box on a page and it doesn't seem to be happening and my image doesn't appear in FF... can anyone offer any advice please.. tearing out my hair.. and I don't have much.... please save a baldy today....
The hnav3 has columns as ULs whilst the ULs are contained within divs for the hnav3_sunbeds page.

Central column with smaller boxes
orange-house.co.uk/Shine/index_blonde_hnav3.htm
Example of Central column with items/products
orange-house.co.uk/Shine/index_blonde_hnav3_sunbeds.htm
CSS for left, right and central columns

/*Central column of items*/
.wrap {
/*margin-left: 20px;
margin-top: 20px;*/
margin: 20px auto 0 50px;/* 10 changed to 100, then 50 and auto changed to -3px*/
width: 470px;
list-style:none;
background-color:#fff; /*added*/
float:left;

}
.wrap li {
float: left;
width: 110px;
height: 120px;
margin: 2px;
text-align:center;
font: 11px Tahoma;
padding:0;
border: 1px solid #FFB400;/*#FF6600*/
background-color: #fff;
overflow:hidden;
line-height:120px;
background-color: #fff;/*#ffa;*/
position:relative;
padding-bottom:20px;
}
.wrap li a{
width: 110px;
height: 120px;
display:block;
background-image: none; /*added*/
background-color:#fff; /*added*/
}
.wrap img {
cursor:pointer;
border: 0;
vertical-align: middle;
}
.wrap a:hover {
background-color: #fff;
}
.wrap p{
height:20px;
position:absolute;
top:120px;
left:0;
width:110px;
color:#fff;
z-index:100;/*999*/
background:#FFB400;/*red*/
line-height:20px;
}
/*LHS column of items*/
.wrapleft {
/*margin-left: 20px;
margin-top: 20px;*/
margin: 20px auto 0 5px;
width: 150px;
list-style:none;
background-color:#fff; /*added*/
float:left;/*added*/
}
.wrapleft li {
float: left;
width: 200px;
height: 200px;
margin: 2px;
text-align:center;
font: 11px Tahoma;
padding:0;
border: 1px solid #FFB400;/*#FF6600*/
background-color: #fff;
overflow:hidden;
line-height:120px;
background-color: #fff;/*#ffa;*/
position:relative;
padding-bottom:20px;
}
.wrapleft li a{
width: 200px;
height: 200px;
display:block;
background-image: none; /*added*/
background-color:#fff; /*added*/
}
.wrapleft img {
cursor:pointer;
border: 0;
vertical-align: middle;
}
.wrapleft a:hover {
background-color: #fff;
}
.wrapleft p{
height:20px;
position:absolute;
top:120px;
left:0;
width:200px;
color:#fff;
z-index:100;/*999*/
background:#FFB400;/*red*/
line-height:20px;
}

/* Right hand Side Column of items*/
.wrapright {
/*margin-left: 20px;
margin-top: 20px;*/
margin: 20px auto 0 -3; /*-3 was auto*/
width: 200px;/*150*/
list-style:none;
background-color:#fff; /*added*/
background-image:url(FakeBakeProf.jpg);/*added*/
float:right;/*added*/
}
.wrapright li {
float: right;
width: 200px;/*110px*/
height: 279px;/*120*/
margin: 2px;
text-align:center;
font: 11px Tahoma;
padding:0;
border: 1px solid #FFB400;/*#FF6600*/
background-color: #fff;
overflow:hidden;
line-height:120px;
background-color: #fff;/*#ffa;*/
position:relative;
padding-bottom:20px;
}
.wrapright li a{
width: 200px;/*110*/
height: 279px;/*120*/
display:block;
background-image: none; /*added*/
background-color:#fff; /*added*/
}
.wrapright img {
cursor:pointer;
border: 0;
vertical-align: middle;
}
.wrapright a:hover {
background-color: #fff;
}
.wrapright p{
height:20px;
position:absolute;
top:120px;
left:0;
width:200px;/*110*/
color:#fff;
z-index:100;/*999*/
background:#FFB400;/*red*/
line-height:20px;
}

XHTML for the left, central and right hand columns




  • text






  • sunbeds

    Sunbeds



  • vertical tanning systems

    Vertical Tanning



  • collection of lotions

    Lotions



  • Lamps

    Lamps



  • Fake Tan lotions and equipment

    Sunless



  • Salon Essentials

    Salon Essentials



  • Services

    Services



  • Teeth Whitening products and equipment

    Teeth Whitening



  • Slimming products

    Slimming



  • Beauty equipment and accessories

    Beauty



  • Various accessories

    Accessories



  • Service and Maintenance

    Caption







  • Fake Bake Spray Tan Booth

  • Supre range of lotions

  • Range of slimming products




Cheers
Andy

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

add margin: 0 0 0 50px to

add margin: 0 0 0 50px to .item

AndyD
AndyD's picture
Offline
Enthusiast
Last seen: 3 years 41 weeks ago
Joined: 2005-03-17
Posts: 160
Points: 48

Many thanks

And as if by Magic...

Many thanks Wolf.

You've saved a lot of hair pulling...

Andy

AndyD
AndyD's picture
Offline
Enthusiast
Last seen: 3 years 41 weeks ago
Joined: 2005-03-17
Posts: 160
Points: 48

Many thanks Wolf, I did reply but

Anyways the index page has something weird happening with the images in the central box, they've all moved upwards. Need to play with that...orange-house.co.uk/Shine/index_blonde_hnav3.shtml. I must have done something else when playing around...
I added the nav as an SSI. Don't think I played with much more though. IN the process of doing this the wrapper div text in Dreamweaver has changed colour to black as has the end div after the SSI menu link but it doesn't seem to have affected anything within the page, I don't think.....

Cheers
Andy

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

To solve the images moving

To solve the images moving up, you need to correct this:

.wrap span{position:absolute;top:50%;width:100%;left:0}
.wrap a img {
	cursor: hand;
	position:relative;
	top:-50%;
	margin-top:-20px;
}

The MS conditional comments belong in the html and not in the css, where they are ignored and the rules read by other browsers.

Never use the dreamweaver for testing. In fact, I would recommend dumping it all together, but some find it very useful as an editor and site manager. I'll have more time this coming week to help further.

AndyD
AndyD's picture
Offline
Enthusiast
Last seen: 3 years 41 weeks ago
Joined: 2005-03-17
Posts: 160
Points: 48

Conditionals sort IE problem, But FF still messed up

Moving the conditional comments to the html page seems to sort the issue.

Cheers
Andy

AndyD
AndyD's picture
Offline
Enthusiast
Last seen: 3 years 41 weeks ago
Joined: 2005-03-17
Posts: 160
Points: 48

Something odd in Lotions pages with IE

HI anyone...
I uploaded a few pages to shine.uk.com and something odd has appeared on the lotions pages - not all of the pages are yet complete.
At the bottom of a few of the pages the last sentence is repeated outside the bounding box of the last item. I can't see where this could have happened.

Cheers
Andy

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Could it be IE's Duplicate

Could it be IE's Duplicate Character bug?

http://www.positioniseverything.net/explorer/dup-characters.html

Verschwindende wrote:
  • CSS doesn't make pies

AndyD
AndyD's picture
Offline
Enthusiast
Last seen: 3 years 41 weeks ago
Joined: 2005-03-17
Posts: 160
Points: 48

YUP

HI "thepineapplehead",

Yup, you're right!
After adding the alteration to CCs the problem was solved.
Good old M$.
However after adding all the alterations the first couple/few commented out statements/labels e.g. appear in FF.... I tried deleting the comments form the source but the next appears.
Many thanks

Andy

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Where? I only see one

Where? I only see one comment in your HTML, and it's not appearing on the page for me.

Verschwindende wrote:
  • CSS doesn't make pies

AndyD
AndyD's picture
Offline
Enthusiast
Last seen: 3 years 41 weeks ago
Joined: 2005-03-17
Posts: 160
Points: 48

Oops, wrong link.

Oops, wrong link.
The error should be visible here shine.uk.com/lotions/swedishbeauty.shtml. It is visible on the other Lotion pages that I've uploaded too.

Cheers
Andy

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

I'm not seeing the comments

I'm not seeing the comments show through?

Verschwindende wrote:
  • CSS doesn't make pies

AndyD
AndyD's picture
Offline
Enthusiast
Last seen: 3 years 41 weeks ago
Joined: 2005-03-17
Posts: 160
Points: 48

wrong link

OOps,
I posted the wrong link. I didn't add the !IE to that page. Correct link is shine.uk.com/lotions/protan.shtml

Cheers
Andy

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Andy

Hi Andy

Find this code:

Start of the productpic div -------------------------



Start of the producttitle div

It should be:




2 of the endif's were ended wrong.

Trevor

AndyD
AndyD's picture
Offline
Enthusiast
Last seen: 3 years 41 weeks ago
Joined: 2005-03-17
Posts: 160
Points: 48

Many thanks

HI Cleva

Many thanks. You've no idea how often I read through the source and never spotted it....

Cheers
Andy

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Done it so many times, that

Done it so many times, that now if I see a comment showing I search for a duff comment ending from instinct.

AndyD
AndyD's picture
Offline
Enthusiast
Last seen: 3 years 41 weeks ago
Joined: 2005-03-17
Posts: 160
Points: 48

mmmm

mmm was sure I tried it and it sorted the problem... have uploaded again and it seems to be happening still.... cleared my cache just in case, but no joy.... darn.... might just, reluctantly, strip out all the comments....

Andy

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hate to say this, but the

Hate to say this, but the version I just loaded into a clean cache still has the duff endif endings in. Your upload must have failed.

AndyD
AndyD's picture
Offline
Enthusiast
Last seen: 3 years 41 weeks ago
Joined: 2005-03-17
Posts: 160
Points: 48

Aye

Yup, I've noticed that too... uploading and then viewing source and although the upload seems to be going, the version online still has the error in the endif. Whilst previewing the page on my pc, I still get the problem....

Deleting the first 3 comments seems to sort the FF problem... now that is weird.....

Andy