2013-03-13 3 views
0

Я создаю свое портфолио, я нарисовал макет, но теперь у меня проблемы с кодом. Как вы можете видеть на изображении.css/html - Непрозрачный макет

Визуализация:

enter image description here

  • черная область будет фото
  • белая область будет нормальный bacround цвет/может быть также изображение я буду видеть. Полная ширина масштабируемой Я хочу использовать фоновое изображение, которое будет масштабируемым, и проблема в том, что я не знаю, как решить проблему со ссылками (серое поле). Потому что я хочу, чтобы пробелы в ссылках начинались в конце экрана и заканчивались перед белым фоном (на границе).

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

Я нашел похожую проблему (о зазорах позиционирования линии связи по второстепенной позиции - масштабируемый) - Link is here - stackoverflow Теперь у меня есть такая же проблема, как и в приведенном выше вопросе - это работает, если я не буду использовать пропорциональное масштабирование фона.

+0

Вы можете делать все виды сумасшедших фигур с помощью CSS3. Это, вероятно, будет вашим лучшим выбором, так как вам не придется возиться с Javascript или что-то еще. http://css-tricks.com/examples/ShapesOfCSS/ – GJK

+1

Thx, я забыл о css3 :) Но я думаю, что я понял это по-другому ... Используя только фоновое изображение в обертке div с двумя div внутри с плавающим - 50% ширины. И чем пытаться установить положение серых полей с помощью CSS3, как вам было предложено, я думаю, что он должен работать, если я буду использовать процент позиционирования. –

+0

Я должен не согласиться. Шаблоны CSS зависят от границы, а граница не может быть установлена ​​в процентах, чтобы масштабировать ширину, как он запросил. Довольно уверен, что единственным эффективным способом сделать это будет javascript, особенно если он хочет, чтобы он был отзывчивым. – Michael

ответ

0

Это сложный макет .. НО! (Я предполагаю полномасштабное масштабируемое и фиксированное соотношение сторон)

Поскольку вы знаете, что угол пересечения областей будет таким же. Если вы поместите свои ссылки с известными процентами оси y из верхнего угла, у вас будет фиксированный прецентр по оси x.

Затем, если вы решите перейти к полной ширине браузера, вы можете использовать «позицию: фиксированный» (CSS) для ссылок вместе с масштабированием и сверху/снизу/влево/вправо (CSS). В противном случае я считаю, что вы можете использовать относительное позиционирование с тем же принципом.

Надеюсь, что это поможет вам!

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