Элементы перекрытия Div

Question

Atm Я делаю свою первую попытку на веб-сайте, недавно получил новую работу, которая требует, чтобы я изучил базовый HTML & CSS, поэтому для начинающих я поставил себе задачу дублировать существующий сайт.

Вопрос/проблема заключается в:

Я хочу сделать 3 колонков при 100% высоты, левой и правой будучи масштабируемых 0 при сокращении численности browserwindow, в то время как средний столбец, содержащий фактическое содержание сайт, минимальная ширина - 60%. При более низких разрешениях я планирую реализовать медиа-вещи в моем CSS, чтобы удалить левые n правых столбцов, когда разрешение идет ниже определенного предела. Я установил html & корпус & все до высоты & ширина 100%. Я пытаюсь сделать что-то немного, как здесь: The site im trying to duplicate Моя текущая попытка может быть найдена здесь: My attempt

Некоторый код для ленивых, которые не хотят проверить сайт:

<div id=all> 
    <div id=leftmargin></div> 
    <div id=wrapper> 
     <div id=header></div> 
     <div id=nav></div> 
     <div id=content></div> 
     <div id=rightmargin></div> 
    </div> 
</div> 

Поскольку я очень новичок в веб-разработке, пожалуйста, извините меня, если вам нужна дополнительная информация. Моя проблема заключается в том, что «leftmargin» и «rightmargin» перекрывают «обертку»-div. Мне очень хотелось бы оказаться в центре страницы, а затем сделать «margin-divs» «расходным» при более низком разрешении по CSS.

Я надеюсь, что я сделал себе относительно ясно, спасибо заранее. с наилучшими пожеланиями Майк

Answer 1

Я бы избежать использования DIV с единственной целью создания маржинального пространства. Вместо этого позвольте вашей стороне содержимое бара создаёт необходимый вам размер. Содержимое перекрывает маржу, потому что оно не содержится в поле div. Вам нужно настроить, как основное содержимое центрируется с помощью «margin-left:» того же размера, что и боковых панелей или каким-либо другим способом, но это будет доказать свою общую структуру.

Что касается текста, перекрывающих контейнер с небольшими размерами, удалите «ширина: 18,8%»; и "white-space: nowrap"; от #lefttop и "max-width: 18.8%;" от #leftnav. Это позволит использовать текст в виде полной ширины серого контейнера слева, а слова будут обертываться, если строка не подходит.

Наконец, чтобы избавиться от боковых полос при малой ширине, как это было рекомендовано jerrylow использовать

/* screen sizes smaller than 750px apply these styles */ 
@media screen and (max-width: 750px) { 
    #leftnavwrap { 
     display: none; 
    } 
    #shortcut { 
     display: none; 
    } 
    #content { 
     width: 100%; 
    } 
}