hosted by liquidweb


Go Back   Web Hosting Talk : Web Hosting Main Forums : Programming Discussion : Any CSS Pros out there?
Reply

Forum Jump

Any CSS Pros out there?

Reply Post New Thread In Programming Discussion Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old
Disabled
 
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>



Sponsored Links
  #2  
Old
Aspiring 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

  #3  
Old
ThirtySx 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."

Sponsored Links
  #4  
Old
Disabled
 
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.

  #5  
Old
Web Hosting Guru
 
Join Date: Sep 2002
Location: DC
Posts: 291
Quote:
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 lack of a mechanism for vertically aligning text is one of the big hurdles that comes with css. This is something that can be accomplished very easily with a table.

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>

  #6  
Old
ThirtySx 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."

  #7  
Old
Web Hosting Guru
 
Join Date: Sep 2002
Location: DC
Posts: 291
Quote:
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>
You are right. I just tested this (like I should have before), and it works like a charm.

  #8  
Old
Disabled
 
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.

  #9  
Old
ThirtySx Bits Forever!
 
Join Date: Jul 2001
Location: Canada
Posts: 1,284
Quote:
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?
Possibly because often the resulting HTML constructs are overused and used in places and manners that makes the resultant page 1) slow loading, 2) incompatible with some browsers, 3) hard to maintain.

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."

  #10  
Old
Aspiring Evangelist
 
Join Date: Apr 2003
Posts: 369
Thumbs up

Just thought I would throw:

glish

The single best css resource I have found.

  #11  
Old
Disabled
 
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.

Reply

Related posts from TheWhir.com
Title Type Date Posted
Survey: IT Workers Not Confident in Federal Data Center Reliability Web Hosting News 2014-08-21 12:15:40
Insider Data Theft Among Top Cybersecurity Threats for US Federal Agencies: Study Web Hosting News 2014-05-01 08:34:04
Conference Tips and Tricks from the Pros Blog 2013-10-16 10:18:48
JumpCloud Brings Cloud Server Management to DevOps Web Hosting News 2013-09-11 15:01:18
HostingCon 2013: Build or Buy? How to Grow Your Small to Mid-Sized Hosting Business Web Hosting News 2013-06-18 11:59:12


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Postbit Selector

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump
Login:
Log in with your username and password
Username:
Password:



Forgot Password?
Advertisement:
Web Hosting News:
WHT Membership
WHT Membership



 

X

Welcome to WebHostingTalk.com

Create your username to jump into the discussion!

WebHostingTalk.com is the largest, most influentual web hosting community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?