i have been trying to make rounded corners for my mainmenu highlight but I have only found one way to have ONE

hello, i have been trying to make rounded corners for my mainmenu highlight, but I have only found one way to have ONE background for my .mainmenu li a:hover, and that gives me a rounded background to the right, but what would be the right way to ALSO add a left rounded corner?

there are rounded corner generators on the web, did you try one of those?
http://www.roundedcornr.com/rc1.php this is what i use

hm.. didn't know that, thanks
www.haugseth.net, if you look at the to menu, you see my problem

nice design
your corner problem should be solveable by looking at the code the rounded corner generators spit out

thanks
yeah, I'll have to look at it some more, thanks for your help

what properties do you set, if you want a file input to have no 3d effect

there are no "not" selectors in CSS, right?

How do you mean?
O.o

"any element whose class is NOT foo"

nope
Conditional statements are a no no

Why would you need such a thing? O.o

I can see the need for it… but it's pretty easily circumvented

sounds like your defaults aren't properly set up

i am circumventing it by specifity
but a conditional would make the CSS more compact and IMHO easier to read
but it's not that important

Yeah, use defaults
Then override sections with the use of !important

yes, that is what i am doing now.

.j math

while trying to create floating divs for some blocks(content), if no height is assigned to each div, then it doesn't render properly
however it does when a specific height is set. Is there any way to get rid of distorted rendering when height is unknown or each column?

Hello, I need a custom javascript code to slide images. I want to know if anyone is willing to earn some bucks. What I'm looking for is here http://www.gamespot.com/video/918428/6172011/ On the part where it says Lastest, I want that
thing for my webpage only that part. Please pm me o send me a mail to rodrigo@eel.com.mx (its also my MSN), Thanks guys!

Perhaps a Javascript channel would have been a better bet?

hi all, I 've a problem with the CSS validation of my weblog. You can see it at: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fmarkon.netsons.org&warning=1&profile=css21&usermedium=all
Can you help me only with the errors (not warnings) ?
Can't you help me ?

if i want to make a thumbnail of a larger picture if i did this img src="image1.gif" width="100" height="100" would it do that?
without actually downloading the original picture
or do i need to actually create the thumbnail picture..

1. don't use HTML inline styles
2. you actually need to create a thumbnail; that other method would just shrink the display of the large image

a ok

- "HTML style attributes"?

or h1a?

dont validate

of course not; A is an inline element, H1 a block element
block; to your A element
…. inside the H1 still


does html 4.01 Strict support overflow-x/y, and if so, how should it work?
because it doesn't seem work unless I have either no doctype or 3.2 doctype.

overflow is a CSS property
i.e. not directly related HTML
*related to
http://de.selfhtml.org/css/eigenschaften/anzeige/overflow.htm

ok, but if I take it out, the overflow-x in IE6 does not work
under 4.01 or later
it just hides everything
that's just overflow, not overflow-x

]]]overflow-x

Waddayawant?!

wth is overflow-x then
]]]overflow

something that's supposed to just make the horizontal scrollbar disappear

overflow http://www.webdevout.net/browser-support-css#support-css2propsbasic-overflow (IE 6:41.667%) (IE 7:50%) (FF 1.5:91.667%) (FF 2:91.667%) (Opera 8.5: Y) (Opera 9: Y) (Konqueror 3.5: ?) (Safari 2:
?))

it's not in my reference

is there another way to do that?

for horizontal only? what do you want it to do instead

right. for horizontal only

so you want like overflow-x: hidden; overflow-y: scroll; ?
not possible AFAIK

right, it works fine with 3.2
sux.
why would a 4.1 doctype not support overflow-x, and 3.2 support it?

http://www.blooberry.com/indexdot/css/properties/position/overflowx.htm says it's IE5 only
not sure how reliable that is

how do you format a table, so that the inside borders are dotted lines and the table has no outside borders

it's IE6 too, but you see I don't have scrollbar problems with Mozilla

table { border: 0; } td { border: 1px dotted #F00; }

block. And i dont think display block will validate

yes - why wouldn't display: block; validate?
h1a style="display: block;"…

is there a logical reason for not supporting overflow-x/y?

search some newsgroups, I dunno

:-|

but the lack of a "logical reason" doesn't mean anything anyway

http://paste.css-standards.org/23251 : Can anyone tell me why theres a space between the top image and the borders of the news area? Ive tried adding a padding 0 and margin 0 but it still refuses to work

I mean isn't it common to want the horizontal scrollbar not to appear when you have a slight overlap?

]zip @ Nyture

Start every stylesheet with this: * { margin: 0; padding: 0; }. You'll save yourself the confusion over quite a few strange element and browser spacing differences later on. * == http://www.w3.org/TR/CSS21/selector.html#universal-selector

shiite
I can't center my images now without 4.01

wth

i found this way to center images:img.displayed {display: block; margin-left: auto; margin-right:
auto}
it doesn't work in 3.2 doctype

why the hell would you use that doctype ffs

so that I can use overflow-x

great, fix one problem by creating 100 others

sure
well I guess I could create a container div for the elements that are going to go too far off
and set the overflow property for the div to cut off those elements
think that would work then? ..

TIAS

TIAS?

wont validate. even with display block

Try It and See (chat)

re-read what I said

aha
arite.

bloxk would fix it. It dont
It doesnt*

h1a style="display: block;"…

in that case i dont need dispaly block?

well, then the A won't extend
TIAS

How to search engines look att h1 with a inside?

Ace_NoOne
i've realised what i need to do now

good for you

make a thumbnail of the picture using imagick but keeping the aspect ratio, then constraining to exact pixel size when i call the image
although it's not perfect..
i'd rather crop it when i call it
is that possible?

hidden; on the parent container
that might work

ok thanks

How will search engines look att h1 with an a inside?

what's an "inside"

inside

(not its contents though) in terms of indexing the content (excluding link handling of course)

ok

How do I position a image to be behind everything else and in the top right corner of a site?

use body { background-image: url(…); }

ahhh bbut see i have 2 images i want to do this to

here's another question…
is there a way to use position:absolute and CSS centering to center an image?
eg:
img.displayed {display: block; margin-left: auto; margin-right: auto}

