[Closed] prevent overlap - CSS-Tricks

This topic is empty.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts

October 8, 2013 at 9:37 pm #152412

Participant

I have done this, but when I resize browser, the arrow will disappear, means i goes behind the right side content. how to make the arrow maintain to its position when I resize browsers? this is my code.

html

<!DOCTYPE html> 
<html> 
    <head> 
        <title>KPM Corporation Sdn. Bhd.</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="main2.css" />
        <script src="main.js"></script>
    </head> 
    <body> 

        <div id="header_logo">
            <img src="images/tasek_nova_logoB2.png" class="center" />
        </div>

        <div id="desc">
            <p class="center">FREEHOLD STRATA TITLE</p>
        </div>

   <div class="wrapper">
        <div class="container">
            <div id="terrace">
                <figure>
                    <img src="images/nova_double_terrace.png">
                    <figcaption>
                        <table width="500" align="center">
                            <tr>
                                <td align="center" valign="middle" style="font-size:18px; font-weight:lighter; color:#666666;">40 Units</td>
                                <td align="center" valign="middle"><img src="images/divider_S.png" /></td>
                                <td style="padding-left:18px; font-size:15px; font-weight:lighter; line-height:22px; color:#333333;">Double Storey Terrace House<br />Lot Size : 24' x 75'</td>
                                <td align="center" valign="middle"><img src="images/divider_S.png" /></td>
                                <td style="padding-left:15px; font-size:15px; font-weight:lighter; line-height:22px; color:#666666;">4 Bedrooms<br />4 Bathrooms</td>
                             </tr>
                         </table>
                    </figcaption>
                </figure>
            </div><!--terrace-->

            <div id="semi-D">        
                <figure>
                    <img src="images/nova_double_semiD.png">
                    <figcaption>
                        <table width="500" align="center">
                            <tr>
                                <td align="center" valign="middle" style="font-size:18px; font-family:'Myriad Pro Light'; color:#666666;">48 Units</td>
                                <td align="center" valign="middle"><img src="images/divider_S.png" /></td>
                                <td style="padding-left:18px; font-size:15px; font-family:'Myriad Pro Light'; line-height:22px; color:#333333;">Double Storey Cluster Semi-D<br />Lot Size : 40' x 80'</td>
                                <td align="center" valign="middle"><img src="images/divider_S.png" /></td>
                                <td  valign="middle" style="padding-left:15px; font-size:13px; font-family:'Myriad Pro Light'; line-height:15px; color:#666666;">5 Bedrooms<br />5 Bathrooms<br/>Powder Room</td>
                             </tr>
                         </table>
                    </figcaption>
                </figure>
            </div><!--semi D-->
        </div><!--container-->

        <div class="container2">
        <div id="title">
        <p>FACILITIES</p>
        </div>
        <div class="image">
            <img src="images/basketball.png" alt="basketball court" />
            <p>Half Size Basketball Court</p>
        </div>
        <div class="image">
            <img src="images/reflexology.png" alt="reflexology pathway" />
            <p>Reflexology Pathway</p>
        </div>
        <div class="image">
            <img src="images/jogging.png" alt="jogging track" />
            <p>Jogging Track</p>
        </div>
        <div class="image">
            <img src="images/playroom.png" alt="children's playroom" />
            <p>Children's Playroom</p>
        </div>
        <div class="image">
            <img src="images/games.png" alt="games's room" />
            <p>Game's Room</p>
        </div>
        <div class="image">
            <img src="images/gym.png" alt="gym room" />
            <p>A Gym Room</p>
        </div>
        </div><!--container2-->
    </div><!--wrapper-->

    <div class="wrapper2">
        <div id="go_back">
            <p class="center2"><a href="nova.html"><img src="images/arrow_back.png"></a></p>
        </div><!--back to page1-->
    </div>
    </body>
</html>

and css

body{
    width:100%;
    margin:0;
    padding:0;
    position: relative;
    -webkit-transition: left .8s ease;
    font-family:Arial, Gill Sans, Helvetica, Myriad Pro, "Myriad Pro Light";
}

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 3%;
} 

p.center { 
    text-align: center;
    padding-top:1%;
    font-family:Arial, Gill Sans, Helvetica, "Myriad Pro Light";
    font-size:18px;
    font-weight:lighter;
    color:#666666;
} 

figure {
    width: 500px;
    background-color: #CCCCCC;
}

figcaption {
    background-color:#CCCCCC;
    padding: 10px;
}

#terrace {
    width: 500px;
    float:left;
}

#semi-D {
    width:500px;
    float:right;
}

.container {
   width: 1005px;
   position: absolute;
   left: 50%;
   top: 100%;
   margin-left: -550px; /* Half of width */
   margin-top: 27px;    /* Half of height */
}

div.image
{
  float:left;
  width:161px; /* adjust this to the width of your images.*/
  margin-right:7px;
  background-color:#CCCCCC;
}

.image p {
    font-family:"Myriad Pro Light";
    font-size:12px;
    text-align:center;
    color:#666666;
}

.container2 {
   width: 1010px;
   position: absolute;
   left: 50%;
   top: 100%;
   margin-left: -510px; /* Half of width */
   margin-top: 450px;    /* Half of height */
}

#title p {
    font-family:"Myriad Pro Light";
    font-size:18px;
    color:#666666;
    letter-spacing:1px;
}

#go_back {
    top: 100%;
    margin-top: 200px;
    margin-left: 40%;
    letter-spacing:1px;
}

.wrapper {
    float: right;
    width: 1010px;
    margin-left: 10px;
}

.wrapper2 {
    margin-left: 10px;
    float:left;
    width: 200px;
}

October 9, 2013 at 12:01 am #152414

yoyo

Participant

please give a live link or pen in order to help u

October 9, 2013 at 12:37 am #152416

Historical Forums User

Participant

October 9, 2013 at 1:42 am #152419

jaycrisp

Participant

Table layouts and inline styles. Coding like it’s 1999.

Seriously though, things like this will be much easier to fix if you ditch tables for layout and move the inline styles to the stylesheet. Is this a new design, or are you having problems with an existing site where it would be difficult to change this?

If it’s the latter, fair enough, I’ve been there. If it’s the former, there’s no excuse I’m afraid!

October 9, 2013 at 2:03 am #152420

Historical Forums User

Participant

October 9, 2013 at 2:27 am #152423