I am working on a page with horizontal scrolling and multiple columns. The first column of the text should be centered on the page and the other columns should be visible, too. Here is a sketch, which demonstrates what I have right now – an article with columns which is scrollable: jsfiddle. I would like to see the overflow text, too. I know overflow-y:visible and overflow-y:scroll cannot be combined, but how can achive something similar?
Only the text (article) should be scrollable, not the whole page.
Here are some images which illustrate what I would like to do:
Not too sure of what you are looking for, but here is a hint with display and text-indent:
DEMO
CSS to demonstrate idea :
.article-wrapper {
border:solid;
width:600px;
margin:auto;
text-indent:0;
transition:1s
}
.article-wrapper:hover {
text-indent:-500px;;
}
article {
text-indent:0;
display:inline-block;
height:400px;
width:500px;
column-width:500px;
}
If this effect wanted, you may look for a way via transition, animation or javaScript to take control over it.
Related
I am using vis.js and would like to align the buttons displayed when using the "navigationButtons" option to the top of the canvas.
I understand this is done using CSS, I was wondering if anyone had any examples?
Thank you in advance,
Anadi.
Preferable some HTML would be nice to work with. However you mention you'd like to update the "alignment" of the buttons. Therefore I would assume the "bottom:" and "right:" attributes is what you are looking for. However, since you want the alignment towards the top, you may want to use the "top:" attribute instead of "bottom:" and "left:" instead of "right:"...
E.g... The following should align these 4 buttons horizontally across the top... update the "left:" attribute to suit your preferred gutter width.
div.vis-network div.vis-navigation div.vis-button.vis-up {
background-image: url("...png");
top:10px;
left:50px;
}
div.vis-network div.vis-navigation div.vis-button.vis-down {
background-image: url("...png");
top:10px;
left:100px;
}
div.vis-network div.vis-navigation div.vis-button.vis-left {
background-image: url("...png");
top:10px;
left:150px;
}
div.vis-network div.vis-navigation div.vis-button.vis-right {
background-image: url("...png");
top:10px;
left:200px;
}
I realise this question has been asked multiple times in differently worded titles and options, but i have yet to find something that works for me.
Im trying to have an img fill most of the screen (keeping its aspect ratio) without overflowing the edges. (Basically what the firefox browser accomplishes when viewing an image)
Most that i've tried either works in only one direction ie. width will resize but will end up overflowing the height and the same for the other way, either with CSS or JScript. Also playing a factor in my trouble is that i want to aplly this to both portrait and landscape images (More or less any image i have on the site)
This seems like it should work using pure CSS but doesnt (im not completely knowledgeable in all CSS though):
Link to JSFiddle
body, html {
margin:auto;
padding:6px;
height:100%;
width:100%;
}
img {
max-width:100%;
max-height:100%;
}
There are a hand full of other scripts as well, but this post is getting a bit long.
Could anyone help me out containing my images within the screen, with either JQuery or CSS (within or without a DIV)
Thanks in advance,
Try this jQuery plugin: TailorFit
and check out the demo.
You can play around with various options in the demo to figure out if this could work for you. The browser support is extreme because it only uses jQuery and relative positioning.
Full disclosure - I'm the author of the plugin.
Now define your html, body height 100%;
as like this
body, html {
height:100%;
}
MY ANSWER:
I ended up just wrapping the image in a div and setting the div dimensions in CSS:
PURE CSS Resize
Unfortunately this method may look quite horrible in older browsers but it has atleast got me out of a pickle and its a tiny piece of styling.
Hopefully i can find some jQuery alternative soon.
body, html {
width:98%;
height:98%;
}
.outer {
position:fixed !important;
position:absolute;
margin:auto;
text-align:center;
top:10px;
right:0;
bottom:10px;
left:0;
}
img {
max-width:100%;
max-height:100%;
padding:4px;
background-color:#fff;
}
----
<div class="outer">
<img src="whatever.jpg" />
</div>
I've been implementing Mega Menu Reloaded On to my website, and I am unable to properly align the div tags on different screen resolutions!
Here's: what it should look like
Here's: what it looks like after I've rewritten parts of the css of Mega Menu.
I've tried for a few hours to fix this issue, but as a beginner to css I can not seem to manage to fix it.
I believe this is the css needed pertaining to its placement
.megamenu_fixed {
width:960px;
height:44px;
position:fixed;
right:0;
margin:0 auto 0 -480px;
z-index:2;
background-image:url("../img/bg.png");
background-color: #3d3d3d;
padding-left:12px;
}
.megamenu {
position:absolute;
margin:0;
width:960px;
font-size:0.982em;
list-style:none;
padding:0px;
line-height:38px;
font-weight: bold;
display:block;
list-style:none;
top:41px;
padding-left:42%;
}
and here's the code of it's position with the correct placement
#nav-main { right:0; top:55px; list-style: none;}
#nav-main li {list-style: none; float:left; position:relative; padding-left:20px; }
Thanks in advance for any help, or pointing me in any right directions. :)
try using relative instead of absolute positioning.
also, failing that, try specifying left as a percentage (i.e. approx 50% is where the menu starts), and width also as a percentage (100% should make it use only from the left-most point of the div to the right-most side of the screen. if not, try 50% width).
The problem is in your HTML, not your CSS (I think. Well, I fixed the part where 'Adults' was hiding, that was a syntax error)
the span where Adults is declared is mistyped. I replaced <span class="drop"><adults< span=""> (problem code) with <span class="drop">adults</span> and 'Adults' displays properly. However, it is a little squashed to the right, but I believe that would be because of the images top left of the page of 'bad' version, which are not there on the 'good' version
PS: I've left the old answer there as people may have similar issues, where it is in fact the CSS at fault. If you think it's considered "off-topic" let me know, I'll remove it
UPDATE: Oh, and something I forgot to mention, to fix the squashed megamenu, just edit the location in the CSS, that should bring it back to normal
Alternatively, you can scrap div (almost) entirely and use tables instead. can be confusing sometimes, but in my opinion it's totally worth it. You just can't merge/split cells (to split just create a table within a table). Use microsoft word or openoffice writer or something like that and create tables within tables for graphical "base layout" to help you figure out the necessary code. Here's a starting point: Formatting layout with tables on gitHub
So, maybe I just suck at searching, but I'm having real trouble finding a method to do this, so here goes...
I have a webpage with a fixed image background (tiled, non scrolling).
I now want to have a colored div on top of that (700px wide, 100% height, centered) that I can then put more content within (doesn't necessarily have to be a div, I just want a colored area in the center.)
Here's an image of what I'm working towards: http://bit.ly/g5qgj0
The lightly colored area (on top of which lies everything else) is what I'm trying to achieve.
Thanks in advance, I'm still getting to know HTML/CSS and this has been driving me crazy XP
html, body{
margin:0;
padding:0;
height:100%;
}
body{
background:transparent url(...) repeat 0 0;
}
div{
margin:0 auto;
width:700px;
height:100%;
background:white;
}
Check working example at http://jsfiddle.net/TGt4A/
I think your most foolproof way to do this is going to involve Javascript/jQuery, which I did in JSFiddle. You might want to add a CSS min-height on that #container as a fallback if Javascript is disabled or whatever.
there seem to be a few posts on this subject but i can't find anything conclusive one way or the other, so thought i'd try on here for someone far more knowledgeable in CSS than me! I have 3 container divs which have background images to give the impression of a tapered out line effect at the top and bottom of the main content. I can't get the middle div to dynamically expand as far as i need it to, it seems to need a specific height. Is there any way to get height: auto or 100% working on this? The site is here - thanks!
Edit: Sorry, you are trying to stretch the background image.
The technique is to remove the float:right; style and add a margin to the left:
#main_body {
float: right; //remove this
margin-left: 320px; //add this
}
-works on Chrome
There are solutions described. You can use pure css to do it or even use javascript.
I am considering that you are only requiring a css solution. Try the following CSS.
body {
margin:0;
padding:0;
height:100%;
}
or
html{
width:100%;
height:100%;
}
or check out this link, a better solution. Click here