Кодиране на дизайн, практика?!

dakata__92

dakata__92

Super Moderator
Колеги кодвам си едно дизайнче, но уви нещо не мисля, че вървя в правилната посока. Начинът по който създавам самият CSS ме кара да си мисля, че греша. Моля ВИ кажете ми на прав път ли съм, добра ли е практиката, която ползвам и най-вече лека помощ с кодирането на footer-чето. Искам да е винаги в края на страницата независимо от дължината и. В момента съм го постигнал, като съм го поставил в div id='main' но това е грешно. Ето кода на CSS-а и самият HTML.
[css]
body{
margin: 0px;
padding:0px;
background: #DCDCDC;
}
#main{
position: absolute;
top: 105px;
left: 60px;
right: 60px;
min-height: 1700px;
margin: 0px;
background: #FFFFFF;
border-radius:5px;
}
#header{
position: absolute;
top: 0px;
left: 10px;
right: 10px;
height: 100px;
margin: 0px;
z-index: 1;
color: #FFFFFF;
background: #191970;
border-radius: 0 0 5px 5px;
}
#footer{
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
min-height: 60px;
background: #F5FFFA;
border: 1px solid #000;
border-radius: 0 0 5px 5px;
}
#left_column{
position: absolute;
top: 5px;
left: 5px;
width: 200px;
min-height: 500px;
margin: 0px;
background: #F5FFFA;
border: 1px solid #808080;
border-radius:5px;
}
#taskMenu{
position: fixed;
bottom: 0px;
right: 5px;
min-height: 100px;
border: 2px;
width: 50px;
background: #FFFFFF;
border: 1px solid #808080;
border-radius:5px;
}
[/css]
HTML: 
<!DOCTYPE html>
<html>
	<head>
		<title>Начало</title>
		<meta http-equiv='Content-Type' content='text/html; charset= utf-8' />
		<meta name="Generator" content="Notepad++"/>
		<meta name="Author" content="Paradoxical"/>
		<meta name="Owner" content="Paradoxical"/>
		<link href='css.css' rel='stylesheet' type='text/css'/>
	</head>
	<body>
		<div id="header" name="top">
		</div>
		<div id="main">
			<div id="left_column">
			</div>
			<div id="footer">
			<a name="bottom"></a>
			</div>
		</div>
		<div id="taskMenu">
			
		</div>
	</body>
</html>
 
По-лесно ще ти е първо да си нарисуваш дизайна (на хартия или наум) с всичките правоъгълници. (представи си го като таблица) След това тръгваш от горе надолу и за всеки "ред" от правоъгълници слагаш един див. В този див вече слагаш още дивове за "колоните". (подобно на Bootstrap)
И така, имаш най-горе един правоъгълник за хедъра.
След това имаш ред main с колони left menu и content (примерно)
Накрая имаш footer.
TaskMenu доколкото виждам е position:fixed, така че то е отделно от тези неща. Него си го слагаш където си искаш, това няма да промени дизайна изобщо. И се получава нещо такова:

HTML: 
<header></header>
<main>
   <left menu></left menu>
   <content><content>
</main>
<footer></footer>

<task menu />
 
Аз доста си промених като цяло кода, но защо ли си мисля, че доста от браузерите няма да подържат синтаксиса на HTML5... Да готино е вместо даа създаваш някакви дивове да укажеш в самият код четливо кое е хедър, футър и мейн съдържание. Мисля, че IE не подържа <main>.
 
dakata__92 каза:
Аз доста си промених като цяло кода, но защо ли си мисля, че доста от браузерите няма да подържат синтаксиса на HTML5... Да готино е вместо даа създаваш някакви дивове да укажеш в самият код четливо кое е хедър, футър и мейн съдържание. Мисля, че IE не подържа <main>.
Увеличете...
А не, тези ги дадох така само защото ме мързеше да пиша <div id=""> навсякъде :D:D Съвсем условно ги написах така :)
Ето повече инфо за поддръжката на тези елементи:
http://caniuse.com/#feat=html5semantic
 
Имам един проблем. Желая <div id="taskMenuDown"> да бъде най-долу до footer-а. Принципно го постигах като правех един див и хеадър, мейн и футър бяха в него, но ми се струва неправилно. Честно казано ако някой успее да ми помогне ще е супер.
HTML: 
<!DOCTYPE html>
<html>
<head>
	<title>Начало</title>
	<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
	<meta name="Generator" content="Notepad++"/>
	<meta name="Author" content="Paradoxical"/>
	<meta name="Owner" content="Paradoxical"/>
	<link href='css.css' rel='stylesheet' type='text/css'/>
</head>
<body>
	
	<header id="header" name="header">
	</header>
	<div id="main">
	</div>
	<footer id="footer" name="footer">
	</footer>
	<div id='rightMenu'>
	<div id="taskMenuUp">
		
	</div>	
	<div id="taskMenuDown">
		<a href="#header"><img src="img/up.png" style='border:0;'/></a>
	</div>
	</div>
	
</body>
</html>
[css]
body{
margin:0px 0px 0px 0px;
height:100%;
background: #F5F5F5;
}
#header{
margin: 0px 5px 0px 5px;
height: 100px;
background: #191970;
border-radius: 0px 0px 5px 5px;
}
#main{
margin: 5px 60px 0px 60px;
min-height: 1800px;
background: #FFFFFF;
border: 1px solid #808080;
border-radius:5px;
}
#footer{
margin: 5px 60px 0px 60px;
height: 50px;
background: #FFFFFF;
border: 1px solid #808080;
border-radius: 5px 5px 0px 0px;
}
#rightMenu{
position: absolute;
top: 105px;
right:0px;
height:100%;
border:1px;
}
#taskMenuUp{
position: absolute;
top: 0px;
right: 5px;
min-height: 50px;
border: 1px;
width: 50px;
background: #FFFFFF;
border: 1px solid #808080;
border-radius:5px;
}
#taskMenuDown{
position: absolute;
bottom: 0px;
right: 5px;
min-height: 100px;
border: 1px;
width: 50px;
background: #FFFFFF;
border: 1px solid #808080;
border-radius: 5px 5px 0px 0px;
}

[/css] :)
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе