Question

HTML：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
</head>

<body>

    <div id="nav">
        <p id="welcomeLink">Welcome</p>
        <p id="historyLink">History</p>
        <p id="valueLink">The Value</p>
        <p id="contactLink">Contact</p>
    </div>
    <div id="welcomeArrow"></div>
    <div id="historyArrow"></div>
    <div id="valueArrow"></div>
    <div id="contactArrow"></div>

    <div id="wrapper">

        <div id="mainHeader">
            <img src="Carnaby_Full__Logo_1.jpg" />
        </dvi>

        <div id="content">

            <p id="welcomeP">
                When clothed, one's image, apart from his hands and face, is completely self-defined.  That means that everyone has a style.  It's upon this idea that Carnaby Custom works. Operating from our showroom in Midtown Manhattan, my father and I provide the most valuable custom made suits, shirts, and sport coats in the tri-state area.
            </p>

            <p id="historyP">
                In 1971, Leonard Logsdail Sr. opened his bespoke tailoring shop in London. At that time, Carnaby Street, right off of the famous Saville Row, was the fashion center of the world.  For 20 years, he ran a successful business, traveling around the world, hand-making garments for lawyers, lords, governors, princes, businessmen, barons, earls, bankers, and actors.  At the bidding of my American mother, he moved his Saville Row tailoring business to New York City. Since then, he quickly became one of the most well-respected tailors in the country and the world. <br> <br> As you can imagine, making a suit by hand is no easy task. It requires plenty of time and money. This is why Carnaby Custom exists. Carnaby Custom provides a custom garment, overseen by and utilizing the experience of master tailor Leonard Sr, for a much more affordable price point.
            </p>

            <p id="valueP">
            No two people are shaped the same way. Hypothetically, if we were to make suits for two men with identical dimensions (arm, length, height, etc), the completed garments would still not fit one another. This is because people stand with different postures, have varying shoulder heights, pigeon chests, uneven hips-just to name a few. We take all of these things into account when sizing our clients up for custom made to measure garments. This allows for a superior fit. <br> <br>

    Because your future garment does not yet exist, we work together with our clients designing the suit to however best suits his lifestyle. With thousands of fabrics, hundreds of linings, and countless other style and preference options-the possibilities are endless. <br> <br>

    During the first appointment, we will ask a series of questions in order to better understand your style and needs. Unlike salesmen at most retail stores, who get paid an hourly rate, no matter if you're happy with your purchase or not, we are always looking to do future business with our clients. This means that you can be sure that we will do everything in our power to make your purchase a satisfactory one. <br> <br>

    We take great pride in our ability to provide custom garments at the most competitive prices in the market today. Our garments are available at the same price point that most retailers sell their off-the-rack suits for. Except ours will be made specifically for you! </p></a>

        </div>

    </div> 

</body>
</html>

CSS：身体 { background：url（navy_blue / navy_blue.png）; }

#nav {
    position: absolute;
    text-align:center;
    top: 322px;
    float: left;
    left: 155px;
    padding-right: 20px;
    padding-left: 20px;
    background: #D5D5D5;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    border: black solid thin;
    border-radius: 10px;
    line-height: 16px;  
}

#nav p {
    color: #000099;
}

#nav p:hover {
    opacity: .6;
    cursor: pointer;
    -moz-transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
}

#welcomeArrow {
    position: absolute;
    left: 255px;
    top: 336px;
    width: 0; 
    height: 0; 
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 17px solid #D5D5D5;
}

#historyArrow {
    display: none;
    position: absolute;
    left: 256px;
    top: 364px;
    width: 0; 
    height: 0; 
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 17px solid #D5D5D5;
}

#valueArrow {
    display: none;
    position: absolute;
    left: 256px;
    top: 396px;
    width: 0; 
    height: 0; 
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 17px solid #D5D5D5;
}

#contactArrow {
    display: none;
    position: absolute;
    left: 256px;
    top: 430px;
    width: 0; 
    height: 0; 
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 17px solid #D5D5D5;
}


#wrapper {
    background: url(billie_holiday/billie_holiday.png);
    top: auto;
    margin: auto;
    text-align: center;
    height: auto;
    width: 640px;
    font-family: 'Open Sans', sans-serif;
    padding: 30px;
    border: black solid medium;
    border-radius: 10px;
}

#wrapper p {
    padding-top: 20px;
    font-size: 14px;    
}

#mainHeader img{
    border: solid thin black;
}

#welcomeP {
    display: inline;
}

#historyP {
    display: none;
}

#valueP{
    display: none;
}

#contactP {
    display: none;
}

#welcomeH {
    font-size: 24px;
    color: #993300; 
}

Answer 1

将导航div放在包装器div中并将其位置更改为relative。然后给导航div一个负左边距。之后你可能需要调整你的小箭头。

Answer 2

将#nav放在#wrapper中。将#wrapper的位置设置为relative，将#nav的位置设置为absolute。这将使用父级容器，其位置为“relative”作为边界框。然后给#nav一个'left'的负值。

#wrapper{
position: relative;
}

#nav{
position:absolute;
left:-100px;
}

在用户调整窗口大小时进行div移动

2 个答案: