I'm making a 960px template and I'm experiencing a problem when squeezing the browser window. The box-shadow on the right is gone whenever I make the window smaller than my elements min-width. Why is that happening?
HTML:
<!DOCTYPE html>
<html>
<head>
<?$APPLICATION->ShowHead();?>
<title><?$APPLICATION->ShowTitle();?></title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="panel">
<?$APPLICATION->ShowPanel();?>
</div>
<div class="container">
<header>
<div class="logotype">
<img src="<?=SITE_TEMPLATE_PATH?>/images/logotype.png">
</div>
<div class="login">
<a>Вход</a>
</div>
<div class="info">
<p>Уфа, Софьи Перовской 54</p>
<p>7 (347) 266-69-54</p>
<p>info#ufawell.ru</p>
</div>
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
</header>
<?
if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true)
die();
?>
<footer>
<div class="copyright">
<p>© «ИП Тухватуллин Р.Р.», 2015.</p>
</div>
</footer>
</div> <!--.container-->
</body>
</html>
CSS:
#panel {min-width: 960px;}
body {background: url(images/bg-2.jpg) no-repeat ; background-size: cover;}
.container {
width: 960px;
min-height: 800px;
position: relative;
margin: 10px auto;
background-color: #f3f3f3;
box-shadow: 3px 3px 8px #9c9c9c;
-moz-box-shadow: 3px 3px 8px #9c9c9c;
-webkit-box-shadow: 3px 3px 8px #9c9c9c;
box-shadow: 3px 3px 8px #9c9c9c;
}
/*
header {height: 100px; padding: 10px; width: 940px;}
.logotype {width: 200px;}
.logotype img {padding: 0 0 10px 0;}
.login {width: 200px;}
.info{width: 200px;}
nav {background-color: #961c00; width: 940px;}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
height: 30px;
}
nav ul li {
display: inline-block;
width: 80px;
}
footer .copyright {padding: 5px; width: 950px; background-color: #c1c1c1; bottom: 0px; position: absolute;}
*/
Its because box-shadow is not an actual object. Meaning that the width of .container is not calculated with the shadow width.
Add a small padding to your body. E.g padding: 5px; and the shadow will still be visible.
body {background: url(images/bg-2.jpg) no-repeat ; background-size: cover; padding: 5px;}
or add a media query that makes the container 100% of the viewport width minus the shadow.
#media only screen and (max-width: 800px){
.container {
width: calc(100vw - 10px);
min-width: 0;
}
}
Related
I am creating a website for a small project. One of the web pages includes a slideshow that should be manually operated using two buttons. How can i have the buttons placed infront of the slideshow image?
.slideshow-container {
border: solid black 5px;
border-radius: 20px;
margin: 70px;
box-shadow: -40px -40px 0px 10px #f0f030, -40px -40px 0px 15px black;
width: 550px;
}
#slideShowImage {
width: 100%;
border-radius: 3%;
display: block;
}
.slideshow-buttons {
display: flex;
justify-content: space-around;
}
<section class="slideshow-container">
<img id="slideShowImage" src="https://via.placeholder.com/450x150" alt="slideshow">
<div class="slideshow-buttons">
<button class="slideshow-button-right" onclick="plusDivs(-1)">❮</button>
<button class="slideshow-button-left" onclick="plusDivs(+1)">❯</button>
</div>
</section>
<footer class="footer">
</footer>
I have tried changing the position on the image to absolute and the buttons to relative (& the other way around because i dont know what im doing)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Womxn Skate History</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="..\css\bootstrap.min.css">
</head>
<header>
</header>
<body >
<section class="slideshow-container">
<img id="slideShowImage" src="img1.jpeg" alt="slideshow"/>
<div class="slideshow-buttons">
<button class="slideshow-button-right" onclick="plusDivs(-1)">❮</button>
<button class="slideshow-button-left" onclick="plusDivs(+1)">❯</button>
</div>
</section>
</div>
</body>
<footer class="footer">
</footer>
<script src="JS/script.js"> </script>
</html>
CSS:
.slideshow-container {
border: solid black 5px;
border-radius: 20px;
margin: 70px;
box-shadow: -40px -40px 0px 10px #f0f030, -40px -40px 0px 15px black;
width: 550px;
position: relative;
}
#slideShowImage {
width: 100%;
border-radius: 3%;
display: block;
object-fit: cover;
}
.slideshow-button-right {
position: absolute;
left: 15px;
top: 50%;
}
.slideshow-button-left {
position: absolute;
right: 15px;
top: 50%;
}
Below print screen from google chrome html/css view.
One element under another, margin: 10px;, so they should be 20px from each other.
But they aren't. They are 10px apart, like the margins are connected.
body {
margin: 0;
background-image: url("2.png");
background-repeat: repeat-x;
font-family: 'Verdana';
font-size: 17px;
}
#logo {
background-image: url("logo.png");
width: 527px;
height: 58px;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
margin-top: 7px;
}
.hidden {
display: none;
}
.nav {
background-color: #55585d;
height: auto;
margin-top: 10px;
border-bottom: 2px solid #44474c;
border-top: 2px solid #44474c;
text-align: center;
}
.nav > ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.nav > ul li {
display: inline-block;
padding: 5px;
margin-right: 30px;
font-weight: 700;
}
/* 1195px width */
#center {
width: 1195px;
margin-left: auto;
margin-right: auto;
}
#container {
width: 864px;
min-height: 500px;
margin-left: 16px;
float: left;
}
.post {
width: 392px;
height: 453px;
box-shadow: 3px -3px 6px 0px #000000,
-1px 1px 1px 0px #000000;
margin: 10px;
float: left;
}
#aside {
width: 315px;
float: left;
min-height: 500px;
}
.abox1 {
margin: 10px;
width: 279px;
height: 453px;
box-shadow: 3px -3px 6px 0px #000000,
-1px 1px 1px 0px #000000;
}
<!DOCTYPE html>
<html lang="pl">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>Devloger</title>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<div id="logo"></div>
<h1 class="hidden">Devloger</h1>
<nav>
<div class="nav">
<ul>
<li>
Strona Główna
</li>
<li>
Kategorie
</li>
<li>
Spis Treści
</li>
<li>
Współpraca
</li>
<li>
Kontakt
</li>
</ul>
</div>
</nav>
</header>
<div id="center">
<main>
<div id="container">
<div class="post">
</div>
<div class="post">
</div>
<div class="post">
</div>
<div class="post">
</div>
<div class="post">
</div>
<div class="clear" style="clear: both;"></div>
</div>
</main>
<aside>
<div id="aside">
<div class="abox1">
</div>
<div class="abox1">
</div>
<div class="abox1">
</div>
</div>
</aside>
</div>
<div class="clear" style="clear: both;"></div>
</body>
</html>
There are cases (you can read about it here) where margins between elements are collapsed (overlapped, one on top of the other), and this is an intended behaviour, so it's not an error.
This is one of these cases and your current issue:
Adjacent siblings
The margins of adjacent siblings are collapsed (except when the later sibling needs to be cleared past floats).
First you have some .post blocks with that margins, but these margins are working well because that blocks are floated. If you remove float: left from .post class you will see that these blocks margins are collapsed as well.
Knowing that margin collapsing exists, you can take it into account when designing layouts:
Page flow goes from left to right, top to bottom. So instead of define a margin-top and margin-bottom, define only a margin-bottom.
aside {
width: 315px;
float: left;
min-height: 500px;
}
.abox1 {
margin: 0 10px 20px 10px;
width: 279px;
height: 453px;
box-shadow: 3px -3px 6px 0px #000000,
-1px 1px 1px 0px #000000;
}
<aside>
<div class="abox1"></div>
<div class="abox1"></div>
<div class="abox1"></div>
</aside>
Yo! So i'm currently creating a new website using a vertical header i guess you could say for the first time and i've encountered a problem where the link gets removed from the image when I use a fixed position on it.
Thanks in advance!
.header {
width: 200px;
height: 100%;
background-color: #212121;
top: 0;
left: 0;
position: fixed;
-webkit-box-shadow: 2px 0px 1px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 2px 0px 1px 0px rgba(0,0,0,0.5);
box-shadow: 2px 0px 1px 0px rgba(0,0,0,0.5);
}
.menu {
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
}
.menu li a {
display: block;
text-decoration: none;
background-color: #3AC6F4;
padding: 15px 0 15px 10px;
margin-top: 1px;
color: white;
transition: opacity .15s ease-in-out;
-moz-transition: background-color .15s ease-in-out;
-webkit-transition: background-color .15s ease-in-out;
}
.menu li a:hover {
background-color: white;
color: black;
}
.container1 {
margin: 0 auto;
width: 700px;
}
.footer {
position: fixed;
bottom: 30px;
padding: 25px;
height: 150px;
width: 150px;
}
.footertext {
text-align: center;
padding-top: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet">
<link href="css/images/favicon.ico" rel="shortcut icon">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Loom | Home</title>
</head>
<body>
<div class="header">
<div class="menu">
<ul>
<li>HOME</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
<div class="footer">
<img src="css/images/loombottomlogo.svg" alt="Logo">
<div class="footertext">
#2016 ExLoom.<br/> All Rights Reserved.
</div>
</div>
</div>
<div class="container1">
<div class="titlebackground">
<div class="title">
text
</div>
</div>
<div class="titlep">
text
</div>
</div>
<div class="footer">
</div>
</body>
</html>
I deleted the additional empty <div class="footer"> (last <div> in your <body> element near the end of your HTML code) and it works.
You have two <div class="footer">'s
Hi guys I have a question that is why does the whole page of my website move slightly to the left (10 - 30 px or so) when I insert an image and goes back to normal when I remove it. Any help at all is appreciated.
Html code-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="description" content="Random Text">
<meta name="keywords" content="Random words">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>X</title>
<link href="menusheet.css" rel="stylesheet" type="text/css">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="header">
<div id="logo"><img src="images/bar.png" alt="knives"/></div>
</div>
<div id="wrapper">
<!-- Black Menu -->
<div id="menu_wrapper" class="black">
<div class="left"></div>
<ul id="menu">
</div>
</div>
<div id="content">
<div id="container">
<div id="adsense">
</div>
<div id="stepsbox">
</div>
</div>
<h4>Factory edges</h4><img src="images/factoryangle.png" alt="Factory angles" style="float:left; margin-right: 20px; width: 175px; height: 175px;"/>
</div>
<div id="footer">
<div id="footerleft">
<ul>
<li>Home</li>
<li>Site Map</li>
</ul>
</div>
<div id="footercenter">
© 2013 x.com
</div>
</div>
CSS -
body {
width: 960px;
margin: 0 auto;
font-family: Arial, Verdana, sans-serif;
color: black;
background-image: url(images/bg.jpg) ;
background-repeat: no-repeat;
background-size: cover;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
#content {
width: 920px;
height: 100%;
overflow: hidden;
background-color: white;
padding: 0px 20px 0px 20px;
margin: 0px 0px 0px 0px;
}
#container {
width: 300px;
height: 550px;
float: right;
background-color: black;
margin-left: 10px;
}
#adsense {
width: 300px;
height: 250px;
float: right;
background-color: yellow;
}
#stepsbox {
float:right;
width: 250px;
height: 220px;
padding: 15px 15px 15px 15px;
background-color: #E0E0E0;
margin: 10px 0px 5px 10px;
}
#header {
height: 70px;
background: white;
width: 960px;
margin: 0 auto;
}
#footer {
height: 60px;
font-size: 80%;
padding: 5px 5px 5px 5px;
background-color: #333333;
color: white;
}
#footerleft {
width: 300px;
height: 50px;
float: left;
}
#footercenter {
width: 620px;
height: 40px;
float: right;
text-align: right;
padding: 5px 5px;
border-style:solid;
border-width:5px;
}
Can't seen your images... :D, But in your places I insert into css this code
img{
margin: 0px;
padding: 0px;
border: 0px;
}
This remove any spaces aruound the images tag... try it and look forward...
It, Would be grate if you insert a image link... :)
EASLY to understand
Talking about which image "logo" or
<h4>Factory edges</h4><img src="images/factoryangle.png" alt="Factory angles" style="float:left; margin-right: 20px; width: 175px; height: 175px;"/>
if Factory edge is the image then add one after
<h4>Factory edges</h4><br />
<img src="images/factoryangle.png" alt="Factory angles"style="float:left; margin:0 20px 0 0; width:175px; height:175px;" />
Also add this in style
#content{margin:0 auto; }
with other properties in content
I think this will do, if not please explain in detail.. :)
I have following HTML layout
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
margin:10px 0px 0px 0px;
font-size: 11px;
font-family: Arial,Tahoma, sans-serif;
background: #fff;
color: #444;
}
h1 {
font-size:1.5em;
font-weight: bold;
}
#container {
width: 920px;
margin: 0 auto;
background-color: red
}
#header {
border: 2px solid #ccc;
height: 80px;
}
#content{
display: block;
width: 100%
}
#left {
clear: left;
float: left;
width: 660px;
border: 2px solid #ccc;
margin:0 0 10px 0;
padding:20px;
}
#right {
position: relative;
margin: 0 5px 0 5px;
padding: 5px 0px 0px 0px;
float: right;
width: 200px;
border: 2px solid #ccc;
}
#footer {
clear: both;
border: 2px solid #ccc;
padding: 10px 0 20px 0;
margin: 20px 0 0 0;
font-size: .9em;
color: #9b9b9b;
width: 100%;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="container">
<div id="header" >
<h1>Header</h1>
</div>
<div id="content">
<div id="left">
<h1>Left</h1>
</div>
<div id="right">
<h1>Right</h1>
</div>
</div>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</body>
</html>
My problem is #container doesn’t hold the #left & #right contents, it only holds #header
Please refer attached imaged to see what my intended layout is.
You can add an empty element that has 'clear:both' at the end of the container:
<div id="container">
<div id="header" >
<h1>Header</h1>
</div>
<div id="content">
<div id="left">
<h1>Left</h1>
</div>
<div id="right">
<h1>Right</h1>
</div>
<div style="clear:both"> </div>
</div>
</div>
I was able to achieve the intended result by using overflow: hidden; property
#container {
width: 920px;
margin: 0 auto;
background-color: red;
overflow: hidden;
}
Use a clearfix solution i.e.
common un-obtrusive clearfix solution