I have two divs that I have have positioned on the left and right sides of the screen (using float and/or absolute positioning, I have found many ways to position them). In the middle I have a single div that keeps the content of my website centered. My problem is that when I have my browser at a small width those outside divs are forced in and mess everything up in the center. When I have my browser at a small width I want a scroll bar to appear so that a user and scroll left or right to see the divs outside the center content. I am using overflow:scroll on the body element but that doesn't do anything. I also need to use
Here is the basic structure
<body>
<div id="navLeft">
<div id="navRight">
<centered content/all of webpage>
</body>
Here is the CSS for the body and side divs
body {
background: #A2F0FA url('images/bg_site.jpg');
background-repeat: repeat-x;
font: 13px Arial, Sans-Serif;
color: #525252;
overflow:scroll;
}
#navLeft {
border: 5px solid #fff;
width:220px;
height: 260px;
float:left;
position:absolute;
top:10%;
left:28%;
opacity:0.85;
}
#navRight {
border: 5px solid #fff;
width:220px;
height: 260px;
float:right;
position:absolute;
top:10%;
left:85%;
opacity:0.85;
}
you can try some negative margin on body's side.
but you won'nt be able to show the left aside on small screen so if content is important, you loose it :
body {margin:0 -220px ; /* width of aside element */.
Test the idea here
Best is to check via javaScript on load and resize width of window & body & if an horizontal scroll is there and its scrollright value.
Then reset the scrollright to a proper value without annoying your visitor.
Related
I made a top banner which is getting rendered in full width on web page, but when I try to see it in mobile view, the top banner gets shrieked by some percentage.
The html code written is like:
<style>
.top-banner {
width: 100%;
display: block;
text-align: center;
background: #fee768;
color: #555;
font-size: 16px;
padding: 10px 7px;
font-weight: 600;
}
.top-banner:hover {
text-decoration: none;
background: #ffc71f;
color: #846934;
}
</style>
<div>
<a href="https://www.youtube.com/...." target="_blank" class="top-banner">
Need help? Watch this Video
</a>
</div>
This works fine on the web page, but when I view the same page on mobile the top banner doesn't gets rendered in full width.
I tried adding position: fixed !important; to the .top-banner css class, using this the width gets fixed but the bottom content of the page gets shifted upwards, i.e. the bottom content of the webpage gets over the top banner.
Kindly suggest me some way to solve this issue.
If you don’t want other elements to appear above your top-banner, you can use
.top-banner {
z-index:1000
}
The higher the value of the z-index, the more the element appears on top of other elements.
did you tried removing padding and margin on mobile device ?
or
apply these style:
.parent-div{
display:flex;
height:320px;
width:100%;
}
.top-banner {
width:100%;
height:100%;
padding:0px;
margin:auto;
}
try to add important on your code
.top-banner{
width:100%!important;
}
it will force it to be 100% width
I think the reason is because "padding: 10px 7px;" take 7px more space in the left and right of the element.
To fix:
replace
padding: 10px 7px;
with this
padding: 10px 0;
I am nearing completion of my site http://csgoshack.com/shop/
I need to do one thing and this is to put a white box in the center of the screen so I am able to see the site.
I tried to do this by photoshoping a white box onto the background image but that didn't work.
How would I go about doing this?
.whitebg {
width: 1250px;
padding: 10px;
border: 1px solid black;
margin: 0;
background-color:#ffffff;
margin:auto;
position: absolute-center;
top:0;
}
First you would need to design your box using CSS and call it in using HTML.
HTML:
<div class="body-content">Insert Lists, Text, and other body content here</div>
CSS:
.body-content {
width:80%;
height:80%;
top:10%;
position:absolute;
background-color: white;
margin-left:auto;
margin-right:auto;
}
Adjust the width, the height, the positioning, and the colors to your specifications. I wouldn't change the margin-left and right because that centers the div inside of the body ( unless you don't want it exactly centered ).
Hope this helped!
I am having an issue with the horizontal line I have placed in my footer. I have another on my header but it is working fine. The issue begun when I stuck the footer to the bottom of the page. The horizontal line displays all the way across the screen rather than just in the container.
CSS :
footer {
text-align:center;
clear:both;
color:#B05510;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
#mcp {
width:175px;
-webkit-transition: width .5s;
margin:10px;
}
#mcp:hover {
transition: width .5s;
width:225px;
}
HTML:
<footer>
<hr>
<p>Copyright © sourceblockmc.net 2014 - All Rights Reserved<br>
<a href='https://clients.mcprohosting.com/aff.php?aff=8566'><img id='mcp'
src='images/mcp.png'</a></p>
</footer>
Issue pic : http://gyazo.com/3aeede809cffb0b6cc748b5ddf2efe8a
Although I don't recommend using Absolute Positioning for your footer. Here is the solution with your code. Position absolute breaks elements out of the documents normal flow.
The solution here makes the footer 75% same as the container, and then recentering it, with margin-left and margin-right.
footer {
text-align: center;
clear: both;
color: #B05510;
width: 75%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
The problem is the following bit from your CSS file:
footer {
...
width:100%;
...
}
This is causing your footer block to stretch across the entire width of the screen. Since the text is centered, you aren't able to tell, but if the text was longer, it would also extend beyond the boundaries of the grey section.
Simply change the width setting to the pixel width of the grey background (or smaller if you want some padding) and your problem will be solved. Assuming, for example, it's 950 pixels:
footer {
...
width:950px;
...
}
Edit
Since you're also using absolute positioning, you may have issues centering the footer after making this change. View this question for a possible solution: How to center absolutely positioned element in div? or don't use position: absolute and add margin: 0 auto; to align the footer in the horizontal center.
Here's what I'd like to do: have a banner across the top of a website which stretches all across. On the left is a menu, and on the right a logo image; the menu floats left, the image floats right.
The problem is the resizing of the browser window. Because the image floats right, it correctly moves as the window gets smaller. However, at some point it begins to float into the menu. Here is a Fiddle that illustrates this effect with two floating images. Resize the browser window to see how the two images overlap.
Setting
body {
min-width: 800px;
}
I can now make sure that the scrollbar appears as the browser window reaches a certain minimum width. However, that doesn't hinder the right-floating image to keep moving as the browser window keeps getting smaller. I tried to change position: relative but that didn't work. I tried to use Javascript to fixate the images once the browser window reaches its min-width but that didn't seem to have an impact either. Using min-width on the DIV and making the images children of the DIV didn't work either.
My question is: how can I make sure that, starting at a certain window size, the right-floating image stays put instead of floating into the left-floating menu?
EDIT: Oh dear, I forgot to mention a rather important detail: the menu bar at the top needs to be sticky. That is why I used the position: fixed property for the DIV. The other page content is supposed to scroll under that menu and out of the window, see the modified fiddle here which is based on ntgCleaner's answer. This kind-of changes the whole thing, doesn't it! Sorry about that...
Thanks!
A couple things I changed:
I made your banner DIV a container instead of just a free floating div. Probably not necessary.
I gave that banner div a min-width:280px and made it overflow:hidden;
I made the images just float left and right, not positioned relatively or absolute (since it's in the div container now).
#banner {
left: 0px;
top: 0px;
width: 100%;
height: 60px;
background-color: lightblue;
z-index: 1;
opacity: 0.8;
overflow:hidden;
min-width:280px;
}
#left {
float:left;
margin:5px;
height:40px;
}
#right {
float:right;
margin:5px;
height:40px;
}
Here's the fiddle
EDITED FOR THE EDITED QUESTION:
You will just need to place all of your content under your header into a div, then give that div a top margin of the height of your fixed div. In this caes, it's 60px.
Add this to your HTML
<div id="content">
this <br>
is <br>
some <br>
test <br>
text <br>
</div>
then add this to your CSS
#content {
margin:60px 0px 0px 0px;
}
Here's the new fiddle
Is this what you are after? http://jsfiddle.net/9wNEx/10/
You are not using the position: fixed correctly. Fixed means 'positioned relative to the viewport or browser window', and that is exactly what you are experiencing.
I removed the position: fixed from the images, and placed them inside the div. This should keep them always on top of the page, as they are inside the div that is still positioned fixed.
Also I tweaked some of the other styling to replicate your example. Note that i removed the fixed height of the head and replaced it by a padding bottom. This way the height will follow the content whenever the screen size becomes to small and the images are forced underneath each other.
The css looks like this now:
#banner {
left: 0px;
top: 0px;
width: 100%;
padding-bottom: 15px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8;
}
#left {
float: left;
margin-left: 10px;
margin-top: 5px;
height: 40px;
}
#right {
float: right;
margin-right: 10px;
margin-top: 5px;
height: 40px;
}
I changed your HTML to put the <img> tags inside the banner, and added the min-width to the #banner since it has position: fixed. You'll still need to add min-width to the body or a container that wraps all other elements if you want there to be a min-width of the entire page.
http://jsfiddle.net/Wexcode/s8bQL/
<div id="banner">
<img id="left" src="http://www.google.com/images/srpr/logo3w.png" />
<img id="right" src="http://www.google.com/images/srpr/logo3w.png" />
</div>
#banner {
width: 100%;
min-width: 800px;
height: 60px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8; }
#left {
float: left;
margin: 5px 0 0 10px;
height: 40px; }
#right {
float: right;
margin: 5px 10px 0 0;
height: 40px; }
When I look at your Fiddle I think your problem isn't the floats at all. position:fixed supersedes float. Those two elements aren't floating at all, they're in a fixed position (similar to an absolute position), which is why they overlap when they don't have enough room.
Take out float:left and float:right, the result will be the same. Also, top, left, bottom, and right don't work on non-positioned elements. So they are superfluous on your banner.
If you use floats, however, when there is not enough room the right image will wrap underneath the left. See http://codepen.io/morewry/pen/rjCGd. Assuming the heights on the images were set for jsfiddle testing only, all you need is:
.banner {
padding: 5px; /* don't repeat padding unnecessarily */
min-width: ??; /* to keep floats from wrapping, set one */
overflow: hidden; /* clearfix */
}
.right { float: right; } /* only need one float, don't over-complicate it with two */
Hi this is an easy noob question but I have to ask it anyway. See my fiddle:
http://jsfiddle.net/jjalbert/xXdev/
code:
<h1>Hi!</h1>
<p>Some more text</p>
<div id="bottomcorner"></div>
#bottomcorner {
position: fixed;
bottom:0;
right:0;
background-color:red;
width: 100px;
height: 100px;
}
h1 {
color: green;
font-size: 20px;
width: 200px;
font-weight: bold;
}
p {
color: blue;
width: 230px;
}
I have an element fixed to the bottom right but I want it to remain in a static position once a certain browser width is created so that it doesn't start interfering with the content to the left of it.
So in my fiddle once the browser window is about 330px wide I would want the red box to stay in place and become unfixed from the corner of the browser.
Check out CSS Media Queries. This should get the job done.
CSS Media Queries
#media all and (min-width: 300px) {
...css rules here...
}
You could float it right and put it inside of a div with a max-width, then fix the div's position at the bottom instead of the red box to the bottom right.