[RESOLVED] Trouble with lining thins up

@MaxxxxSep 11.2015

I’m having problems trying to set up two photo galleries on one page. There should be one above an image that says welcome to the home. and another gallery below it. right now it is shifted over to the left and it is all green. But off line I see the images but still to the left. Can someone help me please. Thanks in advance.

~~[url]~~http://www.charismacommunications.ca/curling/index.html[/url]

to post a comment

CSS

14 Comments(s) _↴

@Kevin2Sep 11.2015 — #It's all in here:

http://www.charismacommunications.ca/curling/css/style.css

#Slideshow-1 {
 position:absolute;
 top:294px; left:278px;
 width:638px;
 height:188px;
 margin-left: 0px;
 margin-top: 0px;
 background-color:lime;
 }
 #Slideshow-2 {
 position:absolute;
 top:1126px; left:278px;
 width:638px;
 height:188px;
 margin-left: 0px;
 margin-top: 0px;
 background-color:lime;
 }

The missing images:

Your code:
<img id="pic-1" src="[b][COLOR="#FF0000"][SIZE=5]I[/SIZE][/COLOR][/b]mages/slide-1-1.jpg" alt="1">
Where they are actually located:

http://www.charismacommunications.ca/curling/[b][COLOR="#FF0000"][SIZE=5]i[/SIZE][/COLOR][/b]mages/

Case counts.

@MaxxxxauthorSep 11.2015 — #I see that mistake now but it still isn't right. I added an image to give an idea of what it should look like.

http://www.charismacommunications.ca/curling/index.html

[ATTACH]16811[/ATTACH]

[canned-message]attachments-removed-during-migration[/canned-message]

@Kevin2Sep 11.2015 — #Why are you expecting those images/slideshows to appear where you want them to appear when they are styled and positioned as per the code I posted above? Change the CSS and you can change the positioning.

http://www.w3schools.com/cssref/pr_class_position.asp

@MaxxxxauthorSep 11.2015 — #Off line. I can see the images have moved over after I played with the CSS. but still looks screwed up.

@Kevin2Sep 11.2015 — #[B]position: absolute;[/B] removes an element from the document flow and places it on top of all other elements. Apparently that's not what you want. So your next move is ... ??

@MaxxxxauthorSep 11.2015 — #I'm thinking remove Position: absolute. I think I have to think this over for a bit. A bit over whelming.

@Kevin2Sep 11.2015 — #I'm thinking remove Position: absolute.[/QUOTE]
Maxxxx get a gold star! ?

A bit over whelming.[/QUOTE]
To be fair, absolute vs. relative positioning is very confusing. Very basically all elements are positioned "relative" by default. In other words they render onscreen in the order you place them in your HTML. You should only have to declare [B]position: relative;[/B] in CSS to counteract a previous positioning which is [I]not[/I] relative (absolute/fixed/etc.). That could be a parent element's positioning or within a media query.

Clear as mud, no?

@MaxxxxauthorSep 11.2015 — #It seems that my gallerias are floating on top. Am I wrong? and there not nesting in the page?

@MaxxxxauthorSep 13.2015 — #Can anyone else shed light on this?

@Kevin2Sep 16.2015 — #Can anyone else shed light on this?[/QUOTE]

I've intentionally left you dangling for a few days. Why? First I wanted to see if the above question would be answered. It didn't. Why do you think that is? Could it be because the advice I gave you was correct?

Anyway, I've rebuilt the page in question and the corresponding CSS. It looks dang close to the example picture you posted above. A LOT has been changed. This is also intentional. It's to keep you from just copy/pasting the code into your page without learning what it does.

A bunch of your code just doesn't make sense. Seriously, [b]<div class="right-container">[/b] is supposed to appear on the [I]left[/I] side of the page?? In what universe is that close to semantic? That kind of stuff has been corrected. In addition you have an insane number of [b]float:left;[/b] styles. In my opinion [b]float:[i]anything[/i];[/b] should be avoided as much as possible, especially for major layout elements. Another cheat you have is using [b]overflow:hidden;[/b] to deal with too much content width and/or height to fit the container. That cut about 30px off the bottom of the lower slideshow, even when it appeared where you wanted it. Oops.

Now, if you are willing to learn I'll explain what this code does. If, on the other hand, you just wanted someone to write your code for you I'm done. If you post, "I'm confused" or, "It doesn't work" I'm out of here. Ask a question that indicates you made an attempt to understand and I'm more than willing to help.

