Input Requested with My First Site

[mr_z]

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.

[mr_z]

I forgot to include the code:

**MOD EDIT: CODE STRIPPED**

[chrisburton]

@mr_z Please post your code on http://codepen.io

[mr_z]

Sorry Chris… I keep messing up.

I will try to use link

[mr_z]

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

[Paulie_D]

You mean something like this: http://codepen.io/anon/pen/Jbisu

[mr_z]

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

[chrisburton]

I slightly added more to @Paulie_D’s pen. http://codepen.io/christopherburton/pen/thjuF

[mr_z]

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

[Paulie_D]

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.

[mr_z]

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.

[Paulie_D]

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.

[JohnMotylJr]

@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.

[mr_z]

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

[Watson90]

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.

[Author]

Posts