Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

Putting an Image inside of a Div block

  1. Mar 2, 2016 #1
    Hello everyone!
    I designed a webpage and set its main wrapper width to 60% and magin to auto.Inside this wrapper(div),i want to put an image.AS the wrapper-div size is 60%,i put another div inside it and set its width to 100%.The second div(image div) perfectly fit with wrapper-div. I don't know what should be the width of the image so that it fit in the div?I tried different sizes.For example,i used an online ox to % converter that tells 1%=1.6px.so for the 100% width of that div,i used 960px but it didn't work instead it became short.Does anyone have a solution?Please share with me!
    Thanks!
     
  2. jcsd
  3. Mar 2, 2016 #2

    Borg

    User Avatar
    Science Advisor
    Gold Member

  4. Mar 2, 2016 #3
    Mod note: I split up the HTML code and CSS code into separate code blocks. I'm assuming that these are separate files.

    Here is the code BORG:
    Code (Text):

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="navbar.css" media="all" />
        <title>GPGC JHELUM</title>
    </head>
    <body>
    <header>

    </header>
    <div class="main-wrapper">    <!---START OF THE WRAPPER--->

    <nav>
    <!--UL LIST SECTION IN THE NAV BAR-->
    <ul class="main-list-container">                                           <!---LIST ITEMS CONTAINER---->
        <li class="list-items short"><a href="#">HOME</a></li>                          <!----LIST ITEMS INSIDE THE CONTAINERS OF NAV BAR---->
        <li class="list-items"><a href="#">FACULTY</a></li>
        <li class="list-items long"><a href="#">ADMITTION CRITERIA</a></li>
        <li class="list-items"><a href="#">PROSPECTUS</a></li>
        <li class="list-items short"><a href="#">CONTACT US</a></li>
    </ul>

    </nav>

    <div class="college-image-div">                   <!---THE IMAGE SECTION INSIDE THE MAIN-WRAPPER--->
    <img src="image.jpg" alt="" />
    </div>
    <div class="main-section"></div>                     <!--THE MAIN SECTION AFTER THE IMAGE SECTION IN THE MAIN WRAPPER-->

    </div>
    <footer>                           <!---FOOTER IS OUTSIDE THE MAIN-WRAPPER--->


    </footer>
    </body>
    </html>
    AND THE CSS:
    Code (Text):
    *{                          /* FOR  ALL*/

    padding:0;
    margin:0;

    }
    /*STYLING HEADER SECTION THAT IS OUTSIDE OF THE MAIN WRAPPER CONTAINING NAV BAR AND MAIN SECTION*/
    header{          
    width:60%;

    background-color:#dfdfd0;
    margin: 3% auto 0px auto;
    height:150px;
    padding:0px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    }


    /*STYLING MAIN WRAPPER */

    .main-wrapper{

    width:60%;
    margin:0% auto 0% auto;
    background-color:#dfdfd0;
    height:2000px;
    }

    /*IMAGE SECTION JUST AFTER THE NAV BAR*/
    .college-image-div{

        width:auto;
        height:400px;
        background-color:#0000b3;
    }


    /*STYLING NAV BAR IN THE MAIN WRAPPER*/
    nav{
        width:100%;
        height:40px;
        background-color:#023471;
    }

    .main-list-container{

        list-style-type:none;
    }
    .list-items{

        width:20%;
        float:left;
        height:40px;
        line-height:40px;
        text-align:center;

    }
    .short{                                 /*STYLING SPECIAL LIST-ITEMS IN THE MAIN NAV BAR*/
        width:17.5%;
    }
    .long{
        width:25%;
    }
    .list-items>a{
         text-decoration:none;
         text-align:center;
        color:#fffff2;
         display:block;
         font-weight:bold;
    }

    /*STYLING HOVER EFECTS FOR NAV BAR ITEMS */
    .list-items>a:hover{
        background-color:#FFF;
        color:#023471;
    }

    /*FOOTER SECTION*/
    footer{

        width:60%;
        height:150px;
        margin:auto;
        background-color:#265cff;
        margin-bottom:30px;
        border-bottom-left-radius:5px;
        border-bottom-right-radius:5px;
    }
     
    Last edited by a moderator: Mar 2, 2016
  5. Mar 2, 2016 #4

    Borg

    User Avatar
    Science Advisor
    Gold Member

    I need to run but the first two things that I see are the lack of a style section and the excessive blank lines. Also, whenever I am faced with issues like this, I try to just build a sample page with only the stuff that I'm working on. That way you eliminate other things that might be affecting the view. Once you solve it that way, then put the solution into your working page.
     
  6. Mar 2, 2016 #5
    Thanks!
     
  7. Mar 2, 2016 #6

    Mark44

    Staff: Mentor

    I split off the CSS code to a separate code block, and I deleted a lot of the extra blank lines.
     
  8. Mar 2, 2016 #7

    Mark44

    Staff: Mentor

    Dave, there is no such word as "admittion." The one you want is "admission."
     
  9. Mar 2, 2016 #8

    Borg

    User Avatar
    Science Advisor
    Gold Member

    You have a style on set for the outer div but you need to set width and/or height styles on the image. It can be an exact number of pixels or a percentage. If you set a percentage, it will fit itself within the div. For example, I used an image that was larger than the 400 px that you used for the div and it extended past the div. However, if I set the image with a height of 50%, it stays well within the div. For example:
    <img src="image.jpg" alt="" style="width:100%; height:50%;" />

    If you don't want it to expand to the entire width, just leave it off and the image will scale itself accordingly. Note that it's best to try several different sizes of images to make sure that you get the behavior that you're looking for.
     
Know someone interested in this topic? Share this thread via Reddit, Google+, Twitter, or Facebook

Have something to add?
Draft saved Draft deleted



Similar Discussions: Putting an Image inside of a Div block
  1. Reading in an image? (Replies: 13)

  2. Image Processing (Replies: 4)

Loading...