does z-index: -1; work, Nyture? I haven't been successful with numbers greater than zero O_o

possibly should work
:-|

why use -1 - use * { z-index: 2 } and 1 on the IMG
why would you use abspos

i don't want the browser to make my top coordinate relative to other images
also I don't even like this centering
I need it centered to the screen width max, not the browser window

zindex works for putting it behind

I tried using javascript host to do it but I can't make onload() work right

]deadcenter @ aeroclown

deadcenter: http://reisio.com/examples/deadcenter/

err, @ agamemnus

but i need to position it also, and its giving me trouble. It wont snap to the top right corner

]zip @ Nyture

Start every stylesheet with this: * { margin: 0; padding: 0; }. You'll save yourself the confusion over quite a few strange element and browser spacing differences later on. * == http://www.w3.org/TR/CSS21/selector.html#universal-selector

got that already

Ace_NoOne, do you know if there's a way to use CSS names and javascript together?
that way I can use my centering script on those images
cSS classes I mean

what are you talking about - and you absolutely should not be using JS for this

ok, how do I center an image host based on the screen size?

http://reisio.com/examples/deadcenter/

try that

if i want to set the properties of that table, do i have .details table{ width… } ?

it resizes based on the window size

yes wanderingii

I need it to resize based on the screen size

hello

eg, width=800, 1280, etc.

sounds odd - but what's the problem then

im trying to centre text within a div vertical centre and horizontal centre, how can i do this?

]deadcenter @ ilovefedora

deadcenter: http://reisio.com/examples/deadcenter/

actually, ilovefedora, hold on

Ace_NoOne… I don't know how

you said you had a JS script
for horizontal centering, use margin: 0 auto; - for vertical, see here:

yeah but the problem is that I can't iterate through all the elements recursively and look for those with a "center_" in their id

]middle vertical-align @ ilovefedora

middle vertical-align: www.phrogz.net/css/vertical-align/index.html

google for getElementsByClass
and ask in JS

(that's how I was doing it, but it didn't work on one of my pages)
ah, getelementsbyclass
thanks

it's not in the standard library

everyone's dead or almost dead in #javascript

when a div is absolute, the javascript onmouseout behaves abnormally, while when div is relative/static it work as expected, do anybody know why?

how can i set the properties of my table that it has no outside border at all, only the inside lines are visible

wrong channel

table { border: 0; } td { border: 1px dotted #F00; } — you could also have a border only on certain sides for the outer cells, but you need to set an extra class then

tried that but it doesnt work

table-cell; throws the alignment of div off
centres text though
http://www.rwautomotives.co.uk/

]]]table-cell

table-cell http://www.webdevout.net/browser-support-css#support-css2propsbasic-display (IE 6: N) (IE 7: N) (FF 1.5: Y) (FF 2: Y) (Opera 8.5: Y) (Opera 9: Y) (Konqueror 3.5: Y) (Safari 2: )

as you can see , its stupid to use table-cell at all , ilovefedora

yep but how else am i supposed to centre text vertically

]secret @ wanderingii

secret: No URL = no help. We are not telepaths, and can't determine the problem (let alone the solution) without playing with the troublesome page. So, give URL, or leave the channel and call 1-900-PSYCHIC. Oh, and good luck. You'll need it.

YAY!

I gave you links!

Thanks TONS, Ace
I got it to work

?
oh right

ace the links tell u to use table-cell

http://innonesen.se/test/l-2-txt/ ilovefedora
there is a solutionm

unlikely - then you haven't read them all
^^ what he said then

btw, good day , Ace_NoOne

hey mefisto - btw, that link looks hacky

Ace_NoOne, it is hacky

you dont need a url, its a basic 2 column 6 row table, and i want dotted borders, but not on the outside of the table

(as correct as i could think of)

hold on, there was something on hasLayout.net

]]]dotted

how dare you tell me I don't need an URL

dotted http://www.webdevout.net/browser-support-css#support-css2propsbasic-borderbottomstyle (IE 6: I)(IE 7: I)(FF 1.5: Y) (FF 2: Y) (Opera 8.5: Y) (Opera 9: Y) (Konqueror 3.5: Y) (Safari 2:
Y))

can someone take a look at my post, i'm trying to fix a div thats holding content http://pastebin.ca/663413

can you all take a look at this http://www.rwautomotives.co.uk and tell me what you think of the layout

use a proper pastebin:
]css paste @ cerberusaeon

Paste FULL CSS Code AND HTML code so we could VIEW your page. Incomplete code is useless: http://paste.css-standards.org , http://www.webdevout.net/test , http://paste.zoffix.com/

i don't see much there, ilovefedora

ok

u saw the layout, righ/

there is hardly any layout there - and the colors are horrible (just for testing I suppose)

basic. Good, but basic

colours are for testing
layout is basic

I think were all hapoing its just for testing ace

heh

but you all see the text. i want it to be absolute centre of every box

use IDs which expresses meaning/use of area , note3: use Strict doctype

why isn't it centered properly

http://pastebin.ca/663417

@3

(hasLayout.net) HTML: Valid ( http://tinyurl.com/234tsk ) | CSS: Valid [134 warnings] ( http://tinyurl.com/3cjf32 ) | DOCTYPE: HTML 4.01 Strict + url | (MIME: text/html, text/html; charset=utf-8)

damn .. i hate dreanweaver

I told you to use a proper pastebin like the ones listed

i love i
t

EWWWWWW WYSIWYG!

@http://www.rwautomotives.co.uk/

(www.rwautomot…) HTML: Valid ( http://tinyurl.com/ytvlnd ) | CSS: Valid [7 warnings] ( http://tinyurl.com/2z5ur4 ) | DOCTYPE: XHTML 1.0 Trans + url | (MIME: text/html; charset=UTF-8, text/html;
charset=UTF-8)

did you get that

and embed your stuff properly
]bot @ cerberusaeon

bot: Hey! I'm a bot, dumbass!

oh

lol

whats wrong with that pastebin

it won't let us view the result

]paste @ cerberusaeon

Paste bins: http://paste.css-standards.org , http://www.webdevout.net/test , http://erxz.com/pb/ , http://sial.org/pbot/ , http://tnx.nl/scribble.plp , Upload images: http://oxihosting.com/pupload/

