• 0
Sign in to follow this  
Followers 0

Laying Out Elements Correctly Within a Content Box

Question

Posted · Report post

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

13 answers to this question

  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

I don't see anything wrong with the CSS attributes you've created in that CSS.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@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
  • 0

Posted · Report post

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. :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

Yes that is exactly correct. :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@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
  • 0

Posted · Report post

LoL not entering [i]that[/i] battle!

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  
Followers 0