Кодиране на дизайн

R

redsystem

Registered
Ако може долния код да бъде кодиран както трябва. Фигурите трябва да бъдат горе/долу ето така разположени;

fff.png


Код: 
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style>
body {
background: #fff;
color: #588ec4;
}

#all {
width: 954px;
height: auto;
}

#header {
background:url('images/header.png');
width: 303px;
height: 88px;
}

#search {
background:url('images/search.png');
width: 220px;
height: 32px;
}

#search_button {
background:url('images/search_button.png');
width: 69px;
height: 30px;
}

#menu {
background:black;
width: 951px;
height: 36px;
}

#left_bar {
background: #e1ebf5;
width: 692px;
height: 531px;
float: right;
}

#top_bar {
width: 247px;
height: auto;
float: right;
}

#list1 {
background:red;
width: 251px;
height: 309px;
float: right;
}

#greet1 {
background:blue;
width: 248px;
hegith: 124px;
float: right;
}

#right_bar {
width: 247px;
height: auto;
float: right;
}

#xaxa {
background:green;
width: 247px;
height: 211px;
float: right;
}

#xaxa2 {
background:white;
width: 249px;
height: 152px;
float: right;
}
</style>
<body>
<div id="all">
	<div id="header"></div>
	<div id="search"></div>
	<div id="search_button"></div>
	<div id="menu">  Начало | Аз | Ти | Той | Вие | Те</div>

		<div id="left_bar">
		</div>

		<div id="top">
			<div id="list1"></div>
			<div id="greet1"></div>
		</div>

		<div id="right_bar">
			<div id="xaxa"></div>
			<div id="xaxa2"></div>
		</div>
</div>
</body>
</html>
 
Според мен ще е по-добре да не е
#class а, .class

В момента нямам време да ти ги наглася, но ако искаш пробвай сам като ги направиш на .class и после с подреждаш дивовете като им задаваш съотвените класове.

примерно.

<div class="all">
<div class="header">
</div>//na headera
<div class="search">
</div>//na sercha
<div class="menu">
</div>//na na menuto
<div class="leftbar">

.....
</div>//na all-a

и така нататък ако схвана.
 
Каква е разликата между <div id= и <div class= :? А и нещо не мога да се справя :?
 
redsystem каза:
Каква е разликата между <div id= и <div class= :? А и нещо не мога да се справя :?
Увеличете...

Разликата е в това, как се отбелязват в css файла :)

Код: 
<div id="id"></div>
се отбелязва с #id в css-a, a когато е class
Код: 
<div class="class"></div>
се отбелязва с .class


Кодирал съм го за ширина 1024px, защото не знам ти за каква ширина го искаш да е, пък аз съм с widescreen и да не стане прекалено голямо ау :)

При мен изглежда така:


Като не съм го центрирал, да е в центъра на страницата, но ако искаш да е центрирано, може и това да се направи и то лесно :)


index.html
Код: 
<html>
<head>
	<title>Кодиране</title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
	<div class="wrapper">
		<div class="header">
			<div class="left-header"></div>
			<div class="right-header">
				<div class="big-box"></div>
				<div class="small-box"></div>
			</div>
		</div>
		<div class="body">
			<div class="line"></div>
			<div class="content">
				<div class="boxes">
					<div class="box-1"></div>
					<div class="box-2"></div>
				</div>
			</div>
			<div class="content-2">
				<div class="box-3"></div>
				<div class="box-4"></div>
			</div>
		</div>
	</div>
</body>
</html>

style.css

Код: 
body {
background: #ffffff;
}

.wrapper {
width: 1024px;
}

.left-header {
background: #a6c3e1;
float: left;
height: 100px;
width: 400px;
}

.right-header {
background: #ffffff;
float: right;
height: 100px;
width: 400px;
}

.big-box {
background: #245c95;
float: left;
width: 250px;
height: 25px;
margin-top: 75px;
}

.small-box {
background: #245c95;
margin-top: 75px;
float: right;
width: 125px;
height: 25px;
}

.line {
background: #798692;
width: 100%;
height: 25px;
float: left;
margin-top: 10px;
}

.content {
background: #9c9c9c;
width: 75%;
height: auto;
margin-top: 5px;
float: left;
}

.boxes {
float: right;
}

.box-1 {
background: #46ec0c;
width: 200px;
height: 300px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
}

.box-2 {
background: #46ec0c;
width: 200px;
height: 300px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
}

.content-2 {
background: #ffffff;
float: right;
width: 23%;
height: auto;
margin-left: 10px;
}

.box-3 {
background: #ec0c2c;
width: 99%;
height: 300px;
margin-top: 15px;
margin-right: 10px;
margin-bottom: 10px;
}

.box-4 {
background: #ec0c2c;
width: 99%;
height: 300px;
margin-top: 15px;
margin-right: 10px;
margin-bottom: 10px;
}
 
Код: 
body {
background: #ffffff;
}

.wrapper {
width: 1024px;
}

.left-header {
background: #a6c3e1;
float: left;
height: 100px;
width: 400px;
}