mefisto, evil!
it's ]css paste
and I already had ZB tell him

oh oik

whoops

great, now he's cross-posting in #web

sorry coming from java room
aren't those all valid rooms to post a question

yeah, have 10 people waste their time, great idea
you're already getting help in here

http://paste.css-standards.org

well, you were, until a minute ago

:sigh:
this one is hopeless

I'm starting to understand how trovster became what/how he is

well hold on

lol even ZofBot flees from this one

cool .. bot is down
btw, usually when i ask something in #web , i get banned
becausu i somehow manage to piss off OPs there

lol mefisto - I've had no problems there

usually by calling em incompetents and stupid

hah well, there you go then

.. that makes me wonder , how they got status ?

ok here we go http://paste.css-standards.org/23252

oh my god

LOL!

the problem is in the flightListTablecontainer div

http://paste.css-standards.org/23252/view does that look right to you

where is view?
oh
i posted the css in the same place

ORLY

you cant do css

HOLY CRAP mefisto

hey look, i've never used this post bin i didn't know there were extra rules, hold on

you cant do HTML , and you have no idea how to use JS
that page is a mess

where is the edit button

and you cant use web .. essentially

aiight so i'll just post the html

NO
post the HTML with properly embedded CSS
that's not hard ffs
it should be obvious

Heh.. its easier just to upload it O.O
Least then Mozilla will sexily syntax highlight it

that's what Firebug is for

umm ok so i posted the html

Thecks, are you from this planet ?

there is a VIEW mode for that pastebin

at the same place http://paste.css-standards.org/23252

OH FFS
http://paste.css-standards.org/23252/view

mefisto.. you have something up your ass O.o

DOES THAT LOOK RIGHT TO YOU

dude i'm not sure what you're looking for
all i have is code

I will show you a FUCKING EXAMPLE

i'm not uploading 100 images to ther server

then leave

you don't have to
you can use placeholders ffs

and this is really simple, its 4 divs and trhe positioning for them

because we cant help you if you cant show the problem

http://paste.css-standards.org/13202 and http://paste.css-standards.org/13202/view
is that so hard

i mean i have the code isn't that enough?

it's enough to piss me off

yeah i see your post

you need brain too

go find someone else

ummm
the only problem is all i have aregraphic images

that's what ALT text is for

i don't have text

find a new hobby cerberusaeon

its still going to be a blank page regardless

hey, does anyone know a free icon site? large icons such as a picture of a computer or something? i know it isn't really css but i don't know where else to ask.

Iconaholic

check wiki commons

Some great free icons there

they have some awesome ones

Really high quality work

crystal clear at commons

wheres commons?

Wiki commons

iconaholic

http://commons.wikimedia.org/wiki/Main_Page

Ace_NoOne is my Google bot

no, I'm a wiki host expert ;P

Sheep porn

thanks

http://commons.wikimedia.org/wiki/Crystal_clear

see..

could someone ban him ?

so you guys are saying if i put the alt tags in you may or may nit be able to help me

mefisto.. ban who?

you

we're saying this:

Why?

]secret @ cerberusaeon

secret: No URL = no help. We are not telepaths, and can't determine the problem (let alone the solution) without playing with the troublesome page. So, give URL, or leave the channel and call 1-900-PSYCHIC. Oh, and good luck. You'll need it.

direct your hate at the nub, not at the guy with silly but acceptable comments

ok i'll be back in 30 minutes

I won't

thats okay, maybe someone else will be here

you still don't get it, did you
do we have awards we can hand out?

=/
nothing comes to mind

too bad, I would have loved to hit this guy over the head with SOMETHING

How about, the worlds heaviest award?

if this turns into a My Penis joke, I will kill you, Thecks

O.o

Ace_NoOne, http://bash.org/?4281

Don't dig yourself a hole =p

i don't think you would want to hit me

lol yeah, I was looking for that

i'm 212, 6 ft bench 300 pounds

omg now comes the internet nub

212? feck
I thought the oldest person was about 114

so don't waste your time on the bench if you can train your brain

212 pounds

this explains your stupidity

its the fat .. all over your brain

well women love the body too man..can't be all brains

.. gone

http://paste.css-standards.org/23255 just look at the flightListTableContainer div
i swear it'll make sense

wasn't so hard now, was it
@

nope

(paste.css-sta…) HTML: Failed (5 errors, see http://tinyurl.com/28pmn6 ) | CSS: Failed (4 errors, see http://tinyurl.com/2twvqu ) [120 warnings] | DOCTYPE: XHTML 1.0 Strict + url | (MIME: text/html, text/html;
charset=UTF-8)

Thats better

… apparently it was

Readable now

not validating

though i'm wondering when you're going to ask for the actuall css

O.O
Your code as 120 warnings…

ffs cerberusaeon the CSS should be EMBEDDED

wait

can i post it in another file?
its in a style sheet

that's the last straw
really, cerberusaeon that was your last chance

aiight, i'll figure it out, just thought it might be quicker asking some of the gurus, but you guys want an entire website before you look at anything

evening all

You have about 20 errors where 20 things have the same ID

For a start, IDs should be unique and used once

hey there - now flee while you still can

they arte unique

ID "undefined_2" already defined.
… width="1" height="1" border="0" id="undefined_2" //td
ID "undefined_2" already defined.
… width="8" height="1" border="0" id="undefined_2" //td
Loads of em

it's hopeless - let him figure it out by himself then

dude those are from fireworks
and they don't matter
thats not even the issue

Read the topic! Validate first…

what is the issue

u could delete that from the page
thats why i didn't even post it from the start
i just need someone to look at the divs on the bottom

don't use tools that generate crap markup

whatever, I'm paid, i do what makes money

LOL!

Yeah, I cut up PSD with ImageRead.. select CSS.. look at the index.html it generates and delete it very soon after

I only just got here. Link to the page and tell me what the issue is

later guys, thanks for the help

"If I fill the foundations of your house with mud, I make more money…"

hah

ImageReady*

]scret
]secret

No URL = no help. We are not telepaths, and can't determine the problem (let alone the solution) without playing with the troublesome page. So, give URL, or leave the channel and call 1-900-PSYCHIC. Oh, and good luck. You'll need it.