A note before the code examples: you need to change [B][COLOR="#FF0000"][I][SIZE=4]I[/SIZE][/I][/COLOR]mages[/B] to [B][COLOR="#FF0000"][I][SIZE=4]i[/SIZE][/I][/COLOR]mages[/B] in both of your javascripts. Same deal as I posted above.

[code=html]<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <meta name="description" content="Canadian Stick Curling">
 
 <title>Canadian Stick Curling - Manitoba</title>
 
 <link href="css/style.css" rel="stylesheet">
 
 </head>
 <body>
 
 <header>
 <img src="images/banner.jpg" alt="Canadian Stick Curling logo">
 </header>
 
 <ul id="nav">
 <li><a href="index.html">Home</a></li>
 <li><a href="events.html">Events</a></li> 

 <li><a>Provinces</a>
 <ul>
 <li><a href="alberta.html">Alberta</a></li>
 <li><a href="bc.html">British Columbia</a></li>
 <li><a href="manitoba.html">Manitoba</a></li>
 <li><a href="newbrunswick.html">New Brunswick</a></li>
 <li><a href="newfoundland.html">Newfoundland and Labrador</a></li>
 <li><a href="novascotia.html">Nova Scotia</a></li>
 <li><a href="ontario.html">Ontario</a></li>
 <li><a href="pei.html">Prince Edward island</a></li>
 <li><a href="quebec.html">Quebec</a></li>
 <li><a href="saskatchewan.html">Saskatchewan</a></li>
 <li><a href="ynt.html">Yukon and Northwest Territories</a></li>
 </ul></li>
 <li><a href="rules.html">Rules</a></li>
 <li><a href="gallery.html">Gallery</a></li>
 <li><a href="links.html">Links</a></li>
 <li><a href="contact.html">Contact Us</a></li> 
 </ul>
 
 <main>
 
 <div id="left">
 <div id="sub-nav">
 <h3>Home</h3>
 
 <ul>
 <li>Home</li>
 <li><a href="about.html">About Us</a></li> 
 <!--
 <li><ul>
 <li><a href="2015manitobaopenchampionships.html">2015 Manitoba Open</a></li>
 <li><a href="warrenopen.html">Warren Open Stick Bonspiel</a></li>
 <li><a href="mordensenioropen.html">Morden Senior Open</a></li>
 <li><a href="carman.html">Carman 2 Person Stick Bonspiel</a></li>
 </ul></li>
 -->
 </ul>
 </div>
 <div id="news">
 <h3>News</h3>
 <p>Share your next Stick Curling event on the Manitoba Stick Curling page!</p>
 <p>Email <a href="mailto:[email protected]">[email protected]</a> with the details of your event and/or poster.</p> 

 </div>
 </div>
 
 <div id="right">
 
 <img id="pic-1" src="images/slide-1-1.jpg" alt="1">
 
 <img src="images/CSCA_HOME_Main_Panel_v001.jpg" alt="Canadian Stick Curling Association logo">
 
 <img id="pic-2" src="images/slide-2-1.jpg" alt="4">
 
 </div>
 
 </main>
 
 <footer>&copy; Copyright 2014. Canadian Stick Curling</footer><!--Copyright Notice - DO NOT Remove-->
 
 <script src="scripts/Conquer-Slideshow-1.js"></script>
 <script src="scripts/Conquer-Slideshow-2.js"></script>
 
 </body>
 </html>[/code]

CSS:

