Okay, so i need a slider which is in a normal page to span across the whole screen.
The wrapper and all other elements is 960px max-width so thats how far the slider goes.
If i change these, the whole site will become messed up.
Im using Wordpress 3.5 with Twentytwelve theme as parent.
SLIDER: http://rocketplugins.com/wordpress-slider-plugin/
This is the only code i use in the post. So i guess i need to make the post wider?
[slider id='32' name='']
Not too sure about the product that your link explains but you will need to edit your page template.
There will be a content div (the one with max-width set). your new div, the one for the new slider, needs to be above it. I made a page layout fiddle just for you.
HTML
<div class="newdiv">Slider here</div>
<div class="content">
<p>Your WordPress post stuff here</p>
</div>
CSS
.content{max-width:960px; height: 800px; background: #D3D3D3; margin: 0 auto;}
.newdiv{width:100%; height:200px; background:#BADA55;}
Solved by
<div id="slider">[slider id='32' name='']</div>
and
#slider {
position: absolute;
left: 0;
right: 0;
height: 563px;
display: block;
}
Its not the best solution. But it works!
Related
Basically I simply want to make it so that this website
NO LINK
doesn't get squashed when you make the page smaller than the elements that have been defined. However I want the elements to remain at the exact same size they are at, for obvious design issues. Therefore I need a simple horizontal scroll bar or something, but when I've messed with such a design it doesn't seem to make much difference. If you need any coding, or have any questions.. Feel free to ask.
If you notice when you make the page smaller in the horizontal margin, the sidebar gets shoved into the main content. That is one of the main issues, and I figured it would be a good idea to point it out. Just to show part of the problem.
ANSWER
#Wrapper{
overflow: auto;
z-index: 6;
min-height: 1400px;
width: 100%;
min-width:1400px; <--- Added that to make sure that the content never gets squashed.
}
You could tell your sidebar to be always posioned next to your main container. To do that you need first of all to give a class name to this div:
<div style="padding-bottom:15px;">
<p align="center"><font size="+2">SITE UNDER CONSTRUCTION</font></p>
....
</div>
Once you do that you need to put your #Sidebar inside that div to get something like this:
<div class="mycontentclass">
<div id="Sidebar">
<div style="margin-left:5px;">
Home<br>
...
</div>
</div>
<p align="center"><font size="+2">SITE UNDER CONSTRUCTION</font></p>
....
</div>
And then in your CSS styles you need to add:
.mycontentclass{
padding-bottom: 15px; //This is the attribute you defined inline before setting a class for you div
position: relative;
}
#Sidebar{
position: absolute;
left: -205px; //Sidebar width + gutter between the content
}
And now your menu won't go over your content, it'll stay always next to it.
This is what I used to fix the problem.
#Wrapper{
overflow: auto;
z-index: 6;
min-height: 1400px;
width: 100%;
min-width:1400px; <--- Added that to make sure that the content never gets squashed.
}
I'm working on a project to better my knowledge of Spring MVC practices. To do this, I've been creating a very scaled down version of Twitter. Basically, a user can sign in and post a little blurb and also see a timeline of their previous blurbs and all their follower's blurbs.
I have a background image across the whole page and a container in the middle with a light blue background for just the post blurb box and the timeline. The light blue background only goes to the bottom of the visible page. If the timeline goes down past a single page view where you have to scroll down, the light blue background stops at the bottom of what was visible on the initial load.
I have my page defined like this:
The div class=blurb is the blurbs in the timeline.
<div id="container">
<div id="mainPanel">
<div id="timeline">
<div class="class="blurb"">
<span class="user">test</span> <span
class="displayName">Test User</span> <span class="bodytext">This is a small blurb.</span>
<span class="timestamp">1 hours ago</span>
</div>
<div class="blurb">
<span class="user">admin</span> <span
class="displayName">Test admin</span> <span class="bodytext">This is another small blurb.</span>
<span class="timestamp">1 hours ago</span>
</div>
</div>
</div>
</div>
The CSS style for the container is shown below.
#container {
width: 650px;
height: 100%;
margin: 0 auto;
padding: 10px;
background-color: #DDEEF6;
}
Can I modify that container CSS in a way to make it be as long as the timeline is? The timeline grows with every blurb post.
Screenshot with height defined to 100%
Screenshot with height undefined
UPDATE:
Okay, so it absolutely has to do with the floats. Thanks to the two commenters below. The #socialPanel is defined as such:
#socialPanel {
width: 250px;
float: right;
}
Using Chrome's developer tools, if I clear the float is drops the social panel below my blurbs/tweets and moves the light blue background all the way down the list of blurbs.
Any suggestions on what I could research to keep the socialPanel floating left at the top, but still have my light blue background use all the available height? Many thanks on helping me figure it out this far!
UPDATE TWO:
I combined the methods shown in the answer below to solve my problem. I added a div with class clearer with clear:both; and then removed the height: 100%; from the #container styling. This resolved the problem.
NOTE:
Adding the overflow: hidden; to my container's styling made the page cut off after the light blue area, it did not make the light blue area go all the way down.
Many thanks to all the help! I'm still learning and it was all very appreciated!!
Place overflow:hidden on the #container.
How does it work?
One would think placing this style on a container would hide the floats instead of containing them. What actually happens is that overflow:hidden makes the element establish a new block formatting context. This fixes the float containment of any children floating within it. This CSS fix is more practical then including an additional element in the HTML styled with clear:both and works on all modern browsers, including IE7+.
You probably just need to add a clearing div after your two inner divs. http://jsfiddle.net/c3vTU/1/
<div class="outer">
<div class="inner-left"> Stuff on the left</div>
<div class="inner-right">Stuff on the right <br/><br/></div>
<div class="clearer"> </div>
</div>
CSS
.outer {
width: 520px;
padding: 10px;
background-color: #eee;
}
.inner-left {
float: left;
width: 300px;
background-color: red;
}
.inner-right {
float: right;
width: 200px;
background-color: yellow;
}
.clearer {
clear: both;
}
As #MichaelIrigoyen noted, you can also just add overflow: hidden or overflow:auto (I think makes more sense) to your container. http://jsfiddle.net/c3vTU/4/ This is cleaner and I love it!
If you simply remove the height declaration (height: 100%;) from #container, it will expand as its children do (and the background of course, too).
I am making a portfolio website at www.magalidb.0fees.net and I am having some issues with correctly displaying my website in several browsers. The issue is that in some browsers, only the bottom half of the content (which is inside a container) is visible, and the top half is somewhere above reach, at the top of the browser window. To see an example, try opening my website in Firefox, Opera or Internet Explorer.
There are some validation errors, but those are not that urgent. None of those errors is related to the behavior of the website. The site is written in HTML5 by the way, and uses both regular CSS and CSS3.
The issue seems to be with the vertical centering. I center the content of the container both horizontically and vertically.
To center the container horizontically, I used the following CSS:
#container {
min-height: 100%; /* To make sure it reaches the bottom of the browser page */
width: 940px;
margin-left: auto; /* Center horizonticallly */
margin-right: auto; /* Center horizontically */
overflow: hidden;
overflow-y: hidden; /* Vertical scrollbar fix for IE */ }
The vertical centering has the following CSS:
#valigner {
width: 720px;
position: absolute;
top: 50%;
bottom: 50%;
height: 500px;
margin-top: -45%;
margin-bottom: -45%;
margin: -40% 0 0 220px; }
The 220px is only so that the content and header won't stick behind the sidebar.
This is a general layout of the code in the body of my index page:
<body>
<div id="container">
<div id="sidebar" class="left">
<?php include('sidebars/sidebar.php'); ?>
</div>
<div id="valigner">
<div id="sidebar-bottom" class="left"></div>
<div id="head" class="right"><h1>Magali's portfolio</h1></div>
<div id="main" class="right">
<div id="content-textbox">
<div class="intro-left">
Text comes here.
</div>
<div class="intro-right">
<img alt="Me!" class="resizeProfile" src="images/magali.jpg">
</div>
</div> <!-- Closing of div content-textbox -->
</div> <!-- Closing of div main -->
<div id="footer" class="right">
<?php include('language.php'); ?>
</div>
</div> <!-- Closing of div valigner -->
</div> <!-- Closing of div container -->
</body>
Please check out my website (http://www.magalidb.0fees.net). It displays correctly in Chrome and Safari, but incorrectly in Firefox, Opera and Internet Explorer.
I'm very puzzled about this, so any help is very welcome.
!!!EDIT!!!
I found it! It works perfectly now.
I replaced the code from both container and valigner, to the following:
#container {
position: absolute;
top: 50%;
width: 100%;
height: 1px;
overflow: visible;
}
#valigner {
position: absolute;
left: 50%;
width: 940px;
margin-left: -470px;
height: 540px;
top: -270px
}
The code explains itself, it's just so logical. I searched for an alternative method on centering content horizontally and vertically and found this. I feel silly now because I used this method before, yet I neglected it because I thought it was outdated...
Thank you guys for your help anyway! It is greatly appreciated. ;)
PS: I can't answer my own post. I tried, but I get a notification: "Users with less than 10 reputation can't answer their own question for 8 hours after asking. You may self-answer in 5 hours. Until then please use comments, or edit your question instead.".
So I edited my question, like the notification suggested me. I plan on editing the question again after those 5 hours and post an answer the correct way, but until then I can't do better than this. Sorry!
I know you've answered your question, but I'm a bit perplexed about how you've coded your site. There may be a valid reason for it, and if so, a moderator can delete my comment, but I don't think you need all the positioning stuff, especially on both the #container and #valigner elements. In fact, I reckon you could do it using 2 attributes on the #container elements, not using any messy position: absolute; techniques or anything. Here is my suggestion:
#container {
width: 940px; // or whatever you want the width to be. I think this is what you specified originally.
margin: 25px auto; // Centre the design in the middle of the page and put it 25px from the top and bottom of the browser window.
}
I reckon that's it. You could delete #valigner and just use this. If you carry on using position: absolute; everywhere, especially on your top-most containing elements, it will all start to get very messy later on.
I've been using http://ryanfait.com/sticky-footer/ and it works great until you need a margin/padding at the top of the page. The design I'm working with has a patterned body and all the page content is in a white box that starts 15px from the top. I still need a footer that sticks to the bottom cross browser. Any ideas?
UPDATE:
Thanks for all the ideas but noting works perfectly. Adding a margin to a sub element of the wrapper puts in an un-nessary scrollbar: Working example: http://jsfiddle.net/cronoklee/p2cPD/
If you're open to scrapping the sticky footer you've been using, here's how I would go about making one from scratch.
HTML
<div class="wrapper">
<div class="content">
... Your Content Here ...
</div>
</div>
<div class="footer">
... Your Footer Here ...
</div>
CSS
.wrapper {
background: #eee;
padding: 15px 0 100px;
}
.content {
background: #fff;
}
.footer {
background: #ccc;
bottom: 0;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
That should work cross browser. The only nuance about this to be aware of is that position: fixed doesn't work in IE 6. Any improvements are welcome :)
Could you apply a margin-top to the body?
body{
margin-top:15px;
}
This works with firebug on the page you linked to.
A solution without adding a scrollbar. Make these adjustments:
.header{
height:168px; /*15px + image height*/
image-position:bottom;
margin-bottom:37px;
}
.download{
top:175px;
}
Well, I just found this thread since I have had the same problem ten minutes ago and I'd like to share my solution to the problem with "unnecessary scrollbar caused by vertically-down-shifted footer caused by my header-div with margin-top: 20px, because I just want it to be 20px from the very top of the page", which I came up in the meantime.
Just change your .content{margin-top:15px;} to .content{padding-top:15px;} and it should work. The scrollbar should disappear and the content has it's distance from the top.
As seen here: http://jsfiddle.net/p2cPD/24/
Yes - it will expand the content-div's background, but if you don't want it there it can be solved by using some transparent png of some sort or whatever.
Also, according to the http://ryanfait.com the <div class="push"></div> thing should be at the end inside wrapper-div and after content-div, not inside content-div.
Is there a way to mimic the native transition and functionality of "sliding entire pages" like you see on the iPhone but inside a web browser instead?
I want one HTML page to slide over and a new HTML page to take it's place after the press of a button.
The button cannot be constant. So like if you were to have a constant header with buttons that slid content inside a box then that would be incorrect. I need to slide the entire webpage.
Would slides made in HTML5 be what I need? Thank you in advance for any help!
Edit: I have also been thinking about possibly setting up two full-sized DIV's side by side with one hidden off the page with "overflow:hidden" and then using CSS transitions to hit a button and then move one DIV off the screen and the other one into view, but I have no idea how to do that.
The other really hard part about this is that my DIV containers need to be dynamic and 100% width and height. I can't used fixed dimensions.
EDIT:
Using the scrollTo and localscroll functions developed by Ariel Flesler I have been able to complete 99% of what I am looking for. However, at the very end of development, I hit a huge road block. Here is an image that I hope helps explain what I am trying to do:
My problem is that the main content area is a fixed position with an overflow-y auto so that I can keep the scrollbar for the DIV inbetween the header and the footer. But the problem is that when I initiate the sliding animation of my DIV by hitting my button, the fixed content area does not move and only the header and footers move. If I change the positioning of the main content area to "relative" everything moves like I want it to, but I lose the positioning of the scroll.
If someone could figure this out I will be greatly indebted to you!
(I would post a link to what I have, but I can't. It's confidential work for a company)
Thank you in advance!!
EDIT
I am working on reviewing all this information. I will respond in a couple days. Thank you all for you input!
I am currently developing something that may be useful to you. It uses the side by side divs you considered but I found difficulties in using 100% width due to issues with the scrollbars and differences in the browsers. I have overcome this by setting the widths in javascript (jQuery) which offers a cross-browser solution (tested in IE7, IE8, FF, Chrome, Safari, Opera).
Feel free to take as much of the source code as you like by inspecting the source and if you need me to talk you through anything, just let me know.
http://madesignuk.com/uploader/
PS I'm not 100% sure on the rules regarding posting the link to my personal site so if it is an issue for moderators, please let me know.
PPS The site is in development so please try not to mock me :p
You can do that by placing elements side by side inside a container with overflow:hidden, and just move the inner elements.
Here is a proof of concept. It doesn't handle resizing of the page after it has loaded, but it at least shows the principle. I have put three slides in the container, but the code is dynamic so that you can place any number you like.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Slide</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var w = $(window).width();
var h = $(window).height();
var slides = $('.Slides > div');
$('.SlideContainer').css({ height: (h-60) + 'px' });
$('.Slides').css({ width: slides.length + '00%' });
slides.css({ width: w + 'px' });
var pos = 0;
$('.Left').click(function(){
pos--;
$('.Slides').animate({ left: (pos * w) + 'px' });
});
$('.Right').click(function(){
pos++;
$('.Slides').animate({ left: (pos * w) + 'px' });
});
});
</script>
<style type="text/css">
body { margin: 0; padding: 0; }
.Header { position: absolute; left: 0; top: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.Footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.SlideContainer { position: absolute; left: 0; top: 30px; width: 100%; overflow: hidden; }
.Slides { position: absolute; left: 0; top: 0; height: 100%; }
.Slides > div { float: left; height: 100%; overflow: scroll; }
.Slides .Content { margin-top: 100px; text-align: center; }
.Slides .Content a { font-size: 30px; }
</style>
</head>
<body>
<div class="Header">
absolutely positioned header
</div>
<div class="SlideContainer">
<div class="Slides">
<div class="Slide">
<div class="Content">
<h1>Slide 1</h1>
«
</div>
</div>
<div class="Slide">
<div class="Content">
<h1>Slide 2</h1>
«
»
</div>
</div>
<div class="Slide">
<div class="Content">
<h1>Slide 3</h1>
»
</div>
</div>
</div>
</div>
<div class="Footer">
absolutely positioned footer
</div>
</body>
</html>
Edit
Now jsfiddle is up again, so you can try it out here: jsfiddle.net/9VttC
Have you looked at LocalScroll? It will make all hash links scrollable within the container you define. You would have to set the width of slides though, as you'll need to float them.
Use the scrollTop CSS attribute : you want to scroll down 100px in your main content area ?
Just do that :
var newScrollTop = document.getElementById("main_content_area").scrollTop + 100;
$("#main_content_area").animate({scrollTop: newScrollTop}, 500);
The second line is made up with jQuery, but just remember the principle : affect the new scrollTop value to your main_content_area div's CSS.
Try JQuery Cycle plugin.
http://jquery.malsup.com/cycle/
They have provided lot of sample code and tutorials, so it is easy for you to build it your own way.
If I understand correctly, the scrollTo method works, but only if you change the position:fixed to position:relative, which has the consequence of making the scrollbar stretch beyond the scrolling div?
Wouldn't it be easier to put a wrapper div around your main content area with a top margin to account for the header and a bottom margin to account for the footer, and set it to have overflow:scroll, and to use the scrollTo function within it?
The Google Chrome Team made 20 Things I Learned About Browsers and the Web which has this effect.
Just as a theoretical example, but I would create static HTML pages and use jQuery to load the content from them (to provide compatibility). The main problem would be the scrolling.
I use jQuery to calculate the width of the browser, set that to be the width of the <body>, and then set overflow: hidden. Then, just create an absolutely positioned content box, and slide both of them at once.
I'll post some code later, but this is what I would begin with (I, being a pathetically incompetent JS fiddler).
You could use something like Coda Slider, and have the content of the slide be the whole page.