seriously, we've tried all that - it's hopeless
we walked him through 3-4 tries of using pastebin - he just can't do it

Why is the bots command character ]?
Just to be different? :p

probably to make it unique, to avoid triggering other bots

This is funny… I'm trying to talk to a REAL person at a support outsourcing firm…

lol

Had the Live Chat window open for hours waiting for somebody to answer… no such thing

from #web:

besides, chanserv is asking me to explain what I explained

Chanserv is not a real person

yes it is….

Lol

How did you do emphasis or strong emphasis on a typewriter?

on a…. excuse me?

TYEPWRITAH.

I would push the button REALL HARD

lol JDigital

Actually what I'd do is go back over the line and type over it

So that was what you did?

Yeah.

Seriously?

A better but trickier solution might be to nudge the paper ever so slightly to one side to create a bold effect
Usually on a typewriter though bold is kinda hard to do, so you would have used underscores.
Underline instead of bold. There was a character for underscore on the typeriter. That's why we have an underscore character on the keyboard nowadays.

What if.. you pushed the key down and grabbed the hammer of that letter and slightly smeared it? :p

Hi. {list-style: upper-alpha} produces lists like "A. blah" "B. blah". Is there a way to remove the dot from after the letter?

probably not

lol
wow this topic changed for the ancient

ok, thanks.

So the underscore would go UNDER the characters? Not like _empashized text-?

Its "Explore the history of your keyboard day"

Sigh. s/-/_/

now n days u can just buy a typewriter with a lcd and have it set to bold. Itll do all the work for you

in UseNet times, there was _underline_, *bold* and //italic//

use to have an old digital typewriter

Electronic typewriters.. I know those!

Correct. You typed your word, pushed the typewriter head back, and typed underscores across the line.

I thought italic was ^italic^? :o

In fact it's still standard practice nowadays for authors to submit manuscripts using underline in place of bold, because that's how typewriters did it

not in my book, but standards might differ

I always think underline is untidy
Move over typewriter, IRC is the new generation

Goes for IRC as well…

exactly

bold underline
No damn italic though

Stupid non-standard IRC formatting.

my professor used to say "I hate underline in papers - makes me wanna click the paper"

Lol

no kidding

lmao

Bold is so much better than underline

depends, really
it's different

gotta love strikethrough though

I instinctively feel like clicking or tapping any text that is underlined.

Lol

hah yeah, I miss sstrikethrough

ever been to a website with strikethrough as a link?

strikeIRC should be HTML/strike

boy that sucks
wonder if that page ever gets any hits lol

is evil, Thecks

Yeah.. "Oh theres a link… nope its been struck out.."
"Oh no.. I'm surprised again.. IT IS A LINK!"

lol

and the poor author is thinking …. "why does my site not get any hits"

Strike through on mouse hover is CSS abuse!

greetingHello/greeting, subjectguys/subject. questionWhat's directionup/direction?/question

kudos to whoever turned this conversation from a looming flamewar to an enjoyable discussion

I think that either happened when the guy left
Or when the subject of type writers was bought up
* Bluuu has joined #CSS

How did you do emphasis or strong emphasis on a typewriter?

Thanks to Bluuu's randomness

it was bought up - damn, now we have to pay patent fees

Nooo =[
Ace_NoOne.. lets go ask Google to side with us

just learn to avoid typos then

Uh? :o

Or when the subject of type writers was bought up

ohh
Haha.. laugh at my expense

lol
funny typos ftw

Still waiting for the Live help of the support outsourcing firm…

Where did that cerberusaeon guy go, we never got to help him out

He was beyond help…
But he said he will be back in 30 minutes a while ago

seriously, be GLAD you weren't here when he posted his stuff; he managed to mess up three or four pastebins, without ever understanding what was wrong

So I'm sure you will have a chance to help

and that was just one thing…

clearly he needs an expert like you or I

Thecks, mefisto and yours truly TRIED PATIENTLY
but he really, litereally was beyond help
*literally (nice typos ftw :P )

Did he explain what his problem was

sort of

I came in just as you were grumbling at him for not validating

he didn't manage to do anything right, seriously - I am usually very patient and understanding

http://www.youtube.com/watch?v=OjUX7YOP_Kk

Of course you are

too bad, I would have loved to hit this guy over the head with SOMETHING

"I am usually very patient and understanding"
everyone has limits

is there a way to define a border image for a div?
like a top and a bottom image

http://www.bigbaer.com/css_tutorials/css.border.image.frame.styles.htm

ummmm

Perhaps?

i dont think so
position @ Nyture
hmmm

]position @ Nyture
N/A
what are you looking for

can firefox not do .class image{ border: 1px solid #000000; }?

hi fellows !

is the a page on what position properties do?

it's IMG

it can, im using it now

wanderingii, I think he means to have a border made with an image
cerberusaeon, did you check the link a gave you?

i just want the image to have a border but not the div the image is in

left; wifth: 50%", to make a 2-column layout; everything is fine, but when I add a border-right of say 2px to my left div, the other one gets pushed underneath

yeah, can the inner div (content) stretch vertically
cause its really a content box i'm making

No idea, read the page
It was the first google result for "css border image"
-.-

so I'd like to have my right div automatically stretch to the right end of the page; is there a way to do that ?

that's why we have ]]foo

]]foo

[Google] http://en.wikipedia.org/wiki/Foo (More results: http://tinyurl.com/3exk76 )

max" to tell it to stretch, but it's not allowed

block elements (e.g. DIV) do that by default (if they're not limited by their ancestor)

my right div, which has no ancestor, is only of the width of the text it contains

then you are using float or abspos

yes, I said that I use float: left for the both of them, ot have a 2-column layout

oh right, sorry - link us please
or use pastebin:
]css paste @ Seb

Paste FULL CSS Code AND HTML code so we could VIEW your page. Incomplete code is useless: http://paste.css-standards.org , http://www.webdevout.net/test , http://paste.zoffix.com/

unfortunately it's only internal as of now

thus the pastebin; use a minimal example (strip out all unrelated stuff)

oops
Well.. cheap crappy ear phones

