Advanced search  

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Pages: [1]   Go Down

Author Topic: Coppermine theme w/ sidebar: decreasing space before the gallery section starts  (Read 4733 times)

0 Members and 1 Guest are viewing this topic.

Manutjee

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 80

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!
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362

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

Manutjee

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 80

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
Logged
Pages: [1]   Go Up
 

Page created in 0.02 seconds with 19 queries.