2 колоночный дизайн

natalika · October 3, 2011

Помогите пожалуйста, уже руки опускаются...

Есть дизайн - http://rghost.ru/24021801.view

Хотела сделать так, чтобы было не просто в 1 колонку, а 2 две, чтобы еще меню, форма входа, и т.д. и т.д. было...

То есть, зеленым блоки малые, а красным новости...

Как сделать? Я уже извелась вся, пробовала и так и сяк...

Вот что должно получится примерно:

http://rghost.ru/24022051.view (сделано в фотошопе).

Код главной странички:



 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PRIVATE SERVER | Home Page</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<div id="wrapper">
    <div id="header"></div>


    <div class="black">

	<div id="nav">
	<ul>
	<li><a href="/index.html" class="current">Название верхнего меню</a></li>
	<li><a href="/account/register.php">Название верхнего меню</a></li>
	<li><a href="/account/pwrecov/recovery.php">Название верхнего меню</a></li>
	<li><a href="/vote.html">Название верхнего меню</a></li>
	<li><a href="/donate.html">Название верхнего меню</a></li>
	<li><a href="/connect.html">Название верхнего меню</a></li>
	</ul>
	</div>
	</div>





    <div id="content">

    <div class="newstitle"><p class="margin"><u>Название новости</u></p></div>
    <div class="newscontent">
    <p class="margin">Новости тут.</p>
<br/></div>
<div id="newsfooter"></div>
<br/>

    <div class="newstitle"><p class="margin"><u>Название новости</u></p></div>
    <div class="newscontent">
    <p class="margin">Новости тут</p>
<br/></div>
<div id="newsfooter"></div>
<br/>


    <div class="newstitle"><p class="margin"><u>Название новости</u></p></div>
    <div class="newscontent">
    <p class="margin">Новости тут</p>
<br/></div>
<div id="newsfooter"></div>
<br/>




</div>



    <div id="footer">Копирайты</div>
</center>
<br/>
</body>
</html>

и CSS:

@charset "utf-8";
*{
    margin:0;
    padding:0;
}



body {
    font-family: tahoma; 
    font-size:11px; 
    color:#000000; 
    background-color:#000000;
    padding:0px;
    margin:0px;
    background-image:url(../images/background.png);
    background-position:top;
    background-attachment:scroll;
    background-repeat:no-repeat;

}
}

#wrapper {
    width:680px;
    height:100%;
    margin:0 auto;
}


#header {
    background:url(../images/header.png) no-repeat;
    width:800px;
    height:150px;

}

#navigation {

    color:#003750;
    text-align:center;
    padding-top:7px;
    background:url(../images/navigation.png) no-repeat;
    width:800px;
    height:65px;

}

#content {
    background-image:url(../images/content_bg_rpt.jpg);
    padding:25px;
    width:750px; 
    height:100%;
    background-color:#262626;

}

#footer {
    margin:0px;
    background:url(../images/footer.jpg) no-repeat;
    width:800px;
    height:27px; 
    color:#6b6b6b; 
    font-weight:light; 
    text-align:center; 
    padding-top:13px;
    background-color:#000000;
}
.newstitle {
    background:url(../images/user_h3.gif) no-repeat;
    text-align:left;
    width:680px; 
    height:24px;
    padding-top:6px;
    background-color:#005ea3; 
    color:#d15400; 
    font-size:11px; 
    font-weight:bold;


}
.newscontent {
    background-image:url(../images/news_bg_rpt.jpg);
    text-align:left;
    width:680px; 
    background-color:#353434; 
    color:#C7D0D5;
    font-size:13px;


}

#newsfooter {
    background-image:url(../images/newsbar.png);
    width:680px; 
    height:18px;

}

#newstop {
    background-image:url(../images/topbar.png);
    width:680px; 
    height:18px;

}


.black #nav{
	position:relative;
	display:block;
	height:65px;
        width:800px;
	font-size:11px;
	font-weight:bold;
	background:transparent url(../images/navigation.png) repeat-x top left;
	font-family:Arial,Verdana,Helvitica,sans-serif;
	text-transform:uppercase;
}
.black #nav ul{
	margin:0px;
	padding:0;
	list-style-type:none;
	width:auto;
}
.black #nav ul li{
	display:block;
	float:left;
	margin:0 0px 0 0;
}
.black #nav ul li a{
	display:block;
	float:left;
	color:#ffffff;
	text-decoration:none;
	padding:27px 15px 0 22px;
	height:65px;
}
.black #nav ul li a:hover,.black #nav ul li a.current{
	color:#ffffff;
	background:transparent url(../images/mouseover.png) no-repeat top center;
}