ah, cerberusaeon is back.
cerberusaeon, what appears to be the problem

how could i get 2 divs to be side by side?

]float tutorial @ Bear10

float tutorial: http://css.maxdesign.com.au/floatutorial/ , http://phrogz.net/css/understandingfloats.html

display: inline; or float as noted above (or both)

bottom?

no….

hmmmm

you might be able to absolute position… bottom: 0px; or something?

right works for attaching my image to the right side, but how do I attach an image to the bottom of the page?

relative; on the parent element, and position: absolute; left: 0; bottom: 0; on the element itself
I usually just put it as the last thing on the page, problem solved

anyone here used imagick before?

heh
it is the last item on my page

and i'm talking about the command line
not the php functions

http://paste.css-standards.org/23261
there you go

looks good to me

100%

but 49% is too small, since 50% + 2px + 49% 100%

you know the overflow: hidden; trick for floats?

i don't

absolute; bottom: 0px; worked, but it overlays on my layout if the browser is too small
how do I make it go behind?
Tried zindex to no avail

hold on seb

NM
fixed it by moving the publish your images online element above the layout

http://paste.css-standards.org/23262/view

i have a wrap that expands 100%
but when the layout gets smaller
it does as well

hrm

that's because % is in relation to the ancestor

not sure how that can work for me

z-index: -1; (I still haven't tried this to check)

I got it. I just moved my image element up in the code to above the layout

hmmm, I guess I know why

awesome

then div

but not sure how to solve it, except by adding additional wrappers

i want it to be like body
if i have an image , it will go across the whole thing

so for a floated block, not way to make it stretch all the way ? Damn

]shrink @ Seb
oops
that was ambiguous
]css shrink @ Seb

CSS Shrink Wrap: http://www.brunildo.org/test/ , http://www.brunildo.org/test/shrink-to-fit.html

maybe that helps

i guess min-width: fixed it in firefox
and it was fine in ie

can you stretch a image with css? like have it fit the browser window no matter the size? (say a BG image)

no
but stretched images look bad so you probably don't want to

unless theyre vector images

Nyture, http://www.cssplay.co.uk/layouts/background.html

im just wondering if its possible
ty nowimproved

np

not that I know of

JD check out now's url =P

oh huh
remarkable

yea right
ok im heading off a bit
cya

this guy cerberusaeon keeps showing up and then disappearing before I find out what his problem is

q.e.d.

how do i specify the width and height of a div?
100; height: 100;
or more complex?

100%; it does 100% but it goes even passed the end of page because its below other divs, how can i fix this?

]fullheight @ Bear10

fullheight: DECENT: http://phrogz.net/CSS/valign_in_body/block.html LAME: http://www.alistapart.com/articles/fauxcolumns/

you're missing the unit (px, em, %)

Ace_No0ne, yeah thats what im using

you want to substract, say, the header?

yeah

hmm, not sure whether that's possible without JS
URL?

sec leme upload
http://www.mydevsite.net/Shant/
best viewed in ff

'course
looks nice

my first attempt at a CSS layout lol

I like the colors

thanks

]zip @ Bear10

Start every stylesheet with this: * { margin: 0; padding: 0; }. You'll save yourself the confusion over quite a few strange element and browser spacing differences later on. * == http://www.w3.org/TR/CSS21/selector.html#universal-selector

FYI

thanks

not sure how to do this … although there's probably an easy solution
but then, it might be impossible with CSS

there has to be a way

can you do negative bottom margin the size of the header

k let me try

wtf is http://www.mydevsite.net

dunno
lol not mine

how did you upload your stuff there then

margin-bottom: 122px; right?

negative margin

my bad yeah still dont work

:/
guess you'll have to wait for the Real Experts then

cause when i dont have the headers it does 100% right

probably - try looking at http://www.zoffix.com/new/to-page-bottom.html
maybe that helps

hi there
somebody around who has experience with layouting with CSS?
you know, those things which are nearly impossible to do with CSS like a simple 2-colon layout?

that's not hard

well, it looks like…
i tried anything and nothing works
there are too problem
s

nope didnt help o well

if i use float:left for the left colon and then the rest i am required to use margin-left:XXXpx to avoid the content colon to float around
but what if the size of the colon is not know?

simple two-column layout coming your way in 10 … 9 …
http://paste.css-standards.org/23262/view

another problem is if i use a nested float:left inside the content and i use clear:left i drop back out of everything instead of staying inside the content colon
i can do this kind of layout but as soon as there is a nested float:left inside everything breaks
for example i want to use in my page a small summary panel which is formated as window
it's destined to float on the right side and the content around it

yes, that's a problem - if you absolutely need that, you will probably need to use abspos

well, in that case i'm forced to go back to tables then
i wanted to avoid tables for my layout if CSS can handle this in a fluid way

absolute positioning works great

*shudder*

so for example the users have to be able to define what blocks of content they want left or right with the content in the middle
so some might have only the middle while others have up to all three
but i can not use absolute values then since i don't know the width of these colons

you can only solve either one of your problems, not both

also people with large fonts should not be blocked out ( bad web design )
so it looks like tables are the only solution to get a somewhat fluid layout then?

no
why would you need clearing in the contents

like mentioned, because of floating elements
for example some user puts an image in his article
and the text floats around but only one paragraph ( the quick summary ) and then wants a break

]clear @ LordOfDragons

Contain floats: http://www.ejeliot.com/blog/59 , www.positioniseverything.net/easyclearing.html

maybe that helps

http://dragengine.rptd.ch/module.php?id=17
if i though use two colons and a clear after the first paragraph i drop out of the entire page
which is one of my biggest headaches so far

read what I had ZofBot tell you (the first link)

wow i hate this stupid problem -_-

hm…
i'm a bit confused now…
so are nested floats possible or not?
since whenever i tried using them in my FX it fails
and it's the most recent version
just bad tutorials or really not possible?

of course nested floats are possible

because of this quote:
"The W3C float specification requires that a cleared element shall stay below all previous floats. There are no exceptions to this requirement! "Previous" in this case means any float that comes earlier in the source document."

– how would i select this element?

so it is not possible after this quote… i'm confused

what's not possible? Clearing isn't floating.

