Разтягане на сайта, и затваряне на кутийте.

pisio · 15 Февруари 2009

Здравейте,
трябва ми малко помощ, от страна на CSS.Там съм още по-сле от колкото в PHP-то.
http://mybgblog.com/car/
Как мога да разтегна хедера и да заторя кутийките с линковете, като снимкта е :
http://mybgblog.com/car/wp-content/themes/luxcar/images/menu-bottom.gif

Мъчих се с CSS да го централизирам , не успях, затова го бутнах м/у <center> и </center>
Oбаче при него се получи доста не приятен ефект, всичко се централизира , включително и линковете в кутийките.

Мерси предварително за помоща.

pisio · 15 Февруари 2009

Някой ще може л ида помогне.

shterev · 15 Февруари 2009

Какво имаш предвит ппод 'Разтягане на хедъра? '

За кутийките си направи там едни дали дивове , дали имг тагове и им задай тази картинака.

Ins1de · 15 Февруари 2009

HTML

Код:

<!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 profile="http://gmpg.org/xfn/11">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>ET Илийко</title>
		<meta name="generator" content="WordPress 2.7.1" /> 
		<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
		<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://mybgblog.com/car/?feed=rss2" />
		<link rel="alternate" type="text/xml" title="RSS .92" href="http://mybgblog.com/car/?feed=rss" />
		<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://mybgblog.com/car/?feed=atom" />
		<link rel="pingback" href="http://mybgblog.com/car/xmlrpc.php" />
		<link rel='archives' title='February 2009' href='http://mybgblog.com/car/?m=200902' />
		<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://mybgblog.com/car/xmlrpc.php?rsd" />
		<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://mybgblog.com/car/wp-includes/wlwmanifest.xml" /> 
		<meta name="generator" content="WordPress 2.7.1" />
	</head>
<body>
	<div id="wrap">
		  <div id="content-container">
			<div id="header">
			<h1><a href="http://mybgblog.com/car/">ET Илийко</a></h1>
				<div id="subtitle">Автошкола гр.Луковит</div>
				<div id="rss">
					<a href="http://mybgblog.com/car/?feed=rss2">
						<img src="http://mybgblog.com/car/wp-content/themes/luxcar/images/rss.gif" alt="RSS" />
					</a>
				</div>		
				<div id="menu_search_box">
					<form method="get" id="searchform" style="display:inline;" action="http://mybgblog.com/car/">
						<div class="alignleft">Search:</div>
						<div class="alignright"><input type="text" class="s" value="" name="s" id="s" /> </div>			
					</form>
				</div>
			</div>
			<div id="navlist-container">
						<div id="navlist">
						<ul>
								<li class="page_item current_page_item"><a href="http://mybgblog.com/car">Home</a></li>
						<li class="page_item page-item-2"><a href="http://mybgblog.com/car/?page_id=2" title="About">About</a></li>
					</ul>
				</div>		
			</div>
				<div  id="content">
					<div id="sidebar">
						<ul>
						<li>
							<h2>Archives</h2>
							<ul>
								<li><a href='http://mybgblog.com/car/?m=200902' title='February 2009'>February 2009</a></li>
							</ul>
						</li>
						<li><div class="box_bot"> </div></li>
						<li>
							<h2>Categories</h2>
							<ul>
								<li class="cat-item cat-item-1"><a href="http://mybgblog.com/car/?cat=1" title="View all posts filed under Uncategorized">Uncategorized</a> (1)</li>
							</ul>
						</li>
						<li><div class="box_bot"> </div></li>
					<li id="linkcat-2" class="linkcat"><h2>Blogroll</h2>
						<ul>
							<li><a href="http://wordpress.org/development/">Development Blog</a></li>
							<li><a href="http://codex.wordpress.org/">Documentation</a></li>
							<li><a href="http://wordpress.org/extend/plugins/">Plugins</a></li>
							<li><a href="http://wordpress.org/extend/ideas/">Suggest Ideas</a></li>
							<li><a href="http://wordpress.org/support/">Support Forum</a></li>
							<li><a href="http://wordpress.org/extend/themes/">Themes</a></li>
							<li><a href="http://planet.wordpress.org/">WordPress Planet</a></li>
						</ul>
					</li>
					<li><div class="box_bot"> </div></li>
							<li><h2>Meta</h2>
								<ul>
								<li><a href="http://mybgblog.com/car/wp-login.php?action=register">Register</a></li>			<li><a href="http://mybgblog.com/car/wp-login.php">Log in</a></li>
								<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
								<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
								<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
											</ul>
							</li>
							<li><div class="box_bot"> </div></li>
						</ul>
					</div>     
				<div class="post-container">
					<div class="post" id="post-1">
						<div class="posttop">
						<h2>
							<a href="http://mybgblog.com/car/?p=1" rel="bookmark" title="Permanent Link to Hello world!">Hello world!</a>
						</h2>
						<div class="postinfo">
							<div class="postinfodate">15-02-2009</div>
						</div>
					 
						</div>
						<div class="entry">
							<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
						</div>
					  <div class="postbottom">
						<div class="metainf">Filled Under:
							<a href="http://mybgblog.com/car/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a>
						</div>
						<div class="commentinf">
						  <a href="http://mybgblog.com/car/?p=1#comments" title="Comment on Hello world!">1 Comment</a>
						</div>
					  </div>
					</div>
				</div>
				
			   </div>
			<div id="footer">	
				<div class="footerlinks"> 
					Designed by: <a href="http://www.themesjunction.com" title="Wordpress Themes">Wordpress Themes</a> :: 
					In Collaboration with <a href="http://www.cheap-car-insurance-tips.com" title="Car Insurance">Car Insurance</a>, <a href="http://www.carthemes.net">Car Themes</a>, <a href="http://www.carsforums.com" >Car Forums</a>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

