logo
IRC Archive / Freenode / #css / 2010 / June / 13 / 5
piyushmishra
the code is there
Bicky: what should I do?
Bicky
blegh, div, div div... =P
piyushmishra
:P
lol I suxx at designin
Bicky
oh well, you want to dark blue footer to stick to the bottom right?
piyushmishra
yes
btw the codes are opensource this is a non-profit initiative so anyone can help :)
:P but for now plz tell me how to get that right?
Bicky
well, yes.. tried some stuff out
and the div, div, div thingie does give you some extra work
piyushmishra
how do I make the same layout scalable in height and have less of hassle
piyushmishra
as I mentioned I am not a designer, I do codes but this is a non-profit project so I dont have much options
Bicky
thats the code which works
though you want to chance the background, only did that to see if it worked
hope it helps, I'm gone for food now
piyushmishra
Bicky: no I wanted something that doesnt stick to bottom and gets pushed further down when I add lines
Bicky
isn't that what you have now ? XD
Lazylegs
position: fixed wont work as the location is related to browser window. Not the content
piyushmishra
yes
and I need it to go with the content
zomgbie
margin: auto does work for my #page in order to center it but doesn't for anything nested within that div... is there no such solution am I on the wrong track mayhaps?
Lazylegs
piyushmishra, follow these steps and you get the footer correct: http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/
piyushmishra, had to test it myself that it works... and it worked ok in FF atleast... haven't tested other browsers
sim642
Is there a selector for selecting every nth element? Like every 2nd.
Lazylegs
sim642, yes there is
sim642
what could it be?
Lazylegs
sim642, rather than me explaining it, have a look: http://www.yourhtmlsource.com/stylesheets/advancedselectors.html#structural-pseudo-classes
sim642
I currently have "br + .hex" to select .hex elements after br tag, but now I want to apply a style to every 2nd .hex element that comes after br tag. How can I do that?
GorkyOUT
hey guys
anyone with an idea how to set that image gets "grayed" on hover ?
riven
sim642: did you take a look at the link you were given by Lazylegs?
GorkyOUT
or that images are graed by default and gets its color on hover... ?
selckin
overlay a grey diff and toggle the transparentcy
sim642
riven: I found out that I have to use :nth-child(2), but how to apply that to "br +.hex"?
GorkyOUT
is this working in ie6-7? or do i have to use some js ?
riven
sim642: `br + .hex:nth-child(2n)` (or "even" instead of "2n")
sim642: I'm willing to bet that you are using that br incorrectly, though
sim642: also note that IE doens't support nth-child
doesn't*
sim642
riven: I'm trying to make hexagonal grid and I use br to indicate the end of one line of hexagonal cells.
riven: I absolutely don't care about IE, it has to die anyways :P
riven
sim642: have an example up?
sim642
riven: not yet
piyushmishra
can anyone help me keep my footer at bottom?
Lazylegs
piyushmishra, told you a example link earlier.. about 25minutes ago
piyushmishra
which one?
the bottom:0 doesnt work
can u repaste? I must have lost that
piyushmishra
(19:43:35) Lazylegs: position: fixed wont work as the location is related to browser window. Not the content thats the last one i got from u
I have tried this once just names were different
was named push and footer
still let me try that once again and come back in a minute
Lazylegs
piyushmishra, don't care about the class names, you can use your own of course. I had issues with it also, but when I paid more attention to the article... got it working
piyushmishra
Lazylegs: lol it has pushed the page further but doesnt seem to push the footer
:(
Lazylegs
can you pastebin the code or something?
whole html and the css
piyushmishra
lazylegs: I am uploading the code k?
on to my site
Lazylegs
ok
piyushmishra
for u to see what I have done u must have firebug right?
edit try n tell me wht to do
lazylegs: http://www.enjoystudies.com
thats the site where I did it
I am using firefox 3.6 with ubuntu linux
Lazylegs
Is that the modified css file in use?
which should make the footer at the bottom of the page?
piyushmishra, you haven't done all the modifications for the css
piyushmishra, oh sorry had cached old version
you online piyushmishra?
piyushmishra
lazylegs: internet suxxin
yup i am
Lazylegs
piyushmishra, if you are the same person (hopefully) don't use the values -330px for bottom-margin at container and 330px for footer height... use your own values, the correct height of the footer would be good start
hehe, was writing that when you had multiple logins :D
sim642
riven: My grid is now aligned, but when I add anything into the cell's div then the cell is pushed downwards and grid is not aligned anymore. What could be the problem?
piyushmishra
lazylegs: i knw that I can set cutom heights but thats exactly isnt happening here right
?
did u try with 100?
Lazylegs
tried with 30px and worked
as an example margin-bottom: -30px for the container and height: 30px for the foot
piyushmishra
ohk I need to set the height for the inner footer as well I think
I tried that and it worked
Lazylegs
good
piyushmishra
cool ty :)
byeitical
Hi all, I'm trying to get the links at the top of the page on http://andrewnorthall.net/ to display next to the <h1> title and above the underline. does anyone know how i can achieve this?
Lazylegs
byeitical, should work if set property float: left to #menu
byeitical
Lazylegs: I changed it, have a look now
Lazylegs
byeitical, just looking the site with inspect, how in the hell the <h1> in the header has full width
byeitical, that's causing an issue atleast
byeitical
any ideas on how to change that? i'm very new at this
ZombieLoffe
byeitical: float: left; on h1
Lazylegs, h1 is a block element, it takes up 100% width by default
Lazylegs
ZombieLoffe, oh, didn't know that. good to know
ZombieLoffe
byeitical: You'll want to do some float containment on #header too -- read this article: http://colinaarts.com/articles/float-containment/
krambiorix
hi guys, i just can't adjust my row's height
ZombieLoffe
byeitical: Oh, and the float: left; on #menu isn't necessary
byeitical
Yeah I took that off
Thanks both of you :)
Lazylegs
np, ZombieLoffe was more help here
byeitical, set some heights for elements, like header. Cause the content is coming over it
byeitical
I'm just reading the article he linked
ZombieLoffe
that's what float containment is for, Lazylegs
no need to set a fixed height on it
Lazylegs
ZombieLoffe, dunno why I didn't think of the clear:both :D still use it in other places.. thanks for the link
sim642
I have my hexagonal grid here: http://sim642.co.cc/test/hexgrid/. It looks just fine, but when I put something in those divs then it gets out of alignment. Why that happens?
byeitical
nice grid sim642
sim642
byeitical: thanks
byeitical
it's very hexagonal
ZombieLoffe
I'll say..
The overlap is causing some major havoc
when you add some content, the part of the surrounding hexagons that's overlapping the text-ified hexagon want to move out of the way
baubbelayponge
hey #css quick question. I've seen many sprite based menus apply a display:block on a <a> element and then float it to the left. display:block is useless in this case as float automatically generates a block element, no?
ZombieLoffe
baubbelayponge: Yes, display: block; is meaningless if the element is already floated
baubbelayponge: Most solutions apply float: left; to the containing <li>, though, not the <a>
baubbelayponge
same result?
ZombieLoffe
Um, no, in the second case the display: block; is actually useful.
an <a> inside a float: left;-ed <li> is still inline.
baubbelayponge
I mean, is one solution better than the other?
ZombieLoffe
Uh. which are the two options? :P
sim642
ZombieLoffe: Is there anything to prevent the overlaping effect?
baubbelayponge
ZombieLoffe, well, one solution is to "display:inline" the <li> and then float the <a>. second solution is to, as you say, float the <li> :D
ZombieLoffe
Hmm, sim642...
sim642: Put the text inside of it in another element and put position: absolute; on it
baubbelayponge: display: inline; on the <li> and float: left; on the <a> makes no sense to do, the second option is better.
baubbelayponge
noted, thanks :)
sim642
ZombieLoffe: thanks, it worked
SmartGuy
http://www.emaths.info how is this now
ZombieLoffe
Too yellow
luchenbill
I have a container div that is positioned absolute to another div that is relative... inside that div that is absolute, I put another div inside that... now i'm putting a ul inside that div, and i'm not able to use top: left: positioning... some properties are cascading down to this div, but i'm sure it's a simple fix... any suggestions?
ZombieLoffe
I can just barely read the white on yellow in the header... smae with the footer
And those two colours, the yellow and the green, are pretty ugly in and of themselves :F
Phrogz
luchenbill: position:relative on a non-positioned element that you want to use as a positioned space for its descendants.
luchenbill
holy crap this is getting confusing, but it worked. thanks!
ZombieLoffe
luchenbill, top/left/right etc. will only work on positioned elements -- not their descendants
luchenbill
ZombieLoffe yeah but it will inherit the position: absolute, or position: relative... right?
ZombieLoffe
nope
they don't inheritc.
-c
+e
Er.
luchenbill
LOL heratic!
ZombieLoffe
Just no.
My typing is just total failure today.
luchenbill
so what if I have a main div that is relative, and a div inside that, which is absolute... in the absolute positioned div, could I later in the css position that div relative again, with another div inside it absolute to that div?
or is there a more simple way to do that...
Phrogz
luchenbill: No, you can't do that.
ZombieLoffe
Um, "later in the css"? It will just get one position value, sooner or later is not considered when rendering the page
Phrogz
Your closest positioned ancestor is your coordinate space.
luchenbill
well for instance, I have right now a div with a background-image, and after that I did a background-color haha
ZombieLoffe
But you can stuff a position: absolute; element inside a position: absolute; element, and it will be relative to its parent, eg. absolute is also relative to absolute
luchenbill
oh nice! so really if there is div relative, div absolute, every div inside absolute, will be absolute to that div? hahaha
this is great
ZombieLoffe
Well sure, an element can have both background-image and background-color, but they can't have two values for the same property
Yeah, what you said
luchenbill
I think that's to you guys i'm finally getting somewhat of a nice layout going on here!
one that is not so childish and gay looking haha
ZombieLoffe
heh. good for you.
luchenbill
well it's very exciting for me actually, I have been feeling so fail with making websites
here you'll probably think it's gay... or wrong.. but i'll show you =)
I would like some constructive critisism
http://207.192.71.108/~unfunf/test02/index.html
ZombieLoffe
That dude looks pretty badass.
Hmm.
luchenbill
lmfao it's my dad, it's kind of a funny pic
ZombieLoffe
Why do you need the position: absolute; though?
luchenbill
ZombieLoffe I don't know really exactly what i'm doing... I'm trying though really hard...
ZombieLoffe
Heh.
Position: absolute; is rarely needed to position things. One of the only times using position: absolute; is a good idea is when you need to align something to the bottom of its container...
luchenbill
well in the markup, I have a #mainDiv which holds the background color's the 3 horizontal ones, and inside that I have another #containerDiv that is positioned absolute to the main div
so that way I could center the whole white div there
on top of the background color's
as I said, every single time I do something, it's never the correct way, but yet nobody has helped me to do things right haha
ZombieLoffe
You don't need position: absolute; to center them, though... #main seems entirely unnecessary
JDigital
]center
_ZofBot4
CSS Horizontal Centering: http://haslayout.net/css-tuts/Horizontal-Centering http://dorward.me.uk/www/centre/
eighty4
]schools @ luchenbill
_ZofBot4
luchenbill, Explore the intricacies of HTML and CSS here: http://wsc.opera.com/ , www.htmlhelp.com/ , http://css-discuss.incutio.com/ , www.brainjar.com/ , www.htmldog.com/ , http://css.maxdesign.com.au/
eighty4
luchenbill: it's up to you to do it the right way
luchenbill: we can help, but we wont write the code for you
luchenbill
eighty4 how about you stfu, i'm not asking you to write the code..
i'm asking you to offer good advice, or none at all thanks
lol
eighty4
luchenbill: no, I know. I just linked you some good reading.
luchenbill
thanks ZombieLoffe i'll check those links out
=)
okay thanks eighty4!
ZombieLoffe
I didn't link you anything, JDigital and eighty4 did
luchenbill
lol
JDigital
zofbot did
eighty4
luchenbill: and stop telling me to stfu when I'm doing something good...
DanInMass
and the day goes on...
SpiLoT
Should have asked him $ for doin' the code. >:O
sim642
Here: http://sim642.co.cc/test/hexgrid/. When I make the browser window smaller then the hexagonal cells don't fit horizontally on the screen and the entire HexGrid breaks. What can I do to prevent this?
zamabe
ey, i'm looking to make a bit of css magic. I know that border-raidus can make corners curve in, but is there something that does it opposite?
baubbelayponge
sim642, add a width to the container
riven
zamabe: opposite? that makes no sense
zamabe
riven: inverted then