Elements with clear:; enabled…

take a simple example
you have a div (float:left) and another div besides it

without inserting an id="foo"

See, now that's a different question all together. Instead of being vague, why don't you just ask the full question?

inside the div you have another div(float:left) which has say an image hosting and on the right another div that has some text
kinda a news-page if you wanna put it this way

What? Me?

er, sorry. I meant LordOfDragons
it's early

heh.

so if i clear from the news-text i have ( after this quote ) to drop out of the entire layout

linky?

not possible… or did i miss something?

I have no idea what you're talking about, LordOfDragons… Link to the page and -show- us what you want to do.

You can't selectively clear things. If that's what you're asking. But that doesn't mean your layout isn't possible.

does ie have issues with using z-index?

hm… i don't have a page with "exact" this right now just a "hacked" one
where i used a fixed size for the inner float
this works… well… unless you use it on opera or IE that is

Show us code.

so if you increase the font size all is fudged

Er, wait. Why?

due to the fixed size
it had been the only way i could get a two-colon box inside another two-colon box ( the page layout )

Why don't you use ems instead of px?

but that's not much the problem here. since i found no solution nowhere i considered this impossible on css

But anyway, Show us the bloody code. instead of blathering on about how it doesn't work. We're not psychic.

]secret

No URL = no help. We are not telepaths, and can't determine the problem (let alone the solution) without playing with the troublesome page. So, give URL, or leave the channel and call 1-900-PSYCHIC. Oh, and good luck. You'll need it.

U_U
not read? i said i don't "have" this page right now
i'm trying to avoid designing a heck lot long time on a page just to see it doesn't work
i have already played with float and css around on other pages
so i know a bit where i could expect troubles… and this is for example how to make a two-colon layout which is liquid but not fails if inside somebody uses a float

If you're unwilling to code a test page, stop carrying on about how your non-existant page doesn't work. Since it obviously doesn't work, it doesn't exist. You're wasting our time. It's rude.

i sent you a LINK!
but okay… nobody cared… i see

Where? we've asked for a link, and you didn't respond.

DAMN IT!
it had been up there
already scrolled off the screen .=.

hey Ace_No0ne you there?

uh-oh…
not for long anymore

aw, k

why
found a solution to your nested floats?

wanted you to try and help me out with somethin

no, because i'm currently attacked from all sides

why me specifically? just ask the channel; I'll help if I can

instead of answering a "simple" question

true lol

lol welcome to the interwebs

well ive got this image http://img250.imageshack.us/my.php?image=ehdc7.jpg (my layout) www.mydevsite.net/Shant/ i need help figuring out a way to get that shaded part

until a minute ago, we were trying to wrangle said 'simple question' out of you.

the one below the header?

you guys don't have ears, right? i repeat

yeah
on the left and right side

so i know a bit where i could expect troubles… and this is for example how to make a two-colon layout which is liquid but not fails if inside somebody uses a float

wrap a container around the entire non-header stuff and assign a bg image (top aligned)

column, not colon. And like I said, until a minute ago…

so has somebody already "experience" ( or made something working ) which is this

Give the left and right sidebars background images?

Where is the user content? left or right side?

the left and right sidebars are bg images

the content is in the middle

even easier: change them

but there "can" be something left or right, at the discretion of the loged in user

middle? You have two columns, there is no middle

for the start i tried two colons not three

column, LordOfDragons

since if you get two working three should be less of a problem

change what?

so for simplicity you can also simple say this:

the sidebar images - but why is everything done with images? why not container borders

It's really a whole lot easier for us if you ask your original question, instead of doing it one mini-question at a time. Since answers change drastically when taken in context than when taken outside of context.

left something ( you don't know ) and right content with possible floats in there

not sure i get what you mean, like i said its my first attempt at a CSS layout transfering from tables im having hard time lol

Put a background image on the container and make the content div white

http://www.mydevsite.net/Shant/images/col.jpg is not needed; you can have DIV { border: 1px solid #12345; } instead

so users can make articles with possible images in as well as a summary table
so i have to be a bit "flexible" at the layout to avoid people breaking it straight away

yeah i know but i just want to be able to do it with images b4 then

but for this i need to know if it is "in general" possible to do nested floats without breaking ( clearing ) an outer float

div id="nav" style="background: url(stripes) center top;"sidebar/div

is that an example or am i supposed to use that

you are supposed to adapt that

ok.. let me see that would be for the shader i assume

be sure you do url('file/path.whatever')

Hey ; )

do i need the '
cause its been working so far without it

you don't, but I also hate the idea of un-delimited strings

yeah, i usually use '
i will add it at the end
http://www.mydevsite.net/Shant/
does that stupid thing with the 100%, doesnt go all the way to the top looks ugly lol

huh?

see the shader?

yes

ok, see the left bar

yes

the leftbar doesnt go to the top, how it should
kinda like that header problem before

add some text to teh bars so I can see what's where exactly

k
refresh

better
wait what? why is the shader a separate container

because if its together it turns out like this
refresh

then You're Not Doing It Right
lemme try

ok lol
having better luck then me?
i kind of got it working with it seperate

sorry Bear10, sorta busy atm
might take a while

np
anywho if you get the chance to look at it, i got it working like this http://www.mydevsite.net/Shant/ only thing is we still have that 100% problem from top to bottom

that's a bad hack with the additional DIV
lemme try something now (I got a min or two)

k

that's serious divitis, Bear10

lol

I need to clean that out first

thanks for the help

in the meantime, Bear10:
]names @ Bear10
]css names @ Bear10

Don't use class/ID names like "right", "left", "red". The names need to reflect the purpose of the element, not what it looks like or where it is located.

o

also, do you need to use XHTML, esp. Transitional?

Hi folks! I have an image which is smaller than a div and would like to use it as a background, however I would like to set the background so it's to the right hand side of the div only. I can set the url() and no-repeat, but I'm unsure how to get the position to be to the right hand side.
I'm aware of background-position, but my problem is that the div isn't a fixed size. Any pointers greatfully received!

i dont use xhtml

url(pic.jpg) right no-repeat;
(at snazm)

That easy lol thanks matey

No problem.

I thought I was missing something 8-)

