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;
}
Related
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
So I have multiple divs. Like this:
<div id="LeftContent"></div>
<div id="RightContent"></div>
And so on. My goal is to create a centered div after all that. When I try to, I end up with the div being in the empty spaces between the 'left' and 'right' divs. An answer with some CSS code would be most appreciated.
HTML5:
<!doctype html>
<html>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
<head>
<meta charset="utf-8">
<title>OneClickLearn</title>
</head>
<body>
<aside>
<br>
<nav>
<ul>
<li>Home</li>
<hr>
<li>Learn HTML</li>
<li>Learn CSS</li>
<li>Learn the Basics of Web Design</li>
<hr class="nav">
<li>Learn PHP</li>
<li>Learn JAVASCRIPT</li>
</ul>
</nav>
</aside>
<a id="nav-toggle" href="#" class="position"><span></span></a>
<main>
<header>
<div href="#" class="container">
<h1 class="title">OneClickLearn</h1>
</div>
</header>
</main>
<div class="header">
<div class="content">
<h1 class="large">Welcome To OneClickLearn</h1>
<hr class="hr">
<h2>A website for web developers everywhere</h2>
</div>
</div>
<div class="left">
<h1>What you can do with us</h1>
<h3>OneClickLearn offers several web design courses, as well as tools like Cascading Style Sheet libraries, and special colors to use for your website! Unlike some other coding websites, OneClickLearn is absolutely free!</h3>
<a class="abutton"><button>Learn More</button></a>
</div>
<div>
<div class="right">
<h1>CSS Libraries</h1>
<h3>What's a CSS Library? Simple. This tool is made for web developers who are advanced in website functionality, but maybe not so great in what we would call, 'the pretties'. A CSS library is all the tools in design you need-- waiting for you on the web.</h3>
<a class="abutton"><button>Learn More</button></a>
<a class="abutton"><button class="buttonop">Get Ocelot.css</button></a>
</div>
</div>
<div class="left">
<h1>Courses</h1>
<h3>All our courses (so far!) are based off of web design. With these courses, you learn the basics of HTML5, CSS3, and more languages coming soon. Also, you can learn our Cascading Style Sheet libraries' functions. If you have any reccomendations, just email us down below</h3>
<a class="abutton"><button>Email Us</button></a>
<a class="abutton"><button class="buttonop">Learn More</button></a>
</div>
<div class="div">
<h1>Having trouble with your website?</h1>
<h3>We'll see what we can do.</h3>
<button class="abutton">Contact Us</button>
</div>
</body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="js/nav.js"></script>
</html>
CSS:
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
.div {
clear: both;
margin: 0 auto;
height: 100px;
width: 600px;
text-align: center;
}
.greyback {
background-color: #4B4949;
}
.nav {
background-color: #bdc3c7;
}
.denied {
color: #bdc3c7;
}
.denied:hover {
cursor: not-allowed;
}
body {
size: 100%;
display: cover;
margin: 0;
padding: 0;
}
p a {
color: #27ae60;
text-decoration: none;
}
p a:hover {
color: #27ae60;
text-decoration: underline;
cursor: pointer;
}
.header {
color: white;
width: 100%;
height: 300px;
background-color: #2980b9;
}
.content {
margin-top: 70px;
padding-top: 60px;
text-align: center;
}
.large {
font-size: 40px;
}
.hr {
width: 100px;
}
.left {
margin: 20px;
float: left;
height: auto;
width: 50%;
color: #4B4949;
}
.right {
margin: 20px;
float: right;
height: auto;
width: 50%;
color: #4B4949;
}
a {
color: #2AABAD;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.side {
margin: 20px;
}
.img {
display: inline-block;
}
button {
background-color: #2980b9;
border: none;
border-radius: 5PX;
height: 40px;
width: auto;
color: white;
}
button:hover {
background-color: #3498db;
cursor: pointer;
}
.abutton {
color: none;
text-decoration: none;
}
.buttonop {
background-color: #3498db;
border: none;
border-radius: 5PX;
height: 40px;
width: auto;
color: white;
}
.buttonop:hover {
background-color: #2980b9;
cursor: pointer;
}
.main {
width: 100%;
text-align: center;
}
.main-content {
display: inline-block;
}
P.S. I am using float:left; and float:right; for the left and right divs :)
Thanks :) (If I need any elaboration please let me know)
I'm not 100% clear on what you are asking, but you could try something like the following:
Html
<div id="LeftContent"></div>
<div id="RightContent"></div>
<div id="CentredDiv"></div>
CSS
div {
border: 1px solid #f0f;
height: 50px;
box-sizing: border-box;
width: 400px;
}
#LeftContent,
#RightContent {
float: left;
}
#CentredDiv {
width: 800px;
clear: left;
}
Yeah, not totally sure what you want, but maybe something like this?
#CenteredContent {
clear: both;
margin: 0 auto;
height: 100px;
width: 100px;
background-color: red;
}
What I understand from your question is that you need a centered div. You can do this to achieve centered div.
HTML:
<div class="centered-div">
Some Content
</div>
CSS:
.centered-div {
width: 400px;
min-height: 400px;
margin: 0 auto;
clear: both;
}
I hope that helps :)
Here's a screenshot of the issue I'm having:
I cannot for the life of me figure out how to remove the empty space on either side of the navbar. I've tried making the margin and padding 0 but it hasn't been working. Any help would be appreciated.
Here is the html:
html,
body {
margin: 0;
padding: 0;
height: 100%;
background-image: url("images/bg.jpg");
background-repeat: no-repeat;
background-position: center top;
font-family: Times New Roman;
}
header {
clear: both;
text-align: center;
}
#header img {
height: 40%;
width: 40%;
}
#wrap {
width: 1000px;
margin: auto;
padding: auto;
overflow: auto;
}
ul {
padding: 0;
}
nav ul {
margin: auto;
padding: auto;
list-style-type: none;
background-color: #009BB2;
}
nav li {
display: inline;
padding-left: 10px;
}
nav a {
text-decoration: none;
padding: 5px;
font-family: Times New Roman;
font-size: 25px;
color: maroon;
}
nav a:hover {
color: blue;
}
img.size {
height: 15%;
width: 15%;
padding: 5px;
}
section h1 {
text-align: center;
}
figure {
float: right;
overflow: hidden;
margin: 0px;
padding: 0px;
}
<div id="wrap">
<header>
<div id="header">
<img src="logo.png" alt="The Seasons" />
</div>
<nav>
<ul>
<li>Fall</li>
<li>Spring</li>
<li>Summer</li>
<li>Winter</li>
<li>Home</li>
</ul>
</nav>
</header>
<section>
<h1>The Four Seasons of the Earth</h1>
<figure class="fig">
<img class="size" src="images/fall_front.png" alt="Fall" />
</figure>
<figure class="fig">
<img class="size" src="images/winter_front.png" alt="Winter" />
</figure>
<figure class="fig">
<img class="size" src="images/spring_front.png" alt="Spring" />
</figure>
<figure class="fig">
<img class="size" src="images/summer_front.png" alt="Summer" />
</figure>
</section>
</div>
Add display: inline-block; to your nav ul selector and that will remove the whitespace from the sides.
html,
body {
margin: 0;
padding: 0;
height: 100%;
background-image: url("images/bg.jpg");
background-repeat: no-repeat;
background-position: center top;
font-family: Times New Roman;
}
header {
clear: both;
text-align: center;
}
#header img {
height: 40%;
width: 40%;
}
#wrap {
width: 1000px;
margin: auto;
padding: auto;
overflow: auto;
}
ul {
padding: 0;
}
nav ul {
margin: auto;
padding: auto;
list-style-type: none;
background-color: #009BB2;
display: inline-block;
}
nav li {
display: inline;
padding-left: 10px;
}
nav a {
text-decoration: none;
padding: 5px;
font-family: Times New Roman;
font-size: 25px;
color: maroon;
}
nav a:hover {
color: blue;
}
img.size {
height: 15%;
width: 15%;
padding: 5px;
}
section h1 {
text-align: center;
}
figure {
float: right;
overflow: hidden;
margin: 0px;
padding: 0px;
}
<div id="wrap">
<header>
<div id="header">
<img src="logo.png" alt="The Seasons" />
</div>
<nav>
<ul>
<li>Fall</li>
<li>Spring</li>
<li>Summer</li>
<li>Winter</li>
<li>Home</li>
</ul>
</nav>
</header>
<section>
<h1>The Four Seasons of the Earth</h1>
<figure class="fig">
<img class="size" src="images/fall_front.png" alt="Fall" />
</figure>
<figure class="fig">
<img class="size" src="images/winter_front.png" alt="Winter" />
</figure>
<figure class="fig">
<img class="size" src="images/spring_front.png" alt="Spring" />
</figure>
<figure class="fig">
<img class="size" src="images/summer_front.png" alt="Summer" />
</figure>
</section>
</div>
You're maxing out the width at 1000px:
#wrap{
width:1000px;
}
The nav is within that, so it can't stretch wider than that.
As is noted by others, you're setting the width to 1000px;
Change#wrap{width: 1000px} to #wrap{width: 100%}
I have three social media images in a div at the bottom of the page. I have them placed center of the div but when i add the link to the image it pushes the other images away and the area around the image is linked as well.
On other sites I have not had this issues so I am not sure what is going on
Thanks
<head>
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link href="assets/hover.css" rel="stylesheet" media="all">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NolanD</title>
</head>
<body>
<div id="nav">
<header>
<div class="logo">NolanD</div>
<div id="logo">
</div>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</header>
</div>
<body>
<div class="rowone">
</div>
<div class="rowtwo">
<p>
</p>
</div>
<div class="rowthree">
</div>
</div>
<div class="rowfour">
</div>
<div class="rowfive">
</div>
<div class="rowsix">
<img src="assets/images/linkedin.png " height="24 " width="24 " class="hvr-bounce-in " /></li>
<img src="assets/images/github-2.png " height="24 " width="24 " class="hvr-bounce-in " /></li>
</div>
</body>
And the CSS, where I think the issues is coming from.
html, body {
margin:0;
padding:0;
}
* {
margin: 0;
padding:0;
}
#nav {position:absolute;
width:100%;
height: 60px;
background:#F4F2F2 ;
text-align: right; left: 0; top: 0; }
#nav a { font-size:26px; padding: 3px; margin-right: 1rem; font-family: Roboto;
font-weight:100; }
#nav li { display: inline-block; }
#nav h1 { text-align: left; }
a { color:#1D7090; text-decoration: none; padding: 10rem; transition: .4s; }
.logo {
float: left;
color: #1D7090;
font-size: 26px;
font-family: Roboto;
font-weight:100;
line-height: 31px;
display: inline-block;
margin-left: 1rem;
}
body {
background-color:#6A6262;
}
.rowone {
background-color:#7DB3BF;
width: 100%;
height: 600px; }
.rowtwo {
text-align: center;
font-size:72px;
color:#000000;
padding-top: 1rem;
background-color:#F9F2F2;
width: 100%;
height: 540px;
}
.rowthree {
background-color:#B34042;
width: 100%;
height: 500px;
}
.rowfour {
background-color:#FF5700;
width: 100%;
height: 500px;
}
.rowfive {
background-color:#DDD39B;
width: 100%;
height: 500px;
}
.rowsix{
background-color:#3E3E3E;
width: 100%;
height: 175px;
text-align:center;
}
.rowsix img { display: block;
padding-top: 5rem;
text-align:center;
display:inline-block;
margin:5px 15px;
}
#media all and (max-width:600px) {
.logo { display:none; }
#nav {text-align: center; }
}
Try remove padding attribute you added for link at line :
a { color:#1D7090; text-decoration: none; padding: 10rem; transition: .4s; }
Btw : please reformat your code. It's to bad :(
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!