|
| |
|
|
smilling_sam
Posts: 7
Joined: 7/1/2004
Status: offline
 |
I'm going round in circles help - 7/1/2004 14:56:44
Hi can someone please help
I'm trying to redo a web page and I've spent a long time learning the basics of css and trying to avoid using tables, especially tables within tables within tables lol. Anyway my page is divided into a number of sections header, left navigation, main info section in the middle and a news column on the right side very much like a 3 column design.
I'd got my round corners sorted and my pure css rollovers on the left navigation it was coming together then I hit my nemisis the Footer!!
I can't get it sussed i want it to sit at the bottom of the page no matter how much infomation is entered above it or weather the text is resized. the only way I've managed to do it recently is to define an absolute position that is below the text when it is at it's largest stage which means for all normal people it's miles away, which isn't really that good :(
I've found a number of hacks but they seem to assume that there is one large block of text and places it after this but because my text is moved and in a smaller box this doesn't seem to work. I'm sure I'm just missing something obvious but I can't see it
I've spent all day on this and have asked a number of my friends only one got a footer in the right place for me and he did that by putting everything back in tables. Which is what I thought I was avoiding lol plus that upset my left hand links.
I'm sorry if I'm not making sence I think I have lost it please can someone help
heres something to look at
http://www.finesolutions.co.uk/newsite/index5.html
thats the nearest I got
if you want to laugh at my workin to get to this point just look through from ...index.html to I think I got up to index10.html
the table version is
http://www.finesolutions.co.uk/newsite/index8.html
Can someone please look over it and tell me what I've done wrong or suggest a better way of doing it.
I sit here hopfully
and slowly rocking !
Sam
|
|
|
|
smilling_sam
Posts: 7
Joined: 7/1/2004
Status: offline
|
RE: I'm going round in circles help - 7/1/2004 15:19:53
Lol now I'm replying to myself I really am mad,
anyway after posting the above question I found a message that said footers can't be positioned if the column are positioned absoluetly so I've made the main box relative this has helped alot although on server squashing of the window the footer does overlap the main colomn this is not a major problem but any comment on this point or my orginal problem would be happily recieved
Sam
Doh the address for the 2nd attempt is http://www.finesolutions.co.uk/newsite/index20.html
< Message edited by smilling_sam -- 7/1/2004 15:26:58 >
| |
|
|
|
smilling_sam
Posts: 7
Joined: 7/1/2004
Status: offline
|
RE: I'm going round in circles help - 7/2/2004 6:49:23
ok don't worry I havn't hit a major promblem yet mainly because I've been distracted checkin my mail ect I can find loads off things to do if I have to work lol.
Anyway I thought I would see if you could answer a querry I had. It's about the roll over links down the side of my page they work quite happily in IE they don't work in opera not sure why but I thought I'd let that go. Any way as soon as I try and define the doctype IE doesn't like my roll overs. I came to the desision of not defining the doctype which seems like a cop out but hey if it works go for it lol.
So I was just wondering if anyone knew what was happening. Heres the link again
http://www.finesolutions.co.uk/newsite/index20.html
The only thing thats changed is that I've entered the doctype as
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I have checked the code and it is valid
the page without a doctype is
http://www.finesolutions.co.uk/newsite/index21.html
it's just something for you to ponder over
right well thats enough work avoiding for me I better get down to it .
Happy puzzleing
Sam
| |
|
|
|
Giomanach
Posts: 6128
Joined: 11/19/2003
From: England
Status: offline
|
RE: I'm going round in circles help - 7/2/2004 7:42:12
Sam
From what I can see you're using absolute heights for the main nav links. This means you will only see so much of it on CSS compliant browsers (eg Opera).
You need to set the height or add padding to it so that you can see the full image
Dan
_____________________________
| |
|
|
|
smilling_sam
Posts: 7
Joined: 7/1/2004
Status: offline
|
RE: I'm going round in circles help - 7/2/2004 9:04:56
hi ya
I will validate the css now, but the problem had occured when both the html and the css were valid.
Dan, The A tag has a defined height of 95px and top padding of 45px. Is this problem because I'm appling this to the A tag if so I'm not sure what else i could apply the css to hmm I'll have to think about it
Sam
| |
|
|
|
smilling_sam
Posts: 7
Joined: 7/1/2004
Status: offline
|
RE: I'm going round in circles help - 7/3/2004 9:01:28
oh sorry I didn't think of that the whole css file can be found at http://www.finesolutions.co.uk/newsite/main20.css
the part conserning the links is.... ( I've added explainations so you can hopefully follow)
.slinks{
position:absolute;
top:140px;
left:0px;
width:100px;
height:500px;
background-color:#ffffcc;
text-align:center;
Font-family:"comic sans ms",arial,serif;
Font-style:normal;
Font-weight:bold;
font-size:13pt;
color:black;}
This creates the containing box
.snolink {
height:95px;
width:100px;
padding-top:45px;
background-image:url('images/untitled-2.gif');
background-position: left top;
background-repeat:no-repeat;
color:black;
text-decoration:none;
font-weight:normal;
text-align:center}
This defines the link that is inactive ie the home link when your on the home page ( I think that makes sence)
.slinks a{
height:95px;
width:100px;
padding-top:45px;
background-image:url('images/untitled-2.gif');
background-position: left top;
background-repeat:no-repeat;
color:black;
text-decoration:none;
font-weight:normal}
.slinks a:visited{
font-weight:normal;}
.slinks a:hover{
background-position:0px -105px;
color:blue;
font-weight:bolder;}
Those define the link and should mean when they are hoovered over the background images moves down so what was a green blob appears as a purple blob
The rest just defines the positioning of the links
.home{
position:absolute;
top:10px;
left:0px;
}
.products{
position:absolute;
top:105px;
left:0px;
}
.ideas{
position:absolute;
top:200px;
left:0px;
}
.contact{
position:absolute;
top:295px;
left:0px;
}
Hmm maybe if I define a height and width on these final css bits I shall go try that now
Sam
| |
|
|
|
smilling_sam
Posts: 7
Joined: 7/1/2004
Status: offline
|
RE: I'm going round in circles help - 7/3/2004 9:07:26
nope that didn't help
hmmm
I'm off to play on the playstation and see if inspiration hits me there.
As I said earlier they work fine as long as I don't define a doctype so it's not a major problem I'm happliy not defining it lol
Sam
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
) 