your doctype says you do!?

Cheers

eh dreamweaver did it, but i code as if i used xhtml anyway

so XHTML? or HTML?

html

k

hello

that's important, y'know

i didnt until i started wtih css lol, in php, html, js never had a problem not defining stuff like that

ive converted everything to divs

welcome to the World of Standards

hi

but now i cant place the two divs next to each other
rwautomotives.co.uk — look

:| gotta get ready to leave brb

I have a container (page) that is 570px wide. Unfortunetly, I need to fit some wide tables in it. That's not going to happen. I was thinking that maybe i could center the tables in relation to the container and have them overflow left and right.

PM me your mail address; I will send you what I have then (won't be a lot, but will make you understand simplicity wins)

Hello, if there is just one property for a selector, should it have a ; after it or not?

20px auto; seems to work. The problem is that i take them out of flow. So what comes next goes underneath them.
Any idea of a better fix?

]css overflow @ SpookyET

css overflow: http://w3.org/TR/CSS21/visufx.html#propdef-overflow

Might help?

jay.. the same can be asked about the last property for a selector

no

overflow can just cut them off at the ednds
ends
or put a scrollbar on
ideally you shouldn't put over-wide tables at all

I don't want to do that. I want to center them in relation to the container and have them overflow left and right.

okay true, so i guess it doesnt matter either way… it still validates… thanks

i don't put on there - once I read Joe Hewitt talking about the semi-colons being used to indicate there is another property and by omitting the semicolons on the last proprety you save the browser a little processing

oh okay thanks, i guess i wont do it either then

anyone help moi?

it's negligible

I don't think that's the truth. And I think most people agree it's a better practice to include semicolons

It makes no real difference. It's personal preference.
It's stylish and oldskool to omit them
but it's tidier to keep them

oh okay thanks everyone
which ones are are not the way you want them?

Do select fields in forms naturally have more height than regular input fields?

Any ideas? position absolute and margin: auto; would work if there was a way to force the following content to have a top margin equal in height with the table

Cant figure out how my select field is 1px larger than my inputs

hy
jsute a small reminder

i dont think i can help, but your page definatly shows up alot different in IE than in Firefox

if i have div class="right"table/table/div
and i want to acceess to table
what is the css for this
i've try

its navigation needs to be next to row 3

.right:table

.right table

ahhh okay
i'm stupid

Or table.right

] name

correct

]name

table.right won't work

oh well

thank

I put no margin on p for my header, and that works in Firefox… but in IE there is still a spac ebetween an image and my p.. how can i get rid of this? http://www.uniquelynorth.com/Uniquely_North_Web_Template.html

Jdigital, why not?

table.right matches table class="right".
not div class="table"table

thanks it was this

Ah, good to know
Why even specify table.right then?, why not just specify .right?

if you're using the strict doctype you will get a small space reserved below images. you can remove the space by setting the images display:block

Because he wants to access the table, not the div

if you have two elements classed rights

why would you use table.right versus just .right?

two reasons
1) in case you have anything else classed "right"
2) to remind yourself that it's the tale
tbale
table.

How would you force the content after an abosluletly positioned blocked to move down and not show up underneath?

thanks for the lesson

np

JavaScript? Measure the height of the block and add it as a margin to whatever comes after?
i don't like that solution

use a wacky hack to put a blank element in
or create a space equal to the table's missing amount

yeah, but that requires javascript
i'm looking for a css solution
for having that thing overflow left and right

I can't think of a way
560px wide means that anything wider will just not fit

so if it's 580, i need 10px overflow on the left, and 10px overflow on the right
instead of 20px overflow on the right

css overflow only lets you handle overflow by hiding it or or applying scrollbars

yes
however, { position: absolute; left: 0; margin: 0 auto; } gives me the effect i want. the only problem is that it takes it out of flow and content goes under the box

klined

I have this "border-top: 1px solid;" in one CSS file and I want to define it's colour something like "border-top: gray;" but the border dissappears. How can I do this then?
The colour in another CSS file. Forgot to mention that.

border-top-color: gray;

Thanks.
And thanks again for such a quick resonse.

border-top is a shorthand, needs color, style and width
No problem. Just happened to alt tab in the right moment .

Can I get an opinion of layout size?
http://img3.freeimagehosting.net/image.php?9e20284bce.jpg or http://img3.freeimagehosting.net/image.php?8252343ea3.jpg : Which is better?

I like the first one.

yea me too. But It doesnt allow alot of space for say, images
and its kind of tiny on a screen larger than 800×600

i guess i think id have to see something in it to decide, since im not sure what is meant to be in them, the one has two windows, and the first has 1 so i dont know if there is a navigation to be in the main image in addition to the one on top or what

Damnit, do form buttons and selects somehow have some built in extra padding?

well, there are going to be sub-menus for each topic. The two layouts differ on a dropdown menu or not

a good practice is to reset the browsers css, and then apply your styles. you can get a good reset css here: http://developer.yahoo.com/yui/reset

okay, i dunno, i like different things about boht

do tell

Ace_NoOne

Hi
I've got a huge image that I'd like to use as a background of this page

What's the difference between clientWidth, offsetWidth, scrollWidth, and which one is the most reliable?

But it's too huge for my resolution, so I'd like to make it fill the body tag, with any resolution
is that possible?

Nyture the wider one i like how your logo kinda pops out of the box and i like how the world portfolio is kinda with the line going through it or on top of the line, i think it looks kool, but i like the height of the box, and agree that it would allow more space for your content or images i
guess

wow that is hard to udnerstand jaybird
so u prefer the winder one?
*wider

nyture sorry i have a hard time saying things in a way that makes sense i think
Nyture i like certain elements of the wider one, but for actual page content i prefer the squarer one

its alright man
I do the same in R/L

thanks

You like how the logo pops out of the wider one, and how the word portfolio overlays the news box, *dont get the height thing*, and you agree the wider one allows for more space for images?

form or input atleast does seem to have some kind of margin of its own
atleast in IE…
i think the height thing was refering to the fact that i think the taller, more squarer, i believe the first one you posted, allows mroe space for images

theyre both the same height

really?…


oh no wait, your right
the first one is taller, but it doesnt matter. itll strech vertically

