У вас есть изображение из нижнего колонтитула

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

На сайте можно найти здесь: http://ispace.ci.fsu.edu/~seb10/cgs2821/proj10

То, что я в настоящее время является ДИВ, что я позиционирую к основанию с помощью встроенного стиля в HTML и делах.

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

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

Каким будет процесс, если это возможно?

Вот ссылка на CSS: http://2011.ispace.ci.fsu.edu/~seb10/cgs2821/proj10/style.css

Большое спасибо за помощь заранее.

источник

2013-04-22 Sam

Ключ размещен по адресу с абсолютной абсолютной позицией. Я переместил иллюстрацию мачты в нижний колонтитул: http://jsfiddle.net/David_Knowles/98PLA/
Это решение проблемы?

#footer .container {overflow: visible;} /* use a different technique to wrap floated elements so you can place image in the footer and have it stick out - see underneath */ 
.fltright {position: absolute; bottom: 56px; right: 0;} 

/* For modern browsers */ 
.container:before, 
.container:after { 
    content:""; 
    display:table; 
} 
.container:after { 
    clear:both; 
} 
/* For IE 6-7 (trigger hasLayout) */ 
.container { 
    zoom:1; 
} 

    <div id="footer"> 
     <!-- Begin Container --> 
      <div class="container"> 
       <img class="fltright" src='http://2011.ispace.ci.fsu.edu/~seb10/cgs2821/proj10/images/derrick.png' alt="derrick" width="300"/> 
       <h1>Copyright &copy; 2013 <br />All Rights Reserved</h1> 
       <h3><a href="mailto:[email protected]">Webmaster</a> |<a href="#">Site Map</a> | <a href="about.html">About</a></h3> 
      </div> 
      <!-- End Container --> 
    </div> 
    <!-- End Footer -->

источник

2013-04-22 18:45:43 Timidfriendly

Это прекрасно работает. Тем не менее, я столкнулся с проблемой, когда мой личный образ на странице About теперь подталкивается и сужается под заголовком. Кроме того, я не слишком обеспокоен тем, что это не работает в браузере Google Chrome для iPad, но нижний колонтитул, потому что больше и изображение становится невидимым, потому что они имеют один и тот же цвет. Любая идея, почему это не работает? Кроме этого, это было полезно. Спасибо. – Sam

Ничего, я исправил мою страницу ... Я забыл, что вы отредактировали .fltright, что повлияло на это изображение. Просто нужно сделать это .fltright2 и изменить HTML. Это исправило это. Все еще интересно узнать о проблеме с iPad Chrome Chrome ...потому что он отлично работает на iPhone приложение Google Chrome ... странно. Возможно, у приложения есть проблемы. – Sam

Я предполагаю, что изображение башни нефтяной скважины - это тот, который будет расположен. Я бы создал файл .png с прозрачным фоном, а затем установил его как фоновое изображение в элемент .container.

Прозрачность .png позволит другому фонологическому мотиву отображаться в незакрытых (прозрачных) разделах вашего векторного изображения.

Это прекрасно работает, пока элементы нижнего колонтитула текут сразу после вашего элемента контейнера.

источник

2013-04-22 18:15:43

Чтобы сделать изображение игнорировать его родительский элемент, сочетание позиционирования и Z-индекс может быть использован:

position: absolute; 
z-index: 2;

Вы также можете попробовать поэкспериментировать с display и overflow свойства в зависимости от того, что вы хотите это должно выглядеть.

источник

2013-04-22 18:30:54 RandomUs1r

Когда я посмотрел ваш код, я придумал эти значения css, чтобы полностью выровнять ваш .sidebar на вашей странице. У вас было position: relative;, чтобы разместить его, однако он перемещает родственник в то, как большое окно и окружающие элементы. Вот почему он, вероятно, двигался. Однако position: absolute; не рассматривает окружающие элементы и поэтому останется на месте.

.sidebar { 
    position: absolute; 
    top: 233px; 
    right: 10px; 
}

источник

2013-04-22 18:38:20

У вас есть изображение из нижнего колонтитула

ответ

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