Position elements with the div tag

2020-05-02 03:56发布

<div class="HeaderLink" id="Home">  
<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>MDB1</title>  
<link rel="stylesheet" type="text/css" href="Index.css" />  
</head>  
<body id="HeaderFive">  
<div class="HeadPanelElement" lang="en" id="HeadPanel"> <a href="Blog" id="HeaderOne" title="Blog link" target="_self" class="HeadPanelElement">Blog</a>  
<a href="Videos" id="HeaderTwo" title="Video's link" target="_self" class="HeadPanelElement">Videos</a>  
<a href="Okay" id="HeaderThree" title="Homepage link" target="_self" class="HeadPanelElement">Home</a>  
<a href="Contact" id="HeaderFour" title="Contact link" target="_self" class="HeadPanelElement">Contact</a>  
<a href="About MDB1" id="HeaderFive" title="About MDB1 link" target="_self" class="HeadPanelElement">About MDB1</a> </div>  
</body>  
</html>  
</div>  


@charset "utf-8";
/* CSS Document */

.HeadPanelElement{
position: absolute;  
width: 10%;  
left: -10%;  
}  
#HeadPanel{
left: 15%;  
width: 100%;  
height: 100%;  
font-family: Georgia, "Times New Roman", Times, serif;  
border: dashed;  
border-color: #C00;  
border-width: 2px;  
font-size: 1em;  

Intentions are for the page to layout like this

Why aren't the position attributes working?

5条回答
男人必须洒脱
2楼-- · 2020-05-02 04:09

There are a few things going on here:

  1. The A element is inline, and things will sit right next to each other, like BlogVideosHomeContactAbout MDB1, as I am sure you have already seen.

  2. This LOOKS like a list or menu, so use the appropriate markup. List markup would be best, or if you want to try HTML5, there is already the NAV element with is specifically for that purpose.

  3. I notice that you are not using URLs in the a elements. It is better to use something which will not generate a 404 on the server.

  4. Why are you bothering with target="_self" unless you are using frames, and if that is the case, please Google for Frames are Evil. If not, then A) _self is redundant, B) if you are using a Strict doctype, the target attribute is deprecated for accessibility reasons.

  5. Naming your CSS file index.css might get you in trouble if the server is configured to use index. with ANY suffix to as the default page. Better would be something like style.css.

Now to get these things going across, you can go a few ways:

/* CSS using line list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:inline; padding:.25em 1em .25em 1em}

/* CSS using floats list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:block;float:left;margin: 0 .1em 0 .1em;padding:.25em;}
#HeadPanel ul li a {display:block; /*what ever else you want to do */}
查看更多
Rolldiameter
3楼-- · 2020-05-02 04:11

You are using 'left:' but you didn't include 'position:absolute'? Try that maybe it might help.

查看更多
霸刀☆藐视天下
4楼-- · 2020-05-02 04:12

position: absolute; will help you get that interesting layout.

查看更多
淡お忘
5楼-- · 2020-05-02 04:25

For declarations like left and top to make any sense, you need to apply them to positioned elements:

#foo {
  position:absolute;
  top:10%;
  left:25%;
}

Your elements don't appear to have be positioned as absolute or relative.

There are many other problems with your markup as well that will cause many, many problems. All of your markup should go within the body tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Foo Example</title>
    <style type="text/css">
      #foo { 
        position:absolute; 
        top:10%; left:10%; 
        background:yellow;
        padding:10px 20px;
        border:1px solid #000;
        color:#000; 
        width:30% 
      }
    </style>
  </head>
  <body>
    <!-- all markup goes here -->
    <div id="foo">Hello World</div>
    <!-- all markup goes here -->
  </body>
</html>

Online Demo: http://jsbin.com/efukol/edit

查看更多
叼着烟拽天下
6楼-- · 2020-05-02 04:31

quick to do ...

#HeadPanel
{
    display: inline;
    width: 100%;
}

.HeadPanelElement
{
    width: 10%;
    /* or 
    padding: 10px; */
}

the real factor here is the display: inline; which will layout the div in a side by side fashion.

查看更多
登录 后发表回答