lol @ IE7 failure…. again

oh i see, if both of them stretch vertically, then i would think the wider one would have more room for images since its content space seems wider than the first one

* {background: transparent;} does this http://69.254.26.158/dru1/services
view in IE for a good laugh

it is winder. the main area alone is an extra 100pixel wide or so
overall I think its 200pixel wider

does anyone else see what im talking about?

i saw that the left coloumn seemed to be more to the right than in firefox, and that there were lines running down the left side of the page and maybe some space at the top of the left column that wasnt there in firefox.. or thats what i recall noticing
ok not sure what else to say

dont have to say anything, youve helped plenty

jaybird7, did it display the full content though? because over here its acting screwy
my menu headings dissapear

hey folks

when i mouse over the menu the bg's go white

i'm having loads of trouble trying to get ubuntu 7.04 installed on my t61
the video gets really messed up

let me look again

ok

okay ya i see that when i mouse over hte menu the bg goes white
ah and i also see now that the menu headings arnt there also

do the titles show up?
yeah, wtf bill…. come on
:P
its almost like it wont work at all

are you using javascript to make your login input fiels rounded

even if i just put it on the feild
jaybird7, no just css
i float the inputs off the top + right via absolut
the boxes are on the bg
and the inputs are all transparent with no border
the whole 1/2 part of that login and the background are just a png file
all the text and form elements are still there in text, but hidden, for the text only guys :P

hello! where can i found information on how to center an h1 or h2 ? thk's

ah i see thank you

akira2014, user the ccs text-align: cener;
on the h1 or h2

How do I change the colour of a text?

i don't work

#RRGGBB or color-name;

That seems to change the colour of my borders too.

help

akira2014, do the text-align on the parent element, or try makeing the h2 with=100% in html
if your doing html 4.0 that is

this is only slightly related to CSS but there's no one who can help anywhere else

(size) (type) (color) or border-color: value

would IE6 not allow relative sizes (percents) as a string?

Is that's the only way?

Polarina, yeah pretty much

thk's bobsomebody, now it work on IE7 but not in FF (i will google a litle)

www.w3schools.com/css/css_reference.asp

I just had a problem with mozilla firefox being unable to get the size of an image

akira2014, what you need to do is make the h1 bigger somehow

so I fixed the problem by changing it to a percent (I needed to resize the image)

or center the h2 from the parent element

but in IE6, it crashes

class before h2

wait i will try

take out the 100% thing thats a web hosting services with affordable prices fix sometimes, but its a roll of the dice ya know

hey guys/gals , whats the topic atm

css :P

smartas
s

bobsomebody, is there a way to get the image's width and height in mozilla?

no

I even waited until it was appended to the body, but it was still 24
(blank img)

and you shount be focusing on mozilla

why not?

because there are at least 5 major browsers out there

……

IE6/IE7/Opera/Safari/Firefoxx

firefox.

second x was for 'sux'

opera has about 1% though.
safari maybe 2%
IE6 maybe 18%

opera has less then 5%

most of it is IE7 and firefox

2-3% actually
IE6 has 35-40
FF has ~30%
Safari - les then 5% .. 1-2%
IE7 takes rest

i'm sure there's a way to get the size of an image in firefox
if there isn't, that's just stupid

lol

agamemnus, what do you mean? like return the width/height? or set it?

yes
return the width/height
hmm
what the hell is this
I changed button[i] from document.createElement('img') to new Image()
and now it works.
aaaaaarghr467nbft78g6ym9fg6b78fn7m9ms5n78bn678

hi

shit
it only works in mozilla

lol

do you have access to firefox?

yes

what positioning method do i want to use to center my form under my image at http://www.uniquelynorth.com/Uniquely_North_Web_Template.html please

i have written a javascript library. it's at tin-tags.org. Would anyone care to comment on it? ( beta reqires FF )

sure

thanks!

on a minute
in*

err - how do i change the size of a select-box? just like you can do "input { font-size: 1.5em; }" ?
simple "select { font-size: 1.5em; }" did the trick. But why doesn't "input select { font-size: 1.5em; }" work?

into input

learn your basic html at least

gaah - sorry. meant "input, select" of course :P

it sould be working in that case

(which works)

chech your page in firebug

just me making typos

maybe input or select gets overrided

aha
mozilla firefox caches images just too slowly
I loaded in the images in an earlier part of the script and it seems ok

agamemnus, you should take it to ##javascript

YAY
it's fine
i fixed it now
The Javascript gurus are all afk you see
byeeeeeeeee

which has a better flow. a menu bar on the right or left of a website?
Yo zoffix!

menu on left ir more etgonomical (spelling)
edi .. on right

ergonomical
hmr
aye

morning

evening

afternoon

but , this layout is something which is impossible to tell designer
they just cant believe

?

becase 'gods of web design - microsoft - has put menu on the left, so it must be right way'
=/

ppfttt microsoft

lawl

hi
having trouble with background-position in firefox
z-index: will make 1 background appear above the other?

no

will make one class or id apear at said level

ive set link background-position, and it has a hover img
the hover wont appear above the original in firefox

bobsomebody, what does it have to do with class or ID?
MaWanna, because your element is not positioned. And you are doing it wrong anyway

the class or id with the applied value will be adjusted

]rollover @ MaWanna

rollover: http://wellstyled.com/css-nopreload-rollovers.html , http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/

bobsomebody, what does it have to do with class or ID?
This is CSS not HTML.

ta

Is there a way to get the apparent background-color of an element with inherited background color? Trying to get it (with JS) only returns 'transparent'

i was repeating the background-image

Zoffix, are you just a buzzkill or what?

bobsomebody, excuse me?

to do css u use class and id alot anyways
sorry to be blunt

No you don't

….

You select classes or IDs of elements some times.. you are not applying z-index to classes or IDs.
s/select/select elements using their/;

i z-idndex by classes and ids
it works great

.oO( And you are a weirdo too )

not doing so is pretty stupid
using pure html ententies is great

 PHP Web Hosting | PHP Hosting

*
To prove that you're not a bot, enter this code
Anti-Spam Image

Leave a Comment

You must be logged in to post a comment.


Blog Tags:

Similar posts: