Предотвращение горизонтального расширения div при изменении экрана / содержимого

ProgramBox

Предотвращение горизонтального расширения div при изменении экрана / содержимого

Post author:admin
Запись опубликована:18 февраля, 2023
Post category:Вопросы по программированию

#html #css #webpage

#css #HTML

Вопрос:

У меня проблема с моим основным контентом. По мере изменения размера экрана или увеличения текста основного содержимого он расширяется вниз, как и ожидалось, но он также находится ПОД моим меню с левой стороны, чего я не хочу.

Может кто-нибудь проверить мой код и сказать мне, как это исправить?

Изображение: Изображение того, что я хочу, и того, что происходит

 <html>

<head>
<link type="text/css" rel="stylesheet" href="css/styles.css"/>
<link href='http://fonts.googleapis.com/css?family=Josefin Slab:400,400italic' rel='stylesheet' type='text/css'>
<title>page title</title>
</head>

<body>

<div class="pagediv">
<div class="headermain">
Title
</div>
<div class="headerquote">
 quote
</div>
<div class="menu">
<p><a href="link">Home</a></p>
<p><a href="link">About the Artist</a></p>
<p><a href="link>"Blog</a></p>
<p><a href="link">Artist Statement</a></p>
<p><a href="link">Inspiration</a></p>
<p><a href="link">Art Gallery</a></p>
<p><a href="link">Exhibits</a></p>
<p><a href="link">Store</a></p>
<p><a href="link">Commissioning</a></p>
<p><a href="link">Contact</a></p>
</div>

<div class="artist_pic">
<img src="picture link">    
</div>

<div class="content_type_a">
<p>CONTENT HERE</p>
</div>   

<div class="footer">

Мой CSS выглядит следующим образом:

 body {
background-color: black;

}

/*contains the page in the center of the browser*/
.pagediv {
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: black;
}

/*Main title bar at the top of the page*/
.headermain {
background-color: black;
font-family: 'Josefin Slab', serif;
color: #FFF;
font-size: 200%;
font-style: bold;
display: block;
    width: 100%;
padding-top: 30px;
}

/*Quote after the main title*/
.headerquote {
background-color: black;
font-family: 'Josefin Slab', serif;
font-size: 110%;
font-style: italic;
color: #FFF;
padding-top: 5px;
padding-left: 60px;
padding-bottom: 5px;
display: block;
}

 /*headerquote bottom border*/
.headerquote {
border-bottom: 2px solid white;
} 


.menu {
background-color: black;
width: auto;
font-family: 'Josefin Slab', serif;
color: #FFF;
font-size: 110%;
font-style: bold;
text-align: right;
display: inline-block;
float: left;
clear: right;
clear: both;
padding-right: 15px;
height: px;
}

.menu a:link {
text-decoration: none;
color: #FFF;
font-size: 110%;
}

.menu a:hover {
color: #FFF;
font-size: 110%;
text-decoration:underline;
}

.menu a:visited {
text-decoration: none;
color: #FFF;
font-size: 110%;

}

.artist_pic {
display: inline-block;
width: auto;
clear: none;
position: relative;
float: left;
margin-left: 0px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 10px;
}


.content_type_a {
background-color: black;
font-family: Arial, serif;
font-size: 100%;
color: #FFF;
width: auto;
float: 40%;
clear: none;
display: block;
text-align:justify;

}
.construction {
background-color: black;
font-family: Arial, serif;
font-size: 100%;
color: #FFF;
display: block;
text-align:justify;
}

.construction img {
background-color: transparent;
height: 150px;
border: none;
width: auto;
font-family: Arial
color: #FFF;
font-size: 100%;
font-style: bold;
text-align: center;
padding: 20px 0px 0px 100px;
}

.footer {

}

1. Вау. Вы, ребята, очень полезны и очень быстро отвечаете. Я действительно ценю это сообщество. Я уверен, что теперь я буду часто возвращаться. Ха-ха…

