Trying to rebuild a part of the Pixar site, having trouble with the logo. Is there a way to resize the image in CSS? Or do I have to resize the image in Photoshop and add it that way?
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Pixar Mock Up</title>
</head>
<body>
<header>
<div class="logo logo-size"></div>
<nav class="nav">
<ul>
<li>FEATURE FILMS</li>
<li>SHORT FILMS</li>
<li>CAREERS</li>
<li>EXTRAS</li>
<li>TECHNOLOGY</li>
<li>ABOUT</li>
</nav>
</header>
<main>
<div class="hero hero-size">
<div class="hero-text">
<h2>FEATURE FILMS</h2>
</div>
</div>
<div class="films">
<div class="posters">
<img src="images/incredibles2.jpg"alt="The Incredibles">
<p class="poster1">The Incredibles</p>
</div>
<div class="posters">
<img src="images/coco.jpg" alt="Coco">
<p class="poster2">Coco</p>
</div>
<div class="posters">
<img src="images/cars.jpg" alt="Cars3">
<p class="poster3">Cars</p>
</div>
</div>
<div class="posters">
<img src="images/dory.jpg"alt="Finding Dory">
<p class="poster1">Finding Dory</p>
</div>
<div class="posters">
<img src="images/dino.jpg" alt="The Good Dinosaur">
<p class="poster2">The Good Dinosaur</p>
</div>
<div class="posters">
<img src="images/inside.jpg" alt="Inside Out">
<p class="poster3">Inside Out</p>
</div>
</main>
</body>
</html>
CSS CODE:
body {
max-width: 1700px;
min-width: 700px;
background-color: white;
padding: 0px;
margin: 0px;
}
.logo {
margin: 25px 80px;
background: url('../logo/logo.jpg') left no-repeat;
}
.logo-size{
width: 170px;
height: 51px;
}
.hero {
background: url('../hero/hero.jpg');
background-position: center;
background-repeat: no-repeat;
}
.hero-size {
height: 550px;
width: 100%;
}
.hero-text {
font-size: 42px;
color: white;
float: left;
position: relative;
top: 175px;
left: 500px;
letter-spacing: 4px;
}
.nav li {
display: inline;
}
.nav ul {
margin: 0px 100px;
}
.nav a {
color: black;
position: fixed;
position: relative;
bottom: 61px;
float: right;
padding-right: 30px;
text-decoration: none;
}
.posters {
text-align: center;
padding: 0px;
float: right;
display: block;
width: 30%;
position: relative;
right: 80px;
margin: 80px 0px;
}
.posters img{
height: 275px;
width: 200px;
}
The Size/Width I want
The Full Image
To sum up, I am trying to get the image found in the second link to fit in the width defined in the first image (width set to 170px). I have tried setting it to 'width: auto', but that did not work.
It would be better if you use img instead of a div with a background for the logo, you'll have more control,
<img src="../logo/logo.jpg" />
But if you have to use a div, add background-size:cover to .logo
https://www.w3schools.com/cssref/css3_pr_background-size.asp
Related
My buddy had a problem with a website for a school project. He wanted to make a small gallery.
The first 5 pictures worked as intentional:
but then they showed up like that:
We tested all sorts of stuff for an hour. We tried to put the bottom 3 ones in another div block with class="bilder" but it was the same. We also tried putting the pictures in a different order to see if it has something to do with the pictures themselves but also the same result.
div.wrapper {
font-family: Calibri;
width: 100%;
float: left;
color: white;
}
h1 {
color: #F99F00;
text-align: center;
}
body {
background-color: black;
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
li {
float: left;
font-family: fantasy;
font-size: 120%
}
li a {
color: white;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: green;
}
.active {
backround-color: green;
}
li.selected a {
color: green;
display: block;
}
#tct {
top: 15%;
left: 5%;
padding: 1%;
color: #F99F00;
font-size: 200%;
}
div.bilder img {
padding: 1%;
width: 18%;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Counter-Strike: Global Offensive</title>
<link href="../css/waffenliste.css" rel="stylesheet" type="text/css">
<link href="pictures/csgotab.png" rel="shortcut icon" type="image/x-icon">
</head>
<body>
<div class="wrapper">
<div>
<h1>Counter-Strike: Global Offensive<h1>
</div>
<div>
<ul>
<li>Home</li>
<li class="selected">Waffenliste</li>
<li>Spray Patterns</a></li>
<li>Über</a></li>
<li>Impressum</li>
</ul>
</div>
<div id="tct">
<p>Kaufbar für: T und CT</p>
</div>
<div id="t">
<p>Kaufbar für: Terroristen</p>
</div>
<div id="ct">
<p>Kaufbar für: Antiterroreinheit</p>
</div>
<div class="bilder">
<img id="awp" src="pictures/awp.PNG">
<img id="scout" src="pictures/scout.PNG">
<img id="dual" src="pictures/dual.PNG">
<img id="p250" src="pictures/p250.PNG">
<img id="deagle" src="pictures/deagle.PNG">
<img id="nova" src="pictures/nova.PNG">
<img id="negev" src="pictures/negev.PNG">
<img id="m249" src="pictures/M249.PNG">
</div>
</div>
</body>
</html>
You can try using the following html and css structure,
section #imageGallery li {
display: inline-block;
margin: 20px;
list-style: none;
}
section #imageGallery li div {
width: 280px;
height: 290px;
color: black;
}
#imageGallery .one {
background-image: url(/Images1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-color:#f9f8f5;
}
#imageGallery .two {
background-image: url(/Images2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-color:#f9f8f5;
}
#imageGallery .three {
background-image: url(/Images3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-color:#f9f8f5;
}
#imageGallery .four {
background-image: url(/Images4.jpg);
background-repeat: no-repeat;
background-size: cover;
background-color:#f9f8f5;
}
#imageGallery .five {
background-image: url(/Images5.jpg);
background-repeat: no-repeat;
background-size: cover;
background-color:#f9f8f5;
}
<section>
<ul id="imageGallery">
<li>
<div class="Image one">
</div>
</li>
<li>
<div class="Image two">
</div>
</li>
<li>
<div class="Image three">
</div>
</li>
<li>
<div class="Image four">
</div>
</li>
<li>
<div class="Image five">
</div>
</li>
</ul>
</section>
Hope it helps.
Just use following css :
div.bilder {
font-size: 0px;
}
div.bilder img {
padding: 1%;
width: 18%;
display: inline-block;
vertical-align: top;
}
It happens because you float all images. You shoudnt use floats to dispaly images in the line. Display inline-block is enough.
If you wish to stick with floating use clearfix after end of line.
.clearfix:after {
content: "";
display: table;
clear: both;
}
I have a fixed header that I've set up with a higher z-index than the body content so the content slips underneath it. In order to position the content div right below the fixed header, I set its position:relative and gave it a top value
This seemed to work fine, until I started to add items to the content div. First I added an h1 and as I attempted to give it a little margin-top the entire page (header and all) shifted down the value I specified for my margin-top.
I've run into this before (collapsing divs yes?) and I've usually been able to fix it with a set width or a float or a display block, but none of these seem to be doing the trick.
Can someone tell me what I am missing?
*
{
padding: 0;
margin: 0;
}
header
{
background-color: white;
color: #724444;
width: 100%;
height: 90px;
border-bottom: 1px solid rgba(140, 140, 140, .2);
position: fixed;
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 15px;
text-align: center;
line-height: 1.3;
z-index: 1000;
}
#header-fixedWidth
{
width: 1000px;
height: 90px;
margin: 0 auto;
display:flex;
align-items: center;
justify-content: space-between;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
nav ul
{
list-style: none;
display: flex;
}
nav ul li
{
margin: 0 10px;
}
#main-content
{
width: 100%;
min-height: 100px;
position: relative;
top: 89px;
}
#main-content-fixedWidth
{
width: 1000px;
min-height: 100px;
margin: 0 auto;
position: relative;
}
.headers
{
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 30px;
line-height: 1.3;
margin-top: 20px;
}
#image-deck
{
width: 1000px;
border: 1px solid #ccc;
position: relative;
display: block;
}
/*Media Queries*/
#media (max-width: 1000px)
{
header
{
width: 100%;
}
#header-fixedWidth
{
width: 100%;
}
}
<html>
<head>
<title>Pic Monkey Recreation</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
</head>
<body>
<header>
<div id="header-fixedWidth"
<img src="Images/logo.png" alt="randomLogo" id="randomLogo" />
<nav>
<ul>
<li>
<img src="Images/iconMenu/edit.png" alt="">
<br>
<p>Edit</p>
</li>
<li>
<img src="Images/iconMenu/touchUps.png" alt="">
<br>
<p>Touch Up</p>
</li>
<li>
<img src="Images/iconMenu/design.png" alt="">
<br>
<p>Design</p>
</li>
<li>
<img src="Images/iconMenu/collage.png" alt="">
<br>
<p>Collage</p>
</li>
</ul>
</nav>
<div id="user-help">
<img src="Images/signIn.png" alt="signIn" id="signIn" />
</div>
</div>
</header>
<div id="main-content">
<div id="main-content-fixedWidth">
<div id="test">
<p class="headers">Here is a header for you to look at</p>
</div>
<div id="image-deck"></div>
</div>
</div>
</body>
</html>
You will need a counter minus margin to offset the amount you have moved it. So if your box has a top value 50px and your inner h1 have a margin-top value 100px you'd need to reset your box top value to -50px to counter.
I've done some searching and I just can't seem to find out what's wrong. My main content keeps overlapping the banner. I tried using the position and overflow hidden and auto but I still can't seem to get it right.
Here's the html
<html>
<head>
<title> Website </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>
<div id="Navigation Container"></div>
<div id="header">
<img src="nav bar logo.png">
</div>
<div id='Navigation'>
<ul>
<li><font color="#FFFFFF">Contact</font></li>
<li><font color="#FFFFFF">About</font></li>
</ul>
</div>
</div></div>
<div id="Banner">
<div id="wrapper">
<div id="container">
<img class="banner-img" src="../Banner.png">
</div>
</div>
</div>
<div id="MainContent">
<p>
<font color="#000000">
<h1><font face="Palatino Linotype" color="#5DA05D" size="6">Header</font></h1>
<font face="Verdana" size="3">
<p>Just some text...</p>
<p>That keeps overlapping...</p>
</font>
</font>
</p>
</div>
<div id="footer"></div>
</p>
</body>
Here's the CSS:
body {
background: #F9F9F9; margin: 0 auto; padding: 0; font: color: #FFFFFF; text-align: center}
a {
color: #2b2bf6;}
#header {
float: left;
position: fixed;
Align: left;
clear: both;
width: 0x;
max-width: 100%;
height: 70px;
margin: 0;
padding: 0;
border: 0;
background:
#FFFFFF;
z-index: 2;}
#Navigation {
width: 100%;
height: 70px;
margin: 0;
padding: 0;
background: #000000;
Font-size: 18px;
float: right;
position: fixed;
z-index: 1;
display: incline-block;
}
#Navigation Container {
WIDTH: 100%;
float: right;
background: #282828;
position: fixed;
z-index: 0;}
#Banner {
height: 100%;
width: 100%;
margin: auto;
padding-top: 70px}
#wrapper {
width: 100%;
overflow: hidden; }
#container {
width: 100%;
margin: 0 auto; }
#banner-img {
width: 100%;}
#dropdown {
position: relative;
overflow: hidden; }
#MainContent {
margin-top: -270px;
margin-left: 20%;
margin-right: 20%;
margin-bottom: 100px;
text-align: left;}
#footer {
width: 100%;
height: 120px;
background: #282828;
padding: 0px; }
#navwrap {
width: 160px;
height: 70px;
Float: right;
display: incline-block;
z-index: 4; }
#Searchbar {
float: left;
padding: 20px;
}
ul{
padding: 0;
list-style: none;
height: 70px;
}
ul li{
float: right;
width: 110px;
text-align: center;
line-height: 21px;
}
ul li a{
display: block;
height: px;
padding: 5px 10px;
color: #333;
background: #282828;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #3d3d3d;
}
ul li ul{
display: none;
}
ul li:hover ul{
display: block;
}
Please help.
There are a few discrepancies in the HTML posted by you.
I have corrected the same. Can you please reuse the HTML and check.
<html>
<head>
<title> Website </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>
<div id="Navigation Container"></div>
<div id="header">
<img src="nav bar logo.png">
</div>
<div id='Navigation'>
<ul>
<li><font color="#FFFFFF">Contact</font></li>
<li><font color="#FFFFFF">About</font></li>
</ul>
</div>
<div id="Banner">
<div id="wrapper">
<div id="container">
<img class="banner-img" src="../Banner.png">
</div>
</div>
</div>
<div id="MainContent">
<p>
<font color="#000000">
<h1><font face="Palatino Linotype" color="#5DA05D" size="6">Header</font></h1>
<font face="Verdana" size="3">
<p>Just some text...</p>
<p>That keeps overlapping...</p>
</font>
</font>
</p>
</div>
<div id="footer">
</div>
</p>
</body>
</html>
My question covers it all I cant figure out why my about section div's aren't using the color I set(White). I set it in my css, and for some reason it is not applying correctly. All help would be greatly appreciated
body {
width: 100%;
background: #444444;
}
/*Header styles*/
header {
width: 100%;
height: 77px;
background: #ffffff;
}
header #logo {
background: #444444;
display: inline-block;
width: 150px;
margin-left: 60px;
float: left;
}
header nav {
width: 40%;
height: 100%;
vertical-align: middle;
float: right;
margin-right: 60px;
}
header nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
header nav li {
height: 100%;
line-height: 77px;
display: inline-block;
margin-left: 55px;
}
header nav a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
}
/*Homepage Styles*/
#homepage {
width: 100%;
background: #444444;
}
#homepage #banner-h {
margin-top: 56px;
height: 751px;
background: #ffffff;
}
#homepage #banner-h #bht {
height: 88px;
margin: auto;
color: #000000;
}
#aboutme {
height: 2400px;
}
.aboutsection {
height: 593 px;
border: 1px solid black;
background: #ffffff;
}
footer {
margin-top: 56px;
background: #ffffff;
width: 100%;
height: 166px;
}
footer #fom {
height: 90%;
text-align: center;
display: table;
width: 100%;
}
footer h1 {
display: table-cell;
vertical-align: middle;
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/normalize.css"/>
<title></title>
</head>
<body>
<header>
<div id="logo">
<img src="img/logo/caseywoelfle.com.svg" width="150px" height="77">
</div>
<nav>
<ul>
<li>home</li>
<li>about me</li>
<li>portfolio</li>
<li>blog</li>
<li>contact</li>
</ul>
</nav>
</header>
<div id="aboutme">
<div class="aboutsecton"><p>Test</p></div>
<div class="aboutsecton"><p>Test</p></div>
<div class="aboutsecton"><p>Test</p></div>
<div class="aboutsecton"><p>Test</p></div>
</div>
<footer>
<span id="fom">
<h1>find out more about me</h1>
</span>
</footer>
</body>
</html>
It boils down to a simple typo. You are using .aboutsection in your CSS selector but your div has a class of aboutsecton, missing an i.
Instead of:
<div class="aboutsecion"><p>Test</p></div>
...it should be:
<div class="aboutsection"><p>Test</p></div>
p/s: In addition, your height declaration is not working because of an additional white space in the height declaration. It should be 593px not 593 px.
You mis-spelled section:
<div class="aboutsecton">
should be
<div class="aboutsection">
You mispelled aboutsection. You spelled it aboutsecton in your HTML.
<div class="aboutsecton"><p>Test</p></div>
Should be
<div class="aboutsection"><p>Test</p></div>
Good luck!
I've looked up how to stick the footer to the bottom of the page but i'm having trouble making it actually work! If i post my code can you look at it and change it to make it work, but also explain how you did it?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Aaron Kelsey - Home</title>`enter code here`
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="wrapper">
<div class="header_wrapper">
<ul id="navigation">
<li>HOME</li>
<li>ABOUT</li>
<li>WORK</li>
<li>CONTACT</li>
</ul>
</div>
<div id="line-1"></div>
<div id="line-2"></div>
<div class="content">
<img class="header" src="images/header.png">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
body{
margin: 0 auto;
padding:0;
margin: 0;
height: 100%;
background-color: #F5F5F5;
}
img.header{
display: table;
margin: 0 auto;
}
#wrapper{
min-height: 100%;
position: relative;
}
.header_wrapper{
display: table;
margin: 0 auto;
width: 1000px;
height: 50px;
position: relative;
padding:10px;
}
.content{
position: relative;
margin: 0 auto;
width: 1000px;
height: 100%;
min-height: 100%;
padding:10px;
padding-bottom:150px;
}
.footer{
position: absolute;
margin: 0 auto;
bottom: 0px;
width: 100%;
height: 150px;
background-color: #E0E0E0;
}
#line-1{
position: absolute;
margin: 0 auto;
width: 100%;
height: 1px;
background-color: #E0E0E0;
top: 10px;
}
#line-2{
position: absolute;
margin: 0 auto;
width: 100%;
height: 1px;
background-color: #E0E0E0;
top: 50px;
}
#navigation {
position: relative;
width: 1000px;
height: 10px;
font-size: 18px;
font-family: Arial;
font-weight: bold;
top: 20px;
text-align: center;
}
#navigation li {
display: inline;
padding: 50px;
}
#navigation a {
text-decoration: none;
color: #A9A9A9;
}
#navigation a:hover {
color: #1e1e1e;
}
You have your footer inside of the wrapper. It is fixed at the bottom of that div but not the body.
take the footer div outside of your wrapper and it is good to go.
<div id="wrapper">
<div class="header_wrapper">
<ul id="navigation">
<li>HOME
</li>
<li>ABOUT
</li>
<li>WORK
</li>
<li>CONTACT
</li>
</ul>
</div>
<div id="line-1"></div>
<div id="line-2"></div>
<div class="content">
<img class="header" src="images/header.png" />
</div>
</div>
<div class="footer"></div>
JSFIDDLE
Also in your footer you don't need to have margin: 0 auto; since it is 100%. The next thing is close your image tags like so, <img src="" alt="" />.