logo
IRC Archive / Freenode / #css / 2010 / July / 05 / 5
MaNa2k
hmw: tnx, it works now
princeES
any idea guys
becoz i can just make something changes and defined on div class
i want that everything ll be place inside this div, whether there ll be text or image, it (div) ll fit everything according to div width
DRSK
Can someone link "how to: float" ?
krambiorix
hmw, ok it's solved in IE7 with the html tag, but not in IE6
DRSK
I remember the bot having some article about understand CSS float
HappyPelican
]float tutorial @ DRSK
hmw
(Action) is not always right.
princeES: a background image can't stick out of a div. Please make a test case on http://www.webdevout.net/test
princeES: if your CMS forces you to use background, where the image is content, then you are pretty much in trouble. Get a real CMS. *smirks*
Aefroze
hmw, please see: http://www.wisteriasourcing.com/index.php?url=products
hmw
Aefroze: please stop addressing me, if you in fact are asking the channel.
Aefroze
(Action) is sorry to hmw
cypha
where can I read about the latest trends with webdesign?
hmw
i gotta go, btw
cypha
so my site doesn't look like it's from 1990's
DRSK
Any better method for making "image buttons" than setting the anchor to be text-indent: -9999px and then a bg image etc?
EtotheK
Ó
DRSK
cypha: not sure exactly as to where, but sohtanaka.com is a good developer and he also continuously updates his page with articles on various web dev stuff. Also, his "portfolio" is very nice.
EtotheK
hello, i have a problem with table in ie7. look on link. http://i.imgur.com/SXOjJ.png someone have solution?
ePirat
ohh
hum
EtotheK: validated?
EtotheK
what?
ePirat
topic
DRSK
can I refer to id's within id's? e.g. div#id #id2 { } ?
EtotheK
you can see that the td was higher
ePirat: you can see the code in http://codepad.viper-7.com/lfGOQA
ePirat
hm
sry its ie and i dont care about this old browser
EtotheK
yea tou write but i need that
in all browsers in's ok detail oe7
ie
DRSK
how do I contain 2 floats within a div so the div under won't be affected of the floats in the one above.
WePanicForYou
parent div overflow:hidden
DRSK
<div id="top"><div style="float: left;">1</div><div style="float: right;"></div></div><div id="menu">... <- #menu, in this case, won't position under #top. Having margin: 2em 0; on #menu won't affect top-wise, only bottom due to it having to be like margin: 8em 0 2em 0;
oh
WePanicForYou
]css float containment @ DRSK
meh
]float containment @ DRSK
!
DRSK
WePanicForYou: parent div would be the one holding the floats, or its parent holding the header?
WePanicForYou
DRSK: http://colinaarts.com/articles/float-containment/#summary
DRSK
Easier to show you - http://adolfsonsklader.se.tmp.wk.se/ <-- want the "menu" to be separate from "#top", but still be in "#header"
WePanicForYou
oj: ffs http://colinaarts.com/articles/float-containment/
DRSK
Will take a look
WePanicForYou
DRSK: Please read this and fully understand, it will help you heaps.
afeijo
good morning
my site show its content in a center div with 1024px, it has the content and the right side. I want the content to occupy all width if the right side dont exist in a page. I try the content with width: 100% but it growth too wider
any good tutorial about that?
WePanicForYou
afeijo: I don't know but try these http://www.google.com/#hl=en&source=hp&q=fluid+width&btnG=Google+Search&fp=bc57c0a6942863db
afeijo
WePanicForYou, thanks I will try
DRSK
How do I vertically align <li>'s within <ul> to be middle?
so if the ul has a height of 100px, I'd like the list items to be aligned in the middle, somwhere around 50px
afeijo
DRSK, did you try text-align: center
DRSK
vertical-align: middle; perhaps >_<
That's not vertical, that's horizontal afeijo
afeijo
sorry, yes vertical-align
margin: 0 auto might work too (or is it: auto 0)
riven
no.
DRSK: if the text in the LIs is always supposed to be single-line, you can easily vertical align it by setting the line-height to the height of the container.
DRSK
riven: Thank you, although ul li { vertical-align: middle; } worked out nicely, any reason as to why I'd use line-height prior to vertical-align?
Yes, the text is supposed to be single-lined, as in vertically aligned instead of default, horizontal.
riven
DRSK: usually your solution wouldn't work, when certain styling is applied to the LIs
DRSK
afeijo: That is still horizontal positioning, not vertical.
riven: it's plain text
riven
right okay, that'll work then... but will stop working as soon as you add certain styling, such as border or backgrounds that need to be the full height as well (as it pretty common)
as is*
eigentor
If I use display: inline for my li elements they always have an extra distance on the right (only the first element has not) http://www.fototv.com/blog
I wonder what this comes from
If I float them it goes away
Am unsure if this is always the case or something in my css causes this
or may this be a doctype problem?
antgel
hi all. just looking at line-height. where i only have one line, there's no point setting it *as well as height*, is there?
i.e. height: 37px => line-height: 37px is redundant?
Shambat
if I want to center a static page, I need to use the margin-left: auto; margin-right: auto; correct? the div is not centering, so is there some requirement other than this? does the containing div need any special property?
riven
antgel: depends
normally, no
Shambat: a width.
eighty4
eigentor: remove all white-spaces between </li> and <li>
antgel
riven: okay. what other information do i need to give, to get a concrete answer?
eighty4
Shambat: it needs a width
oups, sorry riven
riven
antgel: nothing. If you get the result you want without setting a line-height, then you're good. (the is always a line-height set, as it is inherited.)
Shambat
eighty4: is that the div with the auto margins or the parent div?
eighty4
Shambat: the auto margin div
antgel
riven: wow, i just found out that i needed line-height explicitly set to make my vertical-align: middle work. thanks
Shambat
eighty4, riven: perfect thanks!
DRSK
http://adolfsonsklader.se.tmp.wk.se/ <-- How do I move the 'tag' to the left? Do I use left: -200px; or do I do something else than position: absolute?
left: 410px; *
riven
DRSK: abs pos or negative margins.
DRSK
so, as it is now I'm using abs pos, but do I use left: 410px?
Is that "ok" so to speak?
riven
err, use whichever values puts it where you want it.
value*
DRSK
I was thinking of 410px left in Chrome/FF etc may look good, but perhaps IE and whatnot it wouldnt etc
Thank's though, I'll go with the 410px
riven
only one way to find out
mezod
hi, i am trying to add this drop-down http://91.121.97.99/test/ into my page http://91.121.97.99/kamchaq/ (between the text input and the glass submit button in searchbar )but i seem to be doing something wrong, does anyone have a clue?
eigentor
ah I accidentally restarted my machine
So why would I always have that extra space on the left of an li element that is displayed inline
http://d6.fototv.de/blog see "Kommentar hinzufügen"
riven
eigentor: that's the white-space in the source.
eigentor
ah
hehe I could look forever....
riven
eigentor: remove the white space, or comment it out, or use the </li\n><li... markup trick
or switch to floats
eigentor
riven hard to believe
riven
.. what?
eigentor
since both li and a show no space
but still whitespace
(Action) looks this up
riven
no idea what you're talking about now
eigentor
hover the li or a element in firebug
no space visible on the left side of that element
when I float them, it is also gone
riven
it's not part of any element
it's inbetween.
it's a space, like a space between two words.
eigentor
ah
but its sure not in the drupal source code
hm
If I use display: block
there are no spaces
so this should be something different
riven
um, no?
for the same reason the spaces aren't there with floats... block-level elements are exactly that, _blocks_.
eigentor
you mean the space is on the right side of the li?
riven
dude
eigentor
riven this are standard drupal links
riven
stop being dumb. I already told you, it's inbetween (inline-level) elements, if there is any white space in the source.
hmw
(Action) hands riven a big cup of KeepCalm(tm)
riven
eigentor: then go complain to drupal?
eigentor
no
riven
eigentor: or sta yourself in the eyes for using drufail.
stab*
eigentor
the source code is extremely well tested
hmw
I second this request.
riven
LOL
eigentor
would not guess to have white spaces there
Clorith
at least it's better then joomla ;P
eigentor
ha this is fun
antgel
this is a fun channel, where's my popcorn?
riven
eigentor: seriously, shut the fu*k up. You've been told what the issue is. If you can't accept that, just get lost and go cry in a corner.
eigentor
I can bash also ;)
riven now you are definitely going to far
riven
You ain't seen nothin' yet, kid.
eigentor
this is a public channel
riven
:)
hmw
(Action) hands antgel a link to popcorn with hot butter: <a rel="nofollow" href="http://www.youtube.com/watch?v=YK3ZP6frAMc">http://www.youtube.com/watch?v=YK3ZP6frAMc</a>
Hey, you can't stop the show now!
antgel
(Action) grooves
mezod
hi, i am trying to add this drop-down http://91.121.97.99/test/ into my page http://91.121.97.99/kamchaq/ (between the text input and the glass submit button in searchbar )but i seem to be doing something wrong, does anyone have a clue?
guy
how do I set background image opacity (css3)?
designer
hello
I was just wondering, how is it best to use & practice css? when I need to target an element, would it be best to... just write like .element1 .element11 .target { ... } or .typeALongNameForTheTarget { ... } ???
Aefroze
hi
guy
It depends... on either you need to target it once or it is part of, say.. block
ThePeach
designer, this is just a suggestion, I do prefer compact and meaningful names, selections should be done in the same way and based on the css standards for percedence.
guy
usually you would write .ling .with .many selectors as this make it reusable.
Aefroze
someone pls have a look here: http://www.wisteriasourcing.com/index.php?url=products
and tell me how to remove the gap between "Please select a category:" and the list that follows
guy
h3 { margin-top: 0; }
Aefroze
i tried to hide something (and h3) in between, since then I can't figure out how to remove this gap
ah
let me see
it worked, yes
thanks, guy
guy
you are welcome. I suggest you to google for "CSS reset"
Aefroze
ok, i will. meanwhile another question: margin: 1.2em 0.8em 0.5em 0;
does it refer to top, left, right, bottom margins?
gunther44
can i apply a different style to a first li of a ul?
#someid li:first no?
guy
gunther44 :first-child or :nth-child(1)
gunther44
first-child :) thanks
is nth-child new?
guy
yes
not supported in older broswers.
though has more features. eg. :nth-child(2n+1)
(Action) back to rocket science
ManDay
Any way to set off a background-image x pixels from the RIGHT?
riven
ManDay: not with currently supported CSS, no.
ManDay: CSS3 defines a way to do that, but support for it is lacking right now.
ManDay
css3 defines something for everything, fortunally. support it lacks everywhere, unfortunately
thanks riven
riven
np
hmw
i am trying to find out, how to control automatic line break in text areas, but can't find anything. What should I be looking for?
something like wrap="off" but valid... *sigh*
vices
ie7 is showing an extra linebreak...
how to fix?
ie8, chrome, and firefox all show it correctly
hmw
vices: please give us a live URL or make a test case on http://www.webdevout.net/test
vices
http://gregorivs.com/services/small_timers
on the right for the mark twain quote, IE7 shows an extra linebreak
hmw
vices: remove the height on the containing div
vices
um
i meant between the quote and mark twain's name
hmw
either a fixed height or not...