...

View Full Version : who can help me



dxcqcv
11-09-2011, 01:06 AM
<div id="first_title">
<img id="action_logo" src="images/action_logo.jpg" alt="" />
<span>视频</span>
<span>世界地球日(World Earth Day)</span>
<!--first_title_end-->
</div>

why does not the div keep on a line?:confused: thank you very much

felgall
11-09-2011, 01:16 AM
What CSS is being applied to it?

dxcqcv
11-09-2011, 02:55 AM
I have no idea where is problem, just like pic

dxcqcv
11-09-2011, 03:02 AM
and my code is here,it's too big so I deleted some pictures

teedoff
11-09-2011, 03:20 AM
That image is so small noone can see your issue.

Cant you post a link to your site? I for one will not download someone's files.

dxcqcv
11-09-2011, 03:58 AM
That image is so small noone can see your issue.

Cant you post a link to your site? I for one will not download someone's files.

OK, here

http://dxcqcv.info/problem/SIGEE_subject/index.html

Sammy12
11-09-2011, 05:02 AM
try adding



vertical-align: middle;


to the <img>

to vertically center everything:



#first_title * {
vertical-align: middle;
}


http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-105.png

dxcqcv
11-09-2011, 05:34 AM
try adding



vertical-align: middle;


to the <img>

to vertically center everything:



#first_title * {
vertical-align: middle;
}


http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-105.pngthanks,but why is the words on the top?

Sammy12
11-09-2011, 05:36 AM
to vertically center everything:



#first_title * {
vertical-align: middle;
}



^ That will align all of them in the middle

the height of the <div> is dependent on the tallest child element. using vertical-align: middle; will make all the text vertically align in the middle

dxcqcv
11-09-2011, 05:39 AM
and most time I write div>img+span is no problem, just this cannot keep a line, so unusual

dxcqcv
11-09-2011, 05:42 AM
^ That will align all of them in the middle

the height of the <div> is dependent on the tallest child element. using vertical-align: middle; will make all the text vertically align in the middle
yes, I know, but words should be on bottom, should not it?

Arbitrator
11-09-2011, 05:47 AM
yes, I know, but words should be on bottom, should not it?I'm guessing that you want #third_title * { vertical-align: text-bottom; }.

Sammy12
11-09-2011, 05:51 AM
http://meyerweb.com/eric/tools/css/reset/

a lot of people set it in the beginning


vertical-align: baseline;


but since I always use floats, I don't ever have to use vertical-align.
If your planning on using a lot of inline elements w/out floating, its best you set a vertical alignment to all inline elements so you have some consistency

dxcqcv
11-09-2011, 05:59 AM
I'm guessing that you want #third_title * { vertical-align: text-bottom; }.

sure,but I think that is auto like before, why will this times be set it

Arbitrator
11-09-2011, 06:04 AM
a lot of people set it in the beginning


vertical-align: baseline;


but since I always use floats, I don't ever have to use vertical-align.
If your planning on using a lot of inline elements w/out floating, its best you set a vertical alignment to all inline elements so you have some consistencyIsn't that redundant? vertical-align: baseline is the default. As far as I'm aware, no browser default styles contradict this either.

Arbitrator
11-09-2011, 06:13 AM
sure,but I think that is auto like before, why will this times be set itHave you tried it? See http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align for a description of the available values.

On a second look though, my code is apparently not comprehensive enough. It should be something like this:


#first_title *, #second_title *, #third_title * { vertical-align: text-bottom; }

(You may want to consider adding class="title" or something similar to those elements so you do not have to update the CSS for each new "title" element.)

Also, the alignment will not be flawless because you are using an image to represent the "title" information. I'd suggest using real text, generating the red gradient with CSS, and using a solid red background as fallback for browsers that don't support CSS gradients yet. You'll lose the tiny white arrow to the right of the text, but I don't see that as a major loss.

dxcqcv
11-09-2011, 08:03 AM
Have you tried it? See http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align for a description of the available values.

On a second look though, my code is apparently not comprehensive enough. It should be something like this:


#first_title *, #second_title *, #third_title * { vertical-align: text-bottom; }

(You may want to consider adding class="title" or something similar to those elements so you do not have to update the CSS for each new "title" element.)

Also, the alignment will not be flawless because you are using an image to represent the "title" information. I'd suggest using real text, generating the red gradient with CSS, and using a solid red background as fallback for browsers that don't support CSS gradients yet. You'll lose the tiny white arrow to the right of the text, but I don't see that as a major loss.
thanks a lot, you're right. I should not use div>img+span



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum