Title: Sight: Positioning Woes
Last modified: August 20, 2016

---

# Sight: Positioning Woes

 *  [Hookturn](https://wordpress.org/support/users/hookturn/)
 * (@hookturn)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/sight-positioning-woes/)
 * Hello Everyone,
 * I’ve building a page at the moment, using the free theme Sight but doing a considerable
   overhall of the layout.
 * I’m having real trouble working out how to position the sidebar correctly, I 
   thought I had it all well and good when my preview window (I’m using espresso
   on mac to code, which allows you to use a local stylesheet to override the stylesheet
   on a live website) was showing everything to be where it was meant to be, until
   I resized it 🙁 Also, I can’t work out how to get the sidebar left border to 
   always be connected with the top navigation and the footer borders.
 * My other positioning problem in the little social share links that currently 
   reside in the heading of the post pages. Their positioning is linked to the heading
   in single.php, I tried to make a new div for them but having no experience in
   the php area I didn’t get very far with that.
 * Sorry if these questions are quite basic, this is my first time using wordpress.
 * My site is here: [http://www.hookturnmelbourne.com](http://www.hookturnmelbourne.com)

Viewing 8 replies - 1 through 8 (of 8 total)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 8 months ago](https://wordpress.org/support/topic/sight-positioning-woes/#post-3048146)
 * You shouldn’t modify Sight’s original files, as this prevents you from updating
   the theme without losing your modifications. Instead you should use a [Child Theme](http://codex.wordpress.org/Child_Themes#Example_of_a_basic_Child_Theme)
   or a [Custom CSS plugin](https://wordpress.org/support/topic/sight-positioning-woes/wordpress.org/extend/plugins/custom-css-manager-plugin/?output_format=md).
 * >  everything to be where it was meant to be, until I resized it
 * Can you elaborate on the issue? What’s wrong with the elements when you resize
   the browser?
 * > Also, I can’t work out how to get the sidebar left border to always be connected
   > with the top navigation and the footer borders.
 * In what instance isn’t the sidebar left border connected?
 * > My other positioning problem in the little social share links that currently
   > reside in the heading of the post pages. Their positioning is linked to the
   > heading in single.php, I tried to make a new div for them but having no experience
   > in the php area I didn’t get very far with that.
 * What is the issue?
 *  Thread Starter [Hookturn](https://wordpress.org/support/users/hookturn/)
 * (@hookturn)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/sight-positioning-woes/#post-3048149)
 * Hi Andrew, thanks for the suggestion that I use a child theme, I saved a backup
   of the original style.css so I should be able to transfer my changes into a new
   child theme.
 * Sorry I wasn’t clear before in my post, I’ll try and explain again:
 * 1. What I meant was that while all the sidebar was positioned correctly for the
   browser window size, when I made the browser wider, a gap appeared between the
   main content and the side bar, which was apparent as there was a gap between 
   the top and bottom borders of the “lastest entries” heading on the home page 
   and the left hand border of the sidebar (that gets bigger the wider the browser
   window is). Furthermore, if the browser is made narrower, the borders intersect.
 * This also occurs in chrome, and furthermore the sidebar is too high up and off
   to the left (it still looks correct in espresso’s browser when the window is 
   resized).
 * 2.
 * > In what instance isn’t the sidebar left border connected?
 *  If a post gets beyond a certain length (eg. this one: [http://hookturnmelbourne.com/ipsum/](http://hookturnmelbourne.com/ipsum/))
   the sidebar does not expand so that it always spans from the navigation bar to
   the footer (which I would like it to do). If the post is a shorter one however,(
   eg. [http://hookturnmelbourne.com/hello-world/](http://hookturnmelbourne.com/hello-world/))
   Then it is too big. I think the latter is partially a result of my hiding the
   pagenav and comment sections using the code ‘display: none;’ (comments are disabled)
   but not having have been able remove them entirely.
 * 3. The issue here is that the soical sharing links seem to be tied to the particular
   div they are in, via php. No matter where I move their code in the stylesheet,
   or what values I fit in for their absolute positioning, they stay in that little
   div. I tried creating a new div that would display directly underneath the main
   content of a post, however this didn’t work at all.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 8 months ago](https://wordpress.org/support/topic/sight-positioning-woes/#post-3048150)
 * 1. Can you apply `position: relative;` to `<div class="wrapper">` then use `right:
   0;` on the sidebar? This should resolve the additional space created when zoomed
   out.
 *  Thread Starter [Hookturn](https://wordpress.org/support/users/hookturn/)
 * (@hookturn)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/sight-positioning-woes/#post-3048154)
 * That fixed the additional space when zoomed, thank you! The sidebar isn’t in 
   exactly the correct postion now, but it is displaying consistently cross-browsers.
   Would I be able to safely change the `top:` and `right:` values to position it?
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 8 months ago](https://wordpress.org/support/topic/sight-positioning-woes/#post-3048156)
 * 2. Can you wrap your elements from `<div class="slideshow">` to `<div id="container"
   >` in a div `<div id="main">`,
    – Then apply position relative to `<div id="main"
   >` instead of the wrapper as before, – Then add `top: 0;` on your sidebar
 * E.g HTML structure;
 *     ```
       <div id="main">
               <div class="slideshow"><div id="slideshow" >
   
                       <div class="slide clear" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 2; opacity: 1; width: 680px; height: 270px; ">
                   <div class="post">
                       <a href="http://hookturnmelbourne.com/ipsum/"><img width="335" height="290" src="http://hookturnmelbourne.com/wp-content/uploads/2012/09/Invitation-335x290.jpg" class="attachment-slide wp-post-image" alt="Ipsum" title="Ipsum"></a>                <div class="post-category"><a href="http://hookturnmelbourne.com/category/uncategorized/" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a></div>
                       <h2><a href="http://hookturnmelbourne.com/ipsum/">Ipsum</a></h2>
   
                       <div class="post-meta">by <span class="post-author"><a href="http://hookturnmelbourne.com/author/eic/" title="Posts by EIC">EIC</a></span> on <span class="post-date">Sep 16, 2012</span> • <a href="http://hookturnmelbourne.com/ipsum/#respond" class="comments_popup_link" title="Comment on Ipsum">No Comments</a> </div>
                       <div class="post-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ne in odium veniam, si amicum destitero tueri. Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Id enim volumus, id contendimus, ut officii fructus sit ipsum officium. Quid de Pythagora? Cur ipse Pythagoras et Aegyptum lustravit et Persarum magos...</div>
                   </div>
               </div>
                       <div class="slide clear" style="position: absolute; top: 0px; left: 679px; display: block; z-index: 3; opacity: 1; width: 680px; height: 270px; ">
                   <div class="post">
                                       <div class="post-category"><a href="http://hookturnmelbourne.com/category/community/" title="View all posts in Community" rel="category tag">Community</a></div>
                       <h2><a href="http://hookturnmelbourne.com/hello-world/">Hello world!</a></h2>
   
                       <div class="post-meta">by <span class="post-author"><a href="http://hookturnmelbourne.com/author/eic/" title="Posts by EIC">EIC</a></span> on <span class="post-date">Sep 15, 2012</span> • <a href="http://hookturnmelbourne.com/hello-world/#respond" class="comments_popup_link" title="Comment on Hello world!">No Comments</a> </div>
                       <div class="post-content">Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</div>
                   </div>
               </div>
   
               </div>
   
                   <a href="javascript: void(0);" id="larr" style="display: block; "></a>
                   <a href="javascript: void(0);" id="rarr" style="display: block; "></a>
               </div>
   
                   <!-- Container -->
                   <div class="sidebar">
           <div id="search-2" class="widget_search widget"><div class="search">
           <form method="get" id="searchform" action="http://hookturnmelbourne.com">
               <fieldset>
                   <input name="s" type="text" onfocus="if(this.value=='Search') this.value='';" onblur="if(this.value=='') this.value='Search';" value="Search">
                   <button type="submit"></button>
               </fieldset>
           </form>
       </div></div></div><div id="container" class="clear">
                       <!-- Content -->
                       <div id="content">
   
       <div class="content-title">
           Latest entries
           <a href="javascript: void(0);" id="mode"></a>
       </div>
   
           <div id="loop" class="list clear">
   
               <div class="post-34 post type-post status-publish format-standard hentry category-uncategorized post clear" id="post_34">
   
                   <div class="post-category"><a href="http://hookturnmelbourne.com/category/uncategorized/" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a></div>
                   <h2><a href="http://hookturnmelbourne.com/lorem/">Lorem</a></h2>
   
                   <div class="post-meta">by <span class="post-author"><a href="http://hookturnmelbourne.com/author/eic/" title="Posts by EIC">EIC</a></span>
                                          on <span class="post-date">Sep 16, 2012</span> <em>• </em><span>Comments Closed</span>             </div>
                   <div class="post-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ne in odium veniam, si amicum destitero tueri. Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Id enim volumus, id contendimus, ut officii fructus sit ipsum officium. Quid de Pythagora? Cur ipse Pythagoras et Aegyptum lustravit et Persarum magos adiit? Duo Reges: constructio interrete....</div>
               </div>
   
           </div>
   
           <div class="pagination">
                                   </div>
   
                   </div>
                   <!-- /Content -->
   
                   </div>
       </div>
       ```
   
 * Which should result in this when zoomed out [http://awesomescreenshot.com/074g7iib1](http://awesomescreenshot.com/074g7iib1)
 *  Thread Starter [Hookturn](https://wordpress.org/support/users/hookturn/)
 * (@hookturn)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/sight-positioning-woes/#post-3048159)
 * I don’t think I can do that because the css sheet isn’t in an html structure 
   and this theme doesn’t have an html stylesheet. It’s one of the reasons I’m finding
   it more difficult, I’ve dealt with css that links to an external stylesheet before(
   I’ve put an example of my stylesheet below) but the external sheet has always
   been written predominately in HTML structure.
 * My code looks like this:
 * >  `body {font: 62.5% Georgia, Geneva, “Times New Roman”, times; background: #
   > 27292a url(“images/line.png”) 50% 0 no-repeat; padding: 24px 0;}
   >  .clear:after{
   > content: “.”; display: block; height: 0; clear: both; visibility: hidden;} .
   > left {float: left;} .right {float: right;}`
   >     ```
   >     .wrapper {width: 975px; background: #fff; margin: 0 auto; position: relative;
   >     }
   >     #container {padding: 10px 0 10px;}
   >     ```
   > 
   > `//**Then there is the header and nav code***//`
   >     ```
   >     #slideshow, .slideshow {height: 270px; width: 680px; overflow: hidden; position: relative; border-bottom: 1px solid #d9d9d9;
   >     }
   >     ```
   > 
   > `.slide {height: 270px; width: 680px; background: #ffffff;}`
   >  `.slide img {
   > display: block; float: left; width: 420px; height: 270px; position: relative;`
   > top: -20px; left: -30px;}` `.slide .post {padding: 20px 30px 0; height: 250px;```}``.
   > slide .post-category {font-size: 11px; color: #d9d9d9; text-transform: uppercase;
   > margin-bottom: 5px;}` `.slide .post a {color: #000;}` `.slide .post .post-category
   > a {text-decoration: none;}` etc. etc.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 8 months ago](https://wordpress.org/support/topic/sight-positioning-woes/#post-3048160)
 * In the dashboard, on the home page’s Page Attributes, can you find out which 
   template is assigned to that page?
    That’s the file you ought to edit for the
   HTML, but again, any changes to original theme files will erase once the theme
   updates.
 *  Thread Starter [Hookturn](https://wordpress.org/support/users/hookturn/)
 * (@hookturn)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/sight-positioning-woes/#post-3048165)
 * Sorry, but where on the dashboard should I be looking to see the homepage’s page
   attributes?
 * Would it be possible to make whatever changes I make part of he child theme afterwards?

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Sight: Positioning Woes’ is closed to new replies.

## Tags

 * [positioning](https://wordpress.org/support/topic-tag/positioning/)

 * 8 replies
 * 2 participants
 * Last reply from: [Hookturn](https://wordpress.org/support/users/hookturn/)
 * Last activity: [13 years, 8 months ago](https://wordpress.org/support/topic/sight-positioning-woes/#post-3048165)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics