I am dynamically including an html content in the page.
The content is a tree structure in html which is usually huge in height and width.
I want that after inclusion with AJAX the root node of the tree is visible : the included HTML content is centered.
UPDATE1: in the MWE I just use width:2000px to imitate something wider than the screen page. Point is that to center this huge thing on the page not to change its width (Scaling could be acceptable but how?).
UPDATE2: The root of the included tree should be horizontally centered but its other parts also needs to be available through scroll bars of the browser or some inner scroll bars.
What are the simple and correct ways of doing it (without frames as they are deprecated) by styling?
UPDATE3: Below the screenshot of a real example. After tree is generated and included dynamically in the bottom of the page, it is not visible for a client.
One needs to use scrollbars to see the root of a tree.
UPDATE4: See the one possible option where the included content is placed in a window with scrollbars which needs to be zoomable, via browser or vis additional functionality.
MWE : https://jsfiddle.net/kowalsky/tgkbn8wp/2/
HTML:
<body>
<h1>Test page</h1>
<div>
So here comes a long text that might fill the page and wrap outomatically like this.
Below is a WIDETHING which is supposed to content an HTML loaded dynamically via AJAX.
The loaded content is usually wider and is impossible to fit to the page.
<b>What are the ways to put WIDETHING centered on the page, i.e. CENTER is in the center of the page?</b>
</div>
<div class="frame">
<div class="wideThing">
CENTER
<div class="box">BOX1</div>
<span class="box">BOX2</span>
<span class="box">BOX3</span>
<span class="box">BOX4</span>
<div class="box">BOX5</div>
</div>
</div>
</body>
CSS :
.wideThing {
width: 2000px;
text-align: center;
}
.frame {
width: 100%;
border: solid 2px black;
}
.box {
padding: 40px 100px;
border: solid 1px black;
background-color: red;
}
I would use this:
.wideThing {
position: relative;
width: 2000px;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
That first moves the left border to the middle and than moves it back left by 50% of its own width, thereby centering it horizontally.
https://jsfiddle.net/p7d2j323/1/
I would just do this:
.wideThing{
width: 100%;
text-align: center;
}
https://jsfiddle.net/tgkbn8wp/4/
A possible solution is to use jQuery to set the position of the horizontal scrollbar at the center of the tree.
This could be accomplished using the .scrollLeft() method and some calculations to get the new position of the horizontal scrollbar.
But bear in mind that you'd have to execute this script after the tree had finished loading.
Here's a JSFiddle.
And of course you could set the position of the vertical scroll bar similarly using .scrollTop().
More about .scrollLeft() and .scrollTop() on jQuery's website.
Related
Sorry about the specific question - I'm writing up this page for my portfolio http://ashereinhorn.com/portfolio/2014/hex-tile-world-script-page-unfinished/
however the column is so narrow that it results in some undesirable formatting for the dark, code segments.
How can I make these section expand further to the right (and left?) so that there is less line wrapping.
I'm writing it all in HTML so a solution with just that would be perfect. I'm not against solutions where you have to expand them or they open a floating element that displays the content either.
Thank you in advance.
Do you mean like this?
pre {
background-color: #272a2c;
color: #8f969c;
padding: 30px 15px; // reduces the padding for right and left
display: block;
left: 0;
position: absolute;
width: 1200px;
}
.single-project .entry-content {
position: relative;
}
You cannot break out of your website container unless you actually close it. This is a hack to make it work, but it's not ideal for a multitude of reasons. Using absolute positioning is usually not recommended.
In your case, you would have to close the "wrapper modular clearfix" div, and start another div that has a larger width.
<div class="wrapper modular clearfix">
//Article text
</div>
<div class="wrapper code-example">
//Code insert
</div>
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!
When ever I develop HTML pages, I get problem with window resize. The page alignment gets disturbed. One element or tag overlaps with the other.I want my page that when I resize,
my page it should remain the same & srollbars should appear.Someone Pls suggest solution.Which style attribute (position, overflow) is good to use for this?
Set a width on the body (or, more preferably, a min-width)
Not sure if this is what you need, but probably:
overflow:auto;
is what you are looking for
i understand i think, the issue is that you place your elements in a relative position(the default for position on any element), so relative to your current screen size. you can change the position to absolute and they will not move, this can cause you to loose control if your not an css ninja. ill show some cool techniques now how to control elements.
hint 1:
wrap your tags! a wrapped element will stay put!
example:
html =>
<div id="box_wrapper">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
css =>
#box_wrapper {
margin: /*top and bottom*/5px /*left and right*/ auto; /*this will center your wrapper*/
height: 300px; /*what ever height you want*/
width: 1200px; /*what ever width you want*/
}
.box {
/*what dimensions you want*/
}
this a good way of keeping objects in place, they will never leave the wrapper element if you specify a overflow.
hint 2:
position: absolute; caution this can get messy.
i use position absolute when positioning logos to the corner of a screen so that if you change the size of the screen the logo will still remain in the corner. this is cool cause you dont need a specified width for the parent elements.
html
<div class="header">
<img src="/images/logo.png" alt="page_logo">
<div id="login_button">
/*......*/
</div>
</div>
css
.header {
width: 100%
height: 150px;
border: 1px solid #ccc;
}
.header img{
position: absolute;
margin: 0px; /*position: absolute must have a margin even if its 0*/
float: left;
height: 150px;
}
#login_buttons {
float:left;
position: absolute right;
margin-right: 5px;
}
this example puts a logo on the top left hand side and the login buttons on the right and if you then change the screen size it will keep them where they need to be.
i dont want to write a whole tutorial here but these tips should help in designing solid pages that adapt to multiple screen sizes.
its hard to kinda guess what the issue could be if i cant see the code but i hope this helps.
<body id="page" onload=" pageHeight = document.getElementById('page').offsetHeight;
pageWidth = document.getElementById('page').offsetWidth;
pageHeight=1000 px ;
pageWidth=600 px ;
"> </body>
you got to fix the width of the body on page load to pixels instead of % based on the resized browser window size.
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.
I am trying to lay out a table-like page with two columns. I want the rightmost column to dock to the right of the page, and this column should have a distinct background color. The content in the right side is almost always going to be smaller than that on the left. I would like the div on the right to always be tall enough to reach the separator for the row below it. How can I make my background color fill that space?
.rightfloat {
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}
.left {
font-size: 20pt;
}
.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}
<div class="separator">
<div class="rightfloat">
Some really short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>
<div class="separator">
<div class="rightfloat">
Some more short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>
Edit: I agree that this example is very table-like and an actual table would be a fine choice. But my "real" page will eventually be less table-like, and I'd just like to first master this task!
Also, for some reason, when I create/edit my posts in IE7, the code shows up correctly in the preview view, but when I actually post the message, the formatting gets removed. Editing my post in Firefox 2 seems to have worked, FWIW.
Another edit: Yeah, I unaccepted GateKiller's answer. It does indeed work nicely on my simple page, but not in my actual heavier page. I'll investigate some of the links y'all have pointed me to.
Ahem...
The short answer to your question is that you must set the height of 100% to the body and html tag, then set the height to 100% on each div element you want to make 100% the height of the page.
Actually, 100% height will not work in most design situations - this may be short but it is not a good answer. Google "any column longest" layouts. The best way is to put the left and right cols inside a wrapper div, float the left and right cols and then float the wrapper - this makes it stretch to the height of the inner containers - then set background image on the outer wrapper. But watch for any horizontal margins on the floated elements in case you get the IE "double margin float bug".
Give this a try:
html, body,
#left, #right {
height: 100%
}
#left {
float: left;
width: 25%;
}
#right {
width: 75%;
}
<html>
<body>
<div id="left">
Content
</div>
<div id="right">
Content
</div>
</body>
</html>
Some browsers support CSS tables, so you could create this kind of layout using the various CSS display: table-* values. There's more information on CSS tables in this article (and the book of the same name) by Rachel Andrew: Everything You Know About CSS is Wrong
If you need a consistent layout in older browsers that don't support CSS tables, you need to do two things:
Make your "table row" element clear its internal floated elements.
The simplest way of doing this is to set overflow: hidden which takes care of most browsers, and zoom: 1 to trigger the hasLayout property in older versions of IE.
There are many other ways of clearing floats, if this approach causes undesirable side effects you should check the question which method of 'clearfix' is best and the article on having layout for other methods.
Balance the height of the two "table cell" elements.
There are two ways you could approach this. Either you can create the appearance of equal heights by setting a background image on the "table row" element (the faux columns technique) or you can make the heights of the columns match by giving each a large padding and equally large negative margin.
Faux columns is the simpler approach and works very well when the width of one or both columns is fixed. The other technique copes better with variable width columns (based on percentage or em units) but can cause problems in some browsers if you link directly to content within your columns (e.g. if a column contained <div id="foo"></div> and you linked to #foo)
Here's an example using the padding/margin technique to balance the height of the columns.
html, body {
height: 100%;
}
.row {
zoom: 1; /* Clear internal floats in IE */
overflow: hidden; /* Clear internal floats */
}
.right-column,
.left-column {
padding-bottom: 1000em; /* Balance the heights of the columns */
margin-bottom: -1000em; /* */
}
.right-column {
width: 20%;
float: right;
}
.left-column {
width: 79%;
float: left;
}
<div class="row">
<div class="right-column">Right column content</div>
<div class="left-column">Left column content</div>
</div>
<div class="row">
<div class="right-column">Right column content</div>
<div class="left-column">Left column content</div>
</div>
This Barcamp demo by Natalie Downe may also be useful when figuring out how to add additional columns and nice spacing and padding: Equal Height Columns and other tricks (it's also where I first learnt about the margin/padding trick to balance column heights)
I gave up on strictly CSS and used a little jquery:
var leftcol = $("#leftcolumn");
var rightcol = $("#rightcolumn");
var leftcol_height = leftcol.height();
var rightcol_height = rightcol.height();
if (leftcol_height > rightcol_height)
rightcol.height(leftcol_height);
else
leftcol.height(rightcol_height);
Here's an example of equal-height columns - Equal Height Columns - revisited
You can also check out the idea of "Faux Columns" as well - Faux Columns
Don't go the table route. If it's not tabular data, don't treat it as such. It's bad for accessibility and flexibility.
I had the same problem on my site (shameless plug).
I had the nav section "float: right" and the main body of the page has a background image about 250px across aligned to the right and "repeat-y". I then added something with "clear: both" to it. Here is the W3Schools and the CSS clear property.
I placed the clear at the bottom of the "page" classed div. My page source looks something like this.
body
-> header (big blue banner)
-> headerNav (green bar at the top)
-> breadcrumbs (invisible at the moment)
-> page
-> navigation (floats to the right)
-> content (main content)
-> clear (the quote at the bottom)
-> footerNav (the green bar at the bottom)
-> clear (empty but still does something)
-> footer (blue thing at the bottom)
I hope that helps :)
No need to write own css, there is an library called "Bootstrap css" by calling that in your HTML head section, we can achieve many stylings,Here is an example:
If you want to provide two column in a row, you can simply do the following:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-md-6">Content</div>
<div class="col-md-6">Content</div>
</div>
Here md stands for medium device,,you can use col-sm-6 for smaller devices and col-xs-6 for extra small devices
The short answer to your question is that you must set the height of 100% to the body and html tag, then set the height to 100% on each div element you want to make 100% the height of the page.
A 2 column layout is a little bit tough to get working in CSS (at least until CSS3 is practical.)
Floating left and right will work to a point, but it won't allow you to extend the background. To make backgrounds stay solid, you'll have to implement a technique known as "faux columns," which basically means your columns themselves won't have a background image. Your 2 columns will be contained inside of a parent tag. This parent tag is given a background image that contains the 2 column colors you want. Make this background only as big as you need it to (if it is a solid color, only make it 1 pixel high) and have it repeat-y. AListApart has a great walkthrough on what is needed to make it work.
http://www.alistapart.com/articles/fauxcolumns/
I can think of 2 options
Use javascript to resize the smaller column on page load.
Fake the equal heights by setting the background-color for the column on the container <div/> instead (<div class="separator"/>) with repeat-y
Just trying to help out here so the code is more readable.
Remember that you can insert code snippets by clicking on the button at the top with "101010". Just enter your code then highlight it and click the button.
Here is an example:
<html>
<body>
<style type="text/css">
.rightfloat {
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}
.left {
font-size: 20pt;
}
.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}
</style>
This should work for you: Set the height to 100% in your css for the html and body elements. You can then adjust the height to your needs in the div.
html {
height: 100%;
}
body {
height: 100%;
}
div {
height: 100%; /* Set Div Height */
}
It's enough to just use the css property width to do so.
Here is an example:
<style type="text/css">;
td {
width:25%;
height:100%;
float:left;
}
</style>
.rightfloat {
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}
.left {
font-size: 20pt;
}
.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}
<div class="separator">
<div class="rightfloat">
Some really short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>
<div class="separator">
<div class="rightfloat">
Some more short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>