Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Float right is pushing text on left.
Old 03-25-2008, 05:15 PM Float right is pushing text on left.
Daman's Avatar
Extreme Talker

Posts: 157
Location: Toronto, CANADA
Trades: 0
There is a red Tell A Friend button on this page that is pushing the title left. I need this title to stay center. I have hit a wall with this and am a little frustrated. Can anyone help please? I am still learning about the clear float tag but not sure if this is what is missing.

http://clientdownloadarea.com/ktc/index_bak.html

Code:
div#tellafriend ul{
float:right;
margin:0;
padding:0;
width: 93px;
height: 25px;
text-indent:-9999px
}
div#tellafriend li {
list-style-type:none;
background-image:url(../images/tellafriend.gif);
background-repeat:no-repeat;
margin:0;
padding:0;
width:93px;
height:25px;
}
div#tellafriend a {
display:block;
width:93px;
height:25px;
}
__________________

Please login or register to view this content. Registration is FREE

Solutions for online design™
Daman is offline
Reply With Quote
View Public Profile Visit Daman's homepage!
 
 
Register now for full access!
Old 03-25-2008, 06:19 PM Re: Float right is pushing text on left.
MattCoops's Avatar
Ultra Talker

Posts: 423
Name: Matt Cupan
Location: Charlotte, NC
Trades: 0
Also, the phone number in the middle of the top header is hard to see being black. I'd make it white (and bold) to match the two adjacent type.
And there's like a yellowish blur around it too. Screenshot attached
Attached Images
File Type: jpg sshot.JPG (9.1 KB, 6 views)
__________________
Matt - Tweeting
Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

read my
Please login or register to view this content. Registration is FREE
MattCoops is offline
Reply With Quote
View Public Profile Visit MattCoops's homepage!
 
Old 03-25-2008, 06:56 PM Re: Float right is pushing text on left.
angele803's Avatar
Perfectly Imperfect

Posts: 1,774
Name: Stephanie
Location: Oklahoma
Trades: 2
I think the quickest and easiest way to fix this would be to add a left margin to your h1 tag that contains "Steak & Chicken Feast". I would probably add 93px of left margin to that element since the size of the image next to it is taking up 93px.
__________________

Please login or register to view this content. Registration is FREE
angele803 is offline
Reply With Quote
View Public Profile
 
Old 03-25-2008, 07:24 PM Re: Float right is pushing text on left.
Daman's Avatar
Extreme Talker

Posts: 157
Location: Toronto, CANADA
Trades: 0
Thanks. But there are other elements using this same h1 tag therefore I cant add the margin. I think i need to rework it and have it placed at the top right corner of the #menu container. back to the drawing board.
__________________

Please login or register to view this content. Registration is FREE

Solutions for online design™
Daman is offline
Reply With Quote
View Public Profile Visit Daman's homepage!
 
Old 03-25-2008, 08:34 PM Re: Float right is pushing text on left.
MattCoops's Avatar
Ultra Talker

Posts: 423
Name: Matt Cupan
Location: Charlotte, NC
Trades: 0
You really should have only ONE <h1> tag in any html document. I can see more than one <h2> or <h3> tags. But your page should contain just one <h1> heading.

If you're using the heading tag to disperse custom font characteristics, there are other ways of doing that.
__________________
Matt - Tweeting
Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

read my
Please login or register to view this content. Registration is FREE
MattCoops is offline
Reply With Quote
View Public Profile Visit MattCoops's homepage!
 
Old 03-27-2008, 02:51 PM Re: Float right is pushing text on left.
Daman's Avatar
Extreme Talker

Posts: 157
Location: Toronto, CANADA
Trades: 0
Can someone tell me why in Firefox when I click on the TELL A FRIEND button on the following link does it show a horizontal scroll bar? I finally got the button positioned where I wanted and now it seems as though i did something wrong in my CSS. Not sure what though.

http://clientdownloadarea.com/ktc/corp_bf.html

Thanks
__________________

Please login or register to view this content. Registration is FREE

Solutions for online design™
Daman is offline
Reply With Quote
View Public Profile Visit Daman's homepage!
 
Old 03-27-2008, 03:20 PM Re: Float right is pushing text on left.
angele803's Avatar
Perfectly Imperfect

Posts: 1,774
Name: Stephanie
Location: Oklahoma
Trades: 2
I am not sure if this would be the cause, but you are using an "id" more than once in the document. You should use classes for your menu div.
You are only supposed to use an ID one time in each document, where you can use classes multiple times in the same document.
Your doctype is xhtml strict, so the IDs could be the culprit.
__________________

