HTML расположение макета HTML

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

Основная предпосылка для макета в виду довольно проста: центрированное изображение, с рядом окружающих кнопок. У меня трудное время с расположением кнопок.

Визуальное представление макета:

http://imgur.com/edit

В настоящее время центр изображения отображения, но я с трудом позиционирование элементов кнопки.

Немного смущенно о том, как развернуть веб-страницу. Если у меня есть центрированный тег <div> с <buttons elements surrounding this> или центрированный с кучей других центрированных <div>.

Кроме того, если есть более утонченный подход к этой проблеме с использованием HTML5, мне было бы очень интересно узнать об этом.

Большое спасибо,
J

HTML код

<head><link rel="stylesheet" type="text/css" href="theme.css"></head> 
<html> 
<body> 

    <h1>Web Portal</h1> 

    <div class="globe" align="center"> 
     <img src="center_img.png" alt="logo" height="420" width="420"> 
    </div> 
    <div class="button" align="center"> 
     <button type="Button">Click me!</button> 
    </div> 
</body> 
</html>

источник

2014-01-09 BodhiByte

Я не понимаю ссылки betwen вашего образца кода и ваше визуального представления. Чего вы хотите преуспевать? –

Id нравится иметь макет, отражающий визуальное представление, предоставленный код был всего лишь примером моего подхода. – BodhiByte

Даже я не понял, что именно вы хотите. но для изображения sourrounded кнопок попробуйте этот код

<body> 

<h1>Web Portal</h1> 

<table align="center"> 
    <tr> 
     <td><button type="Button">Click me!</button></td> 
     <td align="center" ><button type="Button">Click me!</button></td> 
     <td><button type="Button">Click me!</button></td> 
    </tr> 
    <tr> 
     <td><button type="Button">Click me!</button></td> 
     <td><img src="center_img.png" alt="logo" height="420" width="420"></td> 
     <td><button type="Button">Click me!</button></td> 
    </tr> 
    <tr> 
     <td><button type="Button">Click me!</button></td> 
     <td align="center" ><button type="Button">Click me!</button></td> 
     <td><button type="Button">Click me!</button></td> 
    </tr>   
</table>

источник

2014-01-09 12:31:53 JTN

спасибо за ответ Jithin, его не то, что я ищу, хотя. Я включил пример в образ исходного сообщения :) – BodhiByte

Макет, который вы показали на изображении, также может быть достигнут с использованием таблицы, используя s и s. Вы также можете добавить фуфурные таблицы внутри s. – JTN

спасибо, Jithin, я отдам его. – BodhiByte

HTML расположение макета HTML

ответ

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