Hello,
First of all I like to apologize for the title 'cause I had no idea how best to put this.
I have
two (minor) coding issues that I cannot seem to solve. I have this space after the main/top navigation that I want to decrease A LOT.
How can I do that?
Here's my current coding [containers only]:
HTML [template.html file]:<!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" xml:lang="en" lang="en" dir="{LANG_DIR}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta http-equiv="Pragma" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{TITLE}</title>
<link rel="stylesheet" href="css/coppermine.css" type="text/css" />
<link rel="stylesheet" href="themes/cpgpremade14kgraham/css/style.css" type="text/css" />
<link rel="stylesheet" href="themes/cpgpremade14kgraham/css/responsive.css" type="text/css" />
<link rel="stylesheet" href="themes/cpgpremade14kgraham/fontawesome/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700italic,700,900,900italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,800italic,800,700italic,300,300italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<div id="navigation">
<span class="title">KATERINA GRAHAM WORLD</span>
<a href="#"><i class="fa fa-home"></i> Homepage</a>
<a href="#"><i class="fa fa-info-circle"></i> Information</a>
<a href="#"><i class="fa fa-camera"></i> Photo Archive</a>
<a href="#"><i class="fa fa-desktop"></i> Website</a>
<a href="#"><i class="fa fa-align-left"></i> Online</a>
</div>
<div class="sidebcontainer">
<div class="sideimg"><img src="themes/cpgpremade14kgraham/images/sidebarheader.png"></div>
<div class="syssub">{SYS_MENU} {SUB_MENU}</div>
</div>
<div id="ad" style="text-align:center;padding-top:40px;padding-bottom:30px;">AD CAN BE PLACED HERE (728x90px)</div>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="templatetable">
<tr>
<td align="center" valign="top">
{ADMIN_MENU}<br>
{MESSAGE_BLOCK}<br>
{GALLERY}
</td>
</tr>
</table>
<div class="yourfeet">
Footer information goes here · Hosted by YourHost · <a href="http://sellfy.com/silverfox"target=_blank">Credit</a>
<center><i>Copyright information goes here</i></center>
<div align="right"><a href="javascript: history.go(-1)">Back</a> - <a href="javascript:location.reload(true)">Refresh</a> - <a href="javascript:scroll(0,0)">Top</a></div>
</div>
</div>
</body>
</html>
CSS:#container {
max-width: 1100px;
background-color:#fff;
color:#252525;
margin:0 auto;
text-align:left;
border: 7px solid #e8e8e8;
}
.templatetable {
background-color:#fff;
margin:0 auto;
}
.sidebcontainer {
position:relative;
left: -375px;
top:45px;
width:360px;
border:none;
display:inline-block;
}
Live preview: http://www.98designs.flaunt.nu/portfolio/index.php?theme=cpgpremade14kgrahamI have tried:Adding/decreasing the padding
Adding a max height to .container
Adding/decreasing the margins
Adding a class filled with space*
* <div class="space"></div>
CSS:
.space {
height:-20px
}
But my browser completely ignores this by saying it's an invalid property.
Thanks in advance!