The usual show me how to do css stuff thread!

[kained&able]

ahh sound wasn't aware you could do that. thats what i needed.

cheers garf. hopefully that will be it for the rest of the project now. umm actully i don't entirely get where i need to put those bits of code.


do i put it as part of this bit?

#navlist li
{
list-style:none ;
padding-left: 10px;
background-image:url(appleicon.gif);
background-repeat: no-repeat;
background-position:0px 5px;
}

or do i create another div?


dave

 

[kained&able]

rah got it all working.

cheers peeps


dave

 

[GarfieldLeChat]

ahh sound wasn't aware you could do that. thats what i needed.

cheers garf. hopefully that will be it for the rest of the project now. umm actully i don't entirely get where i need to put those bits of code.


do i put it as part of this bit?

#navlist li
{
list-style:none ;
padding-left: 10px;
background-image:url(appleicon.gif);
background-repeat: no-repeat;
background-position:0px 5px;
}

or do i create another div?


dave

you stick that code in your css and and no need for another div i as using the one you already had...

 

[kained&able]

came up with this in the end.


#navlist li
{
list-style:none ;
padding-left: 10px;
background-image:url(appleicon.gif);
background-repeat: no-repeat;
background-position:0px 5px;
}

#navlist li a, #navlist li a:link, #navlist li a:visited {
text-decoration: none;
color: #FFF;
}

#navlist li a:hover {
color: #88AC0B;
}

 

[kained&able]

another quick queestion.

right i want a little nav bar at the bottom of my page.

<div id="footer"><center>Home:Account:Shop:Issuesartners:FAQ:Contact</center></div>

how do i make sure that that is always at the very bottom of my page?

if it needs a css modifcation then this is the relevent bit.

div#header{position:relative}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:25px}
div#content p{line-height:1.4}
/*div#extra{background:#FF8539}*/
/*div#footer{background: #333;color: #FFF}*/
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}

div#wrapper{float:left;width:100%}
div#content{margin-left:200px}
div#content{padding-top:20px}
div#navigation{float:left;width:200px;margin-left:-100%}
div#navigation{padding-top:100px}
div#extra{clear:left;width:100%}


dave

 

[Wintermute]

It's a bit tricky because HTML traditionally isn't designed for vertical positioning / layout. It depends on how your page is laid out; have a look here for info on vertical alignment, but try:

#footer{
position: absolute;
bottom: 20px;
}

<div id="footer">I am 20px from the bottom of the page.</div>

I've got a feeling that won't work well across browsers, or with content that scrolls over the screen dimensions, or something. I might be wrong. Someone intelligent will probably be along in a minute though.

 

[kained&able]

that works okay in opera and ie by the looks of it. Umm it wont center though.

do i use div allign? and if so umm how.


dave

 

[GarfieldLeChat]

came up with this in the end.


#navlist li
{
list-style:none ;
padding-left: 10px;
background-image:url(appleicon.gif);
background-repeat: no-repeat;
background-position:0px 5px;
}

#navlist li a, #navlist li a:link, #navlist li a:visited {
text-decoration: none;
color: #FFF;
}

#navlist li a:hover {
color: #88AC0B;
}

yeah that's acceptable bit untidy but acceptable...

 

[GarfieldLeChat]

right i want a little nav bar at the bottom of my page.

<div id="footer"><center>Home:Account:Shop:Issuesartners:FAQ:Contact</center></div>

how do i make sure that that is always at the very bottom of my page?

if it needs a css modifcation then this is the relevent bit.

div#header{position:relative}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:25px}
div#content p{line-height:1.4}
/*div#extra{background:#FF8539}*/
/*div#footer{background: #333;color: #FFF}*/
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}

div#wrapper{float:left;width:100%}
div#content{margin-left:200px}
div#content{padding-top:20px}
div#navigation{float:left;width:200px;margin-left:-100%}
div#navigation{padding-top:100px}
div#extra{clear:left;width:100%}


dave

ok you need to float the div left a certain number of pixels in order to centre the section this ...

<div id="footer"><center>Home:Account:Shop:Issuesartners:FAQ:Contact</center></div>

will only centre the text nothing more it's a style attibute you have applied directly to the text...

you need summit like...

#footer/*no need to put div here the css is going of the id or class name anyways*/
{position:absolute; left:85px; top:681px; width:760px; height:50px;}
/*this postitions your footer div and also centres it in the browser dependant on your page size and left edge postition will govern how centred it is. heigh is the width of the box, top how far away frm the top it is...etc*/
p{margin:0;padding:5px 10px};
a{display:inline;padding:0;color: #C6D5FD};
/*your original style attributes with out the need for repeating the div footer again and again makes it tidier*/
/*remove these comments in grey*/

 

[GarfieldLeChat]

bozy double post bollicks

 

[kained&able]

yeah that seems to work, will need to play about with it a bit but tis all good cheers man.

oh for fucks sake now my nav bar has disapperaed again.


dave

 

[GarfieldLeChat]

yeah that seems to work, will need to play about with it a bit but tis all good cheers man.

oh for fucks sake now my nav bar has disapperaed again.


dave

you sure it isn't at the bottom the bpage where you stuck it... in the footer???

 

[GarfieldLeChat]

btw if you need help you might have to phone as i've bought a ps3 so will nto be on line as much for at least a year

 

[kained&able]

nah it werent but its fine again. Just put back in a couple of lines that i had taken out.

umm is there any reason to not use a % as the left margin? then i can stop fiddling about and just use 50%(or 45-7 as it seems to be) which will be centres???


dave

 

[Fez909]

nah it werent but its fine again. Just put back in a couple of lines that i had taken out.

umm is there any reason to not use a % as the left margin? then i can stop fiddling about and just use 50%(or 45-7 as it seems to be) which will be centres???


dave

The left margin works from the leftmost part of your object that you are placing, and so to centre it using percentage you'd have to do 50%-1/2(width of navbar). How you do that in code, I really can't remember.

 

[psykoptic]

does anyone actually learn theses things anymore other than by osmosis

A-hah - you mean the Press-and-Guess School of Learning™?

kained&able - can you post a zip file or something with what you have? I'm getting confused as to what is what.