левое, правое и среднее положение содержания

Я должен использовать css для изменения позиций; единственная вещь, которая, кажется, работает, - это правильная позиция nav bar и жидкая компоновка, но «контент» и «правая панель навигации» расположены неправильно. Я хочу, чтобы контент был посередине, слева слева, а справа - справа.левое, правое и среднее положение содержания

<title>CSS liquid layout</title> 


<style type="text/css"> 

.due { 
color: #ff0000; 
font-weight: bold; 
} 

#leftnavigation{ 
position:absolute; 
left:10px; 
top:10px; 
width:250px; 
} 

#rightnavigation { 
float:right; 
width:250px; 
height:800px; 
} 
#content { 
float:center; 

} 
    </style> 
</head> 
<body leftmargin="0" topmargin="0" bgcolor="#ccff99"> 
    <div id="app"> 
     <div id="rightnavigation"> 
      <h1>Right Navigation</h1> 
      <a href="http://www,google.com">link</a> <a href="http://www,google.com">Instructor</a> 
      <a href="http://www,google.com">Course</a> <a href="http://www,google.com"> 
       Resume 
       project 
      </a> 
     </div> 
     <div id="content"> 
      <h1>Sample Content</h1> 
      <p> 
       This is the content section of the page. Use structural markup 
       like &lt;p&gt;&lt;/p&gt; 
       to keep the page valid in XHTML. 
      </p> 
      <h2>Lorem Ipsum</h2> 
     </div> 
     <div id="leftnavigation"> 
      <h1>Left Navigation</h1> 
      <p> 
       <a href="http://www,google.com">Page 1</a> <a href="http://www,google.com">Page 2</a> <a href="http://www,google.com"> 
        Page 
        3 
       </a> <a href="http://www,google.com">Page 4</a> <a href="http://www,google.com">Page 5</a> <br /> 
       Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor 
       amum. 
      </p> 
      <h2>Lorem Ipsum</h2> 
     </div> 
    </div>

источник

2015-09-22 braum

Вы должны очистить ваш HTML первый выходной - есть много незакрытых (и даже Неоткрытый) теги там. Я могу догадаться о том, что вы намеревались, но это тяжело с текущим состоянием кода. Пожалуйста, очистите HTML и отправьте сообщение – Andrea

Согласовано - я поместил его в фрагмент стека для вас. Пожалуйста, убедитесь, что код, который вы публикуете здесь, является минимальным примером, который наглядно демонстрирует вашу проблему. Это облегчит нам помощь. Вам не нужно включать теги '' или '' или все, что входит в голову. Поэтому я удалил этот материал. Но я упомянул, что ваш метатег внутри головы был недействительным (отсутствует закрытие больше знака). – Bill

в порядке, я очищу код – braum

Вы можете попробовать это:

CSS

.app { 
    width: 100% 
    height: 100%; 
} 

.due {color: #ff0000; 
font-weight: bold; 
} 

#rightnavigation { 
     float: left; 
     width: 33.333% 
} 

#leftnavigation{ 
    float: left; 
    width: 33.333% 

} 

#content { 
    float: left; 
    width: 33.333%; 
}

HTML

<div class="app"> 

    <div id="leftnavigation"> 
     <h1> Left Navigation </h1> 
    </div> 

    <div id="content"></div> 

     <div id="rightnavigation"> 
     <h1>Right Navigation</h1> 
    </div> 

</div>

Вот демо примера - EXAMPLE

источник

2015-09-22 15:59:29 aphextwix

В вашем HTML и CSS есть ошибки, которые необходимо устранить, прежде чем изменять стили, чтобы выполнить то, что вам нужно.

В вашем HTML-коде есть еще некоторые закрытые теги. Особенно тег <div id="rightnavigation"> никогда не закрывается, поэтому стили, применяемые к #rightnavigation, действительно применяются ко всей странице.
В вашем CSS вы применяете стиль к div.content. Но у этого div есть id от content, а не класс. Идентификатор должен быть div#content.
В вашем CSS вы указываете div с идентификатором leftnavigation в положении «слева». Это должно быть «абсолютным».
После того, как все было очищено, левая навигационная система находится слева, содержимое находится в центре, а правый навигатор справа. Но содержимое центра перекрывает правый nav (я предполагаю, что это нежелательное поведение). Чтобы очистить это, не изменяя HTML больше, вам нужно указать ширины ваших разделов и установить их позиции на основе ширины соседних элементов.

Ваш HTML:

<div id="rightnavigation"> 
    <h1>Right Navigation</h1> 
</div> 
<div id="content"> 
    <h1>Sample Content</h1> 
    <p>This is the content section of the page. Use structural markup 
    like &lt;p&gt;&lt;/p&gt; 
    to keep the page valid in XHTML.</p> 
    <p>The styled document should look like your printed version/screenshot. 
    Add styles to the left navigation links to give them borders and a 
    background color that changes when moused over (hint: Define navigation 
    links as display:block;). For the right side links, use a different 
    background color change and border as ashown. 
    Make the center column "liquid" or "elastic." Use an external (linked) 
    CSS file. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. 
    Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit 
    dolor amum. 
    Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p> 

    <h2>Lorem Ipsum</h2> 
    <p> Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. 
    Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. 
    Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p> 
    <p><span class="due">Due Tuesday, September 22.</span> Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. 
    Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. 
    Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p> 
</div> 
<div id="leftnavigation"> 
    <h1>Left Navigation</h1> 
    <p><br>Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p> 
    <h2>Lorem Ipsum</h2> 
</div>

И ваш CSS:

#rightnavigation { 
    position: absolute; 
    top: 50px; 
    right: 0px; 
    width: 25%; 
} 

#content { 
    position: absolute; 
    top: 50px; 
    left: 25%; 
    width: 50%; 
} 

#leftnavigation{ 
    position: absolute; 
    top: 50px; 
    left: 0px; 
    width: 25%; 
} 

.due { 
    color: #ff0000; 
    font-weight: bold; 
}

источник

2015-09-22 16:25:46 Andrea

левое, правое и среднее положение содержания

ответ

Смежные вопросы