html {
 margin: 0;
 padding: 0;
 background: #b31217;
 font-family: Arial,Helvetica,sans-serif;
 font-size: 12px;
 color: #2f1a1a;
 }
 
 body {
 width: 100%;
 max-width: 926px;
 margin: 10px auto;
 color: #000;
 }
 
 header img {
 max-width: 100%;
 margin-bottom: -15px;
 }
 
 /* navigation starts here */
 #nav {
 padding: 10px 15px 10px;
 margin-bottom: 7px; 
 list-style-type: none;
 background-color: #fff;
 }
 
 #nav:after {
 content: '';
 display: block;
 clear: both;
 }
 
 #nav li {
 position: relative;
 float: left;
 padding: 0 18px 2px; 
 }
 
 #nav li:last-of-type a {
 border: 0;
 }
 
 #nav a {
 display: block;
 line-height: 18px;
 padding: 0 40px 0 4px;
 border-right: 1px solid #b31217;
 font-size: 14px;
 color: #000; 
 text-decoration: none;
 }
 
 #nav a:hover {
 color: #b31217;
 }
 
 #nav ul {
 display: none;
 position: absolute;
 top: 20px;
 height: auto;
 padding: 0 0 10px;  <br/>
 margin: 0; 
 list-style-type: none;
 white-space: nowrap;
 background-color: #fff;
 box-shadow: 3px 3px 3px #ccc; 
 }
 
 #nav ul li {
 float: none;
 }
 
 #nav ul a {
 line-height: 20px;
 border: 0;
 }
 
 #nav li:hover ul {
 display: block;
 }
 /* navigation ends here */
 
 main {
 width: 100%;
 background-color: #fff;
 padding: 10px 0 10px 0;
 }
 
 #left {
 width: 275px;
 display: inline-block;
 vertical-align: top;
 }
 
 #left h3 {
 background: url(../images/divider-4.jpg) bottom no-repeat;
 display: block;
 margin: 0 0 10px 0;
 padding: 0 0 8px 10px;
 font-size: 18px;
 color: #2f1a1a;
 font-weight: normal;
 color: #b31217;
 }
 
 #sub-nav {
 background: url(../images/right-grey.jpg) bottom no-repeat;
 padding-bottom: 2em;
 }
 
 #sub-nav ul {
 margin-left: 10px;
 padding: 0;
 list-style-type: none;
 line-height: 2.5em;
 }
 
 #sub-nav ul li {
 background: url(../images/bullet-2.jpg) no-repeat;
 color: #866008;
 padding: 0 0 5px 15px;
 margin: 0 0 6px 10px;
 background-position: 0 9px;
 font-weight: bold;
 }
 
 #sub-nav ul li a {
 color: #2f1a1a;
 text-decoration: none;
 }
 
 #sub-nav ul li a:hover {
 text-decoration: underline;
 }
 
 #news {
 padding-top: 10px; 
 }
 
 #news p {
 margin: 2em 0 0 10px;
 }
 
 #right {
 display: inline-block;
 vertical-align: top;
 }
 
 #right img {
 display: block;
 max-width: 100%;
 margin: auto;
 }
 
 footer {
 width: 100%;
 padding: 10px 0 10px 0;
 color: #fff;
 text-align: right;
 }

@MaxxxxauthorSep 16.2015 — #I have made a lot of changes. For example regarding I have made the changes. Someone told me to add CSS and HTML all on one page. Regretting doing that, I gave it a try. I all ways thought that CSS belongs in a CSS file. So I do get confused some times when people say to me. Drop your CSS page and just at it to your HTML page. I have been reading the last couple days about columns and setting css where it should be. I am in the middle of playing with my existing code and seeing where it leads me. I all so want to study your code now. So I will keep you inform where I go. I really appreciate you getting back to me and explaining things in layman's terms. I have had a view people in the past day, talking way above me. And I get frustrated with that and with myself not learning stuff. So thanks again.

I just seen another flaw on every page, that need to be fixed. So I will be very busy. For my gallery rotation. I will take a break from that part and dissect that later.

http://www.canadianstickcurling.ca/

@Kevin2Sep 16.2015 — #And by the way, if you use the image linked below as your banner image, then make the following changes (highlighted in red) to my CSS you can save almost 100kb per pageload.

header img {
 max-width: 100%;
 [COLOR="#FF0000"]margin-bottom: -12px;[/COLOR]
 }

#nav {
 padding: 10px 15px 10px;
 [COLOR="#FF0000"]margin-bottom: 2px; [/COLOR]
 list-style-type: none;
 background-color: #fff;
 }

It's even closer to your posted pic.

[canned-message]attachments-removed-during-migration[/canned-message]

@MaxxxxauthorSep 17.2015 — #Ok Kevin2, things are slowly starting to make sense. I do how ever have a question. If I have a <div class="mid-leftouter">. does it make sense that my content is still to the right? To me it doesn't. Because I remember you saying for example that my right container should say left container, and that's fix. So that's why I question <div class="mid-leftouter">. It's the same for the following.

[CODE]<div class="right-container">
 <div class="right-container-top">
 <h3><span class="red-heading">Contact Us</span></h3>
 
 </div>
 <div class="right-container-dwn">
 <h3><span class="red-heading">News</span></h3>
 
 </div>[/CODE]

I know some of my content is on the left, like my vertical navigation.

http://www.canadianstickcurling.ca/

@Kevin2Sep 18.2015 — #It's not only about renaming things to have them make sense, it's also about understanding the basic "flow" of HTML and how it is rendered. Browsers render HTML top-to-bottom and left-to-right. If you want element A to appear [i]above[/i] element B element A's HTML code should be [i]ahead[/i] of element B's. Similarly, if you want section C to appear to the [i]left[/i] of section D section C's code should come [i]before[/i] the code for section D in the HTML file.

