Jump to content


Photo
- - - - -

Laying Out Elements Correctly Within a Content Box


  • Please log in to reply
13 replies to this topic

#1 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 27 May 2012 - 09:25 PM

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:

Please Login or Register to see this Hidden Content

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!

#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17646 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 May 2012 - 10:15 AM

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.

Please Login or Register to see this Hidden Content

Once we have the code, we can take a closer look for you.

#3 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 28 May 2012 - 01:48 PM

Hey @ Danny! That would have been a good to start with... ;-)

Please Login or Register to see this Hidden Content

Critique away. I know I have not done this correctly. L

#4 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 28 May 2012 - 02:04 PM

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 (

Please Login or Register to see this Hidden Content

). If that doesn't work, then just give it a top margin or padding.

#5 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 28 May 2012 - 02:13 PM

simple_mama !: You are "Alive" LOL Yes I get the attributes thing. Here is the CSS I have created:

Please Login or Register to see this Hidden Content

(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

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 29 May 2012 - 02:38 AM

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

#7 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 29 May 2012 - 02:25 PM

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

#8 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 29 May 2012 - 04:33 PM

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

#9 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 29 May 2012 - 05:32 PM

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?"

#10 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 29 May 2012 - 06:06 PM

Oops sorry about that!

To answer your question, yes it will work using just

Please Login or Register to see this Hidden Content


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

Please Login or Register to see this Hidden Content


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!

#11 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 29 May 2012 - 08:44 PM

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.

#12 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 30 May 2012 - 04:02 PM

Yes that is exactly correct. :)

#13 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 30 May 2012 - 04:13 PM

@simple_mama: That is like being "really right". Can you tell me wife please? >:D<

#14 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 30 May 2012 - 09:54 PM

LoL not entering that battle!