This code works on Google Chrome, but the height is minimized in IE11; it expands only when I click on the links in menu. And also the font size increases in IE; I need help.
I tried setting the parent div height to 1000px; this way it does not minimize the height. But when you click on the link to display content it does not display all the content. Any help will be highly appreciated.
html {
font-size: 62.5%;
height: 100%;
}
body {
font-size: 1.4rem;
height: 100%;
}
#media (min-width: 1200px) {
.container-fluid-full {
overflow: hidden;
position: relative;
height: 100%;
}
#content {
width: 85.578%;
padding: 28px;
margin: 0px 0px;
margin-left: 14.422% !important;
height: 100%;
}
#sidebar-left {
background: #eeeeee;
border-style: solid;
border-right: thick #edf0f4;
margin-left: 0px !important;
position: absolute;
height: 100%;
}
<div class="container-fluid-full">
<div class="row-fluid">
<!-- start: Main Menu -->
<div id="sidebar-left" class="span2">
</div>
</div>
<div id="content">
</div>
</div>
Related
I'm new to bootstrap. I have simple page with a header (which has background image) and logo.
I have two questions
How to hide background image of the header tag and center the logo if <768px
How to resize the background image depending of the viewport size?
Here's the code I have
<div class="container">
<div class="row">
<div class="col-md-12">
<header>
<img src="images/logo.png" alt="" />
</header>
</div>
</div>
</div>
css
body header {
position: relative;
width: 940px;
height: 200px;
background: url(../images/header-bgr.png) no-repeat;
}
body header img {
position: absolute;
top: 2px;
right: 2px;
}
Use like this:
For hiding background image of the header tag and center the logo:
CSS:
#media (max-width: 767px) {
body header {
position: relative;
width: 940px;
height: 200px;
background: none;
margin:0 auto;
}
body header img {
position: absolute;
top: 2px;
right: 2px;
display: none;
}
}
try background-size:contain; for resizing your image
body header {
position: relative;
width: 940px;
height: 200px;
background: url(../images/header-bgr.png) no-repeat;
background-size:contain;
}
It is always clearer if you provide jsfiddle or codepen with your actual code.
When you already have a container class on top, you don't really have to define another header with static width. Either it can be 100% or use container class on header. Your structure can basically be reduced to this form.
HTML:
<header class="container">
<figure>
<img src="http://cdn4.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png" class="img-responsive" alt="logo">
</figure>
</header>
CSS:
* {
box-sizing: border-box;
}
header {
width: 100%;
background: url('http://www.psdgraphics.com/file/colorful-triangles-background.jpg') no-repeat;
background-size: cover;
background-position: center center;
height: 200px;
border-bottom: 1px solid #999;
position: relative;
padding: 30px 0;
figure {
max-width: 200px;
margin: 0px auto;
position: relative;
}
#media (max-width: 768px) {
& {
background: none;
min-height: auto;
figure {
img {
margin-top: 00%;
}
}
}
}
}
http://codepen.io/gorkhali/pen/azjVev
I am very new to web design, so I might be completely over my head here.. but I can not seem to figure out how to work this. I have an image inside my first div, underneath this I want to have to more divs with the background colors in which I will add content. But for some reason my divs are not adjusting with the browser. Everytime I adjust the browser to be smaller, the divs backgrounds are separating and a white space is coming in between them.
Any help would be highly appreciated.. Also any critical feedback on my obvious coding skills, would be highly appreciated.
<!DOCTYPE html>
<html>
<head> <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<div class= "header">
<div class="large-logo-wrap">
<img src="Assets/Giadaslogoindexwhitebig.png" draggable="false"></img>
</div>
<div class="middle">
</div>
<div class="end">
</div>
</body>
</html>
CSS
body{
margin: 0px;
padding: 0px;
overflow: hidden;
}
.container{
width:100%;
margin: 0px;
padding: 0px;
}
.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-size: 100%;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}
.large-logo-wrap {
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
max-width: 700px;
}
.middle{
position: absolute;
top: 768px;
background-color: rgb(229,225,209);
width: 100%;
height:100%;
background-size: 100%;
overflow-y: auto;
}
.end{
position: absolute;
top: 1500px;
background-color: rgb(29,25,29);
width: 100%;
height:768px;
background-size: 100%;
}
be nice. Cheers!
I suggest you take a closer look at the code and strip out as much as you can to see what is actually necessary to get where you are going. Here is a fiddle with some cleaned up code that does what I think you are going for. Hopefully it helps.
HTML
<header class="container global-header">
<div class="inner-w">
<div class="large-logo-wrap">
<img src="http://placehold.it/400x300" />
</div>
</div>
</header>
<section class="container section01">
<div class="inner-w">
Middle - arbitrary set height - I suggest you let the content decide the height
</div>
</section>
<section class="container section02">
<div class="inner-w">
Other section - arbitrary set height
</div>
</section>
CSS
*, *:before, *:after { /* get your box model so that padding and margins go inside the box instead of outside, and add to the overall size of the box */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
.container { /* things the sections have in common */
width: 100%;
float: left;
}
.inner-w {
max-width: 700px;
margin-right: auto;
margin-left: auto;
padding: 1em;
border: 1px solid rgba(0,0,0,.05); /* just so you can see */
/* by using an inner div in your container... you allow yourself to maintain a background-color across the whole page if you wish. If you don't want that, then you just style the inner div for each section with the background color */
}
.global-header {
background-color: lightblue;
text-align: center; /* centers inline, and inline-block elements (logo) */
}
.large-logo-wrap {
display: inline-block;
max-width: 8em; /* set max image size */
}
.large-logo-wrap img { /* responsive image */
display: block;
width: 100%; /* fits whatever you set the wrapper to */
height: auto;
}
.section01 { /* arbitray section */
background-color: rgb(229,225,209);
color: rgb(0,0,0);
min-height: 234px; /* if you absolutly must - choose a height... use min */
}
.section02 { /* arbitray section */
background-color: rgb(29,25,29);
color: rgb(229,225,209);
min-height: 346px; /* if you absolutly must - choose a height... use min */
}
Please change your css with this one:
body{
margin: 0px;
padding: 0px;
overflow: hidden;
}
.container{
width:100%;
margin: 0px;
padding: 0px;
}
.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}
.large-logo-wrap {
margin-left: auto;
margin-right: auto;
max-width: 700px;
}
.middle{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(229,225,209);
}
.end{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(29,25,29);
}
Some of your css styles were wrong, for example you used width and height with %100 which is wrong and effects on all of your css styles.
Also, you used position:absolute for all of div which effects on div to be nonadjustable.
My background images have not been spanning the full width of the browser when viewed on an iPad. This has happened more than once now, so it must be in the way I'm writing the CSS.
Here is an example of a footer whose bg image is stopping about 70% of the way on iPad- it has three columns floating within.
I've put the full project up here:
https://github.com/christineh/TJ-portfolio
HTML:
<footer>
<div class="footer_invs">
<div class="footer">
<h1></h1>
<p></p>
</div>
<div class="footer">
<h1></h1>
<img src="" width="32" height="32" border="0">
</div>
<div class="footer3">
<h1></h1>
<img src="">
</div>
</div>
</footer>
CSS:
footer {
background: url(images/footer/background.jpg) repeat-x;
width: 100%;
height: 113px;
margin-top: 250px;
overflow:hidden;
overflow-x:hidden;
}
.footer_invs {
background: url(images/footer/corner.png) no-repeat 186px 0px;
width: 1018px;
height: 78px;
padding-left: 200px;
padding-top: 32px;
}
.footer {
float: left;
width: 275px;
}
.footer h1 {
padding-bottom: 8px;
}
.footer p {
color: #FFF;
padding-bottom: 0px;
line-height: 16px;
padding-top: 0px;
}
.footer img {
padding-right: 10px;
}
.footer3 {
float: left;
width: 120px;
padding-left: 70px;
}
.footer3 h1 {
padding-bottom: 8px;
}
Is there an obvious fix that I'm missing?
I tried using the suggestion above i.e. min-width:1024px in the body tag but it did not work. After a lot of searching I discovered adding it to the html tag also works.
Example:
html {
min-width: 1024px;
}
Pretty sure iPad screen width is 1024px. Is that set anywhere?
body{
min-width:1024px;
}
Note: I've not got mine on me to test.
I'm trying to get my page to occupy 100% of the screen, with a footer, which needs to always be on the bottom of the page.
The div's should expand when the page resizes, with the right background color.
The bugs I have at the moment are :
- Footer stays at bottom of the screen not of the page.
- div (menu) is bigger than the div (content)
- the div doesn't resize properly
Here's my code:
Div stucture
<div id="container"><br />
<div id="header">CMS</div>
<div id="menu"><?php include ('includes/menu.php');?></div>
<div id="content">
<?php include $include_page?>
</div>
<div id="footer">CMS</div>
</div>
CSS
body {
height: 100%;
color: #0b0b0b;
background-color: #696060;
margin: 0px;
padding: 0px;
font-family: Tahoma, sans-serif;
font-size: 12.5px;
}
#container {
margin-left: auto;
margin-right: auto;
width: 1000px;
background-color: #f1f1f1;
border-left: 1px solid #8f8f8f;
border-right: 1px solid #8f8f8f;
height: 100%;
}
#header {
height: 100px;
width: 100%;
background-color: #a31f00;
color: #fcfcfc;
text-align: center;
}
#menu {
width: 210px;
background-color: #e0e0e0;
float: left;
padding: 10px 10px 10px 10px;
height: 100%;
}
#content {
width: 750px;
height: 100%;
float: left;
padding: 10px 10px 10px 10px;
}
#footer {
position: absolute;
bottom: 0;
width: 1000px;
height: 20px;
background-color: #a31f00;
color: #fcfcfc;
text-align: center;
font-size: 11px;
}
You might be thinking about a sticky footer. A sticky footer sticks to the bottom of the page when there isn't enough content to push it down, but when the content starts overflowing the page, it goes along with it.
To make one, you basically want to wrap everything which is not the footer within a <div> tag, like so:
<div id="wrap">
<div id="header">
...
</div>
<div id="main">
<!-- All you page content goes here -->
</div>
</div>
<div id="footer">
I am a footer.
</div>
Now, for the magic CSS:
html, body
{
height: 100%;
}
#wrap
{
min-height: 100%;
}
#main
{
overflow: auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer
{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear: both;
}
/* Opera Fix */
body:before
{
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;/
}
And on your HTML page you will need this conditional style for IE6 and earlier and for IE8 (!IE7 means not 7, but all others):
<head>
...
<!--[if !IE 7]>
<style type="text/css">
#wrap
{
display: table;
height: 100%;
}
</style>
<![endif]-->
...
</head>
I'd try putting the content div inside the menu div. That way the menu is always the height of it's content, while content div can push the menu - and it's content down where applicable. Remove the height 100%.
Why pos:abs on the footer? Have you tried relative?
You may want to read this for aligning your footer at the bottom of the screen, regardless of content above; http://www.zymic.com/tutorials/html/effective-footers/
i have a problem with float divs. i try everything, i search everywhere but i cannot find (maybe i use wrong keywords to search, i dont know)
here is the codes:
<div class="mbody">
<div class="mheader"> header content </div>
<div class="mmenu"> menu content </div>
<div class="mcontent">
<div class="content-right">
<div class="r-cont">
<div class="r-cont-header"> header goes here </div>
<div class="r-cont-content"> <p>• There is a sample right content...</p></div>
</div>
</div>
<div class="content"> contents goes here </div>
</div> <!-- mcontent ends here -->
<div class="mfooter"> footer content </div>
</div> <!-- mbody ends here -->
and here goes css codes:
.mbody {
clear: both;
width: 920px;
position: relative;
overflow: visible;
height: auto;
margin: 0px auto;
}
.mheader {
height: 163px;
width: 856px;
background-image: url(img/header.png);
padding: 32px;
}
.mmenu {
height: 40px;
width: 920px;
background-image: url(img/menu-bg.png);
}
.mcontent {
width: 880px;
overflow: visible;
padding: 20px;
height: auto;
background-color: #FFF;
clear: both;
}
.content-right {
width: 200px;
float: right;
}
.content {
margin-right: 220px;
}
.r-cont {
clear: both;
width: 200px;
}
.r-cont .r-cont-header {
background-image: url(img/menu-head.png);
height: 32px;
width: 168px;
line-height: 32px;
color: #FFF;
padding-left: 32px;
font-weight: bold;
font-size: 16px;
}
.r-cont .r-cont-content {
background-color: #F8AF6B;
font-size: 12px;
padding: 6px;
}
.mfooter {
height: 60px;
width: 920px;
background-color: #F58220;
background-image: url(img/footer-bg.png);
clear: both;
}
here we go...
if .content's content is smaller then .content-right, .mcontent's heights is equal to m.content's min-height, so i didn't set it. it equals to .mcontent's padding-top and bottom. left out area has not any background. i cannot set .mbody background because i use rounded the corners with JavaScript and if i use a background corner's outside has the color of .mbody ...
my customers still use ie6, so i cannot any css effects and css3 codes...
thanks in advance...
.class1 .class2 cause problems in IE6 try to use #id1 .class1 like these places .r-cont .r-cont-content
I think you're problem is what's called the 'collapsed parent', i.e. the container div is not as tall as the content within in.
If this is your problem then there are four solutions. I would recommend changing the overflow value of your .mcontent div to hidden (from visible). This solution is compatible with IE6 as you have set a width of the parent.
.mcontent {overflow: hidden;}
Read the section "Fixing the Collapsed Parent" at the link below for more information (and the other three solutions):
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/