динамический контейнер div с несколькими контентом

Я пытаюсь создать своего рода баннер с css. div содержит два изображения и бит разметки текста на две строки. он выглядит хорошо на моем дисплее, но если я загружаю сторону на другой дисплей с меньшим разрешением и/или 4: 3, весь контейнер «падает» :( Я пробовал разные методы, но ничего не работает. быть некоторые из вас может мне точку в правильном направлении :)динамический контейнер div с несколькими контентом

вот CSS и HTML:

CSS:

#head_box_banner { 
position: absolute;  
height: 150px; 
width: auto; 
right: 13px; 
left: 13px; 
top: 4px; 
background-color: #DBDBDB; 
border-radius:3px; 
} 

.logo1 { 
margin-top: 19px; 
margin-left: 139px; 
} 

.logo2 { 
margin-top: -112px; 
margin-left: 1380px; 
} 

.text_banner_1 { 
margin-top: -125px; 
margin-left: 426px; 
font-size: 46px; 
color: #062916; 
font-weight:bold; 
font-family: comic, serif; 
font-style: oblique; 
text-shadow: 0 1px 0 #ccc, 
      0 2px 0 #c9c9c9, 
      0 3px 0 #bbb, 
      0 4px 0 #b9b9b9, 
      0 5px 0 #aaa, 
      0 6px 1px rgba(0,0,0,.1), 
      0 0 5px rgba(0,0,0,.1), 
      0 1px 3px rgba(0,0,0,.3), 
      0 3px 5px rgba(0,0,0,.2), 
      0 5px 10px rgba(0,0,0,.25), 
      0 10px 10px rgba(0,0,0,.2), 
      0 20px 20px rgba(0,0,0,.15); 
} 

.text_banner_2 { 
margin-top: 12px; 
margin-left: 668px; 
font-size: 46px; 
color: #062916; 
font-weight:bold; 
font-family: comic, serif; 
font-style: oblique; 
text-shadow: 0 1px 0 #ccc, 
      0 2px 0 #c9c9c9, 
      0 3px 0 #bbb, 
      0 4px 0 #b9b9b9, 
      0 5px 0 #aaa, 
      0 6px 1px rgba(0,0,0,.1), 
      0 0 5px rgba(0,0,0,.1), 
      0 1px 3px rgba(0,0,0,.3), 
      0 3px 5px rgba(0,0,0,.2), 
      0 5px 10px rgba(0,0,0,.25), 
      0 10px 10px rgba(0,0,0,.2), 
      0 20px 20px rgba(0,0,0,.15); 
    }

HTML:

<div id="head_box_banner"> 
         <div class="logo1"><img src="png/logol.png" width="110" height="112" /></div> 
         <div class="text_banner_1">Förderverein Grundschule</div> 
         <div class="text_banner_2">Hindeburgstrasse e.V.</div> 
         <div class="logo2"><img src="png/logor.png" width="110" height="112" /></div>

источник

2015-04-01 Kallmas

Не могли бы вы сделать демон [тег: JSFiddle]? – SaidbakR

Взгляните на [медиа-запросы] (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries) –

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

#head_box_banner { 
position: absolute;  

height: yourheight%; 

width: auto;

Обратите внимание, что вы используете проценты по высоте и ширине только для баннер, а не картинки. PS: Попробуйте сыграть с процентами высоты, чтобы узнать, сколько процентов - лучший вариант для вас.

источник

2015-04-01 14:45:08

я был быстро идти, вот что я думаю, что вы собирались для

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#head_box_banner { 
position: absolute;  
height: 150px; 
width: auto; 
right: 13px; 
left: 13px; 
top: 4px; 
background-color: #DBDBDB; 
border-radius:3px; 
min-width: 900px; 

} 

.logo1 { 
    float: left; 
    margin-top: 19px; 
    margin-left: 19px; 
} 

.logo2 { 
    margin-top:19px; 
    float:right; 
    margin-right: 19px; 
} 

.text_banner_1 { 
font-size: 46px; 
color: #062916; 
font-weight:bold; 
font-family: comic, serif; 
font-style: oblique; 
text-shadow: 0 1px 0 #ccc, 
      0 2px 0 #c9c9c9, 
      0 3px 0 #bbb, 
      0 4px 0 #b9b9b9, 
      0 5px 0 #aaa, 
      0 6px 1px rgba(0,0,0,.1), 
      0 0 5px rgba(0,0,0,.1), 
      0 1px 3px rgba(0,0,0,.3), 
      0 3px 5px rgba(0,0,0,.2), 
      0 5px 10px rgba(0,0,0,.25), 
      0 10px 10px rgba(0,0,0,.2), 
      0 20px 20px rgba(0,0,0,.15); 
} 

.title_container{ 
    text-align:center; 
    margin-top:10px; 
} 

.text_banner_2 { 
margin-top: 12px; 
margin-left: 250px; 
font-size: 46px; 
color: #062916; 
font-weight:bold; 
font-family: comic, serif; 
font-style: oblique; 
text-shadow: 0 1px 0 #ccc, 
      0 2px 0 #c9c9c9, 
      0 3px 0 #bbb, 
      0 4px 0 #b9b9b9, 
      0 5px 0 #aaa, 
      0 6px 1px rgba(0,0,0,.1), 
      0 0 5px rgba(0,0,0,.1), 
      0 1px 3px rgba(0,0,0,.3), 
      0 3px 5px rgba(0,0,0,.2), 
      0 5px 10px rgba(0,0,0,.25), 
      0 10px 10px rgba(0,0,0,.2), 
      0 20px 20px rgba(0,0,0,.15); 
    } 
</style> 
</head> 
<body> 
    <div id="head_box_banner"> 
         <div class="logo1"><img src="png/logol.png" width="110" height="112" /></div> 
      <div class="logo2"><img src="png/logor.png" width="110" height="112" /></div> 

      <div class="title_container"> 
       <div class="text_banner_1">Förderverein Grundschule</div> 
          <div class="text_banner_2">Hindeburgstrasse e.V.</div> 
      </div> 

</body> 
</html>

Вот что я сделал. Во-первых, я использовал float для изображений вместо того, чтобы точно указывать, где они предназначены для пикселов. Это означает, что они будут «плавать» вправо или влево от браузера независимо от разрешения или размера браузера, и поле используется только для определения расстояния между ними и содержащего их div.

Затем я переместил запись в свой собственный div и выровненный по центру центр. Это удерживает текст в центре браузера, поэтому вам не нужно указывать, где находится центр в пикселях (как правило, вы хотите указать местоположение в пикселях, если знаете 100%, насколько велик div, содержащий его В этом случае окно браузера можно уменьшить или изменить разрешение, которое вызывает все сбои, которые вы видите)

Наконец-то я дал head_box_banner минимальную ширину 900 пикселей. Даже мои невероятные изменения будут затухать, когда окно станет слишком маленьким, чтобы избежать этого. Я убедился, что заголовок никогда не будет меньше, чем 900 пикселей. Если это так, пользователю потребуется прокрутить вправо, чтобы увидеть весь заголовок. FYI есть лучшие решения для этого (посмотрите отзывчивый дизайн)

источник

2015-04-01 15:51:34 ForeverStuck

спасибо за вашу работу. это выглядит хорошо для меня. :) может быть, я все еще немного поиграю с настройками, чтобы получить его и на еще меньшем разрешении на работу. , но ты привел меня на верный путь. : D большое спасибо. – Kallmas

динамический контейнер div с несколькими контентом

ответ

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