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;
}
Related
I've built a simple image slider using html, css and jquery. You basically switch between images using arrows, however, the real trouble came when I tried to make it responsive. The arrows always break and display either above or under the image.
in normal browser window
when making the browser window smaller, this happens
Any idea on how to make them responsive? Thanks in advance.
$(document).ready(function() {
$('.next').on('click', function() {
var currentImg = $('.active');
var nextImg = currentImg.next();
if(nextImg.length) {
currentImg.removeClass('active').css('z-index', -10);
nextImg.addClass('active').css('z-index',10);
}
});
$('.prev').on('click', function() {
var currentImg = $('.active');
var prevImg = currentImg.prev();
if(prevImg.length) {
currentImg.removeClass('active').css('z-index', -10);
prevImg.addClass('active').css('z-index',10);
}
});
});
body {
background-image: url("../images/bg.png");
background-size: 100%;
font-size: 100%;
font-family: "Roboto",sans-serif;
color: white;
}
.container {
max-width: 1250px;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
}
a {
color: #fff;
text-decoration: none;
}
.slider-inner {
max-width: 1200px;
height: 675px;
position: relative;
overflow: hidden;
float: left;
padding: 0.1875em;
border: #666 solid 1px;
}
.slider-inner img {
display: none;
width: 1200px;
height: 675Px;
}
.slider-inner img.active {
display: inline-block;
}
.prev, .next {
margin-top: 18.75em;
float: left;
cursor: pointer;
}
.prev {
position: relative;
z-index: 100;
margin-right: -2.8125em;
}
.next {
position: relative;
margin-left: -2.8125em;
z-index: 100;
}
.nadpis {
font-weight: 400;
text-align: center;
}
.podnadpis {
text-align: center;
font-weight: 100;
font-size: 3em;
margin-top: 2em;
}
.img-slider {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vlastna responzivna stranka</title>
<link rel="stylesheet" href="css/styles2.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;400&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="nadpis">Take zaujimave veci, ktore sa daju spravit s JS a JQuery</h1>
<h2 class="podnadpis">Image Slider</h2>
<div class="slider-outer">
<img src="img-slider/arrow-left.png" alt="left arrow" class="prev">
<div class="slider-inner">
<img src="img-slider/john-jpg.jpg" class="active" alt="">
<img src="img-slider/butterflies-jpg.jpg" alt="">
<img src="img-slider/andrew-jpg.jpg" alt="">
<img src="img-slider/taylor-jpg.jpg" alt="">
</div>
<img src="img-slider/arrow-right.png" alt="next arrow" class="next">
</div>
</div>
<script src="javascript/jquery.js"></script>
<script src="javascript/main.js"></script>
</body>
</html>
You use can position:absolute and left:0 or right:0 for prev and next selector.
EDIT:
Good for you to use with this:
.slider-outer {
position:relative;
}
$(document).ready(function() {
$('.next').on('click', function() {
var currentImg = $('.active');
var nextImg = currentImg.next();
if(nextImg.length) {
currentImg.removeClass('active').css('z-index', -10);
nextImg.addClass('active').css('z-index',10);
}
});
$('.prev').on('click', function() {
var currentImg = $('.active');
var prevImg = currentImg.prev();
if(prevImg.length) {
currentImg.removeClass('active').css('z-index', -10);
prevImg.addClass('active').css('z-index',10);
}
});
});
body {
background-image: url("../images/bg.png");
background-size: 100%;
font-size: 100%;
font-family: "Roboto",sans-serif;
color: white;
}
.container {
max-width: 1250px;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
}
a {
color: #fff;
text-decoration: none;
}
.slider-inner {
max-width: 1200px;
height: 675px;
position: relative;
overflow: hidden;
float: left;
padding: 0.1875em;
border: #666 solid 1px;
}
.slider-inner img {
display: none;
width: 1200px;
height: 675Px;
}
.slider-inner img.active {
display: inline-block;
}
.prev, .next {
margin-top: 18.75em;
/*float: left; remove */
cursor: pointer;
width: 60px;
}
.prev {
z-index: 100;
margin-right: -2.8125em;
position:absolute;
left:0;
}
.next {
margin-left: -2.8125em;
z-index: 100;
position:absolute;
right:0;
}
.nadpis {
font-weight: 400;
text-align: center;
}
.podnadpis {
text-align: center;
font-weight: 100;
font-size: 3em;
margin-top: 2em;
}
.img-slider {
text-align: center;
}
.slider-outer {
position:relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vlastna responzivna stranka</title>
<link rel="stylesheet" href="css/styles2.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;400&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="nadpis">Take zaujimave veci, ktore sa daju spravit s JS a JQuery</h1>
<h2 class="podnadpis">Image Slider</h2>
<div class="slider-outer">
<img src="https://www.seekpng.com/png/detail/13-134931_white-curved-arrow-png-graphic-download-white-curved.png" alt="left arrow" class="prev">
<div class="slider-inner">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxNUlvSKCK4HnDA4_ZnFphN4O6vj2DxrHNdw&usqp=CAU" class="active" alt="">
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxNUlvSKCK4HnDA4_ZnFphN4O6vj2DxrHNdw&usqp=CAU" alt="">
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
</div>
<img src="https://www.seekpng.com/png/detail/13-134931_white-curved-arrow-png-graphic-download-white-curved.png" alt="next arrow" class="next">
</div>
</div>
<script src="javascript/jquery.js"></script>
<script src="javascript/main.js"></script>
</body>
</html>
#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>
I am working on a little project. Until now everything went well, but for one reason or another, when I am making my second page, it will only load a part of the CSS (everything until calendar). I tried to put it in another CSS file and link the two files to the HTML file, and that works, but I would like to have all my CSS in just one file.
Can you help me?
Here is my code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header">
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="headerWrapper">
<h1>Volg ons leven op deze website!</h1>
</div>
</div>
<div class="timeline" id="timeline">
<div class="timelineWrapper">
<h3>Tijdlijn</h3>
<div class="timelinegrid">
<img src="./assets/pictures/family_pic.jpg">
<p>Zeeland - 2018</p>
<p>Welkom Tuur in de familie - 11/01/2018</p>
<img src="./assets/pictures/tuur.jpg">
<img src="./assets/pictures/verjaardag-marie-2017.jpg">
<p>Verjaardag Marie - 2017</p>
<p>Verjaardag Eline - 2016</p>
<img src="./assets/pictures/verjaardag-eline-2016.jpg">
</div>
</div>
</div>
</body>
</html>
calendar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="calendar">
<div class="calendarWrapper">
<h3>Kalender</h3>
<div class="cal">
<!-- CalendarLink -->
</div>
</div>
</div>
style.css
#import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
html {
font-family: 'Oswald', sans-serif;
}
a {
text-decoration: none;
color: inherit;
}
/* Header */
.header {
background-image: url(assets/pictures/hero_bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 90vh;
max-width: 100%;
}
.nav {
width: 100%;
height: 100px;
}
.navWrapper {
width: 85%;
margin: auto;
}
.navWrapper img {
height: 35px;
padding-top: 32.5px;
}
.right {
padding-top: 32.5px;
float: right;
}
#homepage, #calendar, #photoalbum, #lists, #recipes {
color: #000;
font-weight: bold;
font-size: 16px;
margin-right: 35px;
letter-spacing: 0.6px;
}
.headerWrapper {
padding-top: 235px;
}
.headerWrapper h1 {
font-size: 8vw;
font-weight: bold;
color: #4A4A4A;
text-align: center;
letter-spacing: 3.33px;
}
/* Timeline */
.timeline {
width: 100%;
}
.timelineWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.timelineWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
.timelinegrid {
margin-top: 40px;
display: grid;
grid-template-columns: 500px 500px;
grid-auto-rows: auto auto;
grid-gap: 2%;
align-items: end;
justify-content: center;
}
.timelinegrid img {
width: 100%;
}
.timelinegrid p {
font-size: 30px;
color: #4A4A4A;
}
/* Calendar */
.calendar {
width: 100%;
}
.calendarWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.calendarWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
Your css has an error. In .timelinegrid(line 98), you have align-items set to end.
If you fix this, the css should fully load.
https://www.w3schools.com/cssref/css3_pr_align-items.asp
Im working on a code and I would like to make the space between "Szafranowka" and "Apartaments & Restaurant" smaller. Here's how it looks like now: https://gyazo.com/d6843d8857e954acbae5c1da748c044b
I really cannot find the answer that would perfectly fit my expectations. Please, could any1 help me? :)
Also, I would like to make a small square around "Wejscie/Entrance", but when im trying to do it with the border, it looks like this: https://gyazo.com/f84fedc7a78854773b287e01ebd3a21f
Here's a part of code that im using to make a border:
<h5 style="border:3px; border-style:solid; border-color:#000000; padding: 1em;">Wejscie/Entrance</h5>
and here's my code:
HTML:
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
</head>
<body>
<!-- Główny DIV całej strony -->
<div id="container">
<!-- Lewa część tła strony, zamknięta w divie -->
<div id="background">
<img src="background.jpg"> </img>
</div>
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <h5 id="entrance">Wejscie/Entrance</h5>
</div>
</div>
</body>
</html>
CSS:
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
filter: blur(3px);
filter: contrast(50%);
filter: brightness(30%);
}
#background img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#header
{
position: absolute;
z-index: 1;
font-family: 'Tangerine', cursive;
text-align: center;
color: #9F5F9F;
font-size: 70px;
display: table-cell;
vertical-align: middle;
width: 100%;
text-shadow: 2px 2px #660055;
}
to your #entrance, try this :
#entrance {
width: 8rem; //or another size
margin auto; // to center
border: 2px solid;
}
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <span id="entrance">Wejscie/Entrance</span>
</div>
CSS:
h2{
margin:5px;
line-height:15px
}
#entrance{
border:1px solid;
}
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
<style>
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
filter: blur(3px);
filter: contrast(50%);
filter: brightness(30%);
}
#background img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#header
{
position: absolute;
z-index: 1;
font-family: 'Tangerine', cursive;
text-align: center;
color: #9F5F9F;
font-size: 70px;
display: table-cell;
vertical-align: middle;
width: 100%;
text-shadow: 2px 2px #660055;
}
#header h2
{
margin-bottom: -30px;
}
#entrance span
{
border: 1px solid;
padding: 15px;
}
</style>
</head>
<body>
<!-- Główny DIV całej strony -->
<div id="container">
<!-- Lewa część tła strony, zamknięta w divie -->
<div id="background">
<img src="background.jpg"> </img>
</div>
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <h5 id="entrance"><span>Wejscie/Entrance</span></h5>
</div>
</div>
</body>
</html>
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;">