Расположите элементы с тегом div - PullRequest
Новая
       2

Расположите элементы с тегом div

0 голосов
/ 24 июня 2011 
<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;

Намерения макета страницы: image

Почему не работают атрибуты позиции?

Ответы [ 5 ]

2 голосов
/ 24 июня 2011

position: absolute; поможет вам получить интересный макет.

2 голосов
/ 24 июня 2011

Вы используете 'left:', но не включили 'position: absolute'?Попробуйте, может быть, это поможет.

2 голосов
/ 24 июня 2011

Чтобы такие объявления, как left и top имели какой-либо смысл, необходимо применить их к позиционированным элементам: 

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

Ваши элементы не позиционируются как absoluteили relative.

Есть много других проблем с вашей разметкой, которые вызовут много-много проблем.Вся ваша разметка должна идти в теге body: 

<!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>

Демо онлайн: http://jsbin.com/efukol/edit

2 голосов
/ 24 июня 2011

быстро сделать ... 

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

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

реальный фактор здесь - дисплей: встроенный;который будет размещать div рядом друг с другом.

1 голос
/ 24 июня 2011

Здесь происходит несколько вещей:

  1. Элемент A встроен, и все будет располагаться рядом друг с другом, например BlogVideosHomeContactAbout MDB1, как, я уверен, вы уже видели.

  2. Это выглядит как список или меню, поэтому используйте соответствующую разметку. Лучше всего использовать разметку списка, или, если вы хотите попробовать HTML5, уже есть элемент NAV, специально предназначенный для этой цели.

  3. Я заметил, что вы не используете URL в элементах a. Лучше использовать то, что не будет генерировать 404 на сервере.

  4. Почему вы беспокоитесь о target = "_ self", если вы не используете фреймы, и если это так, пожалуйста, Google для фреймов - зло. Если нет, то A) _self является избыточным, B) если вы используете строгий тип документа, атрибут target устарел из соображений доступности.

  5. При присвоении имени файлу CSS index.css могут возникнуть проблемы, если сервер настроен на использование индекса. с ЛЮБОМ суффиксом в качестве страницы по умолчанию. Лучше было бы что-то вроде style.css.

Теперь, чтобы разобраться в этом, вы можете пойти несколькими путями: 

/* 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 */}
...