Trying to make logo/image become larger when cursor on it - however it enlarges when your are on areas where the image is not even there - https://gyazo.com/a505f013f6f18a16c13514458cf95f12
I watched a youtube tutorial to do the enlarging - im not sure if it is the image that for some reason is too wide but i have specified the width? The dimensions of the logo/image as per the file is 1024x1024
HTML:
<html>
<head>
<title> Moral & Ethical Issues Concerning the use of Computer Technology </title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap" rel="stylesheet">
<body>
<div class="main">
<nav>
<div class="logo">
<img src="logo.png">
</div>
<div class="navigation-links">
<ul>
<li>general</li>
<li>pages</li>
<li>contact</li>
</ul>
</div>
</nav>
<div class="gift">
<img src="giftbox.png" onmouseover=this.src="giftboxhover.png" onmouseout=this.src="giftbox.png">
</div>
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat Alternates', sans-serif;
}
.logo {
flex-basis: 15%;
margin: 0;
}
.logo img{
padding: 35px;
width: 250px;
height: 250px;
transition: transform .9s ease;
overflow: hidden;
}
.logo:hover img{
transform: scale(1.35)
}
.navigation-links{
flex: 1;
text-align: right;
margin-top: -205px;
margin-right: 96px;
}
.navigation-links ul li {
list-style: none;
display: inline-block;
margin: 15;
font: Montserrat;
font-weight: 700;
}
.navigation-links ul li a{
color: #fff;
text-decoration:none;
}
.gift img{
height: 60px;
float: right;
margin-top: -61px;
padding-right: 20px;
}
.main{
width: 100%;
height: 100vh;
color: fff;
background: linear-gradient(-60deg, #FFC300, #FF8166, #0087FF, #F44FFF);
background-size: 400% 400%;
position: relative;
overflow: hidden;
animation: changebackground 35s ease-in-out infinite;
}
#keyframes changebackground {
0%{
background-position: 0 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0 50%;
}
}
It happen because your .logo div is taking a width at that place of the screen.
You can read about How to make a div not larger than its contents.
The solution I used was to define max-width to the logo div and that's it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat Alternates', sans-serif;
}
.logo {
flex-basis: 15%;
margin: 0;
max-width: 300px;
}
.logo img {
padding: 35px;
width: 250px;
height: 250px;
transition: transform .9s ease;
overflow: hidden;
}
.logo:hover img {
transform: scale(1.35)
}
.navigation-links {
flex: 1;
text-align: right;
margin-top: -205px;
margin-right: 96px;
}
.navigation-links ul li {
list-style: none;
display: inline-block;
margin: 15;
font: Montserrat;
font-weight: 700;
}
.navigation-links ul li a {
color: #fff;
text-decoration: none;
}
.gift img {
height: 60px;
float: right;
margin-top: -61px;
padding-right: 20px;
}
.main {
width: 100%;
height: 100vh;
color: fff;
background: linear-gradient(-60deg, #FFC300, #FF8166, #0087FF, #F44FFF);
background-size: 400% 400%;
position: relative;
overflow: hidden;
animation: changebackground 35s ease-in-out infinite;
}
#keyframes changebackground {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
<html>
<head>
<title> Moral & Ethical Issues Concerning the use of Computer Technology </title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap" rel="stylesheet">
<body>
<div class="main">
<nav>
<div class="logo">
<img src="logo.png">
</div>
<div class="navigation-links">
<ul>
<li>general</li>
<li>pages</li>
<li>contact</li>
</ul>
</div>
</nav>
<div class="gift">
<img src="giftbox.png" onmouseover=this.src="giftboxhover.png" onmouseout=this.src="giftbox.png">
</div>
</div>
</body>
</html>
Note: in order to spot problems like this, just inspect the page's elements and check their sizes on the screen. Good Luck!
This is because you didn't give your Image hover, but the Parent div.
you need to change it like this:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat Alternates', sans-serif;
}
.logo {
flex-basis: 15%;
margin: 0;
}
.logo img{
padding: 35px;
width: 250px;
height: 250px;
transition: transform .9s ease;
overflow: hidden;
}
.logo img:hover{ /* <<<<--- You need to change here */
transform: scale(1.35)
}
.navigation-links{
flex: 1;
text-align: right;
margin-top: -205px;
margin-right: 96px;
}
.navigation-links ul li {
list-style: none;
display: inline-block;
margin: 15;
font: Montserrat;
font-weight: 700;
}
.navigation-links ul li a{
color: #fff;
text-decoration:none;
}
.gift img{
height: 60px;
float: right;
margin-top: -61px;
padding-right: 20px;
}
.main{
width: 100%;
height: 100vh;
color: fff;
background: linear-gradient(-60deg, #FFC300, #FF8166, #0087FF, #F44FFF);
background-size: 400% 400%;
position: relative;
overflow: hidden;
animation: changebackground 35s ease-in-out infinite;
}
#keyframes changebackground {
0%{
background-position: 0 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0 50%;
}
}
<html>
<head>
<title> Moral & Ethical Issues Concerning the use of Computer Technology </title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap" rel="stylesheet">
<body>
<div class="main">
<nav>
<div class="logo">
<img src="logo.png">
</div>
<div class="navigation-links">
<ul>
<li>general</li>
<li>pages</li>
<li>contact</li>
</ul>
</div>
</nav>
<div class="gift">
<img src="giftbox.png" onmouseover=this.src="giftboxhover.png" onmouseout=this.src="giftbox.png">
</div>
</div>
</body>
</html>
Related
so here is my problem. I have managed to put the image which is the logo at the left hand side of the header for both tablet and mobile version, however when I display it in the desktop version the logo is the left but not in the corner like I want it. I tried putting a right margin to it, but I think there is a better way to do it instead of doing that. the same thing happens with my ul list. it's in the right corner on both tablet and mobile but it is not in the desktop version. this is my code:
<!DOCTYPE html>
<html>
<link href='https://fonts.googleapis.com/css?family=Montserrat|Cardo' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.main_h {
position: fixed;
top: 0px;
max-height: 70px;
z-index: 999;
width: 100%;
padding-top: 17px;
background: none;
overflow: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
top: -100px;
padding-bottom: 6px;
font-family: "Montserrat", sans-serif;
}
#media only screen and (max-width: 766px) {
.main_h {
padding-top: 25px;
}
}
.open-nav {
max-height: 400px !important;
}
.open-nav .mobile-toggle {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
.sticky {
background-color: rgba(255, 255, 255, 0.93);
opacity: 1;
top: 0px;
border-bottom: 1px solid gainsboro;
}
.logo {
width: 150px;
font-size: 25px;
color: #8f8f8f;
text-transform: uppercase;
float: left;
display: block;
margin-top: 0;
line-height: 1;
margin-bottom: 10px;
}
#media only screen and (max-width: 766px) {
.logo {
float: none;
}
}
nav {
float: right;
width: 60%;
}
#media only screen and (max-width: 766px) {
nav {
width: 100%;
}
}
nav ul {
list-style: none;
overflow: hidden;
text-align: center;
float: right;
}
#media only screen and (max-width: 766px) {
nav ul {
padding-top: 10px;
margin-bottom: 22px;
float: left;
text-align: center;
width: 100%;
}
}
nav ul li {
display: inline-block;
margin-left: 35px;
line-height: 1.5;
text-align: center;
}
#media only screen and (max-width: 766px) {
nav ul li {
width: 100%;
padding: 7px 0;
margin: 0;
text-align: center;
}
}
nav ul a {
color: #000;
text-transform: uppercase;
font-size: 12px;
text-align: center;
}
.mobile-toggle {
display: none;
cursor: pointer;
font-size: 20px;
position: absolute;
right: 22px;
top: 0;
width: 30px;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
#media only screen and (max-width: 766px) {
.mobile-toggle {
display: block;
}
}
.mobile-toggle span {
width: 30px;
height: 4px;
margin-bottom: 6px;
border-radius: 1000px;
background: #8f8f8f;
display: block;
}
.row {
width: 100%;
max-width: 940px;
margin: 0 auto;
position: relative;
padding: 0 2%;
}
* {
box-sizing: border-box;
}
body {
color: #8f8f8f;
background: white;
font-family: "Cardo", serif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
}
h1 {
font-size: 30px;
line-height: 1.8;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
}
p {
margin-bottom: 20px;
font-size: 17px;
line-height: 2;
}
.content {
padding: 50px 2% 250px;
}
.hero {
position: relative;
background: url(http://www.philippefercha.com/cd/toggle-menu-bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
color: #fff;
padding-top: 110px;
min-height: 500px;
letter-spacing: 2px;
font-family: "Montserrat", sans-serif;
}
.hero h1 {
font-size: 50px;
line-height: 1.3;
}
.hero h1 span {
font-size: 25px;
color: #e8f380;
border-bottom: 2px solid #e8f380;
padding-bottom: 12px;
line-height: 3;
}
.mouse {
display: block;
margin: 0 auto;
width: 26px;
height: 46px;
border-radius: 13px;
border: 2px solid #e8f380;
position: absolute;
bottom: 40px;
position: absolute;
left: 50%;
margin-left: -26px;
}
.mouse span {
display: block;
margin: 6px auto;
width: 2px;
height: 2px;
border-radius: 4px;
background: #e8f380;
border: 1px solid transparent;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scroll;
animation-name: scroll;
}
#-webkit-keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
#keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
</style>
<body>
<header class="main_h">
<div class="row">
<img src = "logo.png" class="logo" href="#"></a>
<div class="mobile-toggle">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<ul>
<li>Home</li>
<li>Abous Us</li>
<li>Contact Us</li>
</ul>
</nav>
</div> <!-- / row -->
</header>
<script>
// Sticky Header
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('.main_h').addClass('sticky');
} else {
$('.main_h').removeClass('sticky');
}
});
// Mobile Navigation
$('.mobile-toggle').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.main_h').removeClass('open-nav');
} else {
$('.main_h').addClass('open-nav');
}
});
$('.main_h li a').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.navigation').removeClass('open-nav');
$('.main_h').removeClass('open-nav');
}
});
// navigation scroll lijepo radi materem
$('nav a').click(function(event) {
var id = $(this).attr("href");
var offset = 70;
var target = $(id).offset().top - offset;
$('html, body').animate({
scrollTop: target
}, 500);
event.preventDefault();
});
</script>
</body>
</html>
sorry to tell you that but I don't like your CSS, and opacity 0 on the entire page? float everywhere, I don't get it ^^ first of all try to put CSS in a CSS file and JS in a JS file
I did not understand what the span things were for, I removed them for the structure
now for the code
I can recommend using a structure, would be easier
something like this:
HTML:
body{
padding: 0;
margin: 0;
}
.col1x3{
width: 33%;
}
.col1x2{
width: 50%;
}
.element{
margin-right: -0.25em;
display: inline-block;
}
<div class="row">
<div class="container">
<div class="element col1x2">
<img src = "https://www.magknit.co.uk/staging/1365/wp-content/uploads/2020/10/descarga-1-1.png" class="logo" href="#"></a>
</div>
<div class="element col1x2">
<nav>
<ul>
<li class="element col1x3">Home</li>
<li class="element col1x3">Abous Us</li>
<li class="element col1x3">Contact Us</li>
</ul>
</nav>
</div>
</div>
</div>
I found out it is the max-width in the .row that is causing the problem. i had it set up to 960px so the row would not be longer than that. I just had to set it to whatever screen size I wanted and that is it.
I tried to add text on my background Image but it causes to background image distances from navbar
here is the HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital#1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>ElectroLand</title>
</head>
<body>
<!--Navbar Starts ====================================== -->
<header>
<div class="container">
<nav>
<div class="logo"><img src="/img/logo.png"></div>
<div class="nav-list">
<ul class="nav-item"><li>Home</li></ul>
<ul class="nav-item"><li>Products</li></ul>
<ul class="nav-item"><li>About</li></ul>
<div class="hamburger" onclick="clk()" id="burger">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
</div>
</div>
</nav>
</div>
<div class="sidemenu" id="sdmenu">
<div class="side-items">
<ul class="side-item"><li>Home</li></ul>
<ul class="side-item"><li>Products</li></ul>
<ul class="side-item"><li>About</li></ul>
</div>
</div>
</header>
<script src="/func.js"></script>
<!--Navbar End===========================================-->
<div class="mid-section">
<h1>Welcome to the Land of Electronics</h1>
</div>
</body>
</html>
and here is CSS:
/* Navbar starts ===============================================================================*/
body{
padding:0px;
margin:0px;
overflow-x: hidden;
}
.container{
width: 100%;
height:78px;
position: relative;
background-color: rgb(39, 44, 52);
z-index: 1;
}
.logo{
position: absolute;
padding:0.6%;
padding-top: 0.2%;
}
.nav-list{
font-family: 'Noto Serif', serif;
position: absolute;
right: 0px;
top: 1%;
display: flex;
padding:1.0%;
z-index: 1;
}
.nav-list a{
margin: 15px;
text-decoration: none;
color: #80e560;
transition: color 400ms ease-in-out;
}
.nav-list a:hover{
color: #a8fbfc;
}
.nav-list ul{
list-style-type: none;
}
.hamburger{
position: relative;
cursor: pointer;
display: none;
-moz-transform-origin: 20px;
-ms-transform-origin: 20px;
-o-transform-origin: 20px;
-webkit-transform-origin: 20px;
transform-origin: 20px;
transition: width 800ms ease-in-out;
transition: height 800ms ease-in-out;
}
.hamburger div{
width: 20px;
height: 2px;
background-color: #80e560;
margin: 3px;
margin-left: 50%;
transition: transform 210ms ease-in-out;
}
.sidemenu{
position: absolute;
right: 0px;
width: 40%;
height: 100%;
width: 20%;
background-color: rgb(39, 44, 52);
transform:translateX(100%);
transition:transform 500ms;
z-index: 1;
}
.side-items{
height:80%;
justify-content:space-between;
position: absolute;
display: flex;
flex-direction: column;
font-family: 'Noto Serif', serif;
align-items : space-between;
}
.side-item{
list-style-type: none;
}
.side-item a{
color: white;
text-decoration: none;
transition: color 500ms ease-in-out;
}
.side-item a:hover{color:#80e560;}
#media screen and (max-width:1500px){
.logo{padding-top: 0.3%;}
}
#media screen and (max-width:768px){
.nav-item{
display: none;
}
.hamburger{
display:inline;
bottom: 12px;
right: 35px;
}
.side-items{
right: 20%;
}
.nav-list{
padding: 40px;
}
.container{
height: 89px;
}
.logo{padding-top: 2%;}
}
#media screen and (max-width:568px){
.hamburger{
right: 50%;
}
.side-items{
right: 20%;
font-size: 12px;
}
.container{
height: 89px;
}
}
#media screen and (max-width:280px)
{
.side-items{
right: 9%;
}
.hamburger{
right: 6%;
}
}
/* Navbar Ends ========================================================================*/
.mid-section{
background-image: url(/img/background.jpg);
background-position:center;
background-size:cover;
width: 100vw;
height: 100vh;
}
h1{text-align: center;}
I'm working on those codes a lot. I got many problems about resizing and background Image but I could fix them (thanks a lot). but that's new. how do i do ? and here is the ugly result that i'm talking about:
The best option in your case is to reset the margin and padding applied to the element by default by the browser. Here is a great way to reset everything. Note that you will have to add custom padding and margin if you use this one. ( basically, it selects all the elements and give them margin and padding of 0 )
That's the best practice:
*,
*::before,
*::after {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Another option is to just remove the margin from the h1
h1 {
margin: 0
}
That will solve your problem without ruining your design. Although I prefer the first option since it's a common problem that you will face every time you add new element.
The default margin on your h1 element is causing the white space. Make your .mid-section a flexbox for a simple fix:
.mid-section{
background-image: url(/img/background.jpg);
background-position:center;
background-size:cover;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
}
The blue and red background you see in the images is a parallax scroll background. In front of that, I would like to add text with a white background. I need the white background to have around a 150px margin on either side, so that viewers still get to take a look at the parallax background. I have tried a lot of stuff and none has worked. Any ideas? (What it looks like now) (A crude drawing of what I want it to look like)
body {
margin: 0;
background: #FFF;
font-family: 'Alata', sans-serif;
font-size: 24px;
font-weight: 300;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #111;
}
header::after {
content:'';
display: table;
clear: both;
}
.logo {
float: left;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 50px;
position: relative;
}
nav a {
color: #FFF;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: #FFF;
font-weight: 600;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #FFF;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms
}
nav a:hover::before {
width: 100%
}
.parallax {
width: 100%; height: 100%;
position: relative; top: 0; left: 0;
background-image: url('parallax.jpg');
}
.main {
width: 50%; height: 100%;
position: relative; top: 0; left: 50%;
transform: translate(-50%, 0%);
background-color: RGBA(255, 255, 255, 1);
}
h1 {
width: 700px; height: 100%;
margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;
padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;
text-align: center;
margin: 0px auto !important;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Alata&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<header>
<div class="container">
<img src="logo.jpg" alt="logo" style="width:175px;height:140px;" class="logo">
<nav>
<ul>
<li>Home</li>
<li>Shop</li>
<li>My Story</li>
<li>Other Info</li>
<li>Terms Of Service</li>
</ul>
</nav>
</div>
</header>
</head>
<body>
<style>
.parallax {
background-image: url("parallax.jpg");
height: 1000px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<div class="main">
<h1>
PCs Built By A Fellow Gamer
</h1>
</div>
<div class="parallax"></div>
</body>
</html>
You don't need to use a div for the parrelax, just add the class to body and then make the following changes to .main
HTML
<body class="parallax">
CSS
height: 100%;
width:50%; /** Width of your white body **/
margin:0 auto;
background-color: RGBA(255, 255, 255, 1);
You can dictate the sizes of your margin with the width rule.
I have centered an image and made it a specific height and width, but when the browser dimension size is about 500px (in width), I would like the image to start resizing itself to fit the screen so scrolling is not necessary. How do I do this?
I will include all my code for the entire webpage in case this makes a difference.
#charset "utf-8";
/* CSS Document */
body {
background-color: white;
padding: 0px;
margin: 0px;
}
#menu {
font-size: 15px;
font-family: "Gadugi";
color: white;
}
span {
color: #989797;
}
#nav {
position: absolute;
top: 100px;
height: 45px;
width: 100%;
background-color: black;
z-index: -100;
text-align: center;
}
#menu ul {
height: auto;
padding: 8px 0px;
padding-top: 13px;
margin: 0px;
}
#menu li {
/*padding between words */
display: inline;
padding: 15px;
}
#logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 33em;
padding-top: 2px;
z-index: -100;
padding-left: 4px;
}
#home {
color: #26C6E7;
}
.container {
height: 500px;
width: 850px;
overflow: hidden;
position: absolute;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.photo {
position: absolute;
animation: round 16s infinite;
opacity: 0;
height: 500px;
width: 850px;
min-width: 500px;
}
#orange {
background-image: url(images/pacman.jpg);
width: 100%;
height: 100%;
padding-top: 80px;
position: absolute;
z-index: -99999999999999999999999999;
background-size: cover;
background-repeat: repeat-y;
}
#keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
img:nth-child(4) {
animation-delay: 0s;
}
img:nth-child(3) {
animation-delay: 4s;
}
img:nth-child(2) {
animation-delay: 8s;
}
img:nth-child(1) {
animation-delay: 12s;
}
a {
text-decoration: none;
color: white;
font-weight: bold;
z-index: 100;
}
a:hover {
color: #26C6E7;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home - CooperTimewell.com</title>
<meta name="description" content="This is where the description is suppose to be." />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="images/anime.ico" rel="icon" type="image/x-icon" />
</head>
<body>
<div id="nav">
<div id="menu">
<ul>
<li id="home"><span>HOME</span>
</li>
<li>THE COOPER TIMES
</li>
<li>ABOUT ME
</li>
<li>CONTACT
</li>
<li>GAMES
</li>
</ul>
</div>
</div>
<a href="http://www.coopertimewell.com">
<img id="logo" src="images/logo.png" />
</a>
<div id="orange"></div>
<div class="container">
<img class='photo' src="images/slide1test.png" alt="" />
<img class='photo' src="images/slide1test.png" alt="" />
<img class='photo' src="images/slide1test.png" alt="" />
<img class='photo' src="images/slide1test.png" alt="" />
</div>
</body>
</html>
You can do this with CSS media queries
#media (max-width: 500px) {
.container, .photo {
width: 100%;
}
}
This is what I am trying to code. I am having trouble with positioning elements on the page. To get an idea of where some of what I gave created in the HTML is, I am trying to put a border around a div. This div (id="container") in the end will actually need a border. However, I cannot get one to show up at all.
Here is my full HTML
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<meta charset="UTF-8">
<title>The Pantry</title>
<link rel="stylesheet" href="reset.css"/>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="header">
<div class="nav">
<ul>
<li>HOME</li>
<li>MENU</li>
<li id="logo"><img src="Images/pantry logo.png" width="536" height="348"/></li>
<li>CONTACT</li>
<li id="last">ABOUT</li>
</ul>
</div>
</div><!--end header-->
<div id="container">
<div id="slider">
<figure>
<img src="Images/hungarian-goulash_10-20-13_1_ca.jpg" width="600" height="400" alt="Hungarian Sausage Goulash"/>
<img src="Images/G-lasagne-al-forno.jpg" width="600" height="400" alt="Lasagne al Forno"/>
<img src="Images/5357829-svickova.jpg" width="600" height="400" alt="Svickova"/>
<img src="Images/pork shoulder.jpg" width="600" height="400" alt="Pork Shoulder with Dumplings"/>
<img src="Images/hungarian-goulash_10-20-13_1_ca.jpg" width="600" height="400" alt="Hungarian Sausage Goulash"/>
</figure>
</div><!--end slider-->
<div id="menu ad">
</div><!--end menu ad-->
<div id="hours">
</div><!--end hours-->
</div><!--end container-->
<footer>
</footer>
And my CSS
#charset "UTF-8";
body {
background: #f8f8f1;
line-height: 1.5;
}
/*header*/
.header {
width: 960px;
height: 200px;
margin: 0 auto;
text-align: center;
position: relative;
padding: 100px 0px 0px 0px;
}
div ul li {
display: inline-block;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 18px;
color: #4f4d4b;
text-decoration: none;
list-style: none;
vertical-align: middle;
}
.nav ul li {
margin-right: 70px
}
.nav ul li:nth-child(5) {
margin: 0;
}
div ul li a {
list-style: none;
text-decoration: none;
color: #4f4d4b;
}
.nav ul li a:visited {
text-decoration: none;
color: #4f4d4b;
}
#logo a img {
width: 250px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
#logo {
width: 250px;
position: relative;
}
/*End Header*/
/*Container*/
div.container {
margin: auto 0;
position: relative;
width: 960px;
heigth: 438px;
border: 10px solid red;
}
/*slider*/
#-webkit-keyframes slidy {
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
div#slider { position: relative; overflow: hidden; width: 80%; max-width: 600px; height: auto; max-height: 400px;
margin: 0 auto}
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
font-size: 0;
animation: 20s slidy infinite;
margin: 0; top: 0; left: 0;
-webkit-animation: 20s slidy ease-in-out infinite;
animation: 20s slidy ease-in-out infinite;
}
Please visit the site here to see what is happening.
Thanks for your help.
Your selector:
div.container
Should be:
div#container