p.margin
{
margin-left:12px;
} 

/

помогите пожалуйста, буду очень благодарна.

psywalker · October 3, 2011

natalika,

Лови, вот структура, которая тебе нужно, а дальше уже заполняй её

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
	.wrap { overflow: hidden; width: 600px; }
		.wrap .left { float: left; width: 200px; background: red;}
		.wrap .right { overflow: hidden;background: blue;}

</style>
</head>

<body>
	<div class="wrap">

			<div class="left">Левая</div>
			<div class="right">Правая</div>

	</div>
</body>
</html>

natalika · October 3, 2011

natalika,

Лови, вот структура, которая тебе нужно, а дальше уже заполняй её

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
	.wrap { overflow: hidden; width: 600px; }
		.wrap .left { float: left; width: 200px; background: red;}
		.wrap .right { overflow: hidden;background: blue;}

</style>
</head>

<body>
	<div class="wrap">

			<div class="left">Левая</div>
			<div class="right">Правая</div>

	</div>
</body>
</html>

Сейчас попробую, спасибо)

У вас есть, контакты? аська, скайп, вконтакте?

Edited October 3, 2011 by natalika

psywalker · October 3, 2011

natalika, psywalker09@gmail.com

natalika · October 3, 2011

natalika, psywalker09@gmail.com

