This is my WordPress Starter Theme: http://starter.devurl.net/
Relevant HTML:
<html>
<body>
<ul class="skiplinks">...</ul>
<div id="site-wrap">
<!-- content here -->
</div>
</body>
</html>
Relevant CSS:
body {
direction: rtl;
overflow-x: hidden;
}
#site-wrap {
position: relative;
min-height: 100%;
transform: translateX(-250px);
}
Viewing the website in mobile (in Chrome's Devtools).
body has overflow-x: hidden;
div#site-wrap has transform: translateX(-250px);
As far as I grasp the idea, #site-wrap suppose to move to the left and leave a blank space at the right, without any horizontal scroll to the sides.
Notice the website direction is RTL, but it's not supposed be a problem, and I'd like to keep it that way without using ltr anywhere in the document.
Thank you!
In my experience with mobile, due to the way they render various things, you sometimes need to address the html element as well to ensure things work properly.
This is what it looks like (before fix) on a Samsung Galaxy (I've added borders to elements to illustrate what's happening):
Black: html element
Green: Body element
Red: site-wrap element
Blue: skiplinks element
Notice that the body and html are actually only the right 250px.
By adding this:
html {
overflow-x: hidden;
}
the problem seems to be resolved:
I'm sure someone smarter than I am will be able to explain why!
Related
I have a simple page with a nested div containing content and button below it, that seems look fine on Safari and Firefox but was having issues on Chrome with the vertical alignment - two elements superimpose on each other due to the min-h-inherit not working(i.e inheriting) as expected.
HTML:
<div id="cont" class="flex flex-col min-h-inherit">
<div>
...
</div>
</div>
CSS:
body {
min-height: -webkit-fill-available;
}
#cont{
position: relative;
}
A workaround was to specifically include h-screen in the cont div but this seems to break the functionality on Safari, by adding a scroll bar to the page and increasing the relative height between the div's.
However, this issue seemed to resolve a bit when adding display: flex to the body, however this seems to break in certain screen sizes:
body {
min-height: -webkit-fill-available;
display: flex;
}
Spent a lot of time trying to get the inheritance to work as expected by referring to existing answers regarding this webkit bug/functionality. Don't understand what the best way to resolve this is.
New to CSS so would really appreciate if someone could shed some light on this. Thanks!
I'm using Skeleton CSS Boilerplate
Two different pages of my website, similarly structured, are slightly laterally shifted away from each other. This is causing a jarring effect in the navigation bar when navigating from one page to the other.
Upon investigation, I noticed in the Chrome Dev Tools CSS inspector that the body tag of each page is a different width.
The structure of both pages is the same, shown below. The class .wrap has a max width of 960px, and all the content is contained within .container .wrap.
<body>
<?php
require 'navsub.php';
?>
<div class="container wrap" id="singlepageajax">
</div>
<?php
include 'footer.php';
?>
</body>
So... what could be causing the body tags to be different widths?
Add the following CSS code
html, body {
height: 100%;
overflow: hidden;
}
then add a <div id="container-wrapper"> to wrap up the container
place its CSS like
#container-wrapper {
height: 100%;
overflow-x: auto;
position: absolute;
width: 100%;
}
this will enables the scrolling again
Vertical scroll bar is the cause.
The body element will shrink in horizontal direction to add some free space for the scroll bar, as the browser window has fixed amount of horizontal space.
UPDATE
If you want to prevent this behaviour, you may use:
body{
overflow: hidden;
}
But you may lose the scrolling feature of your browser on the page.
Can someone help me I'm searching for css/html code example:
I have a webpage with 3 buttons(top, middle, bottom) each specified to 1 div section on my page, lets say my first div section is in the middle of that page div id='middle'.
If I click this button(middle) my page would automatically scroll down from the top
of my page to the div #middle section.
same for the other buttons refered to div id='top', and div id='bottom'
Thanks in forward! I really couldnt find any solution on the internet.
Is there a way to keep my buttonlist on a fixed position so it stays on screen while
moving through sections?
try this:
<input type="button" onClick="document.getElementById('middle').scrollIntoView();" />
For something really basic use this:
Go To Middle
Or for something simple in javascript check out this jQuery plugin ScrollTo. Quite useful for scrolling smoothly.
There is a much easier way to get the smooth scroll effect without javascript.
In your CSS just target the entire html tag and give it scroll-behavior: smooth;
html {
scroll-behavior: smooth;
}
a {
text-decoration: none;
color: black;
}
#down {
margin-top: 100%;
padding-bottom: 25%;
}
<html>
Click Here to Smoothly Scroll Down
<div id="down">
<h1>You are down!</h1>
</div>
</html
The "scroll-behavior" is telling the page how it should scroll and is so much easier than using javascript. Javascript will give you more options on speed and the smoothness but this will deliver without all of the confusing code.
HTML
Top
Middle
Bottom
<div id="top">Top</div>
<div id="middle">Middle</div>
<div id="bottom">Bottom</div>
CSS
#top,#middle,#bottom{
height: 600px;
width: 300px;
background: green;
}
Example http://jsfiddle.net/x4wDk/
Try this:
Scroll to top
If you want smooth scrolling:
html {
scroll-behavior: smooth;
}
I've got a CSS :hover pseudo-class that is not producing any results.
I was messing around with some image gallery code, and I've managed to get this snippet that doesn't work. I can't figure out why. Some of the weirder CSS rules regarding size here are because these divs normally contain images. I removed the images for simplicity, but left the rules in.
Other :hover elements on the same page are working.
I'm not sure what else to say about the problem, since this is so basic. I'm probably missing something really obvious.
JSFiddle here -
http://jsfiddle.net/GbxCM/
In some cases (mostly with absolute positioning), you cannot apply a :hover pseudo-class to something with display: inline-block;. (If you have Chrome, use inspect element and add the :hover trait yourself--notice, it will work perfectly! The browser just doesn't register the :hover itself.)
So, I went ahead and replaced this with float: left;, added a margin (to simulate the inline-block look), and changed the br to a clear. The result is in this jsFiddle.
If I'm guessing correctly what you're trying to do, then you don't need to change the positioning or any of that. The only change I can see you wanting to make is changing the background color. Here's the fiddle I made to clarify that response.
Here's the code for readability's sake:
HTML
<div class="wrapper">
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
<br>
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
</div>
CSS
.wrapper {
height: 600px;
width: 600px;
overflow: hidden;
position: relative;
}
.squareswrapsolo {
height: 100px;
width: 100px;
display: inline-block;
overflow: hidden;
background: #ccc;
}
.squareswrapsolo:hover {
background: #000;
}
For me The problem was with my Chrome setting, I was testing my multi-platform web application with chrome in Mobile view for which the hover event is by-default disabled.
You can disable the Mobile mode by clicking the mobile icon in the top-left of Elements tabs as shown in image.
Moreover, to check if your :hover event is setting the desired css property or not you can force-trigger the hover event from chrome (by checking hover in styles> :hov> hover red marked in image) and check if the :hover CSS property is working or not. For me it was working fine so I was sure that the event is not triggering.
I fixed it with removing a z-index: -1 from a wrapper element
Alright, I understand that the purpose of a DIV is to contain its inner elements - I didn't want to upset anyone by saying otherwise. However, please consider the following scenario:
My web page (which only takes up a width of 70% of the entire page) is surrounded by a container (a div). However, under my navigation bar which is at the top of the page, I would like to create w banner that takes up 100% of the width of the entire page (which means it will have to extend outside the bounds of its container as the container is only taking up 70% of the page's width).
This is the basic idea that I am trying to accomplish: http://www.petersonassociates.biz/
Does anyone have any suggestions for how I could accomplish this? I'd appreciate any help.
Evan
If you just want the background of the element to extend across the whole page this can also be achieved with negative margins.
In a nutshell (correction from comment):
.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
That gives you horizontal scroll bars which you remove with:
body {overflow-x: hidden; }
There is a guide at http://www.sitepoint.com/css-extend-full-width-bars/.
It might be more semantic to do this with psuedo elements: http://css-tricks.com/full-browser-width-bars/
EDIT (2019):
There is a new trick to get a full bleed using this CSS utility:
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
I guess all solutions are kind of outdated.
The easiest way to escape the bounds of an element is by adding:
margin-left: calc(~"-50vw + 50%");
margin-right: calc(~"-50vw + 50%");
discussion can be found here and here. There is also a nice solution for the upcoming grid-layouts.
If I understood correctly,
style="width: 100%; position:absolute;"
should achieve what you're going for.
There are a couple of ways you could do this.
Absolute Positioning
Like others have suggested, if you give the element that you want to stretch across the page CSS properties of 100% width and absolute position, it will span the entire width of the page.
However, it will also be situated at the top of the page, probably obscuring your other content, which won't make room for your now 100% content. Absolute positioning removes the element from the document flow, so it will act as though your newly positioned content doesn't exist. Unless you're prepared to calculate exactly where your new element should be and make room for it, this is probably not the best way.
Images: you can also use a collection of images to get at what you want, but good luck updating it or making changes to the height of any part of your page, etc. Again, not great for maintainability.
Nested DIVs
This is how I would suggest you do it. Before we worry about any of the 100% width stuff, I'll first show you how to set up the 70% centered look.
<div class="header">
<div class="center">
// Header content
</div>
</div>
<div class="mainContent">
<div class="center">
// Main content
</div>
</div>
<div class="footer">
<div class="center">
// Footer content
</div>
</div>
With CSS like this:
.center {
width: 70%;
margin: 0 auto;
}
Now you have what appears to be a container around your centered content, when in reality each row of content moving down the page is made up of a containing div, with a semantic and descriptive class (like header, mainContent, etc.), with a "center" class inside of it.
With that set up, making the header appear to "break out of the container div" is as easy as:
.header {
background-color: navy;
}
And the color reaches to the edges of the page. If for some reason you want the content itself to stretch across the page, you could do:
.header .center {
width: auto;
}
And that style would override the .center style, and make the header's content extend to the edges of the page.
Good luck!
The more semantically correct way of doing this is to put your header outside of your main container, avoiding the position:absolute.
Example:
<html>
<head>
<title>A title</title>
<style type="text/css">
.main-content {
width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<header><!-- Some header stuff --></header>
<section class="main-content"><!-- Content you already have that takes up 70% --></section>
<body>
</html>
The other method (keeping it in <section class="main-content">) is as you said, incorrect, as a div (or section) is supposed to contain elements, not have them extend out of bounds of their parent div/section. You'll also face problems in IE (I believe anything 7 or below, this might just be IE6 or less though) if your child div extends outside the parent div.