forum.coppermine-gallery.net
Support => cpg1.5.x Support => cpg1.5 themes (visuals) => Topic started by: Manutjee on May 08, 2016, 08:42:20 pm
-
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=cpgpremade14kgraham
I 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!
-
That's not a space. Is <div class="sidebcontainer">
You have width: 360px;left: -375px; and that made the div go left outside the browser window.
Just because the div went outside the browser window does not mean that the div will not take the space anymore.
.sidebcontainer {
position: relative;
left: -375px;
top: 45px;
width: 360px;
border: none;
display: inline-block;
}
Why would you do that?
Where you want sidebcontainer to be?
-
That's not a space. Is <div class="sidebcontainer">
You have width: 360px;left: -375px; and that made the div go left outside the browser window.
Just because the div went outside the browser window does not mean that the div will not take the space anymore.
.sidebcontainer {
position: relative;
left: -375px;
top: 45px;
width: 360px;
border: none;
display: inline-block;
}
Why would you do that?
Where you want sidebcontainer to be?
Solved it.
I had to place the sidebarcontainer outside of the container div and go from there.
I had a space class involved to get rid of the huge space I had before that was caused by the ad div.
Current coding+CSS: [So you know how the results are now]
CSS:
.sideimg {
width:100%;
}
.sideimg img {
max-width:100%;
}
.title {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 13px;
padding: 10px;
text-transform: uppercase;
letter-spacing: 2px;
color: #00e9d9;
margin-right: 5%;
margin-left: -25px;
}
#container {
width: 65%;
_max-width: 1100px;
background-color: #fff;
color: #252525;
margin: 45px 5%;
position:relative;
text-align: left;
float: left;
}
.templatetable {
background-color:#fff;
margin:0 auto;
}
.sidebcontainer {
position: relative;
float: left;
margin-top: 45px;
width: 20%;
border: none;
padding-left: 5%;
display: inline-block;
}[code]
[b]Template.html file:[/b]
[code]<!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 class="sidebcontainer">
<div class="sideimg"><img src="themes/cpgpremade14kgraham/images/sidebarheader.png"></div>
<div class="syssub">{SYS_MENU} {SUB_MENU}</div>
</div>
<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 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>[code]
[b]Live preview:[/b] www.98designs.flaunt.nu/portfolio/index.php?theme=cpgpremade14kgraham