CSS

Код:

/*
Theme Name: Lux Car
Theme URI: http://www.themesjunction.com
Description: A very beautiful poker theme.
Author: Themes Junction
Author URI: http://www.themesjunction.com
*/

body {
	font: 12px arial,verdana,sans-serif;
	padding:0px;
	background:#000000 ;
        height:100%;
        width:100%;
    display: block;
    margin-left: auto px;
    margin-right: auto px;


}

#wrap {
	width: 1000px;
	clear: both;     
	padding:0;	
	margin:0 auto;
	
}
#content-container {
	float: left;
	
	padding:0px;	
	margin-top:0px;
	margin:0px;
}
#content {
margin:0 0 0 20px;
}

#header {
	height:257px;
	
	padding:0px;
	margin:0px auto;
	background:url(images/top.jpg) no-repeat top center;
	float:none;
}
#header h1 
{
font:30px arial;
color:#FFFFFF;

padding-left:460px;
padding-top:60px;
font-weight:bold;
height:40px;
}
#header h1, h1 a, h1 a:visited {
text-decoration: none;
margin:0;
color:#D8540D;
}
#header h1 a:hover {
text-decoration: none;
color:#B31509;
}
#subtitle {
	padding-left:460px;
	color: #B5B5B5;
	font:14px verdana;
	text-align:left;
	font-weight:bold;
}

#navlist-container{
	padding:0px 0px 0 15px;
	position:relative;
	margin-top:-45px;
	height:43px;
	float:left;	
	background:url(images/navlist.gif) repeat-x right top;
	width:985px;
	}
#navlist{
	position:relative;
	display:block;
	height:35px;
	font-size:12px;
	font-weight:normal;
	font-weight:bold;
	padding:0;
	font-family:Verdana,arial;
	
	}
#navlist ul{
	margin:0px;
	padding:0px 0px 0 20px;
	list-style-type:none;
	width:auto;
	float:left;
	}
#navlist ul li{
	display:block;
	float:left;
	margin:0 ;
	width:139px;
	}
#navlist ul li a{
	display:block;
	float:left;
	color:#FFE19A;
	padding:5px 0px 0 0px;
	width: 139px; 
	height: 35px;
	background:url(images/menu.gif) no-repeat right top;
	text-align: center;
	text-decoration:none;
	}
#navlist ul li a:hover,#navlist ul li.current_page_item a{
	color:#ffffff;
	background:url(images/menu.gif) no-repeat top left;
	width: 139px; height: 35px;
	text-align: center;
	}
#navlist ul li .current_page_item a,#navlist ul li .current_page_item a:hover{
	color:#ffffff;
	width: 139px; height: 35px;
	background:url(images/menu.gif) no-repeat top left;
	}

	
