خرید بک لینک

درباره سایت

CodingForums

آخرین مطالب

امکانات وب

can't vertically align div elements correctly

I am a newbie and have been frustrated trying to get this to work for days now. So I have a <div id=header> element at the top of my page which will consist of 3 things, an image to fit the entire height of the header on left side and two lists (one which is the address and the other is links (my nav bar) which I would like to be aligned to the right side of the page with first list at the top right and second at the bottom right). However, this has been impossible for me to achieve. No matter what I do, my list of links always ends up at the top instead of at the bottom right (underneath the address div).

Here's what I got:

HTML:

Code:
<!DOCTYPE html>
<!--hale
-->
        <meta charset = "utf-8" />
        <link rel="stylesheet" type="text/css"
                href="hale.css" />       
</head>
<body>

<div id="header">
        <img src="eye.jpeg" alt="an eye">
        <div class="topsect">
                <ul>
                        <li>address line 1</li>
                        <li>line 2</li>
                </ul>
        </div>
        <div class="bottomsect" style="bottom: 20.4545% !important;">
                <ul>
                        <li><a href="#nogo"><b>Home</b></a></li>
                        <li><a href="#nogo"><b>Products</b></a></li>
                        <li class="current"><a href="#nogo"><b>About</b></a></li>
                        <li><a href="#nogo"><b>Photos</b></a></li>
                        <li><a href="#nogo"><b>Links</b></a></li>
                </ul>
        </div>
</div>

<div id="main">
        <div class="ier">


        </div>
</div>

</body>
</html>
I realize I probably dont need the style bottom property but have been trying anything I can find.

CSS:

Code:
#header {
        width:100%; min-height:220px; background-color: black; color:white; z-index: 0;
        position: fixed;
}

#header img {
        float:left; padding-top:10px; position:absolute; z-index:1;
        position: absolute;
}

.topsect {
        max-height: 200px; float: right; display: block; top: 0;
        position: relative; z-index: 2;
}

.topsect ul li {
        color: white; font-size: 75%; top: 0; list-style: none;
}

.bottomsect {
        max-height: 20px; float: right; display: block;
        list-style: none; color:white; margin: auto;
        position: relative; z-index: 3;
}

.bottomsect ul li {
        color:white; font-weight: bold; font-size:105%;
        float:right; display: inline; padding-right:25px;
        list-style:none;
}

a {
        text-decoration: none; color: white;
        text-shadow: 0 0 6px #274f24, 0 0 9px #44873e;
}

a:hover, li.current {
        text-decoration: none;
        color:#44873e;
        text-shadow: none;
        -webkit-transition: 500ms linear 0s;
        -moz-transition: 500ms linear 0s;
        -o-transition: 500ms linear 0s;
        transition: 500ms linear 0s;
        outline: 0 none;
}

#main {
        width:100%; height:800px; z-index: -1;
        background: -webkit-linear-gradient(#003300, #009900);
          background:    -moz-linear-gradient(#003300, #009900);
          background:        linear-gradient(#003300, #009900);
        box-shadow:inset 0 -15px 5px -16px #5fc942;
        position: absolute; margin: 0 auto; overflow: hidden;
}
Any help is so greatly appreciated! Thank you in advance.

برچسب: نویسنده: آیلین رضوانی تاريخ: سه شنبه 10 بهمن 1396 ساعت: 16:45

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه