471,616 Members | 1,459 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,616 software developers and data experts.

Message created with CSS. What am I doing wrong?

Hello,

I have been trying to create a simple feedback message do display on a
web site.
I am trying to have a message with an Icon on left and and Text on
right.
If possible both text and image would be vertical aligned to its
container and between themselves.

Anyway, this is what I came up:
http://www.27lamps.com/public/Message.htm

It is not working. And I think the CSS is getting to complex.

Does anyone has a better solution or suggestion to solve this or do a
nice feedback message?

Thank You,
Miguel
Jun 27 '08 #1
2 1344
shapper wrote:
Hello,

I have been trying to create a simple feedback message do display on a
web site.
I am trying to have a message with an Icon on left and and Text on
right.
If possible both text and image would be vertical aligned to its
container and between themselves.

Anyway, this is what I came up:
http://www.27lamps.com/public/Message.htm

It is not working. And I think the CSS is getting to complex.

Does anyone has a better solution or suggestion to solve this or do a
nice feedback message?
I'll say! Also see what happens if you enlarge the text a bit!

Noobie error: use absolute positioning to solve layout problems. Problme
is absolutely positioned elements are removed for the layout flow!

Stop being a code monkey and get the basics down first. My advice is go
through the html and css tutorials at http://htmldog.com

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Jun 27 '08 #2

shapper wrote:
>
I am trying to have a message with an Icon on left and and Text on
right.
If possible both text and image would be vertical aligned to its
container and between themselves.

http://www.27lamps.com/public/Message.htm
This is way more complicated than it needs to be. First off, width:200px
doesn't adapt to various text sizes. Zoom text up a couple notches, or
set IE's text size to Largest and see what happens.

The <pis absolutely positioned, so it overflows the div container.
Does anyone has a better solution or suggestion to solve this
Put the image in the background instead of the foreground and center it
vertically.
<p>Login failed. Please try again</p>

p {
background: #fcc url(Images/Error.gif) 5px 50% no-repeat;
color: #900;
border: 1px solid #c00;
padding: .25em .5em .25em 45px; /* left pad for img size */
}

If you also float it left, it will shrink wrap to fit the text. Add
margins to taste. Set a min-height if you don't want the image cropped
at very small type sizes.

--
Berg
Jun 27 '08 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Karl Seguin | last post: by
3 posts views Thread by Happy Man | last post: by
2 posts views Thread by Slippy | last post: by
4 posts views Thread by WP | last post: by
1 post views Thread by ZEDKYRIE | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.