Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] playing with properties, styling text and positioning images

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #195910
    drone4four
    Participant

    I have a number of questions about some HTML and CSS that I have been playing with. Check out this pen: http://codepen.io/Angeles4four/pen/bNooNz?editors=110

    #1. Notice h2. With respect to the text shadow and color, it renders just as I’d expect it to. I specifically gave the position property a value of center and yet when parsed, it’s not centered. It’s stuck on the left. Why is that and how do I center it properly?

    #2. Notice the background image. If you maximize the browser window, the jpg is centered. But if you reduce the size of the window it retreats over to the right. How do I center the bg image at any window size?

    #3. Notice the font-color property in the body rule. The value is set to red. Yet the content font isn’t white. I tried shuffling the font color property down to the paragraph rule and down to the body divider. Again and again the font isn’t red. How do I change the color of the font properly?

    #4. How do I add about 100 – 200 pixel buffer between the top of the webpage and the top of the green box? I suppose I could add a few line breaks (<br /> ) but there has to be a more elegant way to do it. What property and value could I use to achieve the effect I am describing.

    I feel kinda silly asking question #3 because I know the answer is going to be obvious. I’m guessing that receiving an answer from you folks is gonna be like getting hit over the back of the head with a clue bat. Ah well. At least I’m prepared for this.

    edit: added question #4.

    #195914
    Paulie_D
    Member

    I specifically gave the position property a value of center

    center is an invalid value of the position property. You need text-align:center.

    How do I center the bg image at any window size?

    You have to use the background-position property.

    Notice the font-color property

    font-color isn’t a property….color is correct.

    How do I add about 100 – 200 pixel buffer between the top of the webpage and the top of the green box?

    There are a couple of ways.

    You could give the body some padding-top or, the better way IMO, is to give the div margin-top

    Be aware that this will push the div away from the header you have…but that’s currently empty and so is not taking up any space.

    http://codepen.io/Paulie-D/pen/LEQmqw?editors=110

    #196032
    drone4four
    Participant

    Thank-you, Paulie_D for answering my four questions.

    #196036
    drone4four
    Participant

    I have a follow up question. Take a look at these two test cases.

    #1. http://codepen.io/Angeles4four/pen/raJXmp

    #2. http://codepen.io/Angeles4four/pen/dPdxbq

    The second one has a background that scales. The first doesn’t. How do you account for this discrepancy when both CSS source is identical? What in the markup in the HTML is causing the background image to scale in one and not the other?

    edit: removed one of the pens and replaced it with a new one

    #196059
    Paulie_D
    Member

    I haven’t looked too closely but I suspect it’s because you haven’t closed off the paragraph tags or div tag etc. so your HTML is breaking.

    If you do you get this.

    http://codepen.io/Paulie-D/pen/EaEYJV

    Also, frankly, I’m not a fan of restricting the width of the body…to my mind you should be restricting the width of the wrapping div.

    #196270
    drone4four
    Participant

    It wasn’t b/c off the paragraph tags not being closed. I added this code to the main body element: [code[
    background-image: url(“http://www.angeles4four.info/bg-exps/blendedgreencentered.jpg&#8221;) ;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: black;
    height: 500px[/code]
    Here it is implemented: http://codepen.io/Angeles4four/pen/RNQXLX
    I think my initial problem is solved.

    As you may have noticed, Paulie_D, I also shuffled around my max-width and margin down to my div. Thanks for the tip. Is there any other way that I could improve my CSS game in this pen?

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.