I'm new to CSS and html and I'm doing my hero section right now but when I add a image to the hero section the image is loaded way beyond the header limits. How can I make so everything in the page is aligned to the header and doesn't go over "boundaries".
example: https://prnt.sc/10wn3io
You can set width and margin: 0 auto; to the containers. And also you should set object-fit: cover to resize your image.
.container {
width: 300px;
margin: 0 auto;
}
img {
object-fit: cover;
width: 100%;
height: 250px;
}
body {
background-color: #ecf0f1;
}
.menu {
height: 50px;
background-color: #e67e22;
text-align: center;
color: #ffffff;
line-height: 50px;
font-size: 30px;
font-family: sans-serif;
}
<body>
<div class="container menu">
Menü
</div>
<div class="container">
<img src="https://loremflickr.com/cache/resized/65535_50917877588_9db3484f10_c_640_360_nofilter.jpg">
</div>
</body>
If this solution does not work, we can find a better solution if you share your code.
img {
object-fit: cover;
width: 100%;
height: 300px;
}
/* if you want to cover the background by image then
add `background-size:cover;` */
}
Related
I don't have much knowledge about html and css and I couldn't find the answer on the internet so I am here.
Problem:
I am trying to make an image fill top part of the screen but one thing stops me from it and it's the default margin of the <body>. I've managed it by using margin: -10px; But now the image can't fill the screen by 20px, probably because there is no margin, image still thinks screen is that big.
html,body {
width: 100%;
height: 100%;
margin: -10px;
padding: 0;
overflow: hidden;
}
img {
width: 1600px;
height: 300px;
opacity: 70%;
object-fit: cover;
object-position: top 10px;
}
.cont {
position: relative;
text-align: center;
padding: 10px;
}
.main-text {
font-size: 100px;
color: white;
position: absolute;
top: 100px;
left: 70px;
}
<body>
<div class="cont">
<img src="https://i.stack.imgur.com/DWZAk.jpg">
<div class="main-text">Big Ass Title</div>
</div>
</body>
NOTE: If you have any questions or didn't understand anything about the question, please ask because I am ready for any answer. :) Thanks.
If your image is meant to be a decoration(design), then background is fine to use.
.cont can be a flex or grid element, to avoid position absolute and possible unwanted sides effects.
here an example with a background and grid:
body {
margin: 0;
min-height: 100vh; /* optionnal if it does not have a purpose */
}
.cont {
height: 300px; /* guessed from your code */
display: grid; /* default make a single column*/
background: url(https://picsum.photos/id/1015/600/300) 0 0 / cover; /* background covering */
}
.main-text {
margin-block: auto; /* vertical-centering in its row from here */
margin-inline-start:70px;
font-size: 100px; /* from your code */
color: white; /* from your code */
font-weight: normal; /* you looked for this? */
text-shadow: 0 0 1px #000; /*Optionnal increase readability*/
}
<div class="cont">
<h1 class="main-text">Big Ass Title</h1><!-- if that's a title, then make it a title ;) -->
</div>
Generally to eliminate all the margins and paddings you can add:
* {
margin: 0;
padding: 0;
}
By the way I attached a snippet where it's working as you requested. Is better to eliminate the margins than adding a negative margin, if you want to do it that way you must to compensate it in the width to achieve the 100% width intended.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
img {
width: 100%;
margin: 0;
height: 300px;
opacity: 70%;
object-fit: cover;
}
.cont {
position: relative;
text-align: center;
}
.main-text {
font-size: 100px;
color: white;
position: absolute;
top: 100px;
left: 70px;
}
<html>
<body>
<div class="cont">
<img src="https://images2.alphacoders.com/941/thumb-1920-941898.jpg">
<div class="main-text">Big Ass Title</div>
</div>
</body>
</html>
I'm using an image as a full-screen background. When I put a new div underneath the content of the div gets mish-mashed with the image instead of allowing scrolling.
html {
scroll-behavior: smooth;
;
}
body {
background-color: #FBEEC1;
margin: 0;
padding: 0;
text-align: center;
}
#header {
background-image: url(tempbackground.jpg);
width: 100%;
height: 100%;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
}
#title-text {
position: absolute;
width: 500px;
height: 250px;
top: 50%;
left: 50%;
margin-left: -250px;
/* divide each margin in 1/2 */
margin-top: -125px;
}
.body-text {
display: none;
/*This will be enables after scrolling with a scroll animation */
color: #BC986A;
width: 100%;
}
.text-width {
margin: 0 auto;
width: 50%;
}
.font-title {
font-family: "Times New Roman", Times, serif;
}
.font-body {
font-family: Arial, Helvetica, sans-serif;
}
<div id="header">
<img id="title-text" src="Logo-text.png">
</div>
<div class="body-text" id="font-title">
<h2 class="text-width">Our Forests Are Under Attack!</h2>
<p class="text-width" id="font-body">Sample text that should display below image.</p>
</div>
For what i understood, you want that the page you first up see after opening your file in browser to be blank and when you scroll down you see your content.
for this make a empty container
<div class="empty-page"></div> and set its height in css file to 100 vh( viewport height ).
.empty-page {
height: 100vh;
}
<body>
<div class="empty-page"></div>
<!-- your rest of the code -->
<h1>THIS IS A HEADING</h1>
</body>
I have this html code:
<div id="home-page"> hello from home</div>
<div class="home-page top-div">
some text
</div>
<div class="home-page bottom-div">
other text
</div>
This is the css:
#home-page {
.top-div {
height: 50%;
width: 100%;
background-color: #009900;
margin: auto;
text-align: center;
}
.bottom-div {
height: 50%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
}
What I want to get is a page split in two parts horizontally, the top part in one colour and the second one in another colour. I tried this but it has no effect on my page.
Does anybody know what I did wrong? Thanks
I think you should define #home2-page also as
#home2-page{
width: 100%;
height: 100%;
margin: 0 auto;
display: block;
}
Using percent in height is dependent on parent div height. If no height is set in the parent div, then height has no meaning.
The same is true for the parent. If you use a percent-height (or no height depending on HTMLElement.style.display) in the parent element, then it's parent needs to have a fixed height. All the way up to the html-element, which you can set to 100% height (and then it should work). html{ height: 100% }
Anyway, that is a silly way to do things, so I suggest you use something slightly more modern instead; The vh vw units (viewport height, viewport width). One vh unit is 1% of the viewport height. Thus, you can replace 50% with 50vh and it'll be something closer to what you wish for.
.top-div {
height: 50vh;
}
Try This:
html,body {
height: 100%;
}
html,body {
height: 100%;
}
.top-div {
height: 50%;
width: 100%;
background-color: #009900;
margin: auto;
text-align: center;
}
.bottom-div {
height: 50%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
<div id="home2-page"> hello from home</div>
<div class="home2-page top-div">
some text
</div>
<div class="home2-page bottom-div">
other text
</div>
Like #C Travel said, you can't use nested CSS meaning you can't put a class inside a class. You can accomplish your goal by simplifying your code a bit. Checkout my working example below:
CSS:
<style>
.top-div {
height: 50%;
width: 100%;
background-color: #009900;
margin: auto;
text-align: center;
}
.bottom-div {
height: 50%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
</style>
HTML:
<div class="top-div">
<p>hello from home</p>
<p>some text</p>
</div>
<div class="bottom-div">
<p>other text</p>
</div>
I'm trying to build an info card where if the screen is large, you'd have an image filling the left half of the card and text on the right and if the screen is small you'd have the picture on the top and text on the bottom. I was able to do the first part by adding position: absolute;top: 0;left: 0;bottom: 0;width: 40%, and the setting background-image: src;background-size: cover; and then setting margin-left: 40% on the content. But ultimately this makes it hard for a structure like this to adapt to screen sizes without some javascript. I'd like to avoid using js as much as possible for this so I looked for solutions online and came upon answers such as using a flexbox and using the object-fit css property, but none of those really worked. Here's my code:
.signup-form-wrapper {
display: flex;
align-items: center;
height: 400px;
width: auto;
border: 1px solid rgb(200, 200, 200);
margin: 10px 0px;
}
.img-wrapper {
height: 100%;
width: 50%;
}
.img-wrapper img {
display: block;
max-width: 100%;
height: auto;
}
.content-wrapper {
display: inline-block;
max-width: 60%;
text-align: center;
padding: 0px 14%;
}
body {
height: 100%;
width: 100%;
}
<body>
<div class='signup-form-wrapper'>
<div class='img-wrapper'>
<img src='http://www.parkermeridien.com/media/pool_fashion_f.jpg' />
</div>
<div class='content-wrapper'>
<p>Hello, World!</p>
</div>
</div>
</body>
You were on the right track!
Media queries (which you experimented with) are the right way to do this without JavaScript. I went back to using a background-image instead of an img - here's a simple way to do this using floating to keep the elements side-by-side, with a media query (at the bottom of the CSS) that turns off the floating so the elements stack.
I also added box-sizing: border-box; for all elements to prevent padding/borders from modifying the size of elements (which is good practice).
body {
height: 100%;
width: 100%;
}
* {
box-sizing: border-box;
}
.signup-form-wrapper {
height: 350px;
border: 1px solid rgb(200, 200, 200);
margin: 10px 0px;
}
.img-wrapper {
height: 100%;
width: 40%;
float: left;
background-image: url('http://www.parkermeridien.com/media/pool_fashion_f.jpg');
background-size: cover;
}
.content-wrapper {
float: left;
width: 60%;
text-align: center;
padding: 0px 14%;
}
#media (max-width: 768px) {
.img-wrapper,
.content-wrapper {
width: auto;
float: none;
height: 175px;
}
}
<body>
<div class='signup-form-wrapper'>
<div class='img-wrapper'>
</div>
<div class='content-wrapper'>
<p>Hello, World!</p>
</div>
</div>
</body>
I have a header in my web page where logo, application name, help link and logout are shown. Logo is placed left top, logout is placed right top, help is placed before logout link. The rest of the space should be occupied by the application name. I tried to float all the divs and then my divs lost width and when I try to set width on my app name div I get unexpected results when I try to set width: 100%. Even I dont set the width to 100% if the application name text increases I get unexpected results.
This is the code
<!DOCTYPE html>
<html>
<head>
<title>Mock UI</title>
<style>
body {
margin: 0px;
}
.oss-gradient {
height: 5px;
min-width: 1024px;
background: yellow;
}
.header {
height: 40px;
min-width: 1024px;
background: #def;
}
.logo {
background-image: url("logo_top_small.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
width: 50px;
height: 100%;
float: left;
}
.product-name {
line-height: 35px;
height: 100%;
float: left;
width: 100%;
}
.help {
line-height: 35px;
float: right;
height: 100%;
}
.logout {
line-height: 35px;
float: right;
height: 100%;
}
.content-wrapper {
width: 1024px;
background: #defabc;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="oss-gradient">
</div>
<div class="header">
<div class="logo">
</div>
<div class="product-name">
App name
</div>
<div class="logout">
Logout
</div>
<div class="help">
Help
</div>
</div>
<div class="content-wrapper">
</div>
</div>
</body>
</html>
Here is a working sample.
I then tried doing the same with CSS3 calc method. But this involves hard coding the widths. A small change in logo's width or logout, help divs widths will create problems in the app name div.
Click here to see the working example with css3 calc
Then I tried to do it using float with inner divs. Below is my new code
<!DOCTYPE html>
<html>
<head>
<title>Mock UI</title>
<style>
body {
margin: 0px;
}
.oss-gradient {
height: 5px;
min-width: 1024px;
background: yellow;
}
.header {
height: 40px;
min-width: 1024px;
background: #def;
}
.logo {
background-image: url("logo_top_small.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
width: 50px;
height: 100%;
float: left;
}
.wrapper {
height: 100%;
}
.product-name {
line-height: 35px;
height: 100%;
float: left;
}
.help {
line-height: 35px;
float: right;
height: 100%;
margin-right: 10px;
}
.logout {
line-height: 35px;
float: right;
height: 100%;
margin-right: 10px;
}
.oss-text {
line-height: 35px;
height: 100%;
overflow: hidden;
}
.content-wrapper {
width: 1024px;
background: #defabc;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="oss-gradient">
</div>
<div class="header">
<div class="logo">
</div>
<div class="wrapper">
<div class="logout">
Logout
</div>
<div class="wrapper">
<div class="help">
Help
</div>
<div class="oss-text">
App name
</div>
</div>
</div>
</div>
<div class="content-wrapper">
</div>
</div>
</body>
</html>
Click here to see the working example.
But this is creating lot of dom. Is there any other approach or the second solution is good enough?
The first solution is a total flop.
If I use CSS3 then I have to hardcode the widths
Solution 2 involves making the dom deeper.
I think there is another solution which involves using absolute positioning. But I dont know how to do it and is it a good approach or not.
You can achieve what you want using display:table and display:table-cell:
.header {display:table}
.header > div {display:table-cell}
As long as you give widths to logo, logout and help divs then the app name should stretch to take up the rest of the header
Example
Here's what you need with only 3 div containers
The markup:
<header>
<div class='logo'></div>
<div class='appName'><h3>Some App</h3></div>
<div class='btn-container'>
<button >Help</button>
<button>Logout</button>
</div>
</header>
and the CSS:
header {
position: fixed;
top: 0px;
width: 100%;
display: table;
}
header div {
display: table-cell;
vertical-align: middle;
}
.logo {
width:40px;
background: steelblue;
height: 40px;
float: left;
}
.btn-container {
width: 80px;
float: right;
}
.appName {
text-align: center;
width: 100%;
}
Try this:
.product-name {
line-height: 35px;
height: 100%;
text-align: center;
width: 100%;
}