Jump to content
Sign in to follow this  
WebWerx

Need a Bit of Tutelage with my CSS

Recommended Posts

WebWerx

You will note on the attached page that I am having difficulties lining up the icons with the associated text. Here is my HTML code:

Contact Information
bill(at)nadromarine.ca
(519) 583-1080
(519) 427-3357
print.png
(519) 583-3032
[/code] and here is the associated CSS
[code]/* Profile Page Icons & Text */ } .email-icon{ } .email-icon-text{ float:right; color: #AAAAAA; padding-right: 30px; } .phone-icon{ } .phone-icon-text{ float:right; color: #AAAAAA; padding-right: 30px; } .mobile-icon{ } .mobile-icon-text{ float: right; color: #AAAAAA; padding-right: 30px; } .fax-icon{ } .fax-icon-text{ float: right; color: #AAAAAA; padding-right: 30px; }

I know I have done something wrong - but simply cannot figure out what it is. I just want to line up each icon with the associated text. Maybe I am approaching things from the wrong direction? :-)

Share this post


Link to post
Share on other sites
catrina

You're using DIV layers for the text and span tags for the images, which is going to cause issues with how the text will display. You should use span tags instead of the DIV layers and see if a difference is made.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
WebWerx

@catrina: I actually thought that my problem was related to that. That being said, would I not be better off using DIV layers throughout?

Share this post


Link to post
Share on other sites
WebWerx

@catrina: I now get the issue with combining Spans & Divs. I also think that for my application, spans would be better. That being said, here is my revised HTML

Contact Information bill(at)nadromarine.ca (519) 583-1080 (519) 427-3357 (519) 583-3032
[/code]

The text appears fine. But now my images have disappeared. I think I have a syntax issue..... Should I be setting up my image stuff within CSS (IE setting my image as the background image?)

Share this post


Link to post
Share on other sites
catrina

This needs to be corrected:

An image can't be display using a span tag. An image can only be displayed using the tag as shown here:
[/code]

	
	If you want to display an image inside a  tag it would need to look like this:
	
	
[code]IMAGEURL

tags also cannot have an alt attribute. P.S. - A semicolon is being added at the end of the codes above. Please ignore them.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
WebWerx

Got it! So this is what I have done. Would I put my Alt tag, width, height.... etc in my CSS class when I do my padding etc...?


	bill(at)nadromarine.ca 
	
	(519) 583-1080
	
	(519) 427-3357
	
	(519) 583-3032[/code]

You have gone "above & beyond" @catrina!

Share this post


Link to post
Share on other sites
catrina

You can add alt, width, and height attributes to the tag as shown here (you don't have to add anything to the CSS):

[/code]

Again, please ignore that stray semicolon that shows in the code.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
WebWerx

Got it @catrina. I've added my width & height attributes as you suggested (no need for an alt attribute with these icons). So have a look: http://goo.gl/2af5O . My text is not lining up correctly with my icons. I tried adding some padding on top of the icons. But the CSS is not 'taking'. What gives? HTML


	bill(at)nadromarine.ca 
	
	(519) 583-1080
	
	(519) 427-3357
	
	(519) 583-3032[/code]

	
	[b]CSS[/b]
	
	
[code]/* Profile Page Icons & Text */ } .email-icon{ padding-top: 20px; } .email-icon-text{ float:right; color: #AAAAAA; padding-right: 30px; } .phone-icon{ } .phone-icon-text{ float:right; color: #AAAAAA; padding-right: 72px; } .mobile-icon{ } .mobile-icon-text{ float: right; color: #AAAAAA; padding-right: 72px; } .fax-icon{ } .fax-icon-text{ float: right; color: #AAAAAA; padding-right: 72px; }

Share this post


Link to post
Share on other sites
catrina

The top margin needs adjustment. Please add this attribute to the CSS for .fax-icon-text (you can add it directly below the padding-right: 72px attribute):

margin-top: -35px;

See if the text is still positioned incorrectly.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
WebWerx

@catrina: I get it - and have implemented. But I am still perplexed as to why I cannot push the icons down a bit (starting at the top)? In my mind, I'd start at the top by aligning the element at the top left first... then work my way down. So I am kinda half way where I need to be. Your method works. But I am still left with too little space between the title and the elements. Hence my thought process of moving that first icon down a bit. Look at the space between the Mailing Address title and the actual address: http://goo.gl/2af5O This code is not registering:

.email-icon{
	padding-top: 20px;
	}
.....and I don't know why.
/* Profile Page Icons & Text */
	    }
	.email-icon{
	padding-top: 20px;
	}
	.email-icon-text{
		float:right;
		color: #AAAAAA;
		padding-right: 30px;
		margin-top: -35px;
	}
	.phone-icon{
	}
	.phone-icon-text{
		float:right;
		color: #AAAAAA;
		padding-right: 72px;
		margin-top: -35px;
	}
	.mobile-icon{
	}
	.mobile-icon-text{
		float: right;
		color: #AAAAAA;
		padding-right: 72px;
		margin-top: -35px;
	}
	.fax-icon{
	}
	.fax-icon-text{
		float: right;
		color: #AAAAAA;
		padding-right: 72px;
		margin-top: -35px;
	}

