I want to create a #necker div with the same height, and width, and to center him the same way as my #header div that fixed to top of screen.
I tried to copy the data from the #header div to #necker div and margin in down from top. Failed :(. Could you help me?
#header {
position: fixed;
display: inline-block;
margin: 0 10%;
top: 0px;
width: 80%;
height: 150px;
background: rgb(217, 47, 54);
z-index: 1;
}
#necker {
position: relative;
display: inline-block;
margin: 0 10%;
margin-top: 142px;
width: 80%;
height: 150px;
background: rgb(245, 210, 83);
}
<html>
<head>
<title> Yakir Freed </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
<img id="logo" src="images/logo.png" alt="Yakir Freed" />
<div class="Categories" id="Cate1">
<h2>Home Page</h2>
</div>
<div class="Categories" id="Cate2">
<h2>About us</h2>
</div>
<div class="Categories" id="Cate3">
<h2>Support</h2>
</div>
<div class="Categories" id="Cate4">
<h2>Sales!</h2>
</div>
<div class="Categories" id="Cate5">
<h2>Contact us</h2>
</div>
</div>
<div id="necker"></div>
</body>
</html>
The div can't center the same as the menu, because the position: fixed casues it to ignore the default margin from the browser stylesheet. If you add margin: 0 to body the two elements will be centered in the same spot.
#header {
position: fixed;
display: inline-block;
margin: 0 10%;
top: 0px;
width: 80%;
height: 150px;
background: rgb(217, 47, 54);
z-index: 1;
}
#necker {
position: relative;
display: inline-block;
margin: 0 10%;
margin-top: 142px;
width: 80%;
height: 150px;
background: rgb(245, 210, 83);
}
body {
margin: 0;
}
<div id="header">
<img id="logo" src="images/logo.png" alt="Yakir Freed" />
<div class="Categories" id="Cate1">
<h2>Home Page</h2>
</div>
<div class="Categories" id="Cate2">
<h2>About us</h2>
</div>
<div class="Categories" id="Cate3">
<h2>Support</h2>
</div>
<div class="Categories" id="Cate4">
<h2>Sales!</h2>
</div>
<div class="Categories" id="Cate5">
<h2>Contact us</h2>
</div>
</div>
<div id="necker"></div>
<div class="makeitscroll"></div>
What's exactly what you are not expecting from your code? If the problem is that the two div hasn't got the same width, try removing the margin and padding from the body (so 80% results in both cases in the same number of pixels).
The fixed block use the complete viewport width to calculate the 80%, instead, the #necker use the body width (using the default margin or padding that the browser is applying)
body{
margin: 0px;
padding: 0px;
}
If that's not your problem, I can't see what you need to achieve, please, could you be more specific?
I believe below solution will help you. Thing you missed is default margin <body> has. Deleting it fixes the issue.
Key part
body {
margin: 0;
}
Snippet
body {
margin: 0;
}
#header {
position: fixed;
display: inline-block;
top: 0px;
margin: 0 10%;
width: 80%;
height: 150px;
background: rgb(217, 47, 54);
z-index: 1;
}
#necker {
position: relative;
display: inline-block;
margin: 0 10%;
margin-top: 142px;
width: 80%;
height: 150px;
background: rgb(245, 210, 83);
}
<html>
<head>
<title> Yakir Freed </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
<img id="logo" src="images/logo.png" alt="Yakir Freed" />
<div class="Categories" id="Cate1">
<h2>Home Page</h2>
</div>
<div class="Categories" id="Cate2">
<h2>About us</h2>
</div>
<div class="Categories" id="Cate3">
<h2>Support</h2>
</div>
<div class="Categories" id="Cate4">
<h2>Sales!</h2>
</div>
<div class="Categories" id="Cate5">
<h2>Contact us</h2>
</div>
</div>
<div id="necker"></div>
</body>
</html>
Related
I am creating a website that currently uses css and html and I am running into the problem where my grid in css is created inside the .middle element, but it is also moving elements inside the neighbouring .header element. To see this, change the first margin value inside of the css to see what happens.
h1 {
position: fixed;
top: 0px;
left: 0%;
padding: 10px;
width: 100%;
background-color: lightgray;
z-index: -1;
}
li{
display: inline;
margin-right: 10px;
}
.nav{
position: fixed;
z-index: 10;
padding:10px;
width: 15px;
left: 48%;
}
.friends{
}
.user-post{
padding-top: 20px;
}
.posts{
background-color: lightgrey;
}
.post:nth-child(odd){
background-color: grey;
}
.bottom{
position: fixed;
bottom: 0%;
}
.headings{
position: fixed;
z-index: 100;
right: 0%;
}
.middle{
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: minmax(150px, auto);
padding: 15px;
margin: 10% auto;
width: 100%;
grid-gap: 20px;
}
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="Main_Page.css">
</head>
<body>
<div class="header">
<h1 id="top">Search Media</h1>
<div class="nav">
<input type="text" placeholder="Search...">
</div>
<div class="headings">
<ul>
<li>Messages</li>
<li>Friends</li>
</ul>
</div>
</div>
<div class="middle">
<div class="user-post">
<br />
Create post:<br>
<textarea id= "create_post"rows="10" cols = "50" name = "post"></textarea><br>
<input type="submit" value="Post">
</div>
<div class="friends">
<h2 id="friend">Friends</h2>
<h5>Friend1</h5>
<p>status: active</p>
</div>
<div class="posts">
<div class="post">
<h3 id="existing_posts">Posts</h3>
<p><img src="Example.jpg" alt="manchester" width="50" height="50">This is an example of a post. It will need to be boxed and made so that the name of the user goes above
the name of the likes and dislikes of the posts are to the left of the post and that the reply and report
functionalities are at the bottom right of the posts. It will also need a box around it to show where the post starts and ends.</p>
</div>
<div class="post">
<h3 id="existing_posts">Posts</h3>
<p>This is a rancdom bit of text for tesxting purposes.</p>
</div>
<div class="post">
<h3 id="existing_posts">Posts</h3>
<p>This is a rancdom bit of text for tesxting purposes.</p>
</div>
</div>
</div>
<div class="bottom">
<p>Return to top</p>
</div>
</body>
I want to be able to display 3 colums with images, titles and buttons shown below. I know I am using split left and right but I am unable to create 3 columns on my own. I am using this for my portfolio, if you require anymore information or an example of my portfolio so you can understand what I would like then please do ask.
<!DOCTYPE html>
<html>
<head>`enter code here`
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Joe's Portfolio</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<header class="fix">
<div class="nav-area">
<ul class="menu-area">
<li>Home</li>
<li>Coursework</li>
<li class="active">Future Aspirations</li>
<li>About Me</li>
<li>CV</li>
<li>Contact</li>
</ul>
</div>
<div class="banner-text-name">
<h2>Joe Busby</h2>
</div>
</header>
<div class="split left">
<div class="centered">
<img src="Assets/coding.png" alt="Online World">
<h2>Website Developer</h2>
<div class="svg-wrapper">
<svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
<rect id="shape" height="40" width="150" />
<div id="text">
<span class="spot"></span>Learn More
</div>
</svg>
</div>
</div>
</div>
<div class="split right">
<div class="centered">
<img src="Assets/shield.png" alt="Security">
<h2>Security Analyst</h2>
<div class="svg-wrapper">
<svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
<rect id="shape" height="40" width="150" />
<div id="text">
<span class="spot"></span>Learn More
</div>
</svg>
</div>
</div>
</div>
</body>
</html>
//CSS//
.split {
height: 100%;
width: 50%;
position: fixed;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background: #0F2027;
background: linear-gradient(to bottom, #0F2027, #080e10);
}
.left h2 {
color: aliceblue;
font-family: sans-serif;
}
.right h2 {
color: aliceblue;
font-family: sans-serif;
}
.right {
right: 0;
background: #0F2027;
background: linear-gradient(to bottom, #0F2027, #080e10);
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.centered img {
width: 150px;
}
you could always use bootstrap as already said.
if you rather do it with pure css and html see http://jsfiddle.net/a6yecjqb/4/
.split {
height: 100%;
width: 33.33%;
position: fixed;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.center {
left:33%;
right:33%;
background: #0F2027;
background: linear-gradient(to bottom, #0F2027, #080e10);
}
if you change the width of split and add a center block you will get 3 div's in separate rows. if more explanation is needed let me know
Why not using grid?
div.example {
width: 100%;
display: grid;
grid-template-columns: auto auto auto;
}
When you create elements inside that div, they will appear automatically in 33%
You can do that by using flexbox: here is a quick example:
body {
background: gray;
}
.wrapper {
margin: 0 auto;
width: 500px;
display: flex;
}
.columns {
padding: 5px;
color: black;
position: relative;
height: 500px;
overflow-x: hidden;
background: white;
margin-right: 5px;
}
.columns h2 {
color: black;
font-family: sans-serif;
}
.centered img {
width: 150px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Joe's Portfolio</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="columns ">
<div class="centered">
<img src="https://via.placeholder.com/150x150" alt="Online World">
<h2>Website Developer</h2>
</div>
</div>
<div class="columns ">
<div class="centered">
<img src="https://via.placeholder.com/150x150" alt="Online World">
<h2>Website Developer</h2>
</div>
</div>
<div class="columns ">
<div class="centered">
<img src="https://via.placeholder.com/150x150" alt="Online World">
<h2>Website Developer</h2>
</div>
</div>
</div>
</body>
</html>
https://jsbin.com/xipeduxuda/
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
I have been struggling to make right alignment and responsive. i want to add some of the test on top of the image. i have try changing values in css but it doesnt work out. i want to make as it below:
codepen: codepen link
Please advise. i am new to bootstrap.
<html>
<head>
<link data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid" style="background: white;">
<div class="row no-gutter">
<div class="col-sm-3">
<div class="parent" >
<div class="circle">1</div>
<div class="expenseItems">Mobile</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent" >
<div class="circle">2</div>
<div class="expenseItems">Select a Product Category</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-4">
<div class="parent" >
<img src="http://images.clipartpanda.com/baby-blue-border-clipart-8748-light-blue-square-clip-art.png" class="tabimg" alt="">
<div class="circle tag" style="background-color:darkblue">3</div>
<div class="expenseItems">Find the latest software, firmware, and drivers<font color="darkblue"></font></div>
</div>
</div>
<div class="col-sm-2">
<div class="parent" >
<div class="circle">4</div>
<div class="expenseItems">Tablet Use</div>
<div class="hr"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.no-gutter > [class*='col-'] {
padding-right: 1px;
padding-left: 1px;
}
.parent {
border: 1px;
padding: 20px 25px 25px;
}
.circle {
width: 25px;
height: 25px;
border-radius: 50%;
padding-top: 3px;
display: inline-block;
text-align: center;
background-color: gray;
color: white;
}
.expenseItems {
padding: 10px;
display: inline-block;
color: gray;
font-size: 24px;
}
.hr {
background: gray;
height: 2px;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 15px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
}
.tabimg {
padding : 0px 0px 0px 0px;
height: 30px;
width: 100px;
margin-top: 0px;
}
The easiest approach to this would be just setting a background image to the div
in question.
I've added an ID to the div you're trying to add the image to, and I added the following code for that div.
#box-with-image {
background: url(http://images.clipartpanda.com/baby-blue-border-clipart-8748-light-blue-square-clip-art.png);
background-size: contain;
background-repeat: no-repeat;
/*
OTHER OPTION:
background-size: cover;
*/
}
Full Codepen Link
For sizing, contain will position the image top left, and fill whichever dimension is smallest. cover will fit whichever dimension is largest.
Or in other words, in a non-square shaped div, contain will leave whitespace, while cover will cut some of the image off.
Another approach to this would be using the following CSS on the image
img {
position: relative;
top: 0;
left: 0;
width: 100%;
}
So I am making this little game, where you need drag text under the images.
I need to make little tabs under the images where the text is needed to be dragged onto.
I thought of placing a div around the image, and another div in the div for the tab, in css I styled the tab to be 25px in height. but the 25px, isn't going under the image in the same div, it's above the other images in that row..
this is what I see, http://prntscr.com/9yv7m8
the red space is the tab, that needs to go under the pictures..
How can I fix this properly?
This is my code,
CSS
body, html {
margin-left: 10%;
margin-right: 10%;
padding: 0px;
height: 100%;
font-family: georgia, "Comic Sans MS";
background-color: #f0f0f0;
}
header {
height: 5%;
border-bottom: thick solid grey;
}
footer {
height: 5%;
border-top: thick solid grey;
}
.points {
float: right;
}
.container {
width: 100%;
height: 90%;
}
.plaatje {
width: 100px;
height: 100px;
}
.plaatje2 {
float: left;
width: 25%;
}
.igen {
font-size: 25px;
font-weight: bold;
}
.sprint {
float: right;
}
.copyright {
position: relative;
bottom: 20px;
left: 65px;
font-size: 10px;
}
.img {
width: 25%;
height: 25%;
float: left;
}
.img2 {
width: 25%;
height: 25%;
float: left;
}
.answer {
height: 25px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Words</title>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script>
</script>
</head>
<body>
<header>
<span class="fa fa-refresh" style="font-size:25px;"></span><span class="igen"> igen</span>
<span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige: 0 <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte: 0</span>
</header>
<div class="container">
<div>
<img class="img" src="img/cat.jpg" alt="cat" />
<div class="answer">
</div>
</div>
<img class="img" src="img/beak.jpg" alt="beak" />
<img class="img" src="img/spoon.jpg" alt="spoon" />
<img class="img" src="img/milk.jpg" alt="milk" />
<img class="img2" src="img/egg.jpg" alt="egg" />
<img class="img2" src="img/thee.jpg" alt="tea" />
<img class="img2" src="img/meel.jpg" alt="meel" />
<img class="img2" src="img/passport.jpg" alt="passport" />
</div>
<footer>
<img class="dansk" id="dansk" src="img/dansk2.jpg" alt="dansk" />
<img class="sprint" id="sprint" src="img/sprint2.png" alt="sprint" />
<center><span class="copyright"> ©2013 laerdansk / FC-Sprint² Leerbedrijf bronnen </span></center>
</footer>
</body>
</html>
I'm not sure is this you looking for...
<html>
<title>test</title>
<head>
</head>
<body>
<style>
.top{background-color: #900; width: 100%; height: 100px;}
.middle{background-color: #090; width: 100%; height: 600px; float: left;}
.sidebar{background-color: #ccc; width: 10%; height: 600px; float: left;}
.container{background-color: #000; width: 90%; height: 600px; float: left;}
.row{background-color: #fff; width: 100%; height: 100px; float: left;}
.footer{background-color: #090; width: 100%; height: 100px; float: left;}
.slice{background-color: #069; width: 33%; height: 100px; float: left;}
</style>
<div class="top">top</div>
<div class="middle">
<div class="sidebar">sidebar</div>
<div class="container">
<div class="row">
<div class="slice">1</div>
<div class="slice">2</div>
<div class="slice">3</div>
</div>
<div class="row">
<div class="slice">1</div>
<div class="slice">2</div>
<div class="slice">3</div>
</div>
<div class="row">
<div class="slice">1</div>
<div class="slice">2</div>
<div class="slice">3</div>
</div>
</div>
</div>
<div class="footer">
footer
</div>
</body>
</html>