Please login or register to view this content. Registration is FREE
angele803 is offline
Reply With Quote
View Public Profile
 
Old 03-27-2008, 03:46 PM Re: Float right is pushing text on left.
Daman's Avatar
Extreme Talker

Posts: 157
Location: Toronto, CANADA
Trades: 0
So I changed the doctype to xhtml transitional and changed the css for the tell a friend button from id to class and still the same result.

see results here: http://clientdownloadarea.com/ktc/index_bak.html
__________________

Please login or register to view this content. Registration is FREE

Solutions for online design™
Daman is offline
Reply With Quote
View Public Profile Visit Daman's homepage!
 
Old 03-27-2008, 10:55 PM Re: Float right is pushing text on left.
Super Talker

Posts: 107
Name: Sandy
Trades: 0
Daman,

EVERY time I check this site out, my stomach growls!!!!

edit:
Now I know why it makes me hungry -
"Embryo designer Michael Adams, who totally looks like Messy Marvin of Hershey’s Syrup fame, explains red as one of his color choices because “psychologically, it’s the color that makes you hungry."
__________________
Sandy K

Last edited by sandyk3; 03-27-2008 at 10:57 PM.. Reason: add text
sandyk3 is offline
Reply With Quote
View Public Profile
 
Old 03-27-2008, 10:57 PM Re: Float right is pushing text on left.
Daman's Avatar
Extreme Talker

Posts: 157
Location: Toronto, CANADA
Trades: 0
I'm kind of new on the css scene. not sure your comments are going to help me solve this problem but thanks for sharing your feelings.
__________________

Please login or register to view this content. Registration is FREE

Solutions for online design™
Daman is offline
Reply With Quote
View Public Profile Visit Daman's homepage!
 
Old 03-28-2008, 11:32 AM Re: Float right is pushing text on left.
angele803's Avatar
Perfectly Imperfect

Posts: 1,774
Name: Stephanie
Location: Oklahoma
Trades: 2
Try adding margin-right:1px to your tellafriend div.
__________________

Please login or register to view this content. Registration is FREE
angele803 is offline
Reply With Quote
View Public Profile
 
Old 03-28-2008, 11:47 AM Re: Float right is pushing text on left.
Daman's Avatar
Extreme Talker

Posts: 157
Location: Toronto, CANADA
Trades: 0
simple and yet genius. that worked. thanks everyone for your help and i will take into account all the advice given for future reference.
__________________

Please login or register to view this content. Registration is FREE

Solutions for online design™
Daman is offline
Reply With Quote
View Public Profile Visit Daman's homepage!
 
Old 03-31-2008, 03:27 PM Re: Float right is pushing text on left.
Daman's Avatar
Extreme Talker

Posts: 157
Location: Toronto, CANADA
Trades: 0
Quote:
Originally Posted by angele803 View Post
I am not sure if this would be the cause, but you are using an "id" more than once in the document. You should use classes for your menu div.
You are only supposed to use an ID one time in each document, where you can use classes multiple times in the same document.
Your doctype is xhtml strict, so the IDs could be the culprit.
Can you elaborate on this a little please? What is the general rule when using ID and class? You say ID should be used only once. But I see it used many times on other sites I've researched.

Thanks!
__________________

Please login or register to view this content. Registration is FREE

Solutions for online design™
Daman is offline
Reply With Quote
View Public Profile Visit Daman's homepage!
 
Old 03-31-2008, 03:48 PM Re: Float right is pushing text on left.
wayfarer07's Avatar
Poo on You

Latest Blog Post:
Introducing WowWindow
Posts: 3,985
Name: Abel Mohler
Location: Asheville, North Carolina USA
Trades: 0
Quote:
You say ID should be used only once. But I see it used many times on other sites I've researched.
What is meant by that is that a specific id (ex id="page") should be used only once on the page. You can have other id elements, as long as they are not named "page" in this case.
__________________
Join me on
Please login or register to view this content. Registration is FREE
wayfarer07 is offline
Reply With Quote
View Public Profile Visit wayfarer07's homepage!
 
Old 03-31-2008, 04:02 PM Re: Float right is pushing text on left.
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Here's a tutorial that might help:
http://css.maxdesign.com.au/selectut...ed_idclass.htm
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Float right is pushing text on left.
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

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 On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 1.28305 seconds with 13 queries