CSS vs Using graphics

• 

  gotmaester · Member · Aug 23, 2017 at 12:56 pm

  • Copy link
  • Add topic to favorites

  As I learn more about CSS, I see that I can rely less on creating graphics for what I want to do. For example compare the box on the top of the right hand column one the following two pages:

  https://game-of-thrones-episodes.com/706-beyond-the-wall/

  https://game-of-thrones-episodes.com/705-eastwatch/

  On the first page: Using CSS
  On the second page: Using an image graphic

  The CSS gives me a whole lot more options and flexibility ( so I am leaning toward that.

  HOWEVER, and here is my PROBLEM:

  Notice on the “scenes page”

  https://game-of-thrones-episodes.com/tag/706-beyond-the-wall/?order=asc

  The one container overlaps the other.

  QUESTION: Any suggestions on how to fix this? I guess I can move the content column down ever more, but then I will have to find something to put in the white space that is created.

  The blog I need help with is: (visible only to logged in users)

• 

  gotmaester · Member · Aug 23, 2017 at 1:19 pm

  • Copy link

  One idea I am thinking of is maybe I can move the content down and hide the tag title or move the title down, and its place create a banner unique to that episode.

  QUESTION:

  OPTION A

  1. How would I hide the title ONLY on these type of pages?

  OPTION B

  2. How would I move the title and everthing else down the page?

• 

  gotmaester · Member · Aug 23, 2017 at 1:55 pm

  • Copy link

  Correction…

  2. How would I move the title and center column down the page (but keep the left sidebar in place.

• 

  thesacredpath · Member · Aug 23, 2017 at 6:33 pm

  • Copy link

  You can hide the titles on all tag pages by using the “tag” CSS class from the opening body html tag like this.

  .tag #column-content {
    margin-top: 140px;
  }

  The following moves the title/content down on all tag pages, but takes the left sidebar and the widget you have moved to the upper right with it.

  .tag .column-title {
    margin-top: 140px;
  }

  The following will move the content down and keep the widget on the right in place. I’ve kept the post title up so that it sort of “wraps” around the box a bit to lessen the whitespace above. If a title on the top post on the page gets longer, it could run into that widget though.

  .tag .column-content {
   margin-top:90px;
  }
  .tag .column-title {
    width: 730px;
    float: right;
  }
  .column-double.column-right .title-header {
    padding-left: 0;
    padding-righ: 0;
  }

• 

  gotmaester · Member · Aug 23, 2017 at 8:44 pm

  • Copy link

  Thank you for your help.

  After considering several solutions (as to what to do with the extended white space), I went with the following:

  https://game-of-thrones-episodes.com/tag/706-beyond-the-wall/?order=asc

  I am not sure that having a generic text is the best option, but I really don’t want to have to create 85 separate widget (to make text unique for each episode).

  I also move the content down even further, because the episode description in the upper right hand widget will vary in length.

  What do you think? …sorry about asking you a question about taste – sometimes I guess its best to stick with the mechanics :)

• 

  thesacredpath · Member · Aug 24, 2017 at 2:24 am

  • Copy link

  That looks good. I think it’s a solid solution.

• 

  gotmaester · Member · Aug 24, 2017 at 4:50 pm

  • Copy link

  FYI, I decided to scrap what I did, and went with the simplest solution. I don’t really need the summaries on this page, so I got rid of them…so now no conflict.

  The page looks a whole lot cleaner. Sometimes “less is more.”

  https://game-of-thrones-episodes.com/tag/706-beyond-the-wall/?order=asc

• 

  kathrynwp · Staff · Aug 25, 2017 at 4:06 pm

  • Copy link

  Sometimes “less is more.”

  Indeed! Glad you found a good solution.