aJaX
-
Posts
9 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by aJaX
-
-
Вот начал верстать, решил пока верх не трогать и заняться отображением новостей, но возникли проблемы
1)не могу сделать так что бы второй столбец с новостями был правее( почему то вниз лезет )
2)высота левого столбца равна отступу от нужного полодения правого
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Название сайта</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="header_left"></div>
</div>
<div id="content">
<div class="left_colum">
<div class="title"></div>
</div>
<div class="right_colum">
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="news">
<div class="left">
<div class="firts_news">
<span><b>Veroeros</b> sed dolor</span>
<hr>
<p><img src="images/pic1.png" alt="" /><strong>Fusce nec eros augue</strong> hendrerit erat. Nam dapibus lorem ipsum <a href="#">dolor et suscipit</a> semper. Lorem amet sed conseuat </p>
</div>
<p>Fusce nec eros augue hendrerit erat. Nam dapibus lorem ipsum <a href="#">dolor et suscipit</a>
semper. Lorem amet sed conseuat.Fusce nec eros augue hendrerit erat. Nam dapibus lorem ipsum
<a href="#">dolor et suscipit</a> semper. Lorem amet sed conseuat</p>
<div class="right">
</div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>css:
/* !!! Сброс стилей !!! */
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input
,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
legend{color:#000;}
ol li{list-style:decimal}
/* !!! Сброс стилей Конец !!! */
html, body {
background:#d4e3ee url(images/bg.png) repeat-x;
color:#4f7276;
font-family:Verdana,Tahoma,Arial;
font-size:11px;
width:100%;
min-width:900px;
}
a {
color:#cc0000;
}
a:hover {
text-decoration:none;
}
p {
margin-top:30px;
}
hr {
height:1px;
background:#CCCCCC;
border:0px;
}
img {
padding:3px;
border:1px solid #c6e1e8;
margin-right:26px;
margin-bottom:26px;
float:left;
}
div#wrapper {
margin:0 auto; /* централизуем основной блок */
width:1000px; /* ширина основного блока */
height:auto;
}
/* Стили header (верхней части сайта) */
div#header {
background:url(images/right_head.png) no-repeat top right;
width:100%;
height:200px;
}
div.header_left {
background:url(images/left_head.png) no-repeat top;
width:300px;
height:410px;
}
/* Стили content (средней части сайта) */
div.left_colum {
width:300px;
height:auto;
background:#dee8f9;
margin-top:210px;
}
div.title {
background:#3399cc url(images/title_bg.png) repeat-x;
height:46px;
text-align:center;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
}
div.right_colum {
width:700px;
height:auto;
background:#FFFFFF;
float:right;
margin-top:-230px;
overflow:hidden;
}
/* Стили news */
div.news {
padding:30px;
}
div.first_news {
text-align:right;
}
.first_news img {
float:left;
}
div.left {
border-right:1px solid #CCCCCC;
margin-top:20px;
padding-right:30px;
width:290px;
float:left;
}
.left b {
font-weight:100;
font-size:26px;
color:#a01111;
}
.left span {
font-size:26px;
width:100%;
height:26px;
color:#205098;
}
div.right {
width:290px;
float:right;
margin-top:20px;
padding-left:30px;
}
/* Стили menu */
div.menu {
background:#3399cc url(images/menu_bg.png) repeat-x;
height:76px;
width:700px;
}
div.menu li {
float:left;
margin-left:40px;
margin-top:30px;
list-style-image:url(image/menu_r.png);
}
div.menu a {
font-size:14px;
color:#FFFFFF;
}
/* Стили footer (нижней части сайта) */
div#footer {
width:100%;
height:300px;
} -
проблема опять же в закруглениях на форму %)
-
Нужно сделать форму, как на картинке
Уже замаялся подскажите как сделать
-
Я хотел узнать, кто каким способом пользуется
-
Расскажите как верстать макеты, где есть закругления у блоков. Я пробывал делать таблицу 3x3 и в каждый угол вставлял край заугргленный %) не очень приятная работа. Может есть что то по проще, подскажите =)
в погоне за опытом
in Goods and Services
Posted
Тоже хотел бы потренироваться