To give an example, here is a bad ASCII-art diagram of your page layout:

<i>
 </i>+-----------------------+
 |	 HEADER		|
 +-----------------------+
 |      NAVIGATION	|
 +-----------------------+
 |    MAIN CONTAINER	|
 |+---------+-----------+|
 || LEFT    |  RIGHT    ||
 || CONTENT |  CONTENT  ||
 |+---------+-----------+|
 +-----------------------+
 |	FOOTER		|
 +-----------------------+

The pseudo-HTML for that structure would be:

<i>
 </i>&lt;header&gt;
 &lt;navigation&gt;
 &lt;main&gt;
 &lt;left&gt;
 &lt;right&gt;
 &lt;footer&gt;

Notice how that follows the top-to-bottom, left-to-right "rule".

Your HTML is structured somewhat backwards. In pseudo-HTML it looks like this:

<i>
 </i>&lt;header&gt;
 &lt;navigation&gt;
 &lt;main&gt;
 &lt;right&gt;
 &lt;left&gt;
 &lt;footer&gt;

Therefore the content you [i]want[/i] to appear on the left side of your page would naturally render to the right. So you cheat by doing this (again, in pseudo-HTML):

<i>
 </i>&lt;header&gt;
 &lt;navigation&gt;
 &lt;main&gt;
 &lt;right style="float: left;"&gt;
 &lt;left style="float: right;"&gt;
 &lt;footer&gt;

"Oh no, I never 'cheat'!" Oh really? Here is your "real" HTML:

[code=html]<div class="mid-leftouter">
 [...]
 </div>
 
 <!-- Left Navigation starts-->
 
 <div class="right-container">
 [...]
 </div>[/code]

And the CSS for those <div>s:

.mid-[COLOR="#FF0000"][B]left[/B][/COLOR]outer{width:618px;	/* and for what it's worth, "outer" to what? */
 [COLOR="#FF0000"][B]float:right;[/B][/COLOR]
 }
 [...]
 .[COLOR="#FF0000"][B]right[/B][/COLOR]-container{width:275px;
 [COLOR="#FF0000"][B]float:left;[/B][/COLOR]
 color:#fff;
 }

Let's work with some more "real" HTML. How about a comparison between your code and the HTML I posted above. All the content has been stripped out leaving just the structural elements. First yours with some (at times snarky) comments:

[code=html]<body><br>	[why is there a <br> here?]
 <div id="main-wraper">
 <div id="top-wraper">	[wraping (sic) the top of what? the closing tag for this div is way at the end]
 
 <div id="banner"></div>
 
 <!--Navigation starts--> [wait, doesn't id="nav" give you enough of a hint?]
 
 <ul id="nav">
 [main navigation]
 </ul>
 
 <!--Navigation ends-->
 
 <div id="mid-wraper"><br>	[why is there a <br> here?]
 <div class="mid-wraper-top">	[again, wraping (sic) the top of what?]
 
 <div class="mid-leftouter">
 [right side content]
 </div>
 
 <!-- Left Navigation starts-->
 
 <div class="right-container">
 <div class="right-container-top">
 [in-page links]
 </div>
 <div class="right-container-dwn">
 [news stuff]
 </div>
 </div>	["Left Navigation" actually ends here]
 </div>	[end of "mid-wraper-top"]
 </div>
 
 <!-- Left Navigation ends-->
 
 <div class="footer">
 
 <div class="footer-right">[footer stuff]</div>
 </div>
 </div>	[closing tag for "top-wraper" -- HUH?]
 </div>
 </body>[/code]

Now mine:

[code=html]<body>
 <header>
 [banner image]
 </header>
 
 <ul id="nav">
 [main navigation]
 </ul>
 
 <main>
 
 <div id="left">
 <div id="sub-nav">
 [in-page links]
 </div>
 <div id="news">
 [news stuff] 
 </div>
 </div>
 
 <div id="right">
 [right side content]
 </div>
 
 </main>
 
 <footer>[footer stuff]</footer>
 </body>[/code]

In which version can you almost visualize the "bad ASCII-art diagram" above just by reading through the raw code?

It's no wonder you can't figure out how to deal with your own code.

Also in #CSS _↴

[RESOLVED] FF content overflowing out of containers...Cubic - Bezier Check Page Using Firefox for MAC

Success!

Help @Maxxxx spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Trouble with lining thins up

14 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

[RESOLVED] Trouble with lining thins up

14 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #CSS _↴