Нужно мнение профессионалов о шаблоне

cmndr_alexgreen · November 22, 2012

В данный момент есть графический шаблон будущего сайта, но нет четкого представление как его рациональнее воплотить.

Так выглядит главная страница:

Большой квадрат - содержит в себе логотип и возможно слоган, ну и вероятно какие то элементы навигации.

Маленькие квадраты - будут нести функцию первичной навигации и содержать в себе основные разделы, с фоновыми изображениями, где то возможно будет легкий флеш или простая анимация через css или js

Так выглядит страница после выбора раздела:

Где большой темный квадрат олицетворяет область контента.

Начиналась верстка по обычному сценарию, в два столбика div'ами.

Код выглядит примерно так (без цветов и картинок, чисто каркас):

?
<body>
	<div id="page_box">

<div id="column_a">

   <div id="acube_1">
         <div id="name2"></div>
           <div id="name"></div>
   </div>
   <div id="acube_2">
	   <div id="bcube_1"><img src="img/140-1.png" class="" alt=""></div>
	   <div id="bcube_1"><img src="img/140-2.png" class="" alt=""></div>
   </div>
</div>

<div id="column_b">
   <div id="acube_3"> 
	   <div id="bcube_2"><img src="img/140-2.png" class="" alt=""></div>
	   <div id="bcube_2"><img src="img/140-2.png" class="" alt=""></div>
   </div>
   	<div id="acube_3">
	   <div id="bcube_1" style="background-image:url(img/140-1.png);"></div>
	   <div id="bcube_1" style="background-image:url(img/140-4.png);"></div>
	   <div id="bcube_1"><img src="img/140-2.png" class="" alt=""></div>
	   <div id="bcube_1"><img src="img/140-4.png" class="" alt=""></div>
	   <div id="bcube_1" style="background-image:url(img/140-4.png);"><img src="" class="" alt=""></div>
	   <div id="bcube_1"><img src="img/140-3.png" class="" alt=""></div>
	   <div id="bcube_1"><img src="img/140-1.png" class="" alt=""></div>
	</div>
</div>

	</div>

CSS

?html {background:#fff url(img/page_bg.jpg);}
body {padding:0;margin:0;text-align:center;font-family:arial, sans-serif;font-size:12px;color:#9A5731;}
ul {list-style:none;padding:0; }


#page_box {width:980px;margin:0 auto;padding:0;}
#column_a {width:300px;float:left;position: relative;}
#column_b {width:680px;float:left;padding:0;background: url(imgct_bg.jpg);position: relative;}

#acube_1 {width:300px;height:300px;background: url(img/cube_bg2.jpg);position: relative;}
#acube_2 {width:300px;height:300px;position: relative;}
#acube_3 {width:680px;height:300px;position: relative;}

#bcube_1 {display:inline-block;width:150px;height:150px;float:left;}
#bcube_2 {width:150px;height:150px;float:left;position: absolute;top:150px;}
#bcube_name {width:150px;height:50px;background: rgba(0, 170, 238, 0.8);}

#name {padding-top:60px;}
#name {padding-top:60px;}

(не обращайте внимание на некоторые параметры, это все условности сырой верстки)

В данный момент одолели муки связанный с конструкцией страницы, и срочно нужна критика и советы. Так же прошу вашего совета как бы вы реализовали подобный дизайн/расположение элементов.

Всем отметившимся буду очень признателен.

Edited November 22, 2012 by cmndr_alexgreen

cmndr_alexgreen · November 22, 2012

Сырая страница на хостинге: тут

Vadimka · November 23, 2012

Сырая страница на хостинге: тут

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

http://rghost.ru/41751114

или тут посмотрите http://jsfiddle.net/GsuLn/

впринципе тоже самое))думаю ваш вариант вполне подходящий

Edited November 23, 2012 by Vadimka

Sign In

Нужно мнение профессионалов о шаблоне

Question

cmndr_alexgreen

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

cmndr_alexgreen

Link to comment

Share on other sites

Vadimka

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information