Share this post


Link to post
Share on other sites
catrina

I thought of an alternative solution (and I hope it works better!). You can add

layers for each icon + piece of contact info and each
layer can have a background image (the icon image itself) positioned on the left side. Left side padding can be used to push the contact info to the left more so that it's not blocking the image. Does that make sense?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
WebWerx

@catrina: I think so.... so basically switch out all of the spans for divs - and then adjust? I always thought that I would have more flexibility with DIVs. So like this?:

mail.png
bill(at)nadromarine.ca
[/code]

... And so on...?? Or everything within one DIV?

Share this post


Link to post
Share on other sites
WebWerx

@catrina: Got it. So I am to merge what I have above into 1 DIV versus the 2 I have?

Share this post


Link to post
Share on other sites
catrina

You need multiple DIVs for each piece of contact info because each DIV layer will need a different background image (which will be implemented using CSS and called by a class).


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
WebWerx

@catrina; Here is what we ended up with: http://goo.gl/HfRis Any idea why things render differently in Chrome?

/* Profile Page Icons & Text */
	.contact-information{
		color: #e51b24;
		font-size: 20px;
		font-weight: bold;
	}
	.email-icon{
		margin-top: -20px;
	}
	.email-icon-text{
		color: #AAAAAA;
	    float: right;
	    font-size: 16px;
	    margin-top: -32px;
	    padding-right: 28px;
	}
	.phone-icon{
	}
	.phone-icon-text{
		float:right;
		color: #AAAAAA;
		font-size: 16px;
		margin-top: -32px;
		padding-right: 73px;
	}
	.mobile-icon{
	}
	.mobile-icon-text{
		float: right;
		margin-top: -32px;
		color: #AAAAAA;
		font-size: 16px;
		padding-right: 73px;
	}
	.fax-icon{
	}
	.fax-icon-text{
		float: right;
		margin-top: -32px;
		color: #AAAAAA;
		font-size: 16px;
		padding-right: 73px;
	}
	
	.staff-directory-address{
		margin-top: 32px;
		font-size: 16px;
	}
	.staff-job-description{
		display: block;
		padding-top: 380px;
	}
	

Share this post


Link to post
Share on other sites
Danny

I'm looking in Chrome and I am not sure what the issue is, can you go into greater detail please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
WebWerx

Hi @Danny! Sure... Here is how the page looks in all browsers except Chrome: http://cl.ly/image/1G0R0v3t2H2r Here's how it looks in Chrome: http://cl.ly/image/3T0j2M1Y0u2e I think I am missing something in my CSS that is specific to Chrome. Note the way things are laid out at the top of the two headings (Contact Information & Mailing Address)?

Share this post


Link to post
Share on other sites
catrina

I'm not certain what could be causing that spacing issue in Chrome. You can use the browser-specific CSS plugin to make a little adjustment for that spacing in just Chrome. The usage of this plugin is described in further detail here: http://www.pagelines.com/tracking/wiki/Browserspecificcss%3AMainPage


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
WebWerx

Thanks @catrina. It seems odd though as I usually never have any issues with Chrome. Oh yes... I just saw this and thought of you (LOL): http://unbaby.me/

Share this post


Link to post
Share on other sites
WebWerx

@catrina: I remembered that you called yourself a "cat Lady"....

Share this post


Link to post
Share on other sites
WebWerx

I fixed everything @catrina!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×