2. Постарайтесь сосредоточиться на вопросе. Нет необходимости заранее благодарить, ненужные объяснения, теги в заголовке и прочее…

Ответ №1:

Вы могли бы удалить

 text-align:justify;

из .content_type_a стиля и добавления

 position: absolute;
left: 220px;

См. http://jsfiddle.net/bULaF /

Ответ №2:

Для этой проблемы есть готовые решения. Они называются сеточными системами.

Они были изобретены для смягчения этой проблемы среди многих других.

Посмотрите на это, например:

Сеточная система 960
Twitter Bootstrap — это фреймворк CSS / JS, но он имеет довольно приличную сеточную систему. Это может быть излишним для того, что вы пытаетесь сделать, но, возможно, это поможет вам также стилизовать ваши формы (если они у вас будут)

У них (очень) небольшая кривая обучения, но я думаю, оно того стоит.

Ответ №3:

 .menu {
float: left;
}

Причина в том, что если меню не выше содержимого, которому разрешено перемещаться вокруг него, то, когда содержимое опускается ниже меню, оно занимает больше места.

Оболочка и поле слева: отрицательное значение — одно из решений, обычно с фиксированной шириной для меню.

 <div id="wrapper">
<div class="menu">
<p><a href="link">Home</a></p>
<p><a href="link">About the Artist</a></p>
<p><a href="link>"Blog</a></p>
<p><a href="link">Artist Statement</a></p>
<p><a href="link">Inspiration</a></p>
<p><a href="link">Art Gallery</a></p>
<p><a href="link">Exhibits</a></p>
<p><a href="link">Store</a></p>
<p><a href="link">Commissioning</a></p>
<p><a href="link">Contact</a></p>
</div>

<div class="artist_pic">
<img src="picture link">    
</div>

<div class="content_type_a">
<p>CONTENT HERE</p>
</div> 
<div style="clear:both"><!-- note we should clear floats with some type of content or tag --></div>
</div> <!-- end wrapper -->

Теперь добавьте левые поля

 .wrapper {
left-margin:200px;
}
.menu {
left-margin:-200px;
width:200px;
}

Теперь содержимое не будет обтекать меню, независимо от того, является ли оно плавающим или нет.

1. Я не поместил весь ваш CSS в свой ответ, чтобы ответ был четко виден. проценты по ширине и полям могут быть использованы сбивающими с толку, обычно не требуется, чтобы меню сужалось, Т.Е. Обычно Это фиксированная ширина. Очистка плавающих элементов не является обязательной (ширина нижнего колонтитула = 100%), но поскольку оболочка будет находиться там, где проходит фон, если плавающие элементы не очищены, тогда фон не переходит в нижнюю часть меню.

Ответ №4:

Ваше плавающее изображение должно находиться внутри контейнера в стороне от меню.

Чтобы не позволить отдельному / основному контейнеру переходить под плавающее меню, просто запустите макет с overflow помощью . ДЕМОНСТРАЦИЯ

Ваш CSS для вашего основного контейнера становится:

 .content_type_a {
background-color: black;
font-family: Arial, serif;
font-size: 100%;
color: #FFF;
width: auto;
overflow:hidden;/* here mind outside and inside floatting elements*/
clear: none;
display: block;
text-align:justify;
}

Float:40%; не существует, он принимает только : none , right или left как правильные значения.

1. Я использовал это решение наряду с несколькими другими. Это работает отлично. Новый код: <div class=»content_type_a»> <div class=»artist_pic»> <img src=»ссылка на картинку»> </div> <p> куча вещей </p> </div> css: .content_type_a { цвет фона: черный; семейство шрифтов:Arial, засечки; размер шрифта: 100%; цвет: #FFF; ширина: авто; плавающий: 40%; очистить: нет; положение: относительное; отображение: таблица; выравнивание текста: по ширине;