I have web page with centered content.When browser window is resized - it is possible to have window width small than page content. In this case page content is not centered - it is left aligned. Is there a way to right align it if no space to show it centered?
UPDATE:
Main goal is to keep right part of page visible when don't have enought width of window.
Something like: scrolled to right, but without code. Code make some nasty jumps when resize.
I'd set a min-width on the container, and use a media query to kick in when the window gets smaller...
#my_div { margin: 0 auto; text-align: center; min-width: 900px; background: #999; }
#media all and (max-width: 899px){
#my_div { text-align: right; background: red; min-width: auto; }
#my_div #tableWrapper { overflow: auto; }
}
You shouldn't need the text-align on the body tag with this code. If you don't want the content to resize when the window gats smaller, remove min-width: auto from the #my_div rules inside the media query.
Example: http://jsfiddle.net/NXdYk/2/
EDIT:
You can wrap a table in another div, and set overflow: auto to allow scrolling if the window gets too narrow:
http://jsfiddle.net/NXdYk/6/
But if the table is your primary layout, and it has widths set explicitly (i.e. inline CSS) then this is a sub-optimal solution. Bottom line: you can't control how people will interact with your site, all you can do is try and plan accordingly.
Quick example if this is what you're looking for, js script makes it work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(window).resize(function() {
if($(window).width() < $('#content').width()) {
$('#content').addClass('fr');
} else {
$('#content').removeClass('fr');
}
});
</script>
<style type="text/css">
#content{
text-align: center;
min-width: 500px ;
margin: auto;
border: 1px solid #000;
}
.fl{
float: right;
}
</style>
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="style_lte6.css" /> <![endif]-->
</head>
<body>
<div id="content">something</div>
</body>
</html>
Related
On my current project, all I want is to use CSS/HTML only to get my image, within a , to resize with the page. I had this working on a previous site and now...it just isn't. When the browser window is resized, it just cuts off the image, from the right side; no resizing whatsoever.
#charset "utf-8";
/* CSS Document */
div.divBannerScale {
width: 100%;
height: auto;
}
img.bannerScale {
max-width: 100%;
min-width: 40%;
height: auto;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website</title>
<link href="/css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="bannerDIVcontainer" class="divBannerScale">
<img src="Images/bannerFull-01.png" width="2561" height="445" class="bannerScale" />
</div>
</body>
</html>
I've tried adding margin: 0 auto, display: block, padding, etc on each the div class and the image class but ultimately removed them since it didn't seem to make a difference. (And wasn't needed in the past.)
I really don't understand why it's not working now when it was on the other, much messier-coded site. I'm not an expert, clearly, but usually I can figure these things out.
Any help would be much appreciated.
Perhaps your image is already 40% of its original size? In my testing, the code seemed to work fine.
Trimming out all redundant the CSS just leaves (if the min width was indeed too big):
img.bannerScale {
max-width: 100%;
min-width: 1%;
height: auto;
}
You can see a live example here.
Note that that you don't need to do anything to the div size as it will just be as big as whatever you put in it (assuming you're not doing anything funky such as absolute positioning)
I am trying to make a horizontally scrolling website, the difficulty i am facing is to fix my page's height to the device's. Furthermore, if i fix the height's value in the css then it becomes hard coded for that particular screen size, so whenever i open the page on a differently sized monitor the hard coded value creates trouble. I have used a very basic css till now, here it is :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style media="screen">
#body {
width: 4000px;
height: auto;
max-height:100vh;
}
</style>
<title></title>
</head>
<body id=body>
--\\CONTENT GOES HERE \\--
</body>
</html>
This should give you what you are looking for. You can add an overflow-yproperty as well just to be sure y scrolling is disabled. Just make sure the rest of your content is responsive so that it can resize with the view height.
#body {
width: 4000px;
height: auto;
max-height: 100vh;
overflow-y: hidden;
}
I have a Web application containing a simple pop menu implemented as a resizable div.
The application must support both LTR and RTL languages.
When using a LTR language (e.g. English), the small indication for the resize appears at the lower-right corner of the div and, when dragging it, the div expands following the movement of the mouse.
When the application is used with a RTL language, the small indication appears at the lower left corner of the div as expected.
The problem is that when dragging that corner (again, lower left), what moves is the lower-right corner.
The div is deployed at an absolute position.
How can I fix this and make the div behave in LTR and RTL as mirror images?
If your div is aligned on the left side of the page, it can't do anything but expand to the right. If you set float: right, you can drag the handle and expand it to the left.
I inserted a working example here:
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
direction: rtl;
float: right;
}
<html>
<head>
</head>
<body>
<h1>Resizing LTR text.</h1>
<div>
<p>Drag the handle to the left and the div will expand to the left..</p>
</div>
</body>
</html>
class mdiv extends HTMLDivElement {
constructor(){
super();
}
// connect component
connectedCallback() {
this.attachShadow({ mode: "open" })
this.shadowRoot.innerHTML = `<div style="direction: rtl"> <slot></slot></div>`;
}
}
customElements.define("rtl-div", mdiv,{extends:'div'});
.kuku {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
position: absolute;
left:50px;
top:50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="kuku" is="rtl-div">kuku</div>
<div>This is a regular DIV</div>
</body>
</html>
No matter what I do, I cant get my website to center when looking at it in the browser :/. I've looked all over google/youtube and tried everything. Getting very annoyed with it at this point.
Heres the code:
<!doctype html>
<html>
<head>
<title>01_Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Save for Web Styles (01_Home.psd) -->
<style type="text/css">
<!--
#Table_01 {
overflow: hidden;
min-width: 1600px;
}
#id01-Home {
position:relative;
width:1600px;
height:8226px;
margin:0 auto;
}
-->
</style>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0; margin-right: 0px;">
<!-- Save for Web Slices (01_Home.psd) -->
<div id="Table_01">
<div id="id01-Home">
<img src="images/01_Home.jpg" width="1600" height="8226" alt="">
</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
I suggest you apply the following styles to your BODY tag:
text-align:center;
And then create an outer container (say DIV.container) with the following styles:
text-align:left;
width: 50%;
margin: 0 auto;
Remove all other styles until you have that working then re-add any styles that you require.
Here is an example:
https://jsfiddle.net/wshobaqh/
(sorry, I can't work out how to apply a snippet into SO)
For screens wider than 1600px (which seem to be your only concern) you can simply add margin: 0 auto; to #Table_01 to center it. But below that width you'll need a completely different approach.
Details depend on your actual content and layout which is not visible in your code - or is that image really your only content? If yes, I'd suggest to use percentage values for width (like 100% width for the image and its parent elements) to be able to view the whole image on smaller screens.
I have to write markup and CSS so that a background image doesn't produce a scrollbar. Only if the viewport is more narrow than the inner content wrapper, a scrollbar is created:
http://www.mcm.unisg.ch/
Doesn't work for me: Absolutely positioned div on right causing scrollbar when the left doesn't.
One of may vain attempts in a fixed layout:
#background {
width: auto;
margin-left: -75px;
margin-right: -75px;
}
An area that hang out of the containing block to the left (because of a negative margin) isn't reachable by scrolling to the left. Yes! But a negative margin-right creates a scrollbar in
case of a narrow viewport. How can I prevent the scrollbar as long as the viewpart is wider than the containing block?
The markup:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title> </title>
<link rel="stylesheet" type="text/css" href="css/general.css" media="screen, projection"/>
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="css/general-ie.css" media="screen"/>
<![endif]-->
</head>
<body>
<div id="page">
<img id="background" src="images/visual.jpg" alt="" />
<div id="head"><h1>Page title</h1></div><!-- /#head -->
<div id="mainpart">
<ul id="zones">
<li>
<ul>
<li class="module">Modul #1</li><!-- /#module -->
</ul>
</li>
</ul><!-- /#zones -->
<hr />
</div><!-- /#mainpart -->
<div id="foot"><h1>Footer</h1></div><!-- /#foot -->
</div><!-- /#page -->
</body>
</html>
The CSS rules:
body {
background: #000;
color: #000;
}
#page, #mainpart {
background: #fff;
}
#page {
width: 1024px;
margin: 0 auto;
position: relative;
}
#background {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: auto;
margin-left: -75px;
margin-right: -75px;
}
Can anybody give me some good adivce? Thank you.
To prevent scrollbars appearing use:
mySelector
{
overflow: hidden;
}
You can see it in all its glory here: jsFiddle example.
This quite an old post, but for all the Googlers out there:
This question (https://stackoverflow.com/questions/13326111/element-outside-container-without-creating-scrollbars) has some really good answers for this. If I understand your requirements.
You can do this with either a "fake body" element, or using breakpoints to just hide the content when the viewport is too small.
Both are straightforward options. If the content in you "hanging" panel only makes sense when you can see all/most of it, then the breakpoint option can save you some bandwidth, and possibly save the user some frustration.
To elaborate on the "fake body" option hinted on by mediaashley, it means to wrap your content including the overflowing element in an element like this:
#fakeBody {
width: 100%;
min-width: 1000px; // needs to match the main content’s width
overflow: hidden;
}
The width:100% means it will match the window’s width, but when the window gets smaller than min-width its overflow:hidden attribute will cut off the hanging-out content.