I'm building a non-responsive website with a header a footer that spans the full width of the browser window. Inside of the DIV's with a width of 100%, I nested divs with a width of 1000px that holds the header, navigation and footer contents.
My problem is that when viewing the site on a mobile device, the navigation and footer are being scaled downed to a size that is slightly smaller than the header and main area of the site.
What's strange is that the navigation and footer are affected while their is no issue with the header (that is built with the same approach).
How can I get everything to scale proportionally? The width of the entire site and all of the main divs is 1000px so why are they coming out in different sizes on mobile devices?
Here is the site's URL: http://www.test-site.co.nf
Here is a code sample:
HTML:
</head>
<body>
<div id="container">
<div id="header">
<div id="header-content">
<div id="logo">
<img src="img/ama-party-rentals-logo.png" height="98" width="500"/>
</div>
<div id="social-icons">
<img class="social" src="img/icons/facebook.png" height="40" width="40"/>
<img class="social" src="img/icons/googleplus.png" height="40" width="40"/>
</div>
</div>
</div>
<div id="nav-bar">
<div id="nav">
<ul id="ul-nav">
<li>Home</li>
<li>Products</li>
<li>Company</li>
<li>Past Events</li>
<li>Contact Us</li>
<li>Francais</li>
</ul>
</div>
</div>
CSS:
#header {
background-color:#84B13F;
width:100%;
height:150px;
border-bottom-style:solid;
border-bottom-color:#648830;
border-bottom-width:5px;
}
#header-content
{
width:1000px;
height:150px;
text-align:center;
margin:auto;
background-image:url('img/top-banner.png');
}
#nav-bar
{
width:100%;
height:50px;
background-color:#84B13F;
border-bottom-style:solid;
border-bottom-color:#648830;
border-bottom-width:5px;
}
#nav
{
clear:both;
margin:auto;
height:50px;
width:1000px;
text-align:center;
}
Ok so I figured it out:
My problem was that I had a container DIV that is wrapping the whole site. In that container I had height set to 100% but no width defined. I set the min-width to 1020px and voila; no more broken, cutoff divs. my header and footer divs that are set to 100% width scale down but the scaling stops at 1020px in width for the entire site so all of my content displays the way I intended it to on mobiles and desktop. Thanks to all who responded!
I can see two issue in your site.
1) in css cass boxes-div have width 1000 and margin-left: 20px. So the actual 1000px + 20px total 1020px which is out of your layout.
2) your nav size is 1020px but your header is 1000px so when you are at mobile or a small device (max screen 999px) showing only 1000px which is little bit small then the full site.
Change the width of the header to 1020px that should solve the issue.
To be more specific
#header-content{
padding: 0px 10px;
/**your present css**/
}
Just update your #header-content add the padding and your site is fixed.
Related
I am using the Bootstrap .container class to center content on the screen and fix it's width at something suitable for the viewport. That's fine, however I now want to wrap that container in a single, centered column that has 100% height. I want the height to be at least 100% of the viewport. It should expand when the content does not fix on a single screen.
I have looked at general solutions that set the height of the html and body element to be at least the height of the screen, but these do not seem to work in Bootstrap. I suspect it has something to do with box-sizing set to border-box.
Here is an example of the html:
<div class='my-col'>
<div class='container'>
<p>My content goes here</p>
</div>
</div
Use min-height: 100vh.
vh is a viewport unit: 1 vh is equal to 1% of the height of the display.
I don't know if this really help you. I can't put a bootstrap in this fiddle, I just don't know how to do that. So will you please do this on your own console, i did this trick to get my content 100% height.
here we go:
html{
margin:0;
height:100%;}
body{
display:flex;
flex-direction:column;
height:100%;
padding:0;
margin:0;
background:yellow;
}
header{
flex:0 1 80px;
background:#ddd;
}
section#containerWrap{
flex:1 1 auto;
height:100%;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
background:#ccc;
position:relative;
}
section#containerWrap .container{
height:100%;}
footer{
flex:0 1 40px;
background:#999;
}
<body>
<header>header is about nav and logo</header>
<section id="containerWrap">
<div class="container">
<p>very long content should be flexible in here</p>
<p>very long content should be flexible in here</p>
<p>very long content should be flexible in here</p>
</div>
</section>
<footer>the footer, website map, and more like contact us</footer>
</body>
it will set your footer absolutely in the bottom of the screen, you don't need to set the footer it self to position absolute or fixed what i did is, i stretch the container and take the rest of the height from header and footer.
maybe i can say it something like this
container height - (header height + footer height).
wish it will help you.
try this code for your problem
body,html{
height:100%;
}
.my-col{
height:100%;
background:green;
}
.container{
height:100%;
background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css" />
<div class='my-col'>
<div class='container'>
<p>My content goes here</p>
</div>
</div
have a look on codepen also
http://codepen.io/anon/pen/jyObgP#anon-login
My site consists of a side menu div and a main content div. I've floated the divs left and used percentages so that the columns fill the entire page. However I'm also using min-widths because I want the side menu to be no smaller than 205px wide and the main content to be no smaller than 780px. The site needs to be no smaller than 985px wide however I still want the content to be flexible enough to fill the screen.
My problem is when I resize the window (less than 985px wide) the main content div moves underneath the side menu. Where am I going wrong?, The div should stay in the same position, next to the side menu, but the horizontal scroll bar should kick in. The content should then fill the screen.
Fiddle
THE HTML:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="wrapper">
<div id="side-bar">
<p>side bar</p>
</div>
<div id="main-content">
<div id="content">
<p>some content</p>
</div>
</div>
</div>
</body>
</html>
THE CSS:
body
{
margin:0;
padding:0;
font-size:100%;
font-family:Arial;
}
p
{
margin:0;
padding:0;
}
#wrapper
{
width:100%;
min-width:985px; /*site no smaller than 985px wide*/
height:auto;
}
#side-bar
{
width:15%;
min-width:205px; /*nav sidebar no smaller than 205px wide*/
min-height:672px;
background-color:Gray;
float:left;
}
#main-content
{
width:85%;
min-width:780px;
min-height:672px;
background-color:Maroon;
float:left;
}
#content
{
width:740px;
height:500px;
background-color:#ccc;
margin:0 auto;
}
Someone posted the answer but for some reason its now disappeared so I can't take credit for fixing the issue.
I created a wrapper that had a min-width of 985px. I then used percentage values for the side and main content divs 15% & 85% respectively. However I didn't take into account that its 15% and 85% of the 985px wrapper.
My side bar was 15% wide with a min-width of 205px, however 15% of 985px is only 147.25px so the extra pixels was forcing the main content div below the side bar.
Hope that makes sense? Thanks for helping me out :)
The reason that your main content div goes below the menu div is due to the way that the box model works. If you change your main content div to be a inline-block, it will stay to the right of the menue. Here is a jsfiddle to show you how you can do it.
#main-content
{
display:inline-block
width:85%;
min-width:780px;
min-height:672px;
background-color:Maroon;
float:left;
}
Blocks floated to the same side only stay next to each other if there is enough horizontal space.
If I really wanted a horizontal scrollbar, I'd experiment with table layout (display: table-row, display: table-cell).
Create a div after the main-content div and give it a class of 'clearfix' and the following style:
.clearfix{
clear:both;
}
I think the problem might be that you are not clearing the floats, which is why you container div (wrapper) is messing up.
I need to design a landscape page for mobile Web app like this: (CSS3 and jQuery allowed)
A, C and E share same width in percentage (maybe 50%, maybe more or less).
B, D and F to fill the remaining width..
Headers A and B to stick at top.
Containers C and D to fill the middle part.
Footers E and F to stick to the bottom of the viewport.
I need to setup header and footer with fixed heights in pixels or percentage and they will contain absolute positioned images or DIV tags.
The C container will receive various tags with absolute positioning in percent (from left or right, top or bottom of that container).
I need the D container to receive long text with overflo-Yw and the content must be scrollable with finger gesture (Android / iPhone) whithout the rest of the page being scrolled.
Does some CSS guru have a sample to show, with similar design?
The HTML
<div class="left">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
<div class="right">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
THE CSS
.left,.right{
float:left;
width:48,5%
}
.left{
margin:0 3% 0 0;
}
.header{
height:20px;
width: 100%;
}
.content{
height:500px;
width: 100%;
}
.footer{
height:20px;
width: 100%;
}
I am working with 960gs (in my local environment) and I insert this CSS code into my footer div:
## style.css
#footer{
background:url("images/footer.png") repeat-x scroll top transparent;
height: 130px;
width:100%;
overflow:hidden;
}
## footer.php
<div id="footer">
<div id="nav" class="container_12"> </div>
<div id="endfooter" class="container_12">
<div id="copyright" class="grid_3 alpha"> </div>
<div id="design" class="grid_3 omega"> </div>
</div> <!-- endfooter -->
</div> <!-- end footer -->
The problem is that the page does not show the footer div at full width with the background covering the entire div. It just shows the image at 960px. What I am doing wrong?
It took me awhile before I realized what you are trying to do. You are trying to get a background image to scale, correct? You can't do that, at least in CSS2. Background images do not scale. You can tile them (repeat) but you can't scale them. If you want the image to scale you have to use an <img> tag.
If you are willing to depend on CSS3 standards you can use background-size
#footer{
background:url("images/footer.png") repeat-x scroll top transparent;
background-size:100% 130px;
height: 130px;
width:100%;
overflow:hidden;
}
I can't vouch for background-size but w3schools does claim good browser support.
I am trying to work out how I would go about creating a website that has 3 separate 'layers' (top navigation, then content, then footer) each with a different background image, that tiles to 100% width... but I want my content to be centred (as if the containing divs had margin: 0 auto applied).
So far I have been attempting to create divs just for the background images, and then absolutely positioning my content divs, but allowing them to automatically centre.
But of corse, I am taking elements out of the 'flow' of the document there, and so my background image divs end up stacking up against each other.
This is really tough to explain so hopefully this example will help:
http://jsfiddle.net/RB46S/
As you can see, I have my blue div, where the background stretches to 100% BUT I WANT MY NAVIGATION AND A LARGE IMAGE TO CENTRE HERE.
I have my body which is green, then a hp_content div, this would be where all my content would sit, centred, the problem here is you cannot apply a margin or a padding value (i've applied them to show them not working), only a position from the top of the parent/browser, which will lead to problems when making my site responsive I believe.
Then I have my red div which is the same as the top navigation (blue) div, It has a 100% border but I want the footer stuff (twitter feed, latest blog post, and contact details) to be centred here.
Hopefully some one understands what I am trying to achieve and knows how to correctly set a page like this up, any help is much appreciated!
Jon
Ok! Try structuring your HTML something like this:
<html>
<head></head>
<body class="index">
<section class="top">
<header class="content">
<nav>
<ul id="">
<li>link 1</li>
<li>link 2</li>
</ul>
</nav>
</header>
</section>
<section class="main">
<div class="content">
<h2>Whatever</h2>
<div class="something">This is something else</div>
</div>
</section>
<section class="footer">
<footer class="content">
Footer content
</footer>
</section>
</body>
</html>
Then some CSS like:
body, html{
width:100%;
}
body {
background: green;
}
body > section{
width:100%;
}
/* this style will set all the section .content(s) to be 400px wide */
body > section > .content{
display:block;
margin:0 auto;
width:400px;
}
section.top {
height: 510px;
background: blue;
}
/* if you want to individually change widths for each section, do something like this:*/
section.top .content{
width:100%;
}
/* or not! */
section.main {
height:200px;
}
section.footer {
height: 400px;
background: red;
}
Play around: http://jsfiddle.net/FC2Ea/
So for each site section, you'd have a container for all of that section's content with an easy-to-remember class name like ".content". You can set all the content to the same width, or each section's content to different widths depending what you're going for. Either way, the sections will occupy 100% of the browser's width. Good luck! :)
If you add another Div within your each main Div and use style as
<div style="Width: 80%; float:right; margin-right: 150px;">
I guess that might help to an extent ?
<div class="top_shade">
<div style="Width: 80%; float:right; margin-right: 150px;">
<header>
<nav>
<ul id="">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</header>
</div>
</div>