Someone noticed me today that my webpage has a empty space on the right on smaller screens. I am working hard to find the problem but I haven't found it yet.
As you see, there is a grey empty space next to my website. With the width set to 100% and the minimal width set to 1020px.
On bigger screens, the problem resolves itself and the website has the correct width of 100%.
Does someone recall this problem, or know how to solve it?
Website viewable on http://tinyurl.com/c2ohcpu
CSS CODE
html,body {
margin:0px;
width: 100%;
min-width:1020px;
background-color: #eaeeef;
padding: 0px;
font-family: Arial;
font-size: 12px;
color: #7f8386;
}
img {
border: 0;
}
#f-container {
width: 100%;
height: auto;
}
#h-container {
width: 100%;
}
#container {
width: 1020px;
height: auto;
margin: 0 auto;
padding-top: 10px;
margin-top: -1px;
background-image: url('../images/container_bg.png');
background-repeat: repeat-y;
border: 1px solid #d4d6d7;
margin-bottom: 10px;
}
#header {
width: 100%;
height: 59px;
background-image: url('../images/header-repeat.png');
background-repeat: repeat-x;
min-width: 1020px;
z-index: 10000;
float: left;
}
#header #h-container {
width: 1020px;
height: 59px;
margin: 0 auto;
}
#header #logo-container {
width: 414px;
height: 40px;
margin-left: 10px;
border: 0;
float: left;
}
#header h1 {
margin:0;
padding:0;
}
#header #logo-container #logo {
width: 414px;
height: 40px;
}
#header #topMenu {
width: 580px;
height: 50px;
margin-right: 10px;
float: right;
}
#header #topMenu ul.menu {
height: 50px;
margin: 0;
padding: 0;
float: right;
}
#header #topMenu ul.menu li {
list-style-type: none;
float: left;
padding-left: 10px;
padding-right: 10px;
height: 50px;
}
#header #topMenu ul.menu li:hover, #header #topMenu ul.menu li.current {
background-image: url('../images/menu_active.png');
background-repeat: no-repeat;
background-position: center;
}
#header #topMenu ul.menu li a {
text-decoration: none;
display: block;
height: 50px;
}
/* Home */
#header #topMenu ul.menu .item-102 a {
background-image: url('../images/menu/home.png');
width: 58px;
}
/* Nieuws */
#header #topMenu ul.menu .item-103 a {
background-image: url('../images/menu/nieuws.png');
width: 71px;
}
/* Diensten */
#header #topMenu ul.menu .item-104 a {
background-image: url('../images/menu/diensten.png');
width: 80px;
}
/* Portfolio */
#header #topMenu ul.menu .item-105 a {
background-image: url('../images/menu/portfolio.png');
width: 81px;
}
/* Contact */
#header #topMenu ul.menu .item-106 a {
background-image: url('../images/menu/contact.png');
width: 75px;
}
/* Hosting */
#header #topMenu ul.menu .item-115 a {
background-image: url('../images/menu/hosting.png');
width: 72px;
}
#content-left {
width: 750px;
height: auto;
float: left;
padding: 10px;
}
p {
padding: 0px;
margin: 0px;
}
#content-left h2.title {
color: #33393e;
font-size: 13pt;
width: 100%;
}
#content-left h2 a {
display: block;
color: #33393e;
text-decoration: none;
font-size: 13pt;
}
#content-left ul.actions{
display: none;
}
#content-left .item-block {
width: 100%;
height: auto;
border-bottom: 1px dashed #d4d6d7;
padding-bottom: 20px;
}
#content-left .item-block .published {
width: 745px;
background: #CCEBF5;
color: black;
padding-top: 3px;
padding-left: 5px;
height: 17px;
margin-bottom: 5px;
}
#content-right {
width: 230px;
height: auto;
float: right;
padding: 10px;
}
#content-right h2.title {
color: #33393e;
font-size: 13pt;
width: 100%;
}
#content-right h2 a {
display: block;
color: #33393e;
text-decoration: none;
font-size: 13pt;
}
h2 a:hover {
font-weight: bold;
cursor: pointer;
}
#footer {
width: 100%;
text-align: center;
margin-top: 5px;
height: auto;
}
#content-right .item-block {
width: 100%;
height: auto;
border-bottom: 1px dashed #d4d6d7;
padding-bottom: 20px;
}
a {
color: #0099cc;
text-decoration: none;
font-weight: bold;
}
a:hover {
font-weight: normal;
}
.portfolio-image {
margin: 0 auto;
width: 700px;
height: auto;
display: block;
}
HTML CODE
<?xml version="1.0" encoding="utf-8?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl-nl" lang="nl-nl" dir="ltr" >
<head>
<link rel="stylesheet" href="/templates/hiddenhidden/css/template.css" />
<link href="/templates/hiddenhidden/css/uni-form.css" rel="stylesheet" type="text/css" />
<link href="/templates/hiddenhidden/css/default.uni-form.css" rel="stylesheet" type="text/css" />
<link href="/templates/hiddenhidden/jqueryui/css/pepper-grinder/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="/templates/hiddenhidden/css/screen.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/templates/hiddenhidden/css/jquery.lightbox-0.5.css" media="screen" />
<link rel="shortcut icon" href="/templates/hiddenhidden/images/favicon.ico" />
<script type="text/javascript" src="/templates/hiddenhidden/js/jquery.js"></script>
<script type="text/javascript" src="/templates/hiddenhidden/js/uni-form.jquery.min.js"></script>
<script type="text/javascript" src="/templates/hiddenhidden/js/uni-form-validation.jquery.min.js"></script>
<script type="text/javascript" src="/templates/hiddenhidden/js/jquery.lightbox-0.5.min.js"></script>
<script type="text/javascript" src="/templates/hiddenhidden/jqueryui/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/templates/hiddenhidden/js/easySlider1.7.js"></script>
<script type="text/javascript">
$(function () {
$('a.lightbox').lightBox({
imageLoading:'/templates/hiddenhidden/images/lightbox-ico-loading.gif',
imageBtnPrev:'/templates/hiddenhidden/images/lightbox-btn-prev.gif',
imageBtnNext:'/templates/hiddenhidden/images/lightbox-btn-next.gif',
imageBtnClose:'/templates/hiddenhidden/images/lightbox-btn-close.gif',
imageBlank:'/templates/hiddenhidden/images/lightbox-blank.gif'
});
});
</script>
<base href="http://hiddenhidden.nl/" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="generator" content="Joomla! - Open Source Content Management" />
<title>hidden hidden</title>
<link href="/?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<link rel="stylesheet" href="/modules/mod_portfolio/portfolio.css" type="text/css" />
<script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/media/system/js/core.js" type="text/javascript"></script>
<script src="/media/system/js/caption.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('load', function() {
new JCaption('img.caption');
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="f-container">
<div id="header">
<div id="h-container">
<h1>
<a href="/" id="logo-container" title="hidden hidden">
<img src="/templates/hiddenhidden/images/logo_with_slogan.png" id="logo" alt="hidden hidden" />
</a>
</h1>
<div id="topMenu">
<ul class="menu">
<li class="item-102 current active"><a href="/nieuws" ></li><li class="item-104"><a href="/hosting" ></li><li class="item-105"><a href="/contact" ></li></ul>
</div>
</div>
<div style="clear:both;"></div>
</div>
<div id="container">
<div id="content-left">
<div id="system-message-container">
</div>
<div class="blog-featured">
<div class="items-leading">
<div class="leading-0">
<h2 class="title">
<a href="/7-home/1-welkom-op-hidden-hidden">
Welkom op hidden hidden!</a>
</h2>
<!-- BEGIN -->
<div class="item-block">
<div class="item-text">
<div class="item-separator"></div>
</div></div>
<div class="item-bottom"></div> </div>
</div>
</div>
<h2 class="title">Onze Portfolio</h2>
<div class="item-block">
<div class="item-text">
<div id="portfolio-slider" >
</div> <div style="clear:both;"></div>
<ul class="ui-tabs-nav">
</ul>
</div>
<script type="text/javascript"> jQuery(function() { jQuery("#portfolio-slider").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); });</script>
<div style="clear:both;"></div> </div>
</div>
<div class="item-bottom"></div>
<div id="footer">
Copyright©
2010 - 2012 hidden hidden. Alle rechten voorbehouden. | Sitemap
</div>
</div>
<div id="content-right"> <h2 class="title">Contact</h2>
<div class="item-block">
<div class="item-text">
<div class="custom" >
</div>
</div>
</div>
<div class="item-bottom"></div>
<h2 class="title">Offerte aanvragen</h2>
<div class="item-block">
<div class="item-text">
<div class="custom" >
<p>Offerte aanvragen? Dat kan via ons contactformulier.</p></div>
</div>
</div>
<div class="item-bottom"></div>
<h2 class="title">Sociaal</h2>
<div class="item-block">
<div class="item-text">
<div id="facebook-container"></div><br />
<a href="http://facebook.com/hiddenhidden/" title="hidden hidden op Facebook">
<img src="/modules/mod_social/networks/facebook.png" style="border: 0;" alt="hidden hidden op Facebook" />
</a>
<a href="http://twitter.com/hiddenwebsolution" title="hidden hidden op Twitter">
<img src="/modules/mod_social/networks/twitter.png" style="border: 0;" alt="hidden hidden op Twitter" />
</a>
<a href="http://linkedin.com/company/hidden-hidden" title="hidden hidden op Linkedin">
<img src="/modules/mod_social/networks/linkedin.png" style="border: 0;" alt="hidden hidden op Linkedin" />
</a>
<script type="text/javascript" src="/modules/mod_social/mod_social.js"></script> </div>
</div>
<div class="item-bottom"></div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
I'm not able to reproduce the issue with the code you provided, but I can on your website. Strange problem.
The quickfix would be to remove min-width, change width from auto to 1020px on the body and html elements and add overflow: hidden to body.
Good luck!
Awnser to my own question
I found it! It was the Facebook Like Buttons. I had set the width to 400px(I don't know why). So it pushed out of the layout. I replaced the data-width="400" with data-width="200" and know everthing is back to normal. Tnx everybody!
After you mentioned the Facebook Like button, I examined the code and it has a span with a width of 400px inside the sidebar which is protruding out past the sidebar's area (as is its parent div).
<div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-href="http://facebook.com/keimwebsolutions" data-send="true" data-layout="button_count" data-width="400" data-show-faces="false" data-font="arial"><span style="height: 20px; width: 400px;">
Related
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
.navbar {
background-color: #000000;
border-color: 1px solid #000000;
}
.card-box {
border-radius: 2.5rem;
padding-bottom: 10px;
margin-top:25px;
background-color: #000000b0;
box-shadow: 1px 1px 5px 1px grey;
}
.portfolio-item {
/* height: 250px; */
text-align: center;
}
.row {
margin: 0px;
}
h3 {
margin: 10px;
}
.app_rstudio, .app_rstudio-super {
margin-left: 15%;
}
.fa, .far, .fas, .fab {
font-size: 96px;
color: #55b0ff;
margin: 15px;
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head lang="en">
<title th:text="${title}"></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" media="screen" th:href="#{${bootstrapCss}}" />
<link rel="stylesheet" media="screen" th:href="#{/css/default.css}"/>
<script th:src="#{${jqueryJs}}"></script>
<script th:src="#{${bootstrapJs}}"></script>
</head>
<body>
<img src="https://i.ibb.co/2Ww4xTB/background.png" id="bg" alt="">
<div th:replace="../fragments/navbar :: navbar"></div>
<div class="container" id="applist">
<div class="row" >
<div th:each="app: ${apps}">
<div th:class="${'col-md-4 portfolio-item app_' + app.id}">
<div class="card-box">
<a th:href="#{/app/}+${app.id}">
<i th:class="${app.logoURL}"></i>
</a>
<h3>
<a th:href="#{/app/}+${app.id}" th:text="${app.displayName == null} ? ${app.id} : ${app.displayName}" style="color: #55b0ff;"></a>
</h3>
<a th:if="${app.description != null}" th:href="#{/app_direct/}+${app.id + '/'}" style="color: #55b0ff; font-style: italic;" target="_blank">
<p th:text="${app.description}"></p>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I added the following CSS code to my HTML document:
body {
background-color: #333;
background-image: url(/assets/img/background.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
color: rgb(202, 202, 202);
}
But the image does not fill the browser window as expected. Where did I go wrong?
Here is the entire HTML code (probably more than you need but I'm not sure which bits are relevant):
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head lang="en">
<title th:text="${title}"></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" media="screen" th:href="#{${bootstrapCss}}" />
<link rel="stylesheet" media="screen" th:href="#{/css/default.css}"/>
<script th:src="#{${jqueryJs}}"></script>
<script th:src="#{${bootstrapJs}}"></script>
<style type="text/css">
body {
background-color: #333;
background-image: url(/assets/img/background.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
color: rgb(202, 202, 202);
}
.navbar {
background-color: #000000;
border-color: 1px solid #000000;
}
.card-box {
border-radius: 2.5rem;
padding-bottom: 10px;
margin-top:25px;
background-color: #000000b0;
box-shadow: 1px 1px 5px 1px grey;
}
.portfolio-item {
/* height: 250px; */
text-align: center;
}
.row {
margin: 0px;
}
h3 {
margin: 10px;
}
.app_rstudio, .app_rstudio-super {
margin-left: 15%;
}
.fa, .far, .fas, .fab {
font-size: 96px;
color: #55b0ff;
margin: 15px;
}
</style>
</head>
<body>
<div th:replace="../fragments/navbar :: navbar"></div>
<div class="container" id="applist">
<div class="row" >
<div th:each="app: ${apps}">
<div th:class="${'col-md-4 portfolio-item app_' + app.id}">
<div class="card-box">
<a th:href="#{/app/}+${app.id}">
<i th:class="${app.logoURL}"></i>
</a>
<h3>
<a th:href="#{/app/}+${app.id}" th:text="${app.displayName == null} ? ${app.id} : ${app.displayName}" style="color: #55b0ff;"></a>
</h3>
<a th:if="${app.description != null}" th:href="#{/app_direct/}+${app.id + '/'}" style="color: #55b0ff; font-style: italic;" target="_blank">
<p th:text="${app.description}"></p>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I also tried (and failed) to use an approach described here which suggests using the following CSS:
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
And HTML:
<img src="images/bg.jpg" id="bg" alt="">
In this case, the background will not fill the screen if the device you are using is portrait.
Try adding this to your style:
html {
min-height:100%;
}
The problem has to be with your local file path because when adding a url it works fine as seen below:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head lang="en">
<title th:text="${title}"></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" media="screen" th:href="#{${bootstrapCss}}" />
<link rel="stylesheet" media="screen" th:href="#{/css/default.css}"/>
<script th:src="#{${jqueryJs}}"></script>
<script th:src="#{${bootstrapJs}}"></script>
<style type="text/css">
body {
background-color: #333;
background-image: url("https://images.unsplash.com/photo-1558481795-7f0a7c906f5e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1373&q=80");
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
color: rgb(202, 202, 202);
width: 100%;
height: 1600%;
z-index: -1;
}
.navbar {
background-color: #000000;
border-color: 1px solid #000000;
}
.card-box {
border-radius: 2.5rem;
padding-bottom: 10px;
margin-top:25px;
background-color: #000000b0;
box-shadow: 1px 1px 5px 1px grey;
}
.portfolio-item {
/* height: 250px; */
text-align: center;
}
.row {
margin: 0px;
}
h3 {
margin: 10px;
}
.app_rstudio, .app_rstudio-super {
margin-left: 15%;
}
.fa, .far, .fas, .fab {
font-size: 96px;
color: #55b0ff;
margin: 15px;
}
</style>
</head>
<body>
<div th:replace="../fragments/navbar :: navbar"></div>
<div class="container" id="applist">
<div class="row" >
<div th:each="app: ${apps}">
<div th:class="${'col-md-4 portfolio-item app_' + app.id}">
<div class="card-box">
<a th:href="#{/app/}+${app.id}">
<i th:class="${app.logoURL}"></i>
</a>
<h3>
<a th:href="#{/app/}+${app.id}" th:text="${app.displayName == null} ? ${app.id} : ${app.displayName}" style="color: #55b0ff;"></a>
</h3>
<a th:if="${app.description != null}" th:href="#{/app_direct/}+${app.id + '/'}" style="color: #55b0ff; font-style: italic;" target="_blank">
<p th:text="${app.description}"></p>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
In my project, I have a web homepage.
I want to set a more link to the news page. But the more <a> link is exceeding the lm_more `.
The picture is like:
[![enter image description here][1]][1]
The code is like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Web home page</title>
<link rel="stylesheet" href="css/format.css" media="screen">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="stylesheet" href="css/main.css" media="screen">
<link href="./css/video-js.css" rel="stylesheet">
<link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.min.css">
<script src="js/jquery_min.js"></script>
<script src="js/jquery.svg.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="./js/video.js"></script>
<script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
</head>
<script>
$(document).ready(function() {
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
loop: true,
history: 'love',
roundLengths : true,
parallax : true,
pagination: {
el: '.swiper-pagination',
clickable :true,
},
autoplay: {
stopOnLastSlide: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
paginationClickable :true,
})
})
</script>
<body style="background:url(./image/taiyi.jpg); height:100%;width:100%;background-repeat:no-repeat">
<style>
body{
margin:0;
}
.content{
margin-left:auto;
padding: 20px;
margin-right:auto;
width: 1400px;
height:850px;
background-color:white;
box-sizing: content-box;
}
.content .uprow{
width: 1400px;
height: 400px;
text-align:center;
border: 1px solid #e5e5e5;
}
.content .uprow .upright{
width: 600px;
height: 400px;
float: right;
background-color: white;
border: 1px solid #999;
}
.lm_title_con{
width: 600px;
height: 50px;
padding: 10px 20px;
}
.lm_title_con .lm_title{
width: 85px;
line-height: 45px;
height: 30px;
float: left;
line-height: 30px;
color: #3E6BC0;
font-size: 16px;
text-align: center;
border-bottom: 1px solid #3E6BC0;
}
.lm_more{
float: right;
height: 30px;
width: 30px;
line-height: 30px;
background-color: blue;
}
.lm_more a{
text-align: center;
color: red;
font-size: 13px;
text-decoration: none;
}
.swiper-container{
width: 595px;
height: 340px;
margin-top: 10px;
background-color: blue;
}
</style>
<div class="content">
<div class="uprow">
<div class="upright">
<div class="lm_title_con">
<div class="lm_title">
news
</div>
<div class="lm_more">
more
</div>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color:red"><a href='' ><img src='image/news/20190819-1png' style="width:595px;height:340px" alt=''></a></div>
<div class="swiper-slide" style="background-color:blue"><a href='../newsdetail/news20190729.html' ><img src='image/news/20190729-1jpg' style="width:595px;height:340px" alt=''></a></div>
<div class="swiper-slide" style="background-color:green"><a href='../newsdetail/news20190530.html' ><img src='image/news/20190530-1png' style="width:595px;height:340px" alt=''></a></div>
<div class="swiper-slide" style="background-color:yellow"><a href='../newsdetail/news20190529.html' ><img src='image/news/20190529-1png' style="width:595px;height:340px" alt=''></a></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
</div>
</body>
</html>
But when I Comment the content div, It is OK
<!--<div class="content">-->
<div class="uprow">
</div>
<!--</div>-->
The result picture is like:
But the other <div> position is changed, and the homepage size is messed up! Who can help me?
Please add "box-sizing" property in your ".lm_title_con" class selector.
Please try below CSS.
.lm_title_con {
width: 600px;
height: 50px;
padding: 10px 20px;
box-sizing: border-box; /* new added */
}
I face some problem in my html and css.
My requirement like this image:-
My code below:-
#font-face {
font-family: "OpenSans-CondLight";
src: url('fonts/OpenSans-CondLight.woff') format('woff');
}
#font-face {
font-family: "Rubik-BoldItalic";
src: url('fonts/Rubik-BoldItalic.woff') format('woff');
}
#font-face {
font-family: "RobotoSlab-Regular";
src: url('fonts/RobotoSlab-Regular.woff') format('woff');
}
/*header area */
header{
height: 350px;
background: #050000;
overflow: hidden;
display: block;
}
.container{
background: #050000;
}
.top-area{
float: left;
width: 20%;
font-family: "Rubik-BoldItalic";
font-size: 60px;
color: #FFFFFF;
text-transform: uppercase;
overflow: hidden;
}
.logo-area {
width: 60%;
overflow: hidden;
display: block;
position: relative;
z-index: 9999;
}
.logo-area img {
width: 500px;
height: auto;
z-index: 9999;
margin-left: 35px;
}
.search-box {
width: 25%;
float: right;
margin: -300px 73px 0 0;
}
.all-events {
overflow: hidden;
background: #FF9D34;
height: 100px;
width: 80%;
margin: auto;
display: block;
position: absolute;
top: 178px;
border-radius: 10px;
z-index: 0;
}
.all-events .left-side span{
float: left;
color: #000000;
text-transform: uppercase;
font-size: 25px;
padding-left: 20px;
padding-top: 40px;
}
.all-events .left-side .glyphicon {
font-size: 45px;
color: #000;
}
.all-events .right-side span{
float: right;
color: #000000;
text-transform: uppercase;
font-size: 25px;
}
.main-content {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
background: #FF931D;
margin: auto;
}
.main-content .left-content .top-content{
float: left;
overflow: hidden;
display: block;
width: 55%;
height: 340px;
margin-top: 22px;
}
.main-content .left-content .top-content img {
width: 600px;
height: 300px;
}
.main-content .left-content .bottom-content{
float: left;
overflow: hidden;
display: block;
width: 75%;
height: 340px;
margin-top: 10px;
}
.main-content .left-content .bottom-content img {
width: 600px;
height: 300px;
}
.main-content .right-content {
float: right;
overflow: hidden;
display: block;
width: 40%;
margin: -688px 52px 0 0;
}
.main-content .right-content img {
width: 522px;
height: 648px;
}
footer{
overflow: hidden;
display: block;
height: 410px;
width: 90%;
margin: auto;
background-color: #FF931D;
}
footer .left-footer {
float: left;
width: 350px;
overflow: hidden;
display: block;
}
footer .middle-footer {
width: 350px;
overflow: hidden;
display: block;
}
.about {
height: 400px;
width: 400px;
border-radius: 50%;
background: #fff;
float: right;
position: relative;
top: -79px;
}
.about p {
position: absolute;
font-family: "OpenSans-CondLight";
font-size: 25px;
text-align: center;
top: 62px;
}
.about img {
width: 80px;
height: auto;
position: relative;
top: 240px;
left: 98px;
margin-left: 31px;
}
.button {
font-size: 15px;
color: blue;
cursor: pointer;
}
.button:active{
color: #000;
}
.caption {
background: #fff;
width: 599px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="IE=edge">
<title>Spotlight</title>
<!-- style -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<!-- js -->
<link rel="stylesheet" type="text/css" href="js/modernizr.js" media="all" />
</head>
<body>
<header>
<div class="container">
<div class="top-area">
<h2>24 hour event</h2>
</div>
<div class="logo-area">
<img src="images/logo.gif" alt="Logo">
</div>
<div class="search-box">
<div class="row">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
<div class="all-events">
<div class="left-side">
<span>donate here</span>
<div class="donate_img">
<img src="images/07.tif" alt="">
</div>
</div>
<div class="right-side">
<span>all events faq</span>
</div>
</div>
</div>
</header>
<section class="main-content">
<div class="container">
<div class="left-content">
<div class="top-content">
<img src="images/damien-rice-tour-italia.jpg" alt="">
<div class="caption">
<span>Damien Rice, Kildare Culture Centre at 8pm. Ref: DMK</span>
<div class="button">
Book now
</div>
</div>
</div>
<div class="bottom-content">
<img src="images/glenhansard_100x445.jpg" alt="">
<div class="caption">
<span>Glen Hansard, Olympia Theatre Dublin at 7pm. Ref: GHO </span>
<div class="button">Book now
</div>
</div>
</div>
</div>
<div class="right-content">
<img src="images/tommytiernan.jpg" alt="">
<div class="caption">
<span>Tommy Tiernan, Cork Comedy Club at 7pm. Ref: GHO</span>
<div class="button">Book now
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="left-footer">
<span>Click on the blue <div class="button">Book now</div> now link on any
event enter your email and you will recive your
ticket via email.
Alternativly or if you have any questions not
listed on the faq tab you can book your tocket
dierectly with us qouting the event refrence
number.
</span>
</div>
<div class="middle-footer">
<span>phone:0741237451
email:24hourevent#spotlight.ie
get involved
Would you like to volunteer even one
hour of your time. Make a diffrence
contact us at:
volunteer#spotlight.ie
</span>
</div>
<div class="about">
<p>ABOUT <br>
Focas Ireland works with
people who are homeless or
who are at risk of losing there
homes across ireland.
<br> Focas Ireland website click </p>
<img src="images/d2c4efe596a6d313c1005ff33ff627ff.jpeg" alt="focus">
<img src="images/here_fixed_wm.jpg" alt="download">
</div>
<div class="social-icons">
<img src="images/youtube heart shaped free social media icon .png" alt="you tube">
<img src="images/Facebook heart shaped free social media icon.png" alt="facebook">
<img src="images/twitter heart shaped free social media icon.png" alt="twitter">
</div>
</div>
</footer>
</body>
</html>
My main problem is in my footer I can't change the color. Image bottom side. Can anyone help me?
You can try adding this line of CSS:
footer:after {
content: "";
display: table;
clear: both;
}
i build a little landing page with some scrolling and some first information.
It works on Chrome/Firefox/Safari but not on IE/Edge. IE/Edge doesn't load any Style. It is like there isn't any CSS.
My CSS is valid and I read about some Problems with IE but I don't find a solution. What points I should check to get a working solution for IE/Edge?
Here is the HTML Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" initial-scale="1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>TITLE</title>
<link rel="stylesheet" href="styles/large.css" type="css/text" media="screen and (min-width: 1200px)" />
<link rel="stylesheet" href="styles/middle.css" type="css/text" media="screen and (min-width: 1000px)" />
<link rel="stylesheet" href="styles/small.css" type="css/text" media="screen and (min-width: 860px)" />
<link rel="stylesheet" href="styles/mobil.css" type="css/text" media="screen and (max-width: 860px)" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 0) {
$('#scroll-arrow').animate(
{opacity : 0}, 1000);
}
else {
$('#scroll-arrow').animate(
{opacity : 1}, 100);
}
});
</script>
<script type="text/javascript">
$(document).ready(function(){
var screenheight = $(window).height();
var secondsiteheight = $("#second-site").height();
var headerheight = $("#headertext").height();
var margin = (screenheight - secondsiteheight) / 2;
$("#first-site").height(screenheight);
$("#second-site").css("margin-top", margin);
$("#second-site").css("margin-bottom", margin);
var arrowheight = $("#scroll-arrow>img").height();
var top = screenheight - arrowheight - headerheight/2;
$("#scroll-arrow>img").css("top", top);
});
</script>
</head>
<body>
<div id="headertext">
HEADERTEXT
</div>
<div id="first-site">
<img src="img/background.png">
<div id="scroll-arrow">
<img src="img/Pfeil.png">
</div>
</div>
<div id="second-site">
<p>Some Text </p>
<p id="logoname">NAME</p>
<br>
<p>SOME MORE TEXT</p>
<a href=www.facebook.de/NAME>
<img id="fb" src="img/facebook.png">
</a>
<br><br>
<p>Some more Text</p>
<p>Some more Text</p>
</div>
</body>
</html>
And here is also the CSS (large.css for example)
#import url(https://fonts.googleapis.com/css?family=Cinzel);
*{
padding: 0;
margin: 0;
}
body{
margin: 0px auto;
padding: 0px;
background: url('../img/background.png') no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: auto 100%;
background-color: black;
overflow-x: hidden;
}
a{
text-decoration: none;
}
#headertext{
color: white;
text-align: center;
font-size: 25px;
margin-top: 15px;
font-family: 'Cinzel', serif;
width: 100%;
margin-left: auto;
margin-right: auto;
position: fixed;
margin-bottom: -15px;
}
#first-site img{
height: 90vh;
z-index: 1;
background-color: rgba(0,0,0,0);
visibility: hidden;
}
#scroll-arrow{
margin-left: auto;
margin-right: auto;
display: block;
text-align: center;
width: 100%;
}
#scroll-arrow img{
position: absolute;
visibility: visible;
height: 6vh;
width: 100%;
left: 50%;
transform: translateX(-50%);
}
#second-site{
background-color: rgba(0,0,0,0.7);
width: 100%;
margin-top: 10vh;
margin-bottom: 35vh;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding-bottom: 20px;
float: left;
text-align: center;
max-height: 100vh;
}
#second-site p{
color: white;
font-size: 25px;
}
#fb{
height: 30px;
margin-top: 5px;
}
#fb:hover{
height: 38px;
margin-bottom: -8px;
}
#logoname{
color: white;
text-align: center;
font-size: 25px;
font-family: 'Cinzel', serif;
}
I am new to this so. It is probably the basic stuff...I have problem with IE, it does not render web page as chrome and FF does. Those three boxes, boxleft, boxcenter and boxright odes not appear in line. last one, box out seems like drops down just beneath boxcenter. I try to find the answer but no luck. here is the html and css. any kind of help are very welcome. Thanks.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mainstyle.css" />
<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="header" class="container">
<div id="logo">
<img src="layout/img.png" width="415" height="90" alt="img" />
</div>
<!--END LOGO-->
<div id="mainmenu">
<ul>
<li>item 4</li>
<li>item 3</li>
<li>item 2</li>
<li>item 1</li>
<ul>
</div>
<!--END MAIN MENU-->
</div>
<!--END HEADER-->
<div id="mainmiddle" class="container"></div>
<!--END MAIN-MIDDLE SECTION-->
<div id="bottomsection" class="container">
<div id="bottomsectionName">
<p>PRODUCTS:</p>
</div>
<!-- END BOTTOM SECTION NAME-->
<div id="boxholder">
<div id="boxLeft">
<div class="label">
<p>
<a href="#">text
<a>
</p>
</div>
<!--END LABEL-->
<img src="layout/products.jpg" width="312" height="157" alt="" />
</div>
<!--END BOX LEFT-->
<div id="boxRight">
<div class="label">
<p>exclusive</p>
</div><!--END LABEL-->
<img src="layout/products.jpg" width="312" height="157" alt="" />
</div><!--END BOX RIGHT-->
<div id="boxCenter">
<div class="label">
<p>frost</p>
</div>
<!--END LABEL-->
<img src="layout/products.jpg" width="312" height="157" alt="" />
</div>
<!--END BOX CENTER-->
</div>
<!--END BOX HOLDER-->
</div>
<!-- END BOTTOM SECTION-->
<div id="info" class="container">
<div id="infoboxLeft" class="infotext"></div>
<!-- END INFO BOX LEFT-->
<div id="infoboxRight" class="infotext">
<p>info:<br />Address: </p>
</div>
<!-- END INFO BOX RIGHT-->
</div>
<!--END INFO SECTION-->
<div id="footer">
<p>Copyright: </p>
</div>
<!--END FOOTER-->
</body>
</html>
CSS
html, body
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
}
.container
{
margin: 0 auto;
width: 960px;
}
#header
{
background-color: #ffffff;
height: 180px;
overflow: hidden;
}
#logo
{
height: 100px;
margin: 0px, 0px, 0px, 0px;
}
#logo img
{
padding-top: 10px;
}
#mainmenu
{
height: 24px;
margin-top: 60px;
}
#mainmenu ul
{
list-style: none;
}
#mainmenu ul li
{
display: inline;
float: right;
font-family: Verdana;
font-size: 1.125em;
margin-top: -2px;
padding-left: 10px;
text-transform: uppercase;
}
#mainmenu ul li a
{
color: #c93159;
text-decoration: none;
}
#mainmenu ul li a:hover
{
text-decoration: none;
}
#mainmiddle
{
background: url(layout/norway.jpg) no-repeat;
height: 400px;
}
#bottomsection
{
height: 185px;
margin-top: 0px;
padding-top: 0px;
}
#bottomsectionName
{
height: 28px;
overflow: hidden;
}
#bottomsectionName p
{
color: 000000;
float: right;
font-family: Verdana;
font-size: 1.125em;
margin-top: 3px;
}
#boxholder
{
height: 157px;
}
.label
{
background-color: #c93159;
height: 24px;
margin-left: 104px;
margin-top: 109px;
position: absolute;
width: 208px;
z-index: 10;
}
.label p
{
color: #ffffff;
float: right;
font-family: Verdana;
font-size: 1.125em;
margin-right: 7px;
margin-top: 0px;
}
.label p a
{
color: #ffffff;
text-decoration: none;
text-transform: lowercase;
}
#boxLeft
{
float: left;
height: 157px;
width: 312px;
}
#boxCenter
{
height: 157px;
margin-left: 324px;
width: 312px;
}
#boxRight
{
float: right;
height: 157px;
width: 312px;
}
.infotext
{
font-family: Verdana;
font-size: 0.667em;
}
#info
{
height: 150px;
margin: 0px, 0px,0px,0px;
overflow: hidden;
}
#infoboxLeft
{
float: left;
height: 150px;
width: 480px;
}
#infoboxRight
{
float: right;
height: 150px;
width: 480px;
}
#infoboxRight p
{
float: right;
margin-right: 5px;
margin-top: 110px;
text-align: right;
}
#footer
{
overflow: hidden;
padding: 0px 0px 10px 0px;
}
#footer p
{
font-family: Verdana;
font-size: 0.667em;
text-align: center;
}
Your going to have to write IE specific CSS. My suggestion would be to do it using conditional comments like this:
<!--[if IE]>
.container
{
margin: 0 auto;
width: 960px;
}
#header
{
background-color: #ffffff;
height: 180px;
overflow: hidden;
}
<![endif]-->
<!--[if IE 6]>
My page's CSS goes here
<![endif]-->
<!--[if gte IE 8]>
My page's CSS goes here
<![endif]-->
<!--[if lt IE 9]>
My page's CSS goes here
<![endif]-->
You can use these types of if statements to set your CSS for specific versions of IE. You'll have to adjust the values in each one and test in IE to get it to look how you want it. This will not affect how it appears in other browsers. Also you don't have to put all of your page's CSS inside these comments, just what isn't displaying correctly in IE.