#footer {	
	font: 12px arial,verdana,sans-serif;
	text-align:center;
	height:90px;
	float:left;
	position:relative;
	width:1004px;
	margin:0px;
	background:url(images/footer.gif) repeat-x bottom center;
}
.footerlinks 
{
	color:#F3BB4B;
	text-align:center;
	margin-top:40px;
	float:left;
	width:1004px;

}
.footerlinks  a
{
	color:#E39E13;
	text-decoration:underline;

}

/* General Header Styles */
h2 {
	margin-top:0;
	font-size:16px;	
}
h3 {
	margin:0;
	font-size:14px;	
}


/* Post Related */
h2 a:hover, h2 a:visited, h2 a {
	text-decoration:none;
}
.post-container
{
	float:left; 
	width:534px; 	
	margin-top:20px;
	padding-left:25px;
	color:#7F7F7F;	
}
.post {
	width:534px;
	padding-top:0;
	color:#7F7F7F;
	float:none;
	display:block;
	margin-bottom:30px;	
	clear:both;	
	background:url(images/post-bg.gif) repeat-y left ;
}
.posttop {
	width:534px;
	height:100px;
	color:#BE7A25;
	padding-top:10px;
	background:url(images/post-top.gif) no-repeat;
}

.post a:hover {
	color:#B31509;
}

.posttop h2 {
	font: 16px arial;
	text-align:left;
	overflow:visible;
	margin-bottom:0;
	padding:5px 0 0 10px;
	float:left;
	color:#C81C0E;
	font-weight:bold;	
}
.posttop h2 a {
	color:#F4F4F4;
	font-weight:bold;	
}

.postinfo
{
height:45px;
float:left;
color:#aaaaaa;
clear:both;
width:500px;
margin-top:0px;
font:11px verdana;
}

.postinfodate{
float:left;
margin-top:0px;
text-align:right;
height:20px;
padding-top:8px;
padding-left:17px;
margin-left:5px;
background:url(images/date.gif) no-repeat left;
}
.postinfo a
{
text-decoration:none;
color:#D73A0D;
text-align:left;
}
.postinfo a:hover
{
text-decoration:underline;
color:#F56E02;
}
.postbottom
{
	font-size:10px;
	color:#aaaaaa;
	text-align:left;
	width:534px;
	padding:0;	
	height:37px;
	float:none;
	display:block;
	position:relative;
	background:url(images/post-bottom.gif) no-repeat bottom left;
}
.postbottom a
{
text-decoration:none;
color:#D73A0D;	
}
.postbottom a:hover
{
text-decoration:underline;
color:#F56E02;	
}
.commentinf
{
	float:right;
	margin-right:20px;
	margin-top:0px;
	text-align:left;
	padding-left:20px;
	height:20px;	
	padding-top:8px;
	background:url(images/comment.gif) no-repeat left;
}
.metainf{
	float:left;
	padding-left:20px;
	margin-top:0px;
	text-align:center;
	height:20px;	
	padding-top:8px;
	margin-left:10px;
	background:url(images/filled.gif) no-repeat left;
}
.post p {
	margin:0px;
}
.navigation a {
	color:#aaaaaa;
	text-decoration:none;
}
.navigation a:hover 
{
	color:#B50F11;
}

.navigation {
	text-align:left;
	width:520px;
	float:left;
	font-size:12px;
}
img.centered {
	display: block;
}
img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
}
img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
}
.alignright {
	float: right;
}
.alignleft {
	float: left
}
.navigation .alignright {
	margin-bottom:10px;
}
.navigation .alignleft {
	margin-bottom:10px;
}	

.pagetitle{
	font: bold 28px arial;
	margin-top:0;	
	margin-bottom:5px;
	text-align:left;
	color:#B31509;
	margin-right:15px;
	overflow:visible
}
blockquote {
	font-style:italic;
	margin:5px;
	border-left:4px solid #2F495A;
}
a img {
	border:0;
}
.entry {
	font: 12px arial,verdana,sans-serif;
	padding-bottom:10px;
	margin-top:-30px;
	text-align:justify;
	clear:both;
	width:500px;
	padding-left:20px;
	
}
.entrytext .postmetadata {
	font: 12px arial,verdana,sans-serif;
}
.more-link {
	font: 10px arial,verdana,sans-serif;
}

