Jump to content
Sign in to follow this  
WebWerx

Laying Out Elements Correctly Within a Content Box

Recommended Posts

WebWerx    0
WebWerx

Hi: I am starting to pull together the Homepage of our new website, and I want to be 100% sure that I am doing things correctly. That being said, I have started with this Content Box: http://cl.ly/2o1m2G1o0y262t2a2l3A There are 3 elements: 1) background colour 2) logo (left side) 3) branding copy (right side) To accomplish this, I created a div for the background color of the Content Box (item 1). I then inserted the logo and text (items 2 &3) using HTML (within the content box). My issue is that I am able to place the text exactly how I wish using CSS. However, I cannot get the logo lower. I am wondering if I have approached this correctly. So can one of the CSS gurus out there have a look at what I have done and provide the appropriate critique? I think I have things working... but not in the most optimal manner. It will be greatly appreciated!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
Hi WebWerx, Would it be possible to provide the code you have used in the ContentBox please. If the code is more than 5 lines, can you add the code to our paste service and then provide a link to your pastie please. http://paste.pagelines.com/ Once we have the code, we can take a closer look for you.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
WebWerx    0
WebWerx
Hey @ Danny! That would have been a good to start with... ;-) http://paste.pagelines.com/6v1 Critique away. I know I have not done this correctly. L

Share this post


Link to post
Share on other sites
Jenny    33
Jenny
First, you should give your img width and height attributes. :) Do you have any custom CSS for this section? You should probably float:left the image and float:right the text. To move the image down, you can try the veritcal align property (http://www.w3schools.com/cssref/pr_pos_vertical-align.asp). If that doesn't work, then just give it a top margin or padding.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
WebWerx    0
WebWerx
simple_mama !: You are "Alive" LOL Yes I get the attributes thing. Here is the CSS I have created: http://paste.pagelines.com/4fj (what do you think teacher?!?!). I am asking this question now as I want to be 100% compliant across the board and not have to go back and redo anything. Thanks! L

Share this post


Link to post
Share on other sites
catrina    103
catrina
I don't see anything wrong with the CSS attributes you've created in that CSS.

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    0
WebWerx
@catrina: I appreciate the feedback. I did add one more thing here: #contentbox .red-strip-logo-rev{ padding-left: 10px; float:left; padding-top: 15px; The "float: left": My top padding would not work without it. My last question is do I have to put in "#contentbox"? Or is is that just to make things specific to the particular CSS within a Content Box? Yes I am still learning... ;-)

Share this post


Link to post
Share on other sites
Jenny    33
Jenny
The only thing I see wrong with the code is that it's missing the final closing bracket, but that may have just been left off by accident. Honestly, everything else looks good. :)

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
WebWerx    0
WebWerx
Hey Jenny! (@simple_mama) --- the closing bracket was there. I just missed it in my copy/paste. What about my trailing questions?: "My last question is do I have to put in "#contentbox"? Or is is that just to make things specific to the particular CSS within a Content Box?"

Share this post


Link to post
Share on other sites
Jenny    33
Jenny
Oops sorry about that! To answer your question, yes it will work using just [code].red-strip-logo-rev[/code] since that is the only time you are using it on your site and it is a unique class, however, it is proper CSS practice to put the parent ID in front of it, like you have done [code]#contentbox .red-strip-logo-rev[/code] Things like .content-pad will go crazy if you just specify a site-wide .content-pad since it is used in so many places. So yes, it will work, but it's not good practice. :) Hope that helps!

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
WebWerx    0
WebWerx
Hey Jenny (@simple_mama)! Thanks for getting back to me on my followup question. So basically I can be lazy if I assign the css class (and use it once). But best practices make more sense. You are really helping me learn Jenny - along with your comrades in arms.

Share this post


Link to post
Share on other sites
Jenny    33
Jenny
Yes that is exactly correct. :)

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
WebWerx    0
WebWerx
@simple_mama: That is like being "really right". Can you tell me wife please? >:D<

Share this post


Link to post
Share on other sites
Jenny    33
Jenny
LoL not entering [i]that[/i] battle!

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

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  

×