Input Requested with My First Site

[mr_z]

>Seperate your CSS into the middle column rather than inline styling. That’s never a good thing to do. Also. Try and use an image that’s live on a web server somewhere so we can actually work with it.

Point well taken on both counts my friend! In fact if you see in my code I had all my CSS on a separate file, but had it commented out as I was experimenting with inline styles, and wanted to post my message before I had to take off. Thanks

[mr_z]

> Try not setting line height to 2px.

Bingo! Thank you buddy. It’s funny how little details make such a big difference. I could have probably stared for a long while before venturing to play with that value, as I didn’t properly understand it.

>Looks fine to me.

Yes it does to me as well, now that I can properly see it. Thanks again my friend!

I was wondering, is there any way to make the length and width of the div box to be flexible, depending on the display resolution, instead of using margins? I’m worried by setting hard margins the box will look disproportionate if viewed on a smaller (or larger) screen than the one I’m viewing it on. Is my fear well founded or is the way I did it pretty much the standard way of defining a div tag with content inside?

[Paulie_D]

If flexibility is the desired result you should always use percentages for widths / padding / margins.

[mr_z]

Hey Paulie, thanks for the pointer. I will have to play with that to get a feel for it. Is it standard procedure to use % values? Is that a common concern or usually not an issue?

Also, for anybody who would take a stab at it, what would you suggest for animated background on the homepage? What I’m planning is actually quite simple. I just want a series of images of hair models to be displayed on the background. I heard about using an animated gif. But i’m afraid it may affect the load time on the page, as the file may end up being very heavy. Then I was going through the CSS exhaustive reference on Mozilla Developers Network, and I saw few attributes related to animation. Anybody would recommend them? Are they widely supported by now? And if not, how would you best accomplish this effect?

Thanks everybody!

[Paulie_D]

For fluid &/or responsive website (which aren’t quite the same although related) it is common to use %.

As for animated backgrounds (by which I assume you mean swapping out one image for another) then your best option is a javascript solution.

Absolutely do NOT use an animated gif as it would have an enormous filesize that would slow down your site to a snail’s pace.

Google is your friend: http://www.techerator.com/2010/11/how-to-make-a-css-background-slideshow-with-jquery/

[mr_z]

Hey Paulie, I was afraid you were gonna mention Java Script sooner or later lol… You know, that was actually the next thing on my to-do list, as I was starting to grasp its importance within web design/development. But I don’t think I’ll be able give that a go before I have to deliver on the unreasonable promise I made to my sister, which I’m intending to keep (Woe is me).

So for now, just to get my bearings, a couple of basic question, if you don’t mind. I went through the link you provided and also looked at the script tag definition at W3C site. I’m still unclear as to where I need to insert the script! Do I do it in the header? Do I do it at the body tag, as I intend for some of the images to fill the entire background?

Thank you

[mr_z]

Andy, thanks for the suggestion! Although I don’t fully understand the 100% (of what?) width value, I’m going to look into further and will use it in the future. Cheers!

[mr_z]

Guys, something has been bugging me and I can’t put my finger on what’s causing it. What’s worse, it does not reproduce when I plug in my code into codepen.

What’s happening is that as soon as I wrap the phone number and the address lines 1-3 in a p tag, they seem to get right-aligned and get stuck under the map. But as soon as I unwrap them they go back to their original location seem to behave normally. I’ve tried to address this by playing with negative margins and paddings in CSS for both the h2 tags and the p tags and assigning the text-align:left attribute. Nothing doing!

As you can see in my CSS, I have not played with the p tags anywhere else previously.

I took a screen shot of the problem that you can view here: http://i46.tinypic.com/wt850g.jpg

And here’s the same code behaving nicely in codepen:
http://codepen.io/joe/pen/kJmeK

Any idea what could be going on here?

Thanks

[Author]

Posts