/* Sidebar Related */
#sidebar {
	width:208px;
	margin-left:0px;
	margin-top:20px;
	float:left;
	background:url(images/menu-bg.gif) repeat-y left;
	
}

#sidebar ul {
	margin: 0 ;
	padding: 0;	
	width:208px;
	
	
}
#sidebar ul h2{
	font:14px arial;
	color:#E19712;
	text-align:center;
	font-weight:bold;
	padding:10px 0px;
	margin:0;
	height:25px;
	background:  url(images/menu-top.gif) no-repeat left top;
}

#sidebar ul li {
	list-style-type: none;
	list-style-image: none;
	margin:0;
	
	padding:0;
}
#sidebar ul li ul {
	margin:0;
	padding:0;
	margin-left:10px;
}


#sidebar ul ul li {
	list-style-type: none;
	margin-left:0px;
	list-style-image: none;
	color:#B90717;
	padding:2px 0px 2px 5px;
	margin-left:15px;
	margin-top:0px;
	height:15px;
	font:12px arial;
	width:188px;
	background:url(images/arrow.gif) no-repeat left;
}
#sidebar ul ul ul li {
	list-style-type: disc;
	padding:0;
	margin-left:5px;	
	color:#B90717;	
	
}
#sidebar p {
	margin:0;
	font: 10px arial,verdana,sans-serif;
}
#sidebar ul li a {
	color:#B7B7B7;
	text-decoration:none;	
	width:180px;
	padding-left:5px;
	
}
#sidebar ul li a:hover {
	color:#D3D3D3;
}

#sidebar ul li table a {
background:none;
padding:0px;
}
#sidebar ul li table a:hover {
background:none;
padding:0px;
}
.bottom_sidebar {
	background: url(images/menu-bottom.gif) no-repeat bottom left;
	margin: 0px;
	padding: 0px;
	clear:both;
	height: 24px;
	width: 208px;
	display:block;
	position:relative;
	}
/* User Comment Specific */
#comment
{
border:1px solid #4C5866;
color:#cccccc;
background:#082535;
height:140px;
width:400px;
}
#respond
{
	padding-left:10px;
}
#commentform
{
	padding:10px;

}
#commentform input
{
color:#cccccc;
background-color:#082535;
border:1px solid #4C5866;
}

ol.commentlist {
	margin-left:25px;
	padding:0;
}

ol.commentlist a {
	color:#6689A0;	
}
ol.commentlist p {
	margin-top:3px;
	margin-bottom:10px;
}
small.commentmetadata {
	font: 10px arial,verdana,sans-serif;
}
small.commentmetadata a {
	text-decoration:none;
}
#submit {
	height: 25px;
	background-color: #D6E5BD;
	margin: 10px 10px 0 0;
	color:#ffffff;
	font-size: 1.2em;

}

/************************/
/*     Search Design    */
/************************/
#searchform{
display:none;
height:50px;
}
#s
{
	width:150px;
	font:12px tahoma;
	color:#cccccc;
}
#menu_search_box{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#C0CBDE;
	font-size:11px;
	padding:0px 20px 0 0px;
	font-variant:small-caps;
	height:30px;
	float:right;
	width:215px;
	position:absolute;
	top:13px;
	left:710px;
}

#menu_search_box input.s{
	width:153px;
	font-size:11px;
	color:#848D9F;
	margin-left:3px;
	border:0px;
	padding-top:0px;
	background:none;
	
}

#menu_search_box span{
	position:relative;
	top:-1px;
	font-weight:bold;
}
/*-------------Other------------------*/
hr {
	display: none;
}
a 
{
	color:#B51212;
	background:none;
}
#wp-calendar
{
width:180px;
color:#d4d4d4;	
margin-left:10px;
text-align:center;
}
#wp-calendar  a
{

}
td
{
color:#818181;
}

#rss{
width:150px;
float:left;
padding-left:490px;
position:absolute;
padding-top:45px;
}
#sideads{
float:left; margin-left:25px; width:170px; overflow:hidden; margin-top:20px;
}

.box_bot{width: 208px; height: 37px; background: url('images/menu-bottom.gif');}

Кода е валиден.

pisio · 20 Февруари 2009

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

Разтягане на сайта, и затваряне на кутийте.

pisio

Registered

pisio

Registered

shterev

Registered

Ins1de

Registered

pisio

Registered