Forums

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

Home › Forums › CSS › [Solved] Background cuts off at bottom when adding an image

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 8, 2014 at 10:29 pm #165170
    yjo086
    Participant

    I am pretty new with CSS so I ask for everyone’s understanding and patience. I’m trying to create a portfolio site and I want to add thumbnail images to showcase my work, but when I add an image, the pink background stops extending to the bottom of the page.

    Here’s my link to codepen, so that you can see how I want the site to look, I hope I did this right:
    http://codepen.io/yjo086/pen/dJuAb

    Thanks in advance!

    March 9, 2014 at 6:15 am #165184
    Atelierbram
    Participant

    There are some issues with the underlying HTML and CSS structure of the layout.
    When you would use some kind of ‘grid system’ for this layout, ( with some adapted HTML markup, and CSS styles ) then you probably won’t need the absolute positioned element with the background-color.
    Another issue are the sizes of the images. Right now they are oversized to force a layout, but really should be the other way around: width of the parent (grid-wrapper div) should define the width of the image ( by img { max-width: 100%; } in the CSS ).

    My fork of your pen on Codepen

    This website walks you through CSS Layout

    March 9, 2014 at 2:47 pm #165213
    yjo086
    Participant

    @Aterlierbram: So you are saying that I need to structure the layout of the site a little better and that my images are too big? If so, cool. I’ll definitely check out the tutorial you have given me. Thanks a lot. I’ll get this by God, or die tryin’! LOL

    March 9, 2014 at 3:10 pm #165215
    Atelierbram
    Participant

    @yjo086 You’re welcome.

    So you are saying that I need to structure the layout of the site a little better and that my images are too big?

    I get that you are a visual thinker, so take your time to check out the code that is in my fork of your codepen

    I’ll definitely check out the tutorial you have given me.

    but don’t forget there’s also tons of good books out there on HTML and CSS.

    Good Luck.

    March 9, 2014 at 6:46 pm #165222
    yjo086
    Participant

    @Atelierbram: Yea, I am very visual (T_T), I find it a curse sometimes…ok, well it seems like I need to take a set back for a second so that I can try and understand layout and positioning, but thank you for bringing it to my attention and for your efforts. I do have some books and I plan on getting more, its hard finding books for noobs like me to understand.

    If I may ask, how come you put some elements as both an id and a class? For example:

    div id=”logo” class=”logo”

    Does this just make it more organized to code?

    March 10, 2014 at 2:12 am #165239
    Atelierbram
    Participant

    <div id=”logo” class=”logo”>

    Has to do with the habit I got into of only using classes in CSS, which makes it easier to override declarations done earlier in the stylesheet; (in the abstract: trying to prevent a specificity battle by having selectors of the same specificity weight).
    I also like to put multiple classes on an element to be able to be more flexible and terse in the CSS ( being a fan of Nicole Sullivan on the subject ). Most important thing is that one wraps ones head around the concept of specificity in CSS.

    March 10, 2014 at 1:46 pm #165321
    yjo086
    Participant

    I see, that makes sense.

    As far as my original question, I did look at the code you redid, but I’ll be honest, I’m not quite understanding what you did. You said previously:

    When you would use some kind of ‘grid system’ for this layout, ( with some adapted HTML markup, and CSS styles ) then you probably won’t need the absolute positioned element with the background-color.

    I did download the 960 grid system and I’m thinking maybe a 12 column grid would suffice for the design i have, I started it like this for the HTML:

    <!doctype html>
    <html>
    <head>
    <link href=’fonts.googleapis.com/css?family=League+Script’ rel=’stylesheet’ type=’text/css’>
    <link href=’fonts.googleapis.com/css?family=Bitter’ rel=’stylesheet’ type=’text/css’>
    <link href=’fonts.googleapis.com/css?family=Droid+Serif’ rel=’stylesheet’ type=’text/css’>
    <meta charset=”utf-8″>
    <title>Owens Designs</title>
    <link rel=”stylesheet” type=”text/css” href=”960gs/code/reset.css” />
    <link rel=”stylesheet” type=”text/css” href=”960gs/code/960_12_col.css” />
    <link rel=”stylesheet” href=”owensdesign2.css”>
    </head>
    <body>

    <

    div>

    <div>

    <div>
        <img src="https://dl.dropboxusercontent.com/s/yz7kvfmlf812dzf/brandlogoresizedverticalsmall.png" />
    </div>

<div>

&lt;ul id="nav" width="60px"&gt;
    <li><a href="">About</a></li>
    <li><a href="">Work</a></li>
    <li><a href="">Contact</a></li>

    </div>

    </body>
    </html>

    And the CSS for this is:

    .header{text-align: center;
    }

    #logo{padding-top: 40px;
    }

    #nav li{list-style-type: none;
    padding: 20px;
    display: inline;
    font-family: Geneva;
    }

    #nav{padding-top: 10px;
    }

    Am I doing this correctly? Cause now I can’t move the navigation links to the center underneath my logo…sigh…now I’m getting frustrated.

    March 10, 2014 at 5:27 pm #165328
    Atelierbram
    Participant

    You could really help me help you, by also making this grid exercise into a Codepen.

    Key is trying to understand this direct relationship beween HTML markup, and CSS style declarations of those elements, there’s no magic involved. For example: you will have to put some of those class names of that 960-grid on some of those divs , in order for it to work.

    You could also make a copy of this demo, study it, play with it, and adapt it to your liking.

    But there is a lot to all this, and it takes time, for anyone, for it to really sink in.

    March 10, 2014 at 6:21 pm #165329
    yjo086
    Participant

    I’ve actually begun playing around more with the 960 grid, watched some demos and I have begun incorporating my css into the grid and its looking good so far. I kind of starting over so right now my navigation links are not horizontal, so I’m trying to figure that out.

    I’m just eager to make my portfolio as cool as possible and its a little hard particularly since I’m basically teaching myself with little help elsewhere. But you’re right, it just takes time.

    I’ll do the demo like you suggest and I’ll try to put it in Codepen here in forum so that maybe someone can check my code. Til then, thanks again for your time and patience.

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