Изобрафения из html в css - HTML и CSS

onded · 25.04.2010, 18:52

Ребят, помогите плиз мне картинки описать по максимуму в цсс, а то я в html всё сделал, но в цсс не шарю и искал где только можно, но там только фоновые рисунки описаны были. В файле risunok показано как что должно выглядеть. Заранее благодарен.

vedro-compota · 25.04.2010, 18:56

поясни) что именно?

onded · 25.04.2010, 19:11

надо, чтобы из html всё можно было по максимуму в css написать, т.е. что уже в html есть нада в css перекинуть

MrJenika · 25.04.2010, 19:30

как я понял надо сверстать страницу из макета, это дело не одной минуты, и никто за вас этого делать не будет, если не к спеху, то напишите, будет время сваяю, ну или учитк хтмл+css

Вот было малость время:

index.html

Код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="uzd2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper"> 
<div id="header">
<div class="logo">
<h1>Company Name</h1>
<p>Your tagline Here</p>
</div>
</div>
<div id="main_menu">
<a href="#">Home</a>
<a href="#">FAQs</a>
<a href="#">Our Store</a>
<a href="#">Getting Started</a>
</div>
<div id="content">
<div id="menu"> 
<div class="title_menu">
<strong>Main Menu</strong>
</div>
<div class="punkt"> 
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

<div class="title_menu">
<strong>Template Info</strong>
</div>
<div class="punkt">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="title_menu">
<strong>Our Store</strong>
</div>
<div class="punkt">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="data">
Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 
1991—1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария).
 HTML создавался как язык для обмена научной и технической документацией, пригодный для
 использования людьми, не являющимися специалистами в области вёрстки. HTML успешно
 справлялся с проблемой сложности SGML путём определения небольшого набора структурных 
и семантических элементов — дескрипторов. Дескрипторы также часто называют «тегами». 
С помощью HTML можно легко создать относительно простой, но красиво оформленный документ.
 Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. 
Мультимедийные возможности были добавлены позже. Изначально язык HTML был задуман 
и создан как средство структурирования и форматирования документов без их привязки к 
средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был
 без стилистических и структурных искажений воспроизводиться на оборудовании с различной 
технической оснащённостью (цветной экран современного компьютера, монохромный экран 
органайзера, ограниченный по размерам экран мобильного телефона или устройства и 
программы голосового воспроизведения текстов). Однако современное применение HTML 
очень далеко от его изначальной задачи. Например, тег , несколько раз использованный 
для форматирования страницы, которую вы сейчас читаете, предназначен для создания в 
документах самых обычных таблиц, но, как можно убедиться, здесь нет ни одной таблицы. 
С течением времени, основная идея платформонезависимости языка HTML была отдана в
 своеобразную жертву современным потребностям в мультимедийном и графическом оформлении.


<br>
</div>
</div>
<div id="footer">
<p> <strong>Текст футера</strong> </p>
</div>
</div>
</body>
</html>

стили

Код:


@charset "utf-8";
body {
margin:0 auto;
padding:0;

}
#wrapper{
margin: 0 auto;
}
#header{ background:#C00;
width:900px;
margin:0 auto ;
height:200px;
	
}
.logo{
	color:#FFF ;
	padding:50px
}
#main_menu{
width:900px;
height:30px;
background:#900;
margin:0 auto ;
text-align:right; 
}
#main_menu a 
{color:#FFF;
text-decoration:none;
padding:0px 25px 5px 15px;
border-left:1px solid; 
} 
#content{
	margin: 0 auto;
	width:900px;
}
#menu{ 
float:left;
width:250px; 
padding-bottom:100px;
margin-bottom:-100px;
overflow:hidden;
}
.title_menu{
	background:#900;
	width: 200px;
	margin: 15px;
	color:#FFF;
	padding:3px;
}
.punkt a{ color: #900;
text-decoration:none;
	
}
#data{ width:630px;
float: right; 
padding-bottom:100px;
margin-bottom:-100px;
overflow:hidden; 
	
}

#footer{
	margin:0 auto;
	background:#666;
height:70px;
width:910px;
clear:both;
color:#FFF; 
text-align:center;
padding:25px;
	
	
}

onded · 25.04.2010, 21:04

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

MrJenika · 25.04.2010, 22:29

хм, ну так формулируйте поточнее задачу, а картинки так и вставляют через тег img а в css они прописываются только как фон для блока

Код:

  
background-image: url(images/bg.jpg); /* Путь к фоновому изображению */
background-color: #c7b29a; /* Цвет фона */

то есть если у вас есть блок контент то фон ему придаёте так :
<div id="content">
</div>
а в стилях пишите :
#content{
background-image: url(images/bg.jpg);
}

ну в css можно придать стили свойству
img {стили*}

25.04.2010, 18:56	#2
vedro-compota любитель-далеко не Участник клуба Регистрация: 13.04.2010 Сообщений: 1,156	поясни) что именно? против абортов=за + жизнь;.фкн вгу;_______________________мойблг

25.04.2010, 21:04	#5
onded Пользователь Регистрация: 29.09.2008 Сообщений: 26	вообще-то я не упомянул такую вещь, что надо из картинок, которые в архиве составить по обрузцу сайт, что я и сделал в html, но картики ставить в css я не знаю как, но то тот код, который был выложен помог разобраться немного спс Последний раз редактировалось onded; 25.04.2010 в 21:06.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Верстка html без css	Witaliy	HTML и CSS	3	29.10.2008 20:03
Webbrowser + HTML + css	GAGARIN-NEW	Компоненты Delphi	9	17.10.2008 01:15
Вставка CSS/HTML в блог на blog.ru	Andr180nag	HTML и CSS	4	10.07.2008 21:42

25.04.2010, 19:11	#3
onded Пользователь Регистрация: 29.09.2008 Сообщений: 26	надо, чтобы из html всё можно было по максимуму в css написать, т.е. что уже в html есть нада в css перекинуть

25.04.2010, 22:29	#6
MrJenika Форумчанин Регистрация: 07.09.2009 Сообщений: 361	хм, ну так формулируйте поточнее задачу, а картинки так и вставляют через тег img а в css они прописываются только как фон для блока Код: `background-image: url(images/bg.jpg); /* Путь к фоновому изображению / background-color: #c7b29a; / Цвет фона /` то есть если у вас есть блок контент то фон ему придаёте так : <div id="content"> </div> а в стилях пишите : #content{ background-image: url(images/bg.jpg); } ну в css можно придать стили свойству img {стили} webinmd.com