Working on a webpage that has one "div" which is aligned as center. I went through a bunch of methods to try and get it working the way that I want it to, and finally found the closest one. I have a working demo over here
FIDDLE
My only problem with it right now is that even when the content doesn't take up the whole content of the page, it still adds a scroll bar. I'm wondering if there's anyway to remove that? I believe it has to do with the jQuery method of centering the "div".
Javascript:
$(function() {
jQuery.fn.center = function() {
this.css("position", "fixed");
this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
return this;
}
$('#myDiv').center();
$(window).resize(function() {
$('#myDiv').center();
});
});
CSS
* {
margin: 0;
padding: 10px;
}
html,
body {
height: 100%;
}
body {
font-family: 'Josefin Sans';
text-align: center;
}
p {
font-size: 18px;
margin: 0 0 0.5em;
}
.centered-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
}
.centered {
background: #ccc;
border-radius: 8px;
margin: 0 auto;
padding: 20px;
width: 85%;
}
body{
overflow: hidden;
}
Vertical only:
body{
overflow-y: hidden;
}
Horizontal only:
body{
overflow-x: hidden;
}
Possible duplicate: Hiding the scrollbar on an HTML page
Setting overflow to hidden may solve the scrollbar not appear but in that case it may not be fully vertically centered.
Instead you can not set padding on all elements, like you do with
* {
margin: 0;
padding: 10px;
}
It makes your body element and .content-wrapper to have extra padding of 10px that adds to its height and makes the scrollbar appear, if you set this padding to 0 the scrollbar disapears, check on your fiddle.
So for your example you could set your css like
body, html {
margin: 0;
padding: 0;
}
p, h1, h2, h3, h4, span, br, hr {
margin: 0px;
padding: 10px;
}
html,
body {
height: 100%;
margin: 0;
}
body {
font-family: 'Josefin Sans';
text-align: center;
}
p {
font-size: 18px;
margin: 0 0 0.5em;
}
.centered-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
}
.centered {
background: #ccc;
border-radius: 8px;
margin: 0 auto;
padding: 20px;
width: 85%;
}
/*
Button
*/
.btn {
-webkit-border-radius: 8;
-moz-border-radius: 8;
border-radius: 8px;
font-family: Arial;
color: black;
font-size: 18px;
background: #ccc;
padding: 10px 20px 10px 20px;
text-decoration: none;
outline: none;
}
.btn:hover {
background: #bbb;
text-decoration: none;
}
In that case scrollbar won't appear.
Instead of setting margins and paddings on all elements with * use something like css style reset. Google for it. Then apply padding only on those elements you really need.
html,
body {
position: fixed;
top:00;
left:0;
bottom:0;
right:0;
}
Here is your updated demo
set overflow to hidden; this may solve it.
Related
So I think the solution I need is to extend the wrapper div to the right of the page without wrapping. If I set the width to width: 100vw or width: 100%, all of the content within the div move below all the other content.
looks kinda weird but here's the fiddle: https://jsfiddle.net/8u3Lzjxw/
what happens if you set width to 100% or 100vh
wrapper should extend to cover all highlighted in green. The height is not a problem as it's not being interfered with.
Relevant HTML:
<div class="active-sockets">
<h1 class="active">Active Sockets</h1>
<div class="wrapper">
<div class="socket">
<h2 class="socket-name">Lorem Ispum</h2>
</div>
</div>
</div>
CSS:
.wrapper {
display: inline-flex;
flex-wrap: nowrap;
float: left;
margin: 0;
width: 100%;
}
.socket {
background-color: rgb(24, 24, 24);
margin: .2em;
padding: .8em;
border-top-left-radius: .5em;
border-bottom-left-radius: .5em;
width: 100%;
margin: 0;
margin-top: 1em;
}
.active-sockets {
float: left;
margin: 1em;
height: 100vh;
}
.active {
background-color: rgb(24, 24, 24);
color: white;
font-family: 'Poppins', sans-serif;
margin: 0;
padding: .5em;
border-top-left-radius: .25em;
border-bottom-left-radius: .25em;
width: 100%;
}
there are several ways to structure a page like this. To keep inline with what you have, there are a couple CSS properties that need to change in your fiddle.
Since the side-bar has a width of 2em, then the margin of the active sockets needs to be at least 3em. And also, if you want it to snap to the top, then remove the top margin. This is what the style will look like:
.active-sockets {
float: left;
margin: 0 1em 1em 3em;
height: 100vh;
width: 100%;
}
you also want to take away the padding of the side bar:
.side-bar {
background-color: rgb(24, 24, 24);
padding: 0;
width: 2em;
height: 100%;
position: relative;
float: left;
}
I'm encountering issues when it comes to changing the browser size because the content starts going off. I've done some research and tried with #wrapper but I cant' figure it out. How do I do to scale my page content when the browser is resized?
http://philome.la/gapp06gt/c3gua9/play
body {
background-color: #DCDCDC;
background-size:98%;
background-repeat: repeat-y;
background-position:center;
}
#wrapper {
width: 100%;
max-width: 100%;
display: block;
height: 100%;
max-height: 100%;
}
tw-link {
width: 40%;
padding: 1.5em;
margin: auto;
border: ridge #191970 0.4em;
border-radius: 0.2em;
font-family: Verdana;
font-size: 0.75rem;
color: #000;
text-align: center;
background-color: #fff;
}
tw-passage {
width: 100%;
padding: 2em;
margin: auto;
border: solid #000 0.05em;
border-radius: 0.2em;
font-family: Lucida Console;
;font-size: 1.5rem;
color: #000;
text-align: left;
background-color: #fff;
box-shadow: #000 0.2em 0.2em 0;
*{margin: 0;
padding: 0;
}}
tw-icon {
opacity: 1;
color: red;
}
tw-sidebar {
color:;
border:;
padding-bottom: 0.8em;
border-radius: 25%;
background-image:;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
You can use CSS media queries to progressively widen your container and reduce it's padding, as the viewport becomes more narrow. The idea is to adapt the layout to whatever is most appropriate for each screen size, so simply scaling down your entire layout isn't necessarily ideal.
#media all and (max-width: 1000px) {
tw-story { width: 70%; }
tw-passage { padding 5%; }
}
#media all and (max-width: 850px) {
tw-story { width: 80%; }
}
#media all and (max-width: 750px) {
tw-story { width: 90%; }
}
/* etc. */
You can also make the img elements responsive, like this:
img {
width: 100%;
height: auto;
}
If you don't want to use media queries to progressively change the size of your text, then you could try the FitText jQuery plugin. I recommend only using this on heading text through, not your smaller body copy. The author even issues a warning against this: "Don't you dare let us catch you using FitText on paragraph text. This is for gigantic display text only!"
You probably want to look into the position property
So I looked a bit over your code, and I don't get one thing. on tw-align you have max-width:50%. Any reason for that? If not, change it to max-width:100% on all of the tw-align.
On 700px resolution, you should decrease the padding of tw-passage to 1em or something else, and your content should be responsive.
I'm learning web development with responsive design(still a noob) so please go easy! I will try to be as thorough as possible but please let me know if you need more information!
So I'm trying to design a page which has jquery hover effects on images. You would think I'm having trouble in the JS but my problem is much simpler which makes it frustrating like hell. I want my images to align in the center while they're aligned to the extreme left. the image boxes are li's and I've tried to add them to a div and align the div to the center.
Please note that I also need it to be responsive so can't simply add a margin or padding.
Following is my html body:
<body>
<div class="body">
<div> <img src="images/logo.png" class="image"></div>
<div class="imgs">
<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
<img src="images/7.jpg" />
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
</li>
<li>
<a href="http://dribbble.com/shots/501695-Cornwall-Map">
<img src="images/9.jpg" />
<div><span>Cornwall Map by Katharina Maria Zimmermann</span></div>
</a>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function() {
$(' #da-thumbs > li ').each( function() { $(this).hoverdir({
hoverDelay : 75
}); } );
});
</script>
</body>
Here is my CSS:
.body {
width: 100%;
height: 1000px;
animation-name: colorChange;
animation-duration: 10s;
animation-iteration-count: infinite;
text-align: center;
}
#keyframes colorChange {
0% {
background: #4BB4BF;
}
20% {
background: #306F7A;
}
40% {
background: #207DFF;
}
60% {
background: #1B98E0;
}
80% {
background: #7EA0E0;
}
100% {
background: #4BB4BF;
}
}
.button {
padding: 10px;
margin-top: 40px;
font-size: 20px;
}
.da-thumbs {
list-style: none;
width: 100%;
height: 100%;
position: relative;
margin: 20px auto;
padding: 0;
}
.da-thumbs li {
float: left;
margin: 5px;
background: #fff;
padding: 8px;
position: relative;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs li a,
.da-thumbs li a img {
display: block;
position: relative;
}
.da-thumbs li a {
overflow: hidden;
}
.da-thumbs li a div {
position: absolute;
background: #333;
background: rgba(75,75,75,0.7);
width: 100%;
height: 100%;
}
.da-thumbs li a div span {
display: block;
padding: 10px 0;
margin: 40px 20px 20px 20px;
text-transform: uppercase;
font-weight: normal;
color: rgba(255,255,255,0.9);
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(255,255,255,0.5);
box-shadow: 0 1px 0 rgba(0,0,0,0.1), 0 -10px 0 rgba(255,255,255,0.3);
}
<!-- Demo content here -->
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* General Demo Style */
body{
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
font-weight: 400;
font-size: 15px;
}
a{
color: #555;
text-decoration: none;
}
.container{
width: 100%;
position: relative;
min-height: 750px;
}
.clr{
clear: both;
padding: 0;
height: 0;
margin: 0;
}
.image {
max-width: 100%;
max-height: 100%;
background-size: cover;
}
.imgs {margin: 0 auto;
align: center;
}
Please give your thoughts on how I can align these elements?
Fiddle Case:
https://jsfiddle.net/eqyfm41r/3/
Your edited code:
.da-thumbs li {
display:inline-block;
width:46%;
margin: 5px;
padding: 8px;
position: relative;
}
.da-thumbs li img{
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
JSFiddle here: https://jsfiddle.net/1zq95tzp/
You were floating the li's for one thing, also you want to add the box shadows to the images, not the li. The reason for this is that the li is going to be larger than the image, so the box shadow will appear far away from the edges of the actual image. As the screen shrinks, the images will stack. You may need to eventually give the images this styling:
max-width:100%;
so that they don't go off the page at phone width (I didn't look at the size of the images). Hope this helps you.
Can't you do:
margin-left: auto; margin-right: auto;
? This would be responsive, it's not a fixed margin.
I am trying implement a google maps view in a tab. I am using Google's Material Design Lite framework for the tabs.
I had a couple of problems for which I consulted the following SO questions. Neither offered perfect solutions but they did partially fix my issues.
Google Map Infowindow not showing properly
Problems with Google Maps API v3 + jQuery UI Tabs
However, some nagging bugs persist.
The first one regards the rendering of the map itself. I was having the usual map appearing in the top left corner only issue. I rearranged my javascript code like so:
$(function() {
$('.map-tab').click(function() {
initialize();
})
});
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
}
body {
font-family: sans-serif;
background: #eee;
}
a,
h1,
h2 {
color: #377ba8;
text-decoration: none;
}
h1,
h2 {
font-family: 'Georgia', serif;
margin: 0;
}
h1 {
border-bottom: 2px solid #eee;
}
h2 {
font-size: 1.2em;
}
fieldset {
/*float: left;*/
clear: both;
width: 100%;
margin: 0 0 -1em 0;
padding: 0 0 1em 0;
border-style: none;
border-top: 1px solid #BFBAB0;
/*background-color: #F2EFE9;*/
}
legend {
margin-left: 1em;
color: #000000;
font-weight: bold;
}
legend span {
/*position: absolute;*/
/*margin-top: 0.5em;*/
/*font-size: 135%;*/
}
fieldset ol {
padding: 0 0 0 2em;
list-style: none;
}
ul {
padding: 0 1em 0 1em;
list-style: none;
}
fieldset li div {
float: left;
clear: left;
width: 100%;
padding-bottom: 1em;
}
fieldset.submit {
float: none;
width: auto;
border: 0 none #FFF;
padding-left: 12em;
}
label {
float: left;
width: 10em;
margin-right: 1em;
text-align: right;
}
img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto\9;
/* ie8 */
}
td {
border: 1px;
}
.page {
margin: 2em auto;
width: 65em;
/*border: 5px solid #ccc;*/
/*padding: 0.8em;*/
background: white;
}
.mdl-layout__content {
background: white;
}
.entries {
list-style: none;
margin: 0;
padding: 0;
}
.entries li {
margin: 0.8em 1.2em;
}
.entries li h2 {
margin-left: -1em;
}
.add-entry {
font-size: 0.9em;
border-bottom: 1px solid #ccc;
}
.add-entry dl {
font-weight: bold;
}
.metanav {
/*text-align: right; font-size: 0.8em;*/
padding: 0.3em;
margin-bottom: 1em;
background: #fafafa;
}
.flash {
background: #cee5F5;
padding: 0.5em;
border: 1px solid #aacbe2;
}
.error {
background: #f0d6d6;
padding: 0.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-blue.min.css" rel="stylesheet" />
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://maps.googleapis.com/maps/api/js?v=3.20"></script>
<style type="text/css">
#map {
width: auto;
/*500px;*/
height: 400px;
overflow: hidden;
max-width: none;
/*background-color: #CCC;*/
}
#map img {
max-width: none;
}
</style>
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar">
Listings
Map View
Compare Selections
</div>
<div class="mdl-tabs__panel is-active" id="listings-panel">
</div>
<div class="mdl-tabs__panel" id="map-panel">
<div id="map"></div>
</div>
<div class="mdl-tabs__panel" id="compare-panel">
</div>
</div>
This renders the map part nicely on initial viewing. But once you start switching around the tabs, it returns to only rendering on the top corner of the canvas. (However if you click on the map's tab a second time in succession, it renders perfectly again.)
The second issue is that the map controls appear squished vertically. The only fix I could find was to set the max-width of the img to none. I have tried that but to no avail.
The code snippet above illustrates the issue I am having pretty well. Any ideas on how to fix this would be greatly appreciated!
Your problems are
You have this css applying to img which is corrupting the controls:
img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto\9;
/* ie8 */
}
You need to override both max-width and max-height
#map img {
max-width: none !important;
max-height: none !important;
}
You need to trigger the map resize event once your tab is displayed
proof of concept fiddle
this is my CSS:
<style type="text/css">
body
{
background: #edeff8 url(sidebar.left.bg.gif) top left repeat-y;
margin: 0;
padding: 0;
/* IE 6.0 Addition */
height: 100%;
}
/* IE requires the position to be absolute otherwise the div will render below */
/* the mainContainer div on the page and not under it in the z axis */
#bg
{
position: absolute;
background-image: url(sidebar.left.bg.gif);
background-position: top left;
background-repeat: repeat-y;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 960px;
/* IE 6.0 requires the -1 z-index so that the bg will render behind the scroll bar */
z-index: -1;
}
body > #bg
{
position: relative;
z-index: 1;
}
#mainContainer
{
position: relative;
min-width: 960px;
top: 0;
left: 0;
z-index: 2;
}
#header
{
background-color: #0000ac;
background-image: url(header.bg.jpg);
background-position: top;
background-repeat: repeat-x;
margin: 0;
padding: 10px;
}
#centerRightColumnContainer
{
margin: 0;
padding: 0;
float: left;
width: 100%;
}
#centerRightColumnPositioner
{
margin-left: 190px; /* To fit the left side bar */
padding: 0;
}
#sideBarLeft
{
float: left;
width: 190px; /* Total width: 190px - padding *2 = 170px; */
/*margin-left: -100%;*/
position: fixed;
height: 100%;
padding: 0;
background-color : maroon;
}
#centerColumnContainer
{
float: left;
width: 100%;
height: 100%;
position: fixed;
background-color : black;
}
#centerColumn
{
/* margin-right: 260px; */
padding: 10px;
}
/*
* ----------------------------------------------------------------------------
* NBI Layout/Design styles
*/
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 17px;
margin: 0;
padding: 0;
}
h1, h2, h4
{
text-align: center;
color: #ffffff;
}
h1
{
font-size: 2em;
line-height: 1em;
}
h4 a, h4 a:visited
{
color: #d9dcec;
}
h4 a:hover
{
color: #ffffff;
text-decoration: none;
}
h2
{
font-size: 18px;
}
p
{
margin-top: 0px;
margin-bottom: 20px;
}
.clear_both
{
clear: both;
}
.code
{
font-family:"Courier New", Courier, monospace;
}
#w3cButtons
{
width: 196px;
margin: 20px auto;
padding: 0;
}
#markupBtn
{
margin: 0 10px 0 0;
padding: 0;
width: 88px;
float: left;
}
#cssBtn
{
margin: 0 0 0 10px;
padding: 0;
width: 88px;
float: left;
}
/* IE 6.0: For some reason, if you just specify padding here it'll add 10 px */
/* to the entire layout and cause the page to scroll horizontally. So we have */
/* to specify the width and then set a margin on it. The width is equal to */
/* the width of the column, 190px - the 10px margin * 2 */
#sideBarLeft p
{
margin: 10px auto;
width: 170px;
}
/* We need to shave off a pixel from the width of the ul. This then renders */
/* list inside this columns bg image. */
#sideBarLeft ul
{
margin: 0;
padding: 0;
border-bottom: #978e7c 1px solid;
width: 189px;
}
/* IE fix for additional padding that otherwise get's rendered between list items */
#sideBarLeft ul li
{
height: 1%;
margin: 0;
padding: 0;
list-style-type: none;
}
#rightColumnBg > #sideBarLeft
{
height: auto;
}
#sideBarLeft ul li a, #sideBarLeft ul li a:visited
{
display: block;
border-top: #978e7c 1px solid;
padding: 5px 10px;
background-image: url(sidenav.bg.gif);
background-position: bottom;
background-repeat:repeat-x;
background-color: #fffbf7;
color: #59503e;
text-decoration: none;
font-weight: bold;
}
#sideBarLeft ul li a:hover
{
color: #000000;
text-decoration: underline;
}
</style>
<!--[if IE 7]>
<style type="text/css">
/* If we are using IE 7 we must override our position attribute for our #bg div */
body > #bg
{
position: absolute;
}
</style>
<![endif]-->
And here's the javascript :
<script language="javascript" type="text/javascript">
function resize_bg_div(){
// This function will determine which of the three columns or the window.height
// is the largest and then set the bg div to be that height.
// This assumes that any div markup that is above our columns is wrapped
// in a single div with the id=header
var var_bg_offset = document.getElementById('header').offsetHeight;
// First we create an array and add to it the heights of each of the three columns
// and the window height
array_colHeights = new Array( );
array_colHeights.push( document.getElementById("sideBarLeft").offsetHeight );
array_colHeights.push( document.getElementById("centerColumn").offsetHeight );
// Instead of the raw window.innerHeight we need to take into account the offset size
// of our header divs
array_colHeights.push( window.innerHeight - var_bg_offset );
// Sorting our array in descending order
array_colHeights.sort( function( a, b ){ } );
// Now we'll set our bg div to the height of our largest div or window height
document.getElementById('bg').style.height = array_colHeights[0] + "px";
delete array_colHeights;
delete var_bg_offset;
}
window.onload = resize_bg_div;
window.onresize = resize_bg_div;
</script>
finally the HTML :
<div id="mainContainer">
<div id="header">
<h4>By: Ryan Chapin</h4>
</div>
<!-- The conainter divs for the center and the right columns -->
<div id="centerRightColumnContainer">
<div id="centerRightColumnPositioner">
<div id="centerColumnContainer">
<div id="centerColumn">
<p>If you are a practical web designer that is looking to use a fully compliant CSS layout that:</p>
</div>
<!-- centerColumn, END -->
</div>
<!-- centerColumnContainer, END -->
</div>
<!-- centerRightColumnPositioner, END -->
</div>
<!-- centerRightColumnContainer, END -->
<!-- The left column div -->
<div id="sideBarLeft">
<p>This is some sample text to go in the side bar</p>
<ul>
<li>Home</li>
<li>Open Source</li>
<li>Contact</li>
</ul>
</div>
<!-- sideBarLeft, END -->
</div>
<!-- mainContainer, END -->
Now the problem is that when i resize the browser and move the scroll bar (y-axis) my header moves upwards and it will leave a white div-like portion on top of my other containers. how to fix this so that when i minimize my browser the header never animates like that. Here a sample Fiddle