У меня не получается, бред какой то(

Edited October 3, 2011 by natalika

psywalker · October 3, 2011

natalika, psywalker09@gmail.com
У меня не получается, бред какой то(

Почему? Покажи немного, как ты заполняешь?

natalika · October 3, 2011

natalika, psywalker09@gmail.com
У меня не получается, бред какой то(
Почему? Покажи немного, как ты заполняешь?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>тест</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<div class="wrap">
<div id="header"></div>
<div class="black">
<div id="nav">
<ul>
<li><a href=""title=""></a></li>
<li><a href="" title=""></a></li>
<li><a href="/index.html" title="Home">Home</a></li>
<li><a href="/account/register.php">Create Account</a></li>
<li><a href="/account/pwrecov/recovery.php">Password Recovery</a></li>
<li><a href="/vote.html">Vote</a></li>
<li><a href="/donate.html" class="current">Donate</a></li>
<li><a href="/connect.html">How To Connect</a></li>
</ul>
</div>
</div>
<div id="content">
<—-- LEFT MENU —-->
<div class="left">
<div class="bartitle"><p class="margin"><u>Welcome to your website</u></p></div>
<div class="barcontent">
<p class="margin">321</p>
<br/></div>
<div id="barfooter"></div>
<br/>
</div>
<—-- RIGHT MENU —-->
<div class="right">
<div class="newstitle"><p class="margin"><u>Welcome to your website</u></p></div>
<div class="newscontent">
<p class="margin">321</p>
<br/></div>
<div id="newsfooter"></div>
<br/>
</div>
</div>
</div>
<—-- FOOTER —-->
<div id="footer">Copyright © 2011</div>
</center>
</body>
</html>

осталось только выровнять, я не знаю как... вот

http://rghost.ru/24028901.view (на белое не обращай внимания, это случайно)

чтобы они на одном "горизонте" были

Edited October 3, 2011 by natalika

natalika · October 3, 2011

ау.

Softlink · October 3, 2011

ау.

где css для вашего примера последнего?

natalika · October 3, 2011

ау.
где css для вашего примера последнего?

@charset "utf-8";
*{
margin:0;
padding:0;
}
body {
font-family: tahoma;
font-size:11px;
color:#000000;
background-color:#000000;
padding:0px;
margin:0px;
background-image:url(../images/background.png);
background-position:top;
background-attachment:scroll;
background-repeat:no-repeat;
}
}
#wrapper {
width:680px;
height:100%;
margin:0 auto;
}
#header {
background:url(../images/header.png) no-repeat;
width:800px;
height:150px;
}
#navigation {
color:#003750;
text-align:center;
padding-top:7px;
background:url(../images/navigation.png) no-repeat;
width:800px;
height:65px;
}
#content {
background-image:url(../images/content_bg_rpt.jpg);
padding:25px;
width:750px;
height:100%;
background-color:#262626;
}
#footer {
margin:0px;
background:url(../images/footer.jpg) no-repeat;
width:800px;
height:27px;
color:#6b6b6b;
font-weight:light;
text-align:center;
padding-top:13px;
background-color:#000000;
}
.newstitle {
background:url(../images/user_h3.gif) no-repeat;
text-align:left;
width:500px;
height:24px;
padding-top:6px;
background-color:#005ea3;
color:#d15400;
font-size:11px;
font-weight:bold;
margin-left: 30px;
}
.bartitle {
background:url(../images/user_h3.gif) no-repeat;
text-align:left;
width:220px;
height:24px;
padding-top:6px;
background-color:#005ea3;
color:#d15400;
font-size:11px;
font-weight:bold;
}
.barcontent {
background-image:url(../images/news_bg_rpt.jpg);
text-align:left;
width:220px;
background-color:#353434;
color:#C7D0D5;
font-size:13px;
}
#barfooter {
background-image:url(../images/newsbar.png);
width:220px;
height:18px;
}
#newsfooter {
background-image:url(../images/newsbar.png);
width:500px;
height:18px;
margin-left: 30px;
}
.newscontent {
background-image:url(../images/news_bg_rpt.jpg);
text-align:left;
width:500px;
background-color:#353434;
color:#C7D0D5;
font-size:13px;
margin-left: 30px;
}
#newsfooter {
background-image:url(../images/newsbar.png);
width:500px;
height:18px;
margin-left: 30px;
}
#newstop {
background-image:url(../images/topbar.png);
width:460px;
height:18px;
}
.wrap { overflow: hidden; width: 850px; }
.wrap .left { float: left; width: 200px;}
.wrap .right { overflow: hidden;}
.black #nav{
position:relative;
display:block;
height:65px;
width:800px;
font-size:11px;
font-weight:bold;
background:transparent url(../images/navigation.png) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;
text-transform:uppercase;
}
.black #nav ul{
margin:0px;
padding:0;
list-style-type:none;
width:auto;
}
.black #nav ul li{
display:block;
float:left;
margin:0 0px 0 0;
}
.black #nav ul li a{
display:block;
float:left;
color:#ffffff;
text-decoration:none;
padding:27px 15px 0 22px;
height:65px;
}
.black #nav ul li a:hover,.black #nav ul li a.current{
color:#ffffff;
background:transparent url(../images/mouseover.png) no-repeat top center;
}
p.margin
{
margin-left:12px;
}

воть)

Softlink · October 3, 2011

воть)

.wrap { overflow: hidden; width: 850px; }
.wrap .left { float: left; width: 200px;}
.wrap .right { margin-left:210px;}

Еще вы неправильно пишЕте ( :blush: ) комментарии. Они у вас отображаются обычным текстом. Уберите их совсем или напишите правильно.

Edited October 3, 2011 by Softlink

natalika · October 3, 2011

воть)
.wrap { overflow: hidden; width: 850px; }
.wrap .left { float: left; width: 200px;}
.wrap .right { margin-left:210px;}
Еще вы неправильно пишите комментарии. Они у вас отображаются обычным текстом. Уберите их совсем или напишите правильно.

спасибо

А вот еще, как разместить эту менюшку по середине?

А то я сделала по дурацки, я просто добавила пустых li, там не правильно отображается.

Edited October 3, 2011 by natalika

Softlink · October 3, 2011

А вот еще, как разместить эту менюшку по середине?
А то я сделала по дурацки, я просто добавила пустых li, там не правильно отображается.

Да у вас там много чего по-дурацки сделано. Центрировать блок можно через margin: 0 auto;. Задаем ему ширину и margin - все работает.

natalika · October 3, 2011

А вот еще, как разместить эту менюшку по середине?
А то я сделала по дурацки, я просто добавила пустых li, там не правильно отображается.
Да у вас там много чего по-дурацки сделано.

Не все же профессионалы :blush:

Softlink · October 3, 2011

Не все же профессионалы

угу, и не все ими родились

Sign In

2 колоночный дизайн

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information