.right-header {
background: #ffffff;
float: right;
height: 100px;
width: 400px;
}

.big-box {
background: #245c95;
float: left;
width: 250px;
height: 25px;
margin-top: 75px;
}

.small-box {
background: #245c95;
margin-top: 75px;
float: right;
width: 125px;
height: 25px;
}

.line {
background: #798692;
width: 100%;
height: 25px;
float: left;
margin-top: 5px;
}

.content {
background: #9c9c9c;
width: 75%;
height: auto;
margin-top: 5px;
float: left;
}

.boxes {
float: right;
}

.box-1 {
background: #46ec0c;
width: 200px;
height: 300px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
}

.box-2 {
background: #46ec0c;
width: 200px;
height: 300px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
}

.content-2 {
background: #ffffff;
float: left;
width: 24%;
height: auto;
margin-left: 10px;
}

.box-3 {
background: #ec0c2c;
width: 99%;
height: 300px;
margin-top: 5px;
margin-right: 10px;
}

.box-4 {
background: #ec0c2c;
width: 99%;
height: 300px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
}

с този css са по-близко, на избраните от теб позиции :)
 
Може ли да ми кажеш точно от къде да ги приближа горе в търсачката до логото. И кой редове промени :roll:
 
ми аз не съм го направил като поле за търсачка, а просто като правоъгълник, но ако голямото трябва да е полето за въвеждане на текст, а малкото да е бутона, то голямото поле е "big-box", a малкото "small-box" :)
 
Имам в предвид празното поле това бялото, как да го скася, да не е толкова разделечено :?:
 
OFFTOPIC

t0m3kk каза:
redsystem каза:
Каква е разликата между <div id= и <div class= :? А и нещо не мога да се справя :?
Увеличете...

Разликата е в това, как се отбелязват в css файла :)

Код: 
<div id="id"></div>
се отбелязва с #id в css-a, a когато е class
Код: 
<div class="class"></div>
се отбелязва с .class
Увеличете...


Пич разликата не е само в това. С class може да създаваш много дивове с едно и също име. Докато с ID не можеш да имаш два diva с едно и също име ... сещаш се нали .. ID .. идва от уникалност ;)
 
redsystem каза:
Имам в предвид празното поле това бялото, как да го скася, да не е толкова разделечено :?:
Увеличете...

Ами за да го скъсиш това поле, трябва да редактираш няколко реда...

Първо за .right-header правиш float oт right, на left, и след това отдолу добавяш нов ред "margin-left: 180px;" така ще има разстояние 180 пиксела...

plamka каза:
OFFTOPIC

t0m3kk каза:
redsystem каза:
Каква е разликата между <div id= и <div class= :? А и нещо не мога да се справя :?
Увеличете...

Разликата е в това, как се отбелязват в css файла :)

Код: 
<div id="id"></div>
се отбелязва с #id в css-a, a когато е class
Код: 
<div class="class"></div>
се отбелязва с .class
Увеличете...


Пич разликата не е само в това. С class може да създаваш много дивове с едно и също име. Докато с ID не можеш да имаш два diva с едно и също име ... сещаш се нали .. ID .. идва от уникалност ;)
Увеличете...

Да, това е ясно, но пича, който не вдява въобще от css и т.н. като гледам май питаше за това :)
 
@ t0m3kk трябваше да обясниш на потребителя каква е разликата от ID i Class тъй като след време когато понаучи CSS ще се запъне там и ще си блъска главата защо не може да сложи на 2-та дива едно и също ИД.

OFFTOPIC: нямам нищо против теб, просто изказвам мнение :)
 
Дано колегата няма против, че ползвам темата му, но имаме сходни проблеми.

Искам да организирам структурата на дивовете по готов дизайн, но не се сещам как да подходя в случая. Бих искал да получа съвет.

Ето го дизайна:
47465980.jpg



А това е начина по който го бях замислил, но в последствие не се получи:
asstrukture.jpg


Имам проблем да го направя #header да е в средата на #headerwrapper и #navigation заедно с #obiavi да му се float-ват от двете страни с width: 100%;

Вие как бихте го реализирали въпросния дизайн, ако сметнете, че моя подход е изцяло грешен..
 
Един див main, който ще съдържа цялото съдържание на сайта.

В main слагаш:

1. header, на който задаваш width и margin: 0 auto;. Това ще го центрира. Задаваш му също и clear: both;

2. left, на който задаваш width и float: left;

3. center, на който задаваш също width и float: left;

4. right, на който отново задаваш width и float: left;

После правиш един див content пак задаваш widht и margin: 0 auto; , за да го центрираш. В него поставяш:

1. content-left, на който задаваш приблизително половината от широчината на content и пак float: left;

2. content-right, на който задаваш останалата широчина, за да запълниш дива и пак float: left;

3. Слагаш един див със стил clear: both;

Правиш footer с някаква широчина и задаваш пак margin: 0 auto; , за да го центрираш. Също добавяш и clear: both;


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

Back
Горе