Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    HTML5: Elements not are being positoned correctly.

    Hello,

    I'm having trouble with the images on my site not aligning properly (see snapshot attached). There should be three images in the first row and three images in the bottom, which should all be precisely aligned with each-other.

    Also, I'm trying to learn HTML5 so should I be using section's instead of div's or is this an exception since the images have a special CSS hover effect (also attached)?

    Thanks,
    K.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <!-- Head Begins --> <head>
    
    <!--[if lt IE 9]>
    <script src="adjustForIE.js">
    </script>
    <![endif]-->
    
    <meta charset="UTF-8">
    <meta name="keywords" content="Architecture,London,Modern">
    <meta name="description" content="The background of Modern Architecture in London">
    <meta name="author" content="Kyhry Taylor">
    <title>London's Modern Architecture Introduction</title>
    <link rel="stylesheet" href="IMD110.css">
    </head> <!-- Head Ends -->
    
    <body>
    
    <!-- Header Begins --> <header>
    <div id="logo">
    <a href="index.htm">
    <img src="MAL_Logo.png" alt=" Modern London Architecture" />
    </a>
    </div>
    </header> <!-- Header Ends -->
    
    <div id="greybar"> </div>
    
    <!-- Wrapper Begins --><div id="wrapper"> 
    
    <!-- Nav Begins --> <nav>
    <a href="index.htm">introduction</a>
    <a href="buildings.html">buildings</a>
    <a href="contactIMD.html">contact</a>
    <a href="reply.html">reply</a>
    <a href="sources.html">sources</a>
    <a href="architects.html">architects</a>
    <a href="exhibitions.html">exhibitions</a>
    </nav> <!-- Nav Ends -->
    
    
    
    
    <div class="view view-second">
        <img src="buildings_PAGE/The Gherkin.jpg"/>
        <div class="mask"></div>
        <div class="content">
            <p>01</p>
           </div>
        </div>
    </div>
    
    <div class="view view-second">
        <img src="buildings_PAGE/the Londons Eye.jpg"/>
        <div class="mask"></div>
        <div class="content">
            <p>01</p>
           </div>
    </div>
    </div>
    
    <div class="view view-second">
        <img src="buildings_PAGE/London City Hall.jpg"/>
        <div class="mask"></div>
        <div class="content">
            <p>01</p>
          </div> 
    </div>
    </div>
    
    <div class="view view-second">
        <img src="buildings_PAGE/London City Hall.jpg"/>
        <div class="mask"></div>
        <div class="content">
            <p>01</p>
          </div> 
        </div>
    </div>
    
    <div class="view view-second">
        <img src="buildings_PAGE/London City Hall.jpg"/>
        <div class="mask"></div>
        <div class="content">
            <p>01</p>
          </div> 
        </div>
    </div>
    
    <div class="view view-second">
        <img src="buildings_PAGE/London City Hall.jpg"/>
        <div class="mask"></div>
        <div class="content">
            <p>01</p>
          </div> 
        </div>
    </div>
    
    
    </div><!-- Wrapper Ends -->
    
    
    
    </body>
    </html>

    Code:
    /* Reset */	
    
    @import "reSET.css";
    
    /* Links */	
    
    a:link 
    {color:#8B8B83; text-decoration:none;}    /* unvisited link */
    a:visited 
    {color:#8B8B83; text-decoration:underline;} /* visited link */
    a:hover 
    {color:#9FD0CB;}   /* mouse over link */
    a:active 
    {color:#8B8B83;}  /* selected link */
    
    /* Render HTML 5 elements as block */	
    
    header, section, article, aside, nav, footer, figure, hgroup
    {
    display: block;
    } 
    
    /* Clear the float */	
    
    .clearFloat {
    clear:both;
    }
    
    /* font */	
    
    @font-face {
        font-family: 'PTSansNarrowRegular';
        src: url('PTN57F-webfont.eot');
        src: url('PTN57F-webfont.eot?#iefix') format('embedded-opentype'),
             url('PTN57F-webfont.woff') format('woff'),
             url('PTN57F-webfont.ttf') format('truetype'),
             url('PTN57F-webfont.svg#PTSansNarrowRegular') format('svg');
        font-weight: normal;
        font-style: normal;
        }
    
    /* body */	
    
    body {
    font-family: Arial,Helvetica, sans-serif;
    background-color:#FFFFFF;
    color:#8B8B83;
    font-size:.9em;
    color: #333333;
    line-height:20px;
    }
    
    /* paragraph */	
    
    p {
    font-family: Arial,Helvetica, sans-serif;
    background-color:#FFFFFF;
    color:#8B8B83;
    font-size:.9em;
    color: #686868;
    line-height:20px;
    margin-top:8px;
    }
    
    /* header */
    
    header {
    background-color:#000000;
    height:100px;
    }
    
    /* top grey bar */
    
    #greybar {
    background-color:#333333;
    height:35px;	
    left:100px;
    top:150px;
    }
    
    /* nav */
    
    nav {
    font-size:1em;
    width: auto;
    margin-top:-30px;
    margin-left:auto;
    margin-right:auto;
    word-spacing:6px;
    letter-spacing:1px;
    font-family:PTSansNarrowRegular;
    }
    
    /* Logo */
    
    #logo {
    margin-left:auto;
    margin-right:auto;
    padding-top:16px;
    width: 980px;
    }
    
    /* page wrapper */
    
    #wrapper {
    width: 980px;
    margin:auto;
    z-index: 10;
    height:auto;
    }
    
    /* section left content */
    
    #left {
    float:left;
    width: 65%;
    height:auto;
    padding-bottom:20px;
    }
    
    /* aside right content */
    
    #right {
    float:right;
    width:30%;
    height:auto;
    }
    
    /* main image */
    
    #image 
    
    {
    width: auto;
    margin-top:40px;
    border-bottom:18px solid;
    color:#FFFFFF;
    }
    
    /* h1 */
      
    h1 {
    font-size:1.4em;
    font-family:Helvetica, Arial, sans-serif;
    color: #333333;
    border-bottom:2px solid;
    border-color:#FFFFFF;
    }
    
    /* footer */
    
    footer {
    font-family: Arial,Helvetica, sans-serif;
    color:#686868;
    font-size:.7em;
    line-height:20px;
    margin:auto;
    margin-top:48px;
    width:980px;
    }
    
    
    
    
    #buildingimages
    {
    width: 980px;
    margin:auto;
    z-index: 10;
    height:auto;
    }
    
    
    
    
    
    
    .view-second img { 
        transition: all 0.2s ease-in;
    	 margin:auto;
    
    }
    
    .view-second .mask {
        background-color: rgba(0,0,0, 0.7);
        width: 300px;
        padding: 60px;
        height: 300px;
        opacity: 0;
        transition: all 0.2s ease-in-out;
    }
    .view-second h2 {
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        background: transparent;
        margin: 20px 40px 0px 40px;
        transform: translate(200px, -200px);
        transition: all 0.2s ease-in-out;
    }
    .view-second p {
        transform: translate(-200px, 200px);
        transition: all 0.2s ease-in-out;
    }
    
    .view-second a.info {
        transform: translate(0px, 100px);
        transition: all 0.2s 0.1s ease-in-out;
        } 
    
    .view-second:hover .mask {
        opacity:1;
        }                            
        
        .view-second:hover h2 {
        transform: translate(0px,0px);
        transition-delay: 0.3s;
        }
        
    .view-second:hover p {
        transform: translate(0px,0px);
        transition-delay: 0.4s;
        
    }
    .view-second:hover a.info {
        transform: translate(0px,0px);
        transition-delay: 0.5s;
    }
    
    /* regular image */
    
    .view {
        width: 317px;
        height: 166px;
        margin-top: 40px;
        margin-left:auto;
        margin-right:30px;
        float: left;
        overflow: hidden;
        position: relative;
        cursor: default;
        
    }
    .view .mask, .view .content {
        width: 300px;
        height: 200px;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0
    }
    
    
    
    .view img {
        display: block;
        position: relative
    }
    
    .view p2 {
        text-transform: uppercase;
        color: #fff;
        text-align: center;
        position: relative;
        font-size: 17px;
        padding: 10px;
        background: none;
        margin: 10px 20px 40px 0;
    }
    
    
    /* rollover image */
    
    .view p {
        font-family: Helvetica, serif;
        font-size: 1.5em;
        position: relative;
        color: #36BFC0;
        margin-top:20px;
        margin-right:200px;
        margin-left:30px;
            background: none;
    }
    Attached Thumbnails Attached Thumbnails HTML5: Elements not are being positoned correctly.-screen-shot-2013-02-20-8.30.02-pm.jpg   HTML5: Elements not are being positoned correctly.-screen-shot-2013-02-20-8.33.16-pm.jpg  

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,687
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Hello kyhryt,
    To illustrate what's happening, add a background color and clear the floats in #wrapper.
    Code:
    #wrapper {
        height: auto;
        margin: auto;
        overflow: auto;
        background: #fc6;
        width: 980px;
        z-index: 10;
    }
    Then leave the background color and remove the overflow: auto; and see what happens.

    See this page on how overflow: auto; clears your floats.

    To fix your issue, you need to move #wrapper's closing tag so all your .view's are contained by it.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Excavator,

    Thanks for your reply, but unfortunately I'm still not able to identify a solution to this issue...All my .views are inside the div wrapper...

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,687
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Quote Originally Posted by kyhryt View Post
    Hi Excavator,

    Thanks for your reply, but unfortunately I'm still not able to identify a solution to this issue...All my .views are inside the div wrapper...
    In the code you posted, you only have one .view contained in #wrapper. See the bit highlighted in red below -
    Code:
    <body>
    
    <!-- Header Begins --> <header>
    <div id="logo">
    </div>
    </header> <!-- Header Ends -->
    
    <div id="greybar"> </div>
    
    <!-- Wrapper Begins --><div id="wrapper"> 
    
    <!-- Nav Begins --> <nav>
    <a href="index.htm">introduction</a>
    <a href="buildings.html">buildings</a>
    <a href="contactIMD.html">contact</a>
    <a href="reply.html">reply</a>
    <a href="sources.html">sources</a>
    <a href="architects.html">architects</a>
    <a href="exhibitions.html">exhibitions</a>
    </nav> <!-- Nav Ends -->
    
    
    
    
    <div class="view view-second">
        <img src="buildings_PAGE/The Gherkin.jpg"/>
        <div class="mask"></div>
        <div class="content">
            <p>01</p>
           </div>
        </div>
    <!--end wrapper--></div>
    
    <div class="view view-second">
        <img src="buildings_PAGE/the Londons Eye.jpg"/>
        <div class="mask"></div>
        <div class="content">
            <p>01</p>
           </div>
    </div>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    I want to know that HTML or HTML5 element is same or not and I need a video site for learning HTML5.

    thanks
    Orchid72


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •