Can someone tell me why I'm able to style the header class but not my MainContent class? Only the Lorum Ipsum text shows up. The maincontent div doesn't show any width, height or color. Thanks for any help!
.header {
width: 100%;
height: 90px;
background-color: blue;
}
.header img {
height: 80%;
margin-top: 10px;
margin-left: 260px;
}
.MainContent {
width: 100%;
height: 80%;
background-color: yellow;
}
<div class="header">
<img src="img/epic_it.png" alt="epicit logo">
<nav></nav>
</div>
<div class="MainContent">
<h1>
Lorem ipsum
</h1>
</div>
You have a really strange piece of markup at the end of your .header img declaration, which is being considered a CodeMirror invalid character, and causing any CSS that follows it to break. If you edit your snippet, you'll see a red circle there, though it is invisible in the snippet preview.
Simply removing that fixes the problem:
.header {
width: 100%;
height: 90px;
background-color: blue;
}
.header img {
height: 80%;
margin-top: 10px;
margin-left: 260px;
}
.MainContent {
width: 100%;
height: 80%;
background-color: yellow;
}
<div class="header">
<img src="img/epic_it.png" alt="epicit logo">
</div>
<div class="MainContent">
<h1>
Lorem ipsum
</h1>
</div>
Hope this helps! :)
Related
For a project I have a page where everything is in a wrapper and I scale that wrapper as the screen size gets bigger. Imagine each box being a section.
The middle section bleeds to the right but keeps the same margin to the left as the wrapper does. I don't know the exact width of the the section + the margin on the right and if I do, when it scales it will change. I want the left side to scale inline with the other sections as the browser changes like it does in a regular wrapper.
https://codepen.io/seandaniel/pen/oNvKjop
.wrapper {
width: 60rem;
margin: 0 auto;
}
.section-1 {
background-color: black;
width: 100%;
height: 200px;
}
.section-2 {
background-color: blue;
/* this width is just to show what I want it to look like */
width: 1224px;
height: 200px;
margin-left: auto;
}
.section-3 {
background-color: orange;
width: 100%;
height: 200px;
}
<main>
<div class="wrapper">
<section class="section-1">
</section>
</div>
<section class="section-2">
</section>
<div class="wrapper">
<section class="section-3">
</section>
</div>
</main>
Is this what you want to happen?
The wrapper will stay the same distance from the left no matter what.
Although I'm not sure if you want your wrapper in the center center (x,y) at all times.
CSS
.wrapper {
border: 1px solid green;
width: 100%;
position: absolute;
left: 45px;
}
.section-1 {
background-color: black;
width: 100%;
height: 200px;
position: relative;
}
.section-2 {
background-color: blue;
width: 125%;
height: 200px;
margin-left: auto;
position: relative;
}
.section-3 {
background-color: orange;
width: 100%;
height: 200px;
position: relative;
}
<main>
<div class="wrapper">
<section class="section-1">
</section>
<section class="section-2">
</section>
<section class="section-3">
</section>
</div>
</main>
In your .section-2 class add the following css rule margin-right: calc(50% - 50vw);
You will also need to nest your <section class="section-2"></section> into the same <div class="wrapper"></div> as your other sections to have the same left alignment.
If you want it to bleed to the left, use margin-left: calc(50% - 50vw); instead of margin-right, or have both to be full width.
This page has a lot of good information about manipulating margins within a container.
Full Width Containers in Limited Width Parents
.wrapper {
width: 60rem;
margin: 0 auto;
}
.section-1 {
background-color: black;
width: 100%;
height: 200px;
}
.section-2 {
background-color: blue;
height: 200px;
margin-right: calc(50% - 50vw);
}
.section-3 {
background-color: orange;
width: 100%;
height: 200px;
}
<main>
<div class="wrapper">
<section class="section-1">
</section>
</div>
<div class="wrapper">
<section class="section-2">
</section>
</div>
<div class="wrapper">
<section class="section-3">
</section>
</div>
</main>
I have an image inside a div. When I resize the window I want the image to keep the same distance to the right as the div does. If I set the image as a background on another div it works fine, but couldn't figure out how to get it to work as an img tag as well:
Here's what it looks like
.mainDiv {
max-width: 1200px;
margin: auto;
width: 95%;
}
.tempImage {
background: url(https://via.placeholder.com/1200x183);
height: 183px;
}
<div class="mainDiv">
<h2>This one works</h2>
<div class="tempImage"></div>
<h2>This one doesn't</h2>
<img src="https://via.placeholder.com/1200x183" alt="">
</div>
.mainDiv {
max-width: 1200px;
margin: auto;
width: 95%;
}
.tempImage {
background: url('https://dummyimage.com/1200x400/000/fff');
height: 183px;
}
.img-class {
width: 100%;
}
<div class="mainDiv">
<h2>This one works</h2>
<div class="tempImage"></div>
<h2>This one does now?</h2>
<img class="img-class" src="https://dummyimage.com/1200x400/000/fff" alt="">
</div>
You can either set the max-width property on the image, or overflow property on the container div, depending on whether you want the image to scale or be cutoff:
max-width:
.mainDiv {
max-width: 1200px;
margin: auto;
width: 95%;
}
.tempImage {
background: url(https://via.placeholder.com/1200x183);
height: 183px;
}
img {
max-width: 100%;
}
<div class="mainDiv">
<h2>This one works</h2>
<div class="tempImage"></div>
<h2>So does this one</h2>
<img src="https://via.placeholder.com/1200x183" alt="">
</div>
overflow:
.mainDiv {
max-width: 1200px;
margin: auto;
width: 95%;
overflow: hidden;
}
.tempImage {
background: url(https://via.placeholder.com/1200x183);
height: 183px;
}
<div class="mainDiv">
<h2>This one works</h2>
<div class="tempImage"></div>
<h2>So does this one</h2>
<img src="https://via.placeholder.com/1200x183" alt="">
</div>
Try max-width property of the img tag.
I have a problem, and I want to make #left be the same height as #right, I have set height: 100%; but it only works if there is content.
the HTML & CSS code:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-color: #cfcfcf;
margin: 0;
}
#wrapper {
width: 900px;
height: 100%;
background: white;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
#left
{
width: 200px;
min-height: 100%px;
background: blue;
overflow: hidden;
height: 100%;
float: left;
}
#leftbottom
{
width: 200px;
height: 30px;
background: red;
float: left;
}
#right
{
width: 800px;
background: cyan;
height: 100%;
float: right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<h1>Lorem ipsum</h1>
<h2>Lorem ipsum</h2>
<div id="leftbottom"></div>
</div>
<div id="right">
<h1>Content ipsum</h1>
<h2>Lorem ipsum</h2>
<h2>Lorem ipsum</h2>
<h2><- White space</h2>
</div>
</div>
</body>
</html>
I've also tested with position: absolute but it does not work either, how can I solve this?
also, I do not need to establish fixed height
If you put %, the words that can use the 100 of its size, not that it is of such size, if you want to assign size, use px
#left
{
width: 200px;
/*min-height: 100%px;*/ % before px? really?
background: blue;
overflow: hidden;
height: 100px;
float: left;
}
#right
{
width: 800px;
background: cyan;
height: 100px;
float: right;
}
body {
background-color: #cfcfcf;
margin: 0;
}
#wrapper {
width: 1000px;
height: 300px;
background: white;
}
#left
{
width: 200px;
background: blue;
float: left;
height: 100%;
}
#right
{
width: 800px;
background: cyan;
height: 100%;
float: right;
}
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="wrapper">
<div id="left">
<h1>Lorem ipsum</h1>
<h2>Lorem ipsum</h2>
<div id="leftbottom"></div>
</div>
<div id="right">
<h1>Content ipsum</h1>
<h2>Lorem ipsum</h2>
<h2>Lorem ipsum</h2>
<h2>White space</h2>
</div>
</div>
</body>
</html>
Well the solution is not big for it. You need to use bootstrap column with equal height.
<div class="row row-eq-height">
<div class="col-6">Hello</div>
<div class="col-6">World</div>
</div>
Know more read this
http://getbootstrap.com.vn/examples/equal-height-columns/
I'm trying to layout my first site and I'm stuck on positioning two divs in the same line. I have posted an image below showing the layout I am trying to achieve.
This is the code that i have for the 2 divs at the moment.
<div class="full-width">
<div class="logo">
<img src="img/logo.png"/>
</div>
<div class="social">
<ul class="social-icons">
<li><img src="img/facebookSS.png"/></li>
<li><img src="img/twitter.png"/></li>
<li><img src="img/instagramSS.png"/></li>
</ul>
</div>
<div class="address">
<p>Address to go here</p>
</div>
</div>
I have been playing around with the CSS for a little while but just can't seem to get it right.
What I am looking to do is have all the above on one row, with the nav on the row underneath. Hope that makes sense. I am not using any framework like bootstrap so just using my own classes etc.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-size: 20px;
font-family: 'Open Sans', sans-serif;
color: #fff;
position: relative;
}
.logo {
width: 300px;
height: auto;
position: relative;
display: inline-block;
}
.logo img {
width: 100%;
height: auto;
}
.social {
display: inline-block;
float: right;
margin-right: 20%;
}
.social li {
display: inline-block;
}
.social li img {
width: 50px;
height: auto;
}
.full-width {
width: 100%;
margin: 0 auto;
position: relative;
text-align: center;
}
You need to create more containers for your div's. Here is a very basic example to explain:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<title></title>
</head>
<body>
<div class="container">
<div id="one"></div>
<div id="two">
<div id="three"></div>
<div id="four"></div>
</div>
</div>
</body>
</html>
The container class would take up the full width of the page and contain everything above your navbar. Div one would be your logo, than div two would be another container in which you could put more divs (three and four) that take up a percentage of the height of div two. Than inside of one of these divs, you would need put your social logos, and the address in the next one so it shows underneath. Here is the CSS:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
width: 100%;
}
#one {
height: 300px;
width: 300px;
background-color: green;
float: left;
margin-left: 25%;
}
#two {
height: 300px;
width: 500px;
float: left;
margin-left: 10%;
}
#three {
height: 30%;
width: 100%;
background-color: yellow;
}
#four {
height: 70%;
width: 100%;
background-color: blue;
}
This is just a very basic example, only to be used as a concept for your idea. Obviously remove the cheesy background colors and modify
Updated:
I created a div with the class .top that has a defined width, which allows you to center anything within it with margin:auto;. I created a section around your social icons and floated it right. This is a better example than my previous one because here the logo is centered.
I hope this helps: https://jsfiddle.net/0sptpx0j/3/
Hi guys thanks for all the advice, i decided after reading about absolute positioning to go down that route. this is what i have come up with.
<div class="full-width">
<div class="logo">
<img src="img/logo.png"/>
</div>
<div class="social">
<div class="social-list">
<ul class="icons">
<li><img src="img/facebookSS.png"/></li>
<li><img src="img/twitterSS.png"/></li>
<li><img src="img/instagramSS.png"/></li>
</ul>
</div>
<div class="address">
<p>Address goes in here</p>
</div>
</div>
</div>
.logo {
width: 300px;
height: auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.logo img{
width: 100%;
height: auto;
}
.social {
float: right;
width: 300px;
}
.social-list {
width: 100%;
}
.icons {
list-style: none;
padding: 0;
}
.icons li {
display: inline-block;
margin-right: 10px;
}
.icons img {
width: 50px;
height: auto;
}
.full-width {
width: 100%;
margin: 0 auto;
position: relative;
text-align: center;
}
I'm new to CSS, and I've looked for help in the previous forums on this issue. I think I'm doing everything right but my floated elements are being yanked to the left.
Here is my code:
div {
display: block;
}
.grid {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}
.home {
text-align: center;
float: left;
width: 33.3333333%;
position: relative;
padding: 25px;
}
.third {
display: inline-block;
position: relative;
float: left;
height: 150px;
width: 150px;
border-radius: 25px;
}
.third img {
float: left;
position: relative;
}
And my html:
<div class="grid">
<article class="home">
<article class="third">
<img src="" /></article>
</article>
<article class="home">
<article class="third">
<img src="" /></article>
</article>
<article class="home">
<article class="third">
<img src="" /></article>
</article>
</div>
Help please!
I can't comment yet…
Your original code on fiddle
The problem come from padding in .home class.
I have disabled padding:25px; here in .home class, because padding is added to width in CSS:
The modified version (without padding) on fiddle
Now it's not "pulled too far on the left".
What you can do instead, is to add margin:25px; to .third class, like this:
The modified version (with margin) on fiddle
EDIT: A CLEAN REVISITED VERSION:
The HTML code:
<div class="grid">
<article class="home">
<div class="third">
<img src="http://lorempicsum.com/nemo/350/200/1" />
</div>
</article>
<article class="home">
<div class="third">
<img src="http://lorempicsum.com/futurama/350/200/6" />
</div>
</article>
<article class="home">
<div class="third">
<img src="http://lorempicsum.com/up/350/200/6" />
</div>
</article>
</div>
The CSS code:
.grid {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}
.home {
text-align: center;
float: left;
width: 33.3333333%;
}
.third {
display:table-cell;
height: 150px;
width: 150px;
padding: 25px;
border-radius:25px;
vertical-align:middle;
background-color:#eee; //added just for test display
}
.third img {
border:none;
width: 100%;
height: auto;
}
The result here on fiddle.
Images are adaptative, centered vertically and horizontally.
The .third class have a light grey background color just for testing and displaying the curved borders and the centered images inside it.
I have also replaced in html code, the second <article> tag by a <div> tag, because it is redundant.
Please use the updated code I think it will work.
div {
display: block;
}
.grid {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}
.home {
text-align: center;
float: left;
width: 33.3333333%;
position: relative;
padding: 25px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.third {
display:block;
border-radius: 25px;
}
.third img {
width:100%;
height:auto;
}
Here's a possible correction of your code to you :
See this fiddle
I've changed a little the HTML structure like this :
<section class="home">
<article class="third">
<img src="http://lorempicsum.com/futurama/350/200/1" />
</article>
<article class="third">
<img src="http://lorempicsum.com/futurama/350/200/1" />
</article>
<article class="third">
<img src="http://lorempicsum.com/futurama/350/200/1" />
</article>
</section>
It's better for semantic to have section around article and not article around article.
I've simplify the CSS code like this :
section.home {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}
article.third {
text-align: center;
float: left;
width: 150px;
position: relative;
padding: 25px;
overflow: hidden;
}
.third img {
border-radius: 25px;
width: 100%;
position: relative;
}
If you use fluid width for container, then use fluid width for padding/margin of article.
In that case, i use fixed width of the container and for padding values.