Results 1 to 11 of 11
Thread: Any CSS Pros out there?
-
05-16-2003, 11:33 AM #1Disabled
- Join Date
- Nov 2002
- Posts
- 2,194
Any CSS Pros out there?
Does anybody know how to do what I'm looking for? Copy the following HTML pages and run in browser. The problem is explained within the contents of the pages. This is not urgent but
I'm curious about how somebody else would handle this.
Thanks in advance for any help.
EA.
-------- HTML file 1 ---------------------
<html>
<head></head>
<body>
<div style="width:320;
border-styleolid;
border-width:1px;
border-color:black;">
<img src="image.gif"
width="100"
height="100"
alt="IMAGE"
style="float:left;">
<p style="text-align:center;
margin-top:2;">
<b style="border-styleolid;width:150;
border-width:1px;
border-color:red;">
Some Text Here
</b>
<br>
<b style="border-styleolid;width:150;
border-width:1px;
border-color:red;">
More Text Here
</b>
</p>
<p style="margin-top:-15;
text-align:center;">
This is frustrating me. Maybe a sharp CSS expert
can help me with this problem. Can it be done with
CSS without having to resort to creating my own
algorithm or procedures for centering the text. Any
help or ideas will be greatly appreciated. Please
note that I've created my own way of centering the
shorter text message, but I'm looking for strictly
CSS. Sorry I didn't include imsge but insert your own
or let the 'X' icon display for no imsge found. Long
message should wrap around to below the image.
</p>
<div>
</body>
<html>
-------- HTML file 2 ---------------------
<html>
<head></head>
<body>
<div style="width:320;
border-styleolid;
border-width:1px;
border-color:black;">
<img src="image.gif"
width="100"
height="100"
alt="IMAGE"
style="float:left;">
<p style="width:210;text-align:center;
margin-top:2;">
<b style="border-styleolid;width:150;
border-width:1px;
border-color:red;">
Some Text Here
</b>
<br>
<b style="border-styleolid;width:150;
border-width:1px;
border-color:red;">
More Text Here
</b>
</p>
<p style="margin-top:-15;
text-align:center;">
Short message here. Everything on the
right should be vertically centered with
the image.
</p>
<div>
</body>
<html>
-
05-16-2003, 04:07 PM #2Aspiring Evangelist
- Join Date
- Jan 2003
- Location
- Roanoke, VA, US
- Posts
- 390
Call me a little thick, but I'm not exactly sure what you're going for on the first one... could you be a little clearer so I can understand
-
05-16-2003, 04:56 PM #3ThirtySx Bits Forever!
- Join Date
- Jul 2001
- Location
- Canada
- Posts
- 1,284
There are a few problems with coding:
- width needs a units specification eg px for pixels. ditto the width, height parameters for <img> and margin.
-need to close the <div> and <html> tags
-while applying a style statement to <b> may work in some browsers (especially without a <!DOCTYPE> tag, normally you don't apply style to what is after all essentially a style element itself. Use the <span> tag instead for inline content and use font-weight: bold; in the style statement.
I'm not sure exactly what you are trying to accomplish. Also you should be aware that not all browsers will handle margins, especially negative ones the same way.
Is this more like what you were trying to achieve?
<html>
<head></head>
<body>
<div style="width:320px; border-style: solid; border-width:1px; border-color:black; padding 6px;">
<img src="image.gif" style="width: 100px; height: 100px; float:left;" alt="IMAGE">
<p style="text-align: center;">
<span style="border-style: solid; border-width:1px; border-color:red; font-weight: bold;">Some Text Here</span>
<br>
<span style="border-style: solid; border-width:1px; border-color:red; font-weight: bold;">More Text Here</span>
</p>
<p style="text-align: justified;">
This is frustrating me. Maybe a sharp CSS expert
can help me with this problem. Can it be done with
CSS without having to resort to creating my own
algorithm or procedures for centering the text. Any
help or ideas will be greatly appreciated. Please
note that I've created my own way of centering the
shorter text message, but I'm looking for strictly
CSS. Sorry I didn't include imsge but insert your own
or let the 'X' icon display for no imsge found. Long
message should wrap around to below the image.
</p>
</div>
<br><br>
<div style="width: 320px; border-style: solid; border-width: 1px; border-color:black;">
<img src="image.gif" style="width: 100px; height: 100px; float: left;" alt="IMAGE">
<p style="text-align: center;">
<span style="border-style: solid; border-width: 1px; border-color: red; font-weight: bold;">Some Text Here</span>
<br>
<span style="border-style: solid; border-width: 1px; border-color: red; font-weight: bold;">More Text Here</span>
</p>
<p style="text-align:justified;">
Short message here. Everything on the right should be vertically centered with the image.
</p>
</div>
</body>
</html>"Obsolesence is just a lack of imagination."
-
05-17-2003, 04:16 PM #4Disabled
- Join Date
- Nov 2002
- Posts
- 2,194
croakingtoad: I guess you're right. I was trying to explain the problem within the contents of the page when rendered. Maybe it wasn't clear enough.
NyteOwl: Thanks for your help, but it doesn't answer what I'm trying to accomplish.
The page is being built dynamically. The two boxes at the right may be present, or just one box or none at all. The text message below the boxes will always be present and it can be a variable length, including just one line. When the entire contents at the right of the image are smaller than the vertical height of the image I want the entire contents at the right to be vertically centered with the image.
Thanks again..
E.A.
-
05-18-2003, 04:40 PM #5Web Hosting Guru
- Join Date
- Sep 2002
- Location
- DC
- Posts
- 291
Originally posted by adorno
When the entire contents at the right of the image are smaller than the vertical height of the image I want the entire contents at the right to be vertically centered with the image.
The css vertical-align property will work with an image but not text.
<table>
<tr>
<td style="vertical-align:middle"><img></td>
<td valign="middle">your text here</td>
</tr>
</table>
-
05-18-2003, 07:52 PM #6ThirtySx Bits Forever!
- Join Date
- Jul 2001
- Location
- Canada
- Posts
- 1,284
Now that I see what you want to do, I must agree that atr is correct that the type of vertical alignment you want to do is almost impossible to accomplish solely in css.
However, the vertical-align property will work just fine with text, in or out of a table but operates only on the container it applies to.
<table>
<tr>
<td style="vertical-align:middle;"><img></td>
<td style="vertical-align:middle;">your text here</td>
</tr>
</table>
The above works equally well. In addition to the standard Top, Bottom, Middle, The vertical align property can also accept the following values:
super - can be used to superscript text
sub - can be used to subscript text
top-text - uses top of text line
bottom-text - uses bottom of text line
The baseline can also be expressed as a percentage of element line height."Obsolesence is just a lack of imagination."
-
05-18-2003, 09:53 PM #7Web Hosting Guru
- Join Date
- Sep 2002
- Location
- DC
- Posts
- 291
Originally posted by NyteOwl
However, the vertical-align property will work just fine with text, in or out of a table but operates only on the container it applies to.
<table>
<tr>
<td style="vertical-align:middle;"><img></td>
<td style="vertical-align:middle;">your text here</td>
</tr>
</table>
-
05-19-2003, 09:55 AM #8Disabled
- Join Date
- Nov 2002
- Posts
- 2,194
Thanks to you all.
Apparently CSS cannot handle every situation that can come up.
I had already done the strict HTML text alignement method mentioned by atr and it worked fine. It's more problematic when you have more than one element to vertically center against the image.
Now, in order to align the three elements at the right with the image on the left I had to come up with my own solution, The elements at the right are supposed to be dyanmically built. The bordered elements at the right are dynamically built: the two boxes may be present, or one box, or none at all. The text below the boxes will always be present and it is variable in length.
When a box is built, I know the height of each. The vertical height of the text below the boxes can also be calculated. After that, it is only a matter of calculating the total height being used on the right and then calculating the amount of blank area *margin-top) needed. Keep in mind that I also know the height of the image on the left: the image source, its height and width are coming from a database.
I could show you my solution, but I'm sure you guys are smart enough to figure it out.
Perhaps CSS needs a feature to allow vertical centering of a group of pre-determined elements? If CSS can't do everything
that you can do with regular HTML then why are there so many people advocating creating web pages using CSS only solutions?
(Just asking, no answer expected).
Thanks again...
E.A.
-
05-19-2003, 04:55 PM #9ThirtySx Bits Forever!
- Join Date
- Jul 2001
- Location
- Canada
- Posts
- 1,284
Originally posted by adorno
Perhaps CSS needs a feature to allow vertical centering of a group of pre-determined elements? If CSS can't do everything
that you can do with regular HTML then why are there so many people advocating creating web pages using CSS only solutions?
CSS is improving and there are more positioning options in the CSS3 specification currently being worked on.
For the vast majority of site layouts, you can do a considerable amount using CSS.
One of my favorite examples of it's capabilities is;
http://www.meyerweb.com/eric/css/edge/
Edited for typo's."Obsolesence is just a lack of imagination."
-
05-20-2003, 02:20 AM #10Aspiring Evangelist
- Join Date
- Apr 2003
- Posts
- 369
Just thought I would throw:
glish
The single best css resource I have found.
-
05-20-2003, 09:55 AM #11Disabled
- Join Date
- Nov 2002
- Posts
- 2,194
Thanks again to all of the above who replied and tried to help.
I suppose you can only work with what's available and be creative with it. At times you have to come up with your own (enhanced) solutions like I did with my requirements. It took some extra work (and thinking) but I solved my problem and it still uses CSS positioning.
Thanks again.
E.A.