Guys, I'm building my first web site for my sister as a present. Needless to say, I want to do a bang up job for her to encourage her. But it's also a learning experience for me, which I hope to use for my future projects. So I was hoping some of you of you kind people would provide me with feedback and make suggestions about some of the issues I come across.
OK my first problem was how to create a horizontal bar going from edge to edge and containing the navigation menu. The bar itself would be 50px wide and it would sit 5px from the top of the screen. I managed to create the bar using a div tag and solved the text placement and alignment issues using top and right padding on the div tag.
My next problem is with the logo image. I want the logo to start from the very top of the page and overlay the div tag where it crosses it. But the two are fighting each other like a cat and mouse. The logo either goes at the very top and pushes the div tag down, or it sits below the div tag.
Thank you so much guys! I probably could not emphasize enough my level of ignorance about HTML and CSS. But I'm determined to learn. I will study tags and settings to try to understand them. For now I'm trying to make heads or tails of what you guys gave me. Be ready for some stupid questions.
Guys, upon further inspection, I realize that I don't want the "wrapper" section to be there. I'm only interested in the middle, dark grey, "nav' bar. I want the space above and below the nav bar to reflect the background. I tried fading the "wrapper" section, but it faded the whole thing.
Here's the thing...we really need to see the design you have in mind because trying to gather what you mean in writing will mean different things to different people.
You do have a design...don't you? If not, you really should.
Leave the wrapper for now...it's positioning everything...you could remove the background color to make it disappear though.
As for reflections, it depends on what you mean...see, there's that need to see the design.
@mr_z : I should be the last person in the world telling you about design (considering i suck at it and it takes me way to long to do) but like anything else you need to start with a set of blueprints. You cant build a bridge without a plan can you? Even if it is drawing something on paper or using something free like MS Paint, whatever Macs equal is, Gimp, photoshop(30 day trial), etc. When you have all those things down, it gives you a better visual of where you want to begin.
This may or may not help, but something i used to do a long while back when trying to understand why people did what they did, i would go "inspect element" and just add either a 1px border or some inset box shadow around every element to see how it worked.
For example, lets look at CSS-TRICKS (awesomeness!)
Now add a small border with:
* {
border:1px solid red;
}
Now you can simply highlight over every element and see exactly why it is positioned there and you have a more defined look of the sites 'skeleton'. I hope that made sense and possibly helped you with your design ideas.
Hey guys, I'm back! Sorry for the lack of communication for the past few days; long hours, family and all... But I really appreciate all of your input which has been a tremendous help and motivation to me! I took the time to go through a tutorial from Lynda.com by James Williamson (Up and running with HTML). The guy was fantastic and really provides a good basis for any noob to build upon. The language was very clear and not unnecessarily technical. I feel like I have a little better grasp of the overall picture.
Anyway... in the next few days I'm gonna have to find a way to present an animated background on the homepage, build a cool photo gallery of my sister's clients, create a Contact Us form...
But for now, here's where I'm stuck. On the About page, I'm trying to present a summary of her professional philosophy, accompanied by an image.
I created a div tag and inserted the img and txt in there. I'm trying to use CSS to format their positioning and presentation. I used the float[colon]right to wrap the text around the left side of the image. I have 2 problems: a) The text wraps on the same line. b) For some reason I cannot justify the text using text-align[colon]justify CSS property, applied to div.
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.
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
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?
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?
@paulie_d is bang on with his JQuery recommendation, it's definitely your best bet for a background slideshow.
Re: % values for widths etc. It's extremely common to have % based widths used in conjunction with max-widths based on pixels.
For example: .box { width: 100%; max-width: 1200px; } - This way your code will downsize nicely but won't forever extend width ways for people with larger screens & browsers (if you don't want them to).
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?
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!
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.
Guys, I'm building my first web site for my sister as a present. Needless to say, I want to do a bang up job for her to encourage her. But it's also a learning experience for me, which I hope to use for my future projects. So I was hoping some of you of you kind people would provide me with feedback and make suggestions about some of the issues I come across.
OK my first problem was how to create a horizontal bar going from edge to edge and containing the navigation menu. The bar itself would be 50px wide and it would sit 5px from the top of the screen. I managed to create the bar using a div tag and solved the text placement and alignment issues using top and right padding on the div tag.
My next problem is with the logo image. I want the logo to start from the very top of the page and overlay the div tag where it crosses it. But the two are fighting each other like a cat and mouse. The logo either goes at the very top and pushes the div tag down, or it sits below the div tag.
What can I do to make this work?
Thanks
Oh, and I'm using Dreamweaver CS6.
I forgot to include the code:
MOD EDIT: CODE STRIPPED
@mr_z Please post your code on http://codepen.io
Sorry Chris... I keep messing up.
I will try to use link
Thank you Chris for the cleanup and the link.
Here is the link to my code. I hope it shows up correctly. http://codepen.io/mrzeee/pen/hKbxy
You mean something like this: http://codepen.io/anon/pen/Jbisu
Brother you got it! I would want the bar to be a little higher. I'm gonna study what you did there. I'm so happy... Thank you
I slightly added more to @Paulie_D's pen. http://codepen.io/christopherburton/pen/thjuF
Thank you so much guys! I probably could not emphasize enough my level of ignorance about HTML and CSS. But I'm determined to learn. I will study tags and settings to try to understand them. For now I'm trying to make heads or tails of what you guys gave me. Be ready for some stupid questions.
Thanks again
Chris Coyier has some excellent videos on this site you might want to take a look at.
I would recommend, to start with, the ones on Floats and Positioning.
Guys, upon further inspection, I realize that I don't want the "wrapper" section to be there. I'm only interested in the middle, dark grey, "nav' bar. I want the space above and below the nav bar to reflect the background. I tried fading the "wrapper" section, but it faded the whole thing.
Here's the thing...we really need to see the design you have in mind because trying to gather what you mean in writing will mean different things to different people.
You do have a design...don't you? If not, you really should.
Leave the wrapper for now...it's positioning everything...you could remove the background color to make it disappear though.
As for reflections, it depends on what you mean...see, there's that need to see the design.
@mr_z : I should be the last person in the world telling you about design (considering i suck at it and it takes me way to long to do) but like anything else you need to start with a set of blueprints. You cant build a bridge without a plan can you? Even if it is drawing something on paper or using something free like MS Paint, whatever Macs equal is, Gimp, photoshop(30 day trial), etc. When you have all those things down, it gives you a better visual of where you want to begin.
This may or may not help, but something i used to do a long while back when trying to understand why people did what they did, i would go "inspect element" and just add either a 1px border or some inset box shadow around every element to see how it worked.
For example, lets look at CSS-TRICKS (awesomeness!)
Now add a small border with:
Hey guys, I'm back! Sorry for the lack of communication for the past few days; long hours, family and all... But I really appreciate all of your input which has been a tremendous help and motivation to me! I took the time to go through a tutorial from Lynda.com by James Williamson (Up and running with HTML). The guy was fantastic and really provides a good basis for any noob to build upon. The language was very clear and not unnecessarily technical. I feel like I have a little better grasp of the overall picture.
Anyway... in the next few days I'm gonna have to find a way to present an animated background on the homepage, build a cool photo gallery of my sister's clients, create a Contact Us form...
But for now, here's where I'm stuck. On the About page, I'm trying to present a summary of her professional philosophy, accompanied by an image.
I created a div tag and inserted the img and txt in there. I'm trying to use CSS to format their positioning and presentation. I used the float[colon]right to wrap the text around the left side of the image. I have 2 problems: a) The text wraps on the same line. b) For some reason I cannot justify the text using text-align[colon]justify CSS property, applied to div.
http://codepen.io/joe/pen/oLDCy
Any ideas?
Thanks
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.
Try not setting line height to 2px.
Looks fine to me.
http://codepen.io/joe/pen/gLdaA
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
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.
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?
If flexibility is the desired result you should always use percentages for widths / padding / margins.
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!
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/
@paulie_d is bang on with his JQuery recommendation, it's definitely your best bet for a background slideshow.
Re: % values for widths etc. It's extremely common to have % based widths used in conjunction with max-widths based on pixels.
For example:
.box { width: 100%; max-width: 1200px; }- This way your code will downsize nicely but won't forever extend width ways for people with larger screens & browsers (if you don't want them to).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
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!
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