Coppermine theme w/ sidebar: decreasing space before the gallery section starts Coppermine theme w/ sidebar: decreasing space before the gallery section starts
 

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Main Menu

Coppermine theme w/ sidebar: decreasing space before the gallery section starts

Started by Manutjee, May 08, 2016, 08:42:20 PM

Previous topic - Next topic

0 Members and 4 Guests are viewing this topic.

Print
Go Down Pages1
User actions

Manutjee

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]:
Code Select

<!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 &middot; Hosted by YourHost &middot; <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:
Code Select
#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!

allvip

#1
May 09, 2016, 07:02:22 PM
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.

Code Select

.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?

Manutjee

#2
May 10, 2016, 08:53:35 PM
Quote from: allvip on May 09, 2016, 07:02:22 PM
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.

Code Select

.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:
Code Select
.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 &middot; Hosted by YourHost &middot; <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
Print
Go Up Pages1
User actions