Input Requested with My First Site
# November 23, 2012 at 1:44 pm
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?
Oh, and I’m using Dreamweaver CS6.# November 23, 2012 at 2:48 pm
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# November 23, 2012 at 3:57 pm
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.# November 24, 2012 at 1:26 am
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.# November 24, 2012 at 2:14 am
@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.# December 3, 2012 at 3:55 pm
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.
You must be logged in to reply to this topic.