Гибкий формат размера HTML/CSS

-1

Мне нужно создать целевую страницу, состоящую из изображения с текстом в верхней части, нескольких видеороликов под ним и изображения полосы полосы из 2 пикселей, которые мне нужны, поэтому придерживайтесь дно.Гибкий формат размера HTML/CSS

<html> 
... 
<body> 

<img src="topimage.png" alt="" /> 

<table> 
<tr> 
<td>Video 1 here</td> 
<td>Video 2 here</td> 

<img src="2pixelhightimage.png" alt="" />

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

Как я могу это сделать?

источник

2013-12-11 Satch3000

Я не знаю, с чего начать для гибкой части его, поскольку процент может быть очень сложным, если не сделано правильно – Satch3000

Вы можете сделать это preatty easelly, добавив обертку в свой контент и установив левое и правое поле в auto. Вместо пикселя используйте%.

<div class="wrapper"> 

<img src="topimage.png" alt=""> 

<!-- No need to use table here. Just use divs for layout stuff. --> 
<table> 
    <tr> 
    <td>Video 1 here</td> 
    <td>Video 2 here</td> 
    </tr> 
</table> 

<img class="fixed" src="2pixelhightimage.png" alt=""> 

</div>

И тогда CSS:

.wrapper { margin: 0 auto;} 
img { max-width:100%; height:auto;} 
.fixed {position:fixed; bottom:0;}

источник

2013-12-11 11:35:02 NickHTTPS

что-то подобное для генплана?

<div class="wrap"> 
<div class="content">content goes here</div> 
</div> 

.wrap 
{ 
width:100%; 
background:gray; 
} 
.content 
{ 
width:80%; 
margin:0 20%; 
background:green; 
}

http://jsfiddle.net/k25gU/

источник

2013-12-11 11:37:12 andreib

Создать оболочку DIV вокруг содержимого

<div id="wrapper"> 
    <!-- content here --> 
</div>

и стиль его как это

#wrapper { 
    width: 980px /* Maximum width of the content */ 
    max-width: 100% /* responsive width */ 
    margin: 0 auto; /* center the wrapper */ 
}

также не использовать таблицы для видео. Столбцы таблицы не будут разбиваться на маленькие экраны. Используйте

<ul class="videos"> 
    <li class="video"> 
     <!-- content here --> 
    </li> 
    <li class="video"> 
     <!-- content here --> 
    </li> 
</ul>

затем CSS их

.videos { 
    list-style: none; /* no bullets */ 
} 
.videos .video { 
    display: inline-block; /* videos side by side as long as there is space */ 
    width: 245px; /* 980px site width /4 = 245px = 4 videos in one row */ 
}

Липкий полосковой линии в нижней части может быть:

<div class="strip-line-bottom"></div>

и CSS ибо она

.strip-line-bottom { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    height: 2px; 
    background: url(path/to/image.jpg) repeat-x; 
}

За подробной информацией я должен предоставить дополнительную информацию ;-)

источник

2013-12-11 11:46:00

Гибкий формат размера HTML/CSS

ответ

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