1
В основном, я использовал все, от разрывов, до прокладок и полей, но ничего не работает. Моя проблема на этом изображении:Как я могу отделить два разных div?
Я не могу показаться, чтобы найти способ отделить «профиль пользователя DIV» и «статью о». Я могу опубликовать свой CSS, если вам это нужно!
EDIT:
HTML:
<!-- begin user_panel -->
<div id="user_panel">
<!-- user_img -->
<div id="user_img">
<center><a href="#"><img src="images/avtr.png" alt="" title="Welcome, wallensteiN." /></a></center>
</div>
<!-- user_profile -->
<div id="user_profile">
<table>
<tr>
<td style="width: 300px; float: left;">
<h1>Welcome, <a href="#">wallensteiN</a>.</h1>
<p> • Last visit: Dec 01, 2014; 15:30.<br> • You currently have <span class="online">5</span> friends online.<br> • <a href="#">Inbox</a> - no new messages.<br> • <a href="#">Edit</a> your profile.<br> • <a href="#">Chat</a> with the community!<br> • <a href="#">Change</a> password.<br> • <a href="#">Log out</a> of this session.</p>
</td>
<td style="width: 500px; float: right;">
<h1>Latest activity on the website</h1>
<p> • <a href="#">wallensteiN</a> commented in <a href="#">How to get better at DotA in 3 steps</a>.<br> • <a href="#">Artzeezy</a> commented in <a href="#">Interview with EG's Arteezy</a>.<br> • <a href="#">NewsBot</a> posted <a href="#">Interview with EG's Arteezy</a>.<br> • <a href="#">NewsBot</a> posted <a href="#">How to get better at DotA in 3 steeps</a>.</p>
</td>
</tr>
</table>
</div>
</div>
<!-- end user_panel -->
<!-- begin content -->
<div id="content">
<!-- begin slider -->
<div id="slider">
</div>
<!-- end slider -->
<!-- begin article -->
<div id="article">
<h1><a href="#">Welcome to "Shooter"</a></h1>
<p> • Enjoy this template!</p>
<h1><a href="#">Interview with EG's Arteezy</a></h1>
<p> • Able an hope of body. Any nay shyness article matters own removal nothing his forming. Gay own additions education satisfied the perpetual. If he cause manor happy. Without farther she exposed saw man led. Along on happy could cease green oh.</p>
<p> • Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits county enough the figure former add. Do sang my he next mr soon. It merely waited do unable.</p>
<h1><a href="#">How to become better at DotA in 3 steps</a></h1>
<p> • Yourself required no at thoughts delicate landlord it be. Branched dashwood do is whatever it. Farther be chapter at visited married in it pressed. By distrusts procuring be oh frankness existence believing instantly if. Doubtful on an juvenile as of servants insisted. Judge why maids led sir whose guest drift her point. Him comparison especially friendship was who sufficient attachment favourable how. Luckily but minutes ask picture man perhaps are inhabit. How her good all sang more why.</p>
<p> • Sense child do state to defer mr of forty. Become latter but nor abroad wisdom waited. Was delivered gentleman acuteness but daughters. In as of whole as match asked. Pleasure exertion put add entrance distance drawings. In equally matters showing greatly it as. Want name any wise are able park when. Saw vicinity judgment remember finished men throwing.</p>
</div>
<!-- end article -->
<!-- begin sidebar -->
<div id="sidebar">
</div>
<!-- end sidebar -->
</div>
<!-- end content -->
CSS
/* begin user panel */
#user_panel{
width: 1100px;
margin: 0 auto;
margin-top: 25px;
}
#user_panel #user_img{
width: 200px;
height: 200px;
float: left;
background: rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 10px solid #F90;
}
#user_panel #user_img img{
margin-top: 25px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 1px solid #111;
}
#user_panel #user_profile{
width: 850px;
height: 200px;
float: right;
background: rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 10px solid #F90;
}
#user_panel #user_profile a{
color: #F90;
}
#user_panel #user_profile a:hover{
color: #FFF;
}
#user_panel #user_profile h1{
font-family: Century Gothic;
font-size: 23px;
color: #FFF;
padding-left: 15px;
}
#user_panel #user_profile p{
font-family: Century Gothic;
font-size: 15px;
color: #FFF;
padding-left: 15px;
}
/* begin content */
#content{
width: 1065px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 10px solid #F90;
overflow: auto;
padding-left: 15px;
margin-bottom: 25px;
}
#content #slider{
}
#content #article{
float: left;
width: 700px;
}
#content #article h1{
width: 500px;
font-family: Century Gothic;
font-size: 23px;
border-bottom: 5px solid #F90;
}
#content #article p{
font-family: Century Gothic;
font-size: 15px;
color: #FFF;
}
Footer еще не закончена!
Сложно сказать не имея возможности проверить проблему или хотя бы образец кода. –
Итак, вам нужны как css, так и html? – wallensteiN
Да, нам нужны HTML и CSS. – disinfor