The container is only about 3/4 of the screens height, which is not the same height as the child elements.
Why is that?
I tried to give the container and body a min-height: 100% but this doesn't work. Even with !important
I don't use bootstrap, just plain html and css.
Any help much appreciated!
EDIT: Changing the Body or html height doesn't work. This breaks the page.
I have a body with the following CSS:
body {
background-image: url("../img/1.png");
background-repeat: repeat;
background-size: cover;
font-family: "Raleway", sans-serif;
font-size: 20px;
font-weight: 300;
}
The container has this CSS rules:
.container {
width: 900px !important;
margin: auto;
padding-left: 20px;
padding-right: 20px;
background-color: rgba(255, 255, 255, 0.3);
height: 100% !important;
}
My markup looks like this:
<body>
<div class="container">
<div class="header">
<div class="lang">
<ul class="languages">
<li>DE</li>
<li>FR</li>
</ul>
</div>
<img src="img/header/royalpool.png" alt="" class="logo-royal"/>
<img src="img/header/bluetech.png" alt="" class="logo-bluetech"/>
<div class="lang">
<ul class="languages">
<li>Kontakt</li>
<li>Downloads</li>
<li>Händler</li>
</ul>
</div>
<ul class="navi">
<li>
<div class="box-q-1"><img src="img/header/i/pool.png" alt="" class=header-img/>
<p>Pool</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/filter.png" alt="" class=header-img/>
<p>Filteration</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/des.png" alt="" class=header-img/>
<p>Desinfection</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/cover.png" alt="" class=header-img/>
<p>Cover</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/solar.png" alt="" class=header-img/>
<p>Solar</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/pumpe.png" alt="" class=header-img/>
<p>Wärme-Pumpe</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/led.png" alt="" class=header-img/>
<p>LED</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/clean.png" alt="" class=header-img/>
<p>Clean</p>
</div>
</li>
<li>
<div class="box-q-1"><img src="img/header/i/terasse.png" alt="" class=header-img/>
<p>Terasse</p>
</div>
</li>
</ul>
<div style="clear:both"></div>
</div>
<div class="box-title">
<p>Element-Betonbecken Premium</p>
</div>
<img src="img/page1/pool-top.png" class="pool-img" alt=""/>
<div class="box-small-title-right">
<p>Elementtreppen</p>
</div>
<div class="box-elementtreppen">
<div class="treppe">
<img src="img/page1/eck.png" alt="Eck" class="treppen-img"/>
<p>Ecktreppe</p>
</div>
<div class="treppe">
<img src="img/page1/eck.png" alt="Eck" class="treppen-img"/>
<p>Innen Treppe</p>
</div>
<div class="treppe">
<img src="img/page1/ganz.png" alt="Eck" class="treppen-img"/>
<p>Ganze Treppe</p>
</div>
<div class="treppe">
<img src="img/page1/rom.png" alt="Eck" class="treppen-img"/>
<p>Römische Treppe</p>
</div>
<div class="treppe">
<img src="img/page1/gerade.png" alt="Eck" class="treppen-img"/>
<p>Gerade Treppe</p>
</div>
</div>
<div class="box-small-title-left">
<p>Varianten Wasserstand</p>
</div>
<img src="img/page1/normal.png" alt="" class="img-wasserstand first"/>
<div class="box-small-title-right">
<p>Bauphasen</p>
</div>
<div class="box-bauphasen"></div>
</div>
</body>
The body contains elements that are floated, they need clearing:
.container::before, .container::after {
content: '';
display: table;
}
.container::after {
clear: both;
}
More about understanding floats here: https://css-tricks.com/all-about-floats/
You need to add a height 100% on your body & HTML to make it work.
html, body {
height:100%;
}
You can find more details about this on this same question
try
html,body{
height:100%;
margin:0;
}
You should reset margin and padding as well on html and body.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
Hopefully that'll do it.
If you don't have to support old browsers (IE8 or before) you can achieve what you want setting the height with viewport units:
.container {
height: 100vh;
}
Check the compatibility here: http://caniuse.com/#search=vh
NOTE: If you have any concerns about this you'll have to look for the compatibility of the background-size:cover rule also...
try this it may work:
* {
margin: 0;
padding: 0;
}
html,
body {
min-height: 100%;
}
.container {
height: 100%;
}
Related
I have nowhere indent from the header, but I don't know how to fix it?
<header class="page-header">
<section class="logo">
<i class="logo-img"> </i>
</section>
<section class="menu">
<ul class="main-menu">
<li>Главная</li>
<li>Правила</li>
<li>Тест</li>
<li>Список смотрителей</li>
</ul>
</section>
<section class="profile-avatar">
<img height="50px" width="50px" src="img/ava.png">
<ul class="profile-menu">
<li>
Профиль
</li>
<li>
Выйти
</li>
</ul>
</section>
</header>
If I add clearfix to the header it gives to him more height..
Code is here https://jsfiddle.net/tLtkmcy9/
Right solution is to add height to class with the float: right;
It is your class="profile-avatar" if you take him float right of it is not anymore like that you have to play with the height and it will be ok! try height: 50px;
Please try with the below code for the HTML mentioned below
style="position: relative;top: -4px;left: -4px;"
<section class="page-desc" style="
position: relative;
top: -4px;
left: -4px; ">
<p class="caution">Перед тем как подавать заявку на смотрителя, Вы должны пройти тест!</p>
</section>
I'm trying to centre two buttons but having no luck!
It also has a header image above the buttons within the HTML.
Here's my current HTML:
HTML:
<div>
<img src=".jpg" style="width:700px;display:block;margin-left:auto;margin-right:auto;" alt=""><div class="nav3" style="height:705px;">
<span class="icons"><a href="https://twitter.com/" class="icons">
<img src=".png" style="width:100px;display:block;margin-left:auto;margin-right:auto;" alt=""></a>
</span>
<a href="https://www.amazon.co.uk/" class="icons">
<img src=".png" style="width:100px;display:block;margin-left:auto;margin-right:auto;" alt=""></a>
</div>
I revised your code and separate it the inline style from your html code.
div {
text-align: center;
width: 700px;
}
div img{
width:700px;
margin-bottom: 20px;
}
.nav3 img {
width: 100px;
display: inline;
}
<div>
<img src="http://placehold.it/700x260" alt="">
<div class="nav3">
<img src="http://placehold.it/640x260" alt="">
<img src="http://placehold.it/640x260" alt="">
</div>
</div>
Currently, I set the width of div to width: 700px; and the place holder also contains the same width. Modify these width to suit your needs.
I know that there are thousands of Topics about Footers but I still cannot ajust mine, I have tryed alot of things but nothing helped..... The footer should be always at the bottom of the page visible only when I scroll down the content.
Hope someone will have any suggestions!
This is my footer:
<div class="wrap">
......
</div>
<div class="footer">
<div class="container">
<div class="col-sm-4">
<img class="menu-icon" src="img/other/user.png"><h11>Account</h11>
<ul class="unstyled">
<li>ddd</li>
<li>ddd</li>
</div>
<div class="col-sm-4">
<img class="menu-icon" src="img/other/gear.png"><h11>Support</h11>
<ul class="unstyled">
<li>ddd</li>
<li>ddd</li>
<li>ddd</li>
<li>ddd</li>
</div>
<div class="col-sm-4">
<img class="menu-icon" src="img/other/share.png"><h11>Share Us</h11>
<ul class="unstyled">
<li><img class="menu-icon" src="img/other/tw.png">Twitter</li>
<li><img class="menu-icon" src="img/other/fb.png">Facebook</li>
<li><img class="menu-icon" src="img/other/gp.png">Google Plus</li>
</div>
</div>
</div>
CSS:
html,
body {
height: 100%;
}
.wrap {
height: auto !important;
min-height: 100%;
}
.footer {
position:absolute;
bottom:0;
width:100%;
height: 140px;
background-color: #222;
}
Check if the below link works with you.
Fiddle
#footer {
position: relative;
background-color: darkcyan;
color: white;
z-index: 1;
}
Im not a 100% sure what your trying to achive. but i suspect that the error might be in your css.
you are currently using:
position:absolute;
And if you want your footer to stick to the bottom of the content, you shouldnt need to manipulate the element to use absolute positioning.
Is this the issue you are facing?
this example is using position:absolute as your code suggests.
https://jsfiddle.net/pvwLu49x/1/
is this what you are trying to do?
https://jsfiddle.net/pvwLu49x/2/
What I want to do is have the images on this site change in width and height (they should be equal) between 50-60px. However between them they all need to have a minimum padding of 5px. This can vary depending on the size of the images, this is the case as the two end images need to fit to the edges of the parent div, to align with an image about it. The height/width/padding should all change to ensure the images are still properly aligned when then screen size changes.
If you look at this page you will be able to see what I mean. The images that need to change are the grey squares at the bottom.
http://media.gaigo.org/work2.html
This is my html:
<div class="smallImages">
<div><img src="static/img/smallImage.png"></div>
<div><img src="static/img/smallImage.png"></div>
<div><img src="static/img/smallImage.png"></div>
<div><img src="static/img/smallImage.png"></div>
</div>
and my css is as follows:
smallImages div {
display: inline-block;
padding: 5px;
}
.smallImages div img {
max-width: 60px;
min-width: 50px;
max-height: 60px;
min-height: 50px;
}
Sorry if this seems confusing. Just ask if you need me to explain more.
One option is to set percentage widths, however that number percentage is dependent upon the number of images in your row. See this example:
* {
box-sizing:border-box; /* You need this so that heights and widths are inclusive of padding and border */
}
.container {
width:400px; /* set this to whatever you like, it should work still */
padding:5px;
border:1px solid;
}
.row {
width:100%;
padding:0 5px;
}
.row img {
padding:5px;
}
.row.one img {
width:100%;
}
.row.two img {
width:50%;
}
.row.three img {
width:33.33%;
}
.row.four img {
width:25%;
}
<div class="container">
<div class="row one">
<img src="http://placehold.it/150x150">
</div>
<div class="row two">
<img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150">
</div>
<div class="row three">
<img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150">
</div>
<div class="row four">
<img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150">
</div>
</div>
Putting HTML comments between lines means there's no white space between the images.
This is what you are after.
Display inline-block wont let the images behave in that manner you need to use table.
You should just check the source code of the site you are working from..
.row {
display: table-row;
}
.smallImages {
padding-left: 0px;
margin-bottom: 0px;
display: table;
text-align: center;
}
.smallImages .row div {
display: table-cell;
padding: 5px;
}
.smallImages .row div:first-child {
padding-left: 0;
}
.smallImages .row div img {
max-width: 100%;
}
img {
border: 0;
}
<div class="smallImages">
<div class="row">
<div>
<a href="#item-1">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-2">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-3">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-4">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-5">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-6">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-7">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-8">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-9">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-10">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-11">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-12">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
</div>
</div>
I am trying to make my list items all the same width. I've tried setting the widths in the css and nothing changes. Can anyone figure this out?
Here is an image to show what I am talking about:
HTML:
<body>
<div class="content-wrapper" id="container">
<header>logo
<nav>navigation</nav>
</header>
<div class="clear-fix"></div>
<div id="body">
<section class="main-content">
<section class="leftPane">
<h2>Categories</h2>
</section>
<section class="rightPane">
<div class="checkout">
<h1>Checkout</h1>
<ul class="steps">
<li><a href="http://localhost:59213/Cart">
<div id="step0" class="arrow_box_grey">
Shopping Cart</div>
</a>
</li>
<li><a href="http://localhost:59213/Cart/Student">
<div id="step1" class="arrow_box_grey">
Student</div>
</a>
</li>
<li><a href="http://localhost:59213/Cart/Delivery">
<div id="step2" class="arrow_box_grey">
Delivery</div>
</a>
</li>
<li>
<div id="step3" class="arrow_box_green">Payment</div>
</li>
<li>
<div id="step4" class="arrow_box_blue">Finish</div>
</li>
</ul>
</div>
</section>
<div class="clear-fix"></div>
</section>
</div>
</div>
And here if my fiddle with the code: http://jsfiddle.net/M74Em/
You need to change this style:
.main-content .checkout ul.steps li div {
display: inline;
width: 1000px;
}
You can't set widths for inline elements so try this:
.main-content .checkout ul.steps li div {
display: inline-block;
width: 100px;
}
Example
From twBootstrap, applied to <ul>'s (demo):
.ul-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.ul-justified > li {
display: table-cell;
float: none;
width: 1%;
}
and slap .ul-justified to any ul-list you want aligned, and you get equal width <li>'s automatically fit parent ul's width.