I know there is a lot of threads on this, but none of those threads actually helped me.
I have a Typo3 based e-shop. I have footer which i want to be as wide, as my browser window. On my main page, there is no problem. But when I click on "Show all products", the list of products will appear but my footer is only 988px wide. In my index.html template file I have separated div for footer (it is not in any other div or block):
FOOTER
<div id="footer">
<div class="main-width">
<div class="footer-menu" id="footerMenu">
Home |
New Products
|
Specials
|
Products All
|
Reviews
|
Contact Us
|
FAQ
</div>
<div class="copyright">
Copyright © 2013
</div>
</div>
</div>
When I load my page in OPERA and click (in opera) on "Inspect element" It seems like my footer (on all products page) is in some kind of div (contentWrapper):
<body id="indexBody">
- <div class="main-width">
+ <div id="header">
<div class="banners"/>
+ <div class="crsl">
- <div id="contentWrapper">
+ <div id="sidebar">
+ <div id="content_container">
+ <div id="footer">
</div>
</div>
</body>
</html>
The + and - shows which divs are collapsed and which are not. Hope Its clear. :)
On my main page, when I click inspect element, my footer isnt inside of that "contentWrapper" div. Where could be problem? Please Help
Never trust those element inspectors since they always display an interpreted source code in a fancy collapsible tree view. Have a look at the plain source code and count the div tags. I bet the second template misses a closing one ;-)
Related
I understand fullpage.js is solely used to build single page vertical slider orienated sites where the content of the site transitions from slide to slide going up or down respectively.
Having successfully implemented and somewhat customised the vertical slider into new website layout, I am unable to view the others sections of the website that come below it.
The vertical slider it seems prevents the rest of the html section blocks below it to appear. Its as if the vertical slider is saying: 'I AM THE WEBSITE' ( ignores w/e the hell I place beneath it ).
Here is what we have:
<div id="fullpage">
<div class="slide" id="slide_1">
<div class="slide_caption">
<h1>This is slide 1</h1>
<h4>slide 1 description</h4>
Read More
</div>
</div>
<div class="slide" id="slide_2">
<div class="slide_caption">
<h1>This is slide 2</h1>
<h4>slide 2 description</h4>
Read More
</div>
</div>
<div class="slide" id="slide_3">
<div class="slide_caption">
<h1>This is slide 3</h1>
<h4>slide 3 description</h4>
Read More
</div>
</div>
<div class="slide" id="slide_4">
<div class="slide_caption">
<h1>This is slide 4</h1>
<h4>slide 4 description</h4>
Read More
</div>
</div>
</div>
<section class="full_width_container" id="home_container_1">
<!-- extra mark up for other stuff like latest products etc -->
</section>
<section class="full_width_container" id="home_container_2">
<!-- extra mark up for other stuff like news etc -->
</section>
<section class="full_width_container" id="home_container_3">
<!-- extra mark up for other stuff like testimonials etc -->
</section>
<section class="full_width_container" id="home_container_4">
<!-- extra mark up for blog post links -->
</section>
<footer>
<!-- extra mark up for footer items -->
</footer>
My question is - how the hell do I get the other sections below, i.e home_container_1, home_container_2, home_container_3 to show up ?
I tried applying overflow-y:scroll !important; on body whilst applying overflow-y:hidden on fullpage but it didn't quite work.
If somebody could point me in the right direction in terms of whats happening I would appreciate it no end.
SOLUTION: IF Anybody ends up having this problem, the issue is 99.999% related to not including the DOCTYPE html declarative.
grrrrr # this schoolboy error. Why, despite so many years of web dev am I making these kind of idiotic mistakes :| ? Alvaro the author of fullpage.js clearly mentioned this in his docs, 'make sure to include DOCTYPE html declarative else the heights wont work properly..'
So there you have it folks, the issue was the above.
Now the vertical slider stays put, takes up 100vh of the screen and if you use the mouse scroll it scrolls the ENTIRE content in the viewport so you can view whats beneath the slider (the other website sections).
I am editing a site to be 3 columns.
Here is example page, currently 2 columns:
https://courses.guitar-dreams.com/lessons/an-introduction-to-triads-and-their-inversions/
So what we have is a header, sidebar, content area, and footer. Seems pretty straightforward. But as I look at the HTML, the structure is so odd. Here is how this page is arranged:
<body>
<div class="learndash-wrapper">
<div class="ld-focus">
<!-- notice how it is starting out with sidebar even though we have 2 headers on top of each other... -->
<div class="ld-focus-sidebar">
<div class="ld-focus-sidebar-wrapper">
<div class="ld-course-navigation">
Here is sidebar navigation content
</div> <!--/.ld-course-navigation-->
</div> <!--/.ld-focus-sidebar-wrapper-->
</div> <!--/.ld-focus-sidebar-->
<!-- ok now the main content -->
<div class="ld-focus-main">
<!-- oh but wait, let's add header first! And namely the 2nd header! -->
<div class="ld-focus-header">
Here is the 2nd header
</div> <!--/.ld-focus-header-->
<!-- ok now that we added 2nd header, let's add main content! -->
<div class="ld-focus-content">
here is main content
</div> <!--/.ld-focus-content-->
</div> <!--/.ld-focus-main-->
</div> <!--/.ld-focus-->
<!--/.ld-learndash-wrapper-->
<!-- Oh wait, now that we are at end, let's add that first header now! -->
<div id="wpadminbar" class="">
The topmost header
</div>
</body>
You see what I mean? I am not a web design expert, but I tend to believe that layout of pages generally should follow similar principles to the document publishing world. That is, if your page starts with header, probably good idea for that to be the first design element that you add, and not the last, and moreover, that the design element, if possible, should be placed in the design environment in a way that has physical correspondence to the rendered document.
I am trying to add a right sidebar to make it a 3 column layout. I tried adding a wrapper div to <div class="ld-focus-main"> with display: flex and followed some of the approaches here:
http://geniuscarrier.com/2-columns-layout-with-flexbox/
<div class="ld-focus-main">
<div class="ld-focus-header">
</div> <!--/.ld-focus-header-->
<div class="mywrapper">
<div class="ld-focus-content">
here is main content
</div> <!--/.ld-focus-content-->
<div class="mysidebar">My sidebar</div>
</div>
</div> <!--/.ld-focus-main-->
Here I used (as inline styles)
.mywrapper {
display: flex;
align-items: center;
}
.ld-focus-content {
flex-grow:1
}
I didn't use properties on the right sidebar since in the example in the link above it suggested that if all is well with wrapper and left then right part will follow suit.
But above doesn't produce desired result. At bottom of page linked above you see my added divs and "My Sidebar". I think part of the problem is that the theme template uses such bizarre placement of divs and properties such that when I try to add that right column the underlying structure is not making it work as expected. Sort of like 2nd, 3rd order effects... as well as a Jenga game within a Jenga game.
I was thinking about just redoing the entire template, but at this point I would prefer to just add a sticky right sidebar without a ton of rework. That said, to me it seems the proper way to do such a layout, syntactically would be
<div class="mainwrapper">
<div class = "firstheader"></div>
<div class = "secondheader"></div>
<div class = "outercontentwrapper"></div>
<div class = "leftnavigation"></div>
<div class = "contentwrapper">
<div class = "maincontent"></div>
<div class = "rightsidebar"></div>
</div>
</div>
<div class = "footer"></div>
</div>
Just not sure all the specific properties such that the page would behave as is now, plus add a right sidebar.
So with all that, how would you go about adding that right column?
Thanks!
Brian
I have a piece of markup where when a user clicks on "find a rider" the browser is supposed to take the user down to where the participants are on the same page. But when clicking the link it just takes me to a page not found on chrome, edge, and firefox (can't test safari).
<div class="container-fluid blue">
<div class="container text-center">
<h1 class="white">Prairie Women on Snowmobiles</h1>
Find a Rider
<div class="row">
<div class="col-lg-12" style="margin-bottom: 15px;">
<div class="hero elevation-z12" style="background-image: url('../images/content/pagebuilder/PWOS_banner.jpg');"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">Prairie Women on Snowmobiles</h2>
<p>A non-profit organization whose annual missions are provincial awareness events that are designed to focus attention on breast cancer and the recreation of snowmobiling as well as raise the much-needed funds for breast cancer research. Over the past 18 years we have raised almost $2.5 million for the cause. To learn more about Prairie Women on Snowmobiles click here.</p>
</div>
</div>
<div class="container">
<div class="text-center">
<h2>Riders</h2>
<p>Meet our 2020 Riders</p>
</div>
<div class="events">
<div class="event-display" id="find">
[[S51:PWOS_SK_reus_riders]]
</div>
</div>
</div>
</div>
normally to fix this I would just put the url in the link "../site/SPageServer/?pagename=PWOS_SK_homepage#find" and that works, however, doing that will break my url tracking if people land on the page using the vanity url.
Here's a link to the page:
https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage
any help is appreciated.
thanks,
Your page starts with <base href="https://secure2.convio.net/cco/site/" /> so when you click on href="#find" it resolves to https://secure2.convio.net/cco/site/#find.
You need to write your URL relative to the base URL, not the current page.
As mentioned in a comment, it would be better to do this with simple JS instead of playing with browser functionality. Without touching the HTML and assuming you have jQuery on the site, I would add something like the following in a script tag (obviously below both the <a href='#find'> and div#find)
jQuery("a[href='#find']").click(function() {
event.preventDefault();
jQuery("body, html").animate({
scrollTop: jQuery("#find").offset().top
});
})
This allows you to stay on the page without linking away/messing up tracking data while the window will scroll to the proper element no matter how far down. Hope this helps (even though you managed it before me ;) )
When you hover the mouse over the link you see:
https://secure2.convio.net/cco/site/#find
but you expect:
https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage#find
This is caused by the tag in the header.
Please review the Fiddle Here...
I am trying to separate some elements here and I'm having a tough time. All my div tags appear correctly separated, but I'm not getting the separation.
For example, I've got a button, then a clear, then a paragraph.
But, the paragraph is actually showing up inside the button, after the clear.
<div id="container">
<div id="header">Transfer of Credit Estimator</div>
<div id="content">
<div id="classes">Enter total number of classes estimated for transfer, then click <strong>Estimate</strong>.
</div>
<input type="text" class="" placeholder="#">
<div id="btn">Estimate<div> <!-- Button -->
</div>
<div class="clear"></div>
<p>Hi</p>
<div id="footer">**The Estimator is based on classes that would transfer in as 4-credit courses that cost $1,608 each ($402/credit hour) here at University. The Estimator assumes that each class would be a 5-week class.</div> <!-- Footer -->
</div> <!-- Close Container -->
</div>
On top of that, the footer is taking on attributes from the '.btn' class, such as the font-family and font-weight.
Thoughts on what I'm doing wrong here?
The button div is not closed. It should be:
<div class="btn">Estimate</div>
The button div is not closed
<div id="btn">Estimate<div>
instead it should be
<div id="btn">Estimate</div>
Your browser tries to correct you missing closing tag and that creates the attributes to shift
Is it a good practice to include DIV container elements in SSI files or should I only put the tags within the DIV container in it. For example in the code below I have a footer which appears under all pages. Should I put only the <p> and <a> elements in the SSI file or <div> elements as well?
<div id="footer">
<div class="container">
<div class="wrapper">
<div id="footer_content">
<p>Copyright 2010 New Life e. V.<br />
Contact |
Find Us |
Impressum</p>
</div>
</div>
</div>
</div>
It will be better to put the whole footer DIV in the include file. Otherwise pages that don't need a footer will also have to carry the unnecessary outer DIVs.