This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I want my layout to look like this:
but it looks like this:
(I'm talking about the text on the right side of the image).
Why does it happen and how can I make it look the same?
This is for a project, and I can't use any reset/normalize file (in case of the browser throwing off the design).
I don't know how to also add the image in the snippet, I would've done that so you get a better representation of my problem.
Thanks.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #457c05;
background-image: url('./img/img03.jpg');
}
.container {
width: 1100px;
margin: 0 auto;
}
.titlu-website {
color: #1A1A1A;
font-size: 64px;
}
.meniu-navigatie {
padding: 0;
list-style-type: none;
background-color: #000;
overflow: hidden;
}
.button-link {
padding: 0 30px;
float: left;
font-family: 'Nova Mono', cursive;
font-size: 20px;
color: #B5B5B5;
text-decoration: none;
}
.button-link:hover {
color: #fff;
}
.active {
padding-left: -10px;
color: #fff;
}
.titlu {
color: #1A1A1A;
}
.continut-langa-imagine {
display: inline-block;
color: #808080;
text-align: justify;
line-height: 180%;
width: 400px;
}
.imagine-centrala {
border: 6px solid #EEE7DF;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="titlu-website">
Black/White
</div>
<ul class="meniu-navigatie">
<li class="buton-wrapper">Home</li>
<li class="buton-wrapper">Blog</li>
<li class="buton-wrapper">Photos</li>
<li class="buton-wrapper">About</li>
<li class="buton-wrapper">Links</li>
<li class="buton-wrapper">Contact</li>
</ul>
</div>
<div class="continut">
<div class="rand">
<h3 class="titlu">Welcome to Black/White</h3>
<img src="./img/img02.jpg" class="imagine-centrala">
<div class="continut-langa-imagine">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.
</div>
</div>
</div>
</div>
</body>
</html>
I have studied your CSS and it's not immediately clear to me why you should need to do this, but you can close the vertical gap above .continut-langa-imagine if you add the style declaration
vertical-align: top;
Working Example:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #457c05;
background-image: url('./img/img03.jpg');
}
.container {
width: 1100px;
margin: 0 auto;
}
.titlu-website {
color: #1A1A1A;
font-size: 64px;
}
.meniu-navigatie {
padding: 0;
list-style-type: none;
background-color: #000;
overflow: hidden;
}
.button-link {
padding: 0 30px;
float: left;
font-family: 'Nova Mono', cursive;
font-size: 20px;
color: #B5B5B5;
text-decoration: none;
}
.button-link:hover {
color: #fff;
}
.active {
padding-left: -10px;
color: #fff;
}
.titlu {
color: #1A1A1A;
}
.continut-langa-imagine {
display: inline-block;
vertical-align: top;
color: #808080;
text-align: justify;
line-height: 180%;
width: 400px;
}
.imagine-centrala {
border: 6px solid #EEE7DF;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="titlu-website">
Black/White
</div>
<ul class="meniu-navigatie">
<li class="buton-wrapper">Home</li>
<li class="buton-wrapper">Blog</li>
<li class="buton-wrapper">Photos</li>
<li class="buton-wrapper">About</li>
<li class="buton-wrapper">Links</li>
<li class="buton-wrapper">Contact</li>
</ul>
</div>
<div class="continut">
<div class="rand">
<h3 class="titlu">Welcome to Black/White</h3>
<img src="https://via.placeholder.com/150" class="imagine-centrala">
<div class="continut-langa-imagine">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.
</div>
</div>
</div>
</div>
</body>
</html>
I changed the block containing the image, text and header to a css-grid:
.rand { display: grid; grid-template-columns: min-content auto; grid-column-gap: 10px; }
This will give the image as much space as needed and the remaining space will be used by the text.
To let the header use the whole width I added:
.titlu { grid-column: span 2; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #457c05;
background-image: url('./img/img03.jpg');
}
.container {
width: 1100px;
margin: 0 auto;
}
.titlu-website {
color: #1A1A1A;
font-size: 64px;
}
.meniu-navigatie {
padding: 0;
list-style-type: none;
background-color: #000;
overflow: hidden;
}
.button-link {
padding: 0 30px;
float: left;
font-family: 'Nova Mono', cursive;
font-size: 20px;
color: #B5B5B5;
text-decoration: none;
}
.button-link:hover {
color: #fff;
}
.active {
padding-left: -10px;
color: #fff;
}
.rand {
display: grid;
grid-template-columns: min-content auto;
grid-column-gap: 10px;
}
.titlu {
color: #1A1A1A;
grid-column: span 2;
}
.continut-langa-imagine {
color: #808080;
text-align: justify;
line-height: 180%;
width: 400px;
}
.imagine-centrala {
border: 6px solid #EEE7DF;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="titlu-website">
Black/White
</div>
<ul class="meniu-navigatie">
<li class="buton-wrapper">Home</li>
<li class="buton-wrapper">Blog</li>
<li class="buton-wrapper">Photos</li>
<li class="buton-wrapper">About</li>
<li class="buton-wrapper">Links</li>
<li class="buton-wrapper">Contact</li>
</ul>
</div>
<div class="continut">
<div class="rand">
<h3 class="titlu">Welcome to Black/White</h3>
<img src="./img/img02.jpg" class="imagine-centrala">
<div class="continut-langa-imagine">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus
egestas at sem.
</div>
</div>
</div>
</div>
</body>
</html>
Using float:
Just add float: left; to the image and preferably a margin right and bottom as in the snippet here:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #457c05;
background-image: url('./img/img03.jpg');
}
.container {
width: 1100px;
margin: 0 auto;
}
.titlu-website {
color: #1A1A1A;
font-size: 64px;
}
.meniu-navigatie {
padding: 0;
list-style-type: none;
background-color: #000;
overflow: hidden;
}
.button-link {
padding: 0 30px;
float: left;
font-family: 'Nova Mono', cursive;
font-size: 20px;
color: #B5B5B5;
text-decoration: none;
}
.button-link:hover {
color: #fff;
}
.active {
padding-left: -10px;
color: #fff;
}
.titlu {
color: #1A1A1A;
}
.continut-langa-imagine {
color: #808080;
text-align: justify;
line-height: 180%;
width: 400px;
}
.imagine-centrala {
border: 6px solid #EEE7DF;
float: left;
margin: 0 10px 10px 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="titlu-website">
Black/White
</div>
<ul class="meniu-navigatie">
<li class="buton-wrapper">Home</li>
<li class="buton-wrapper">Blog</li>
<li class="buton-wrapper">Photos</li>
<li class="buton-wrapper">About</li>
<li class="buton-wrapper">Links</li>
<li class="buton-wrapper">Contact</li>
</ul>
</div>
<div class="continut">
<div class="rand">
<h3 class="titlu">Welcome to Black/White</h3>
<img src="./img/img02.jpg" class="imagine-centrala">
<div class="continut-langa-imagine">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus
egestas at sem.
</div>
</div>
</div>
</div>
</body>
</html>
Related
HTML nested list won't work for me, below is the screenshot of the result but it's aligned to the main bullet. I've seen the tutorials and just did what they did but still the result on my code is not the same as seen on the screenshot. I'm wondering if any of you have encountered this problem. Hoping for some answers. Thank you!
Below is my HTML and CSS code:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
font-weight: 300;
color: rgb(48, 48, 48);
line-height: 1.9;
background-color: #f3f3f3;
}
.logo {
color: black;
text-transform: uppercase;
letter-spacing: 10px;
padding-right: 150px;
padding-top: 12px;
}
.logo img {
width: 170px;
height: 75px;
padding-top: 8px;
/* padding-right: ; */
/* border: 2px solid black; */
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: 'Poppins', sans-serif;
background-color: #f3f3f3;
width: 100%;
z-index: 100;
height: 80px;
/* position: relative; */
/* border-bottom: 1px solid black; */
/* padding: 0 5rem; */
}
.nav-links {
display: flex;
/* justify-content: space-around; */
width: 30%;
}
.nav-links li {
list-style: none;
padding: 26px 40px;
}
.nav-links a {
color: black;
text-decoration: none;
letter-spacing: 2px;
font-size: 15px;
}
nav li:hover {
background-color: rgb(6, 168, 106);
}
nav li:hover a {
color: white;
}
/* Section */
.section {
padding: 5rem 25rem;
border-bottom: 1px solid rgb(187, 185, 185);
/* display: flex; */
}
.section-header {
display: flex;
}
.section1img {
width: 300px;
height: 400px;
/* margin: 60px 150px; */
}
.section1Desc {
padding: 20px 20px;
margin-left: 50px;
text-align: justify;
}
.btnLearnMore {
background-color: rgb(12, 201, 160);
border: none;
border-radius: 5px;
padding: 10px;
margin-top: 30px;
font-size: 20px;
color: white;
}
.bamboo-section {
display: flex;
}
.imgBamboo {
width: 300px;
height: 400px;
}
.bamboo-description {
/* margin-left: 125px; */
margin-top: 50px;
}
.bamboo-description h3 {
color: rgb(16, 143, 16);
}
.btnKalma {
border: none;
border-radius: 5px;
background-color: rgb(25, 179, 145);
color: white;
padding: 5px;
font-size: 17px;
margin-top: 25px;
}
.btnKalma:hover {
background-color: rgb(3, 143, 112);
}
.bamboo-description p {
margin-top: 25px;
text-align: justify;
margin-right: 100px;
}
.lavender-section {
display: flex;
margin-top: 75px;
}
.lavender-description {
margin-left: 100px;
margin-top: 50px;
}
.lavender-description h3 {
color: rgb(202, 0, 158);
}
.lavender-description p {
text-align: justify;
margin-top: 25px;
}
.imgLavender {
width: 300px;
height: 400px;
}
.btnHimbing {
text-decoration: none;
border: none;
border-radius: 5px;
background-color: rgb(165, 50, 180);
color: white;
padding: 5px;
font-size: 17px;
margin-top: 25px;
}
.btnHimbing:hover {
background-color: rgb(122, 4, 138);
}
.benefits-header {
text-align: center;
}
.benefits-body {
display: flex;
justify-content: space-around;
}
.benefits-body div {
/* border: 1px solid black; */
/* height: 60px;
width: 550px; */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./src/fontawesome/css/all.min.css" />
<link rel="stylesheet" href="./css/style.css" />
<title>Deux Citronella Trading</title>
<script defer src="./js/script.js"></script>
</head>
<body>
<header>
<nav>
<div class="logo">
<img src="./rsc/logo2.png" alt="" />
<!-- <img src="./rsc/DeuxLogo.png" alt="Deux Logo" class="imgLogo" /> -->
</div>
<ul class="nav-links">
<li class="nav-link">Home</li>
<li class="nav-link">About</li>
<li class="nav-link">Contact</li>
<li class="nav-link">Products</li>
</ul>
</nav>
</header>
<section class="section" id="section-1">
<div class="section-header">
<img src="./rsc/room&linen.jpg" alt="" class="section1img" />
<div class="section1Desc">
<h3>ROOM & LINEN SPRAY</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet ipsum lorem, quis vulputate nunc venenatis vitae. Donec rhoncus elit at auctor pellentesque. Suspendisse luctus egestas vestibulum. Suspendisse finibus turpis eget orci fringilla,
in pretium mauris facilisis. Fusce efficitur quam non odio tristique porta. Phasellus bibendum nibh egestas mi bibendum commodo. Donec lobortis ullamcorper eros quis vehicula. Pellentesque et neque a velit bibendum volutpat.
</p>
<button class="btnLearnMore">Learn More</button>
</div>
</div>
</section>
<section class="section" id="section-2">
<div class="bamboo-section">
<div class="bamboo-description">
<h3>Room & Linen Spray: KALMA</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet ipsum lorem, quis vulputate nunc venenatis vitae. Donec rhoncus elit at auctor pellentesque. Suspendisse luctus egestas vestibulum. Suspendisse finibus turpis eget orci fringilla,
in pretium mauris facilisis. Fusce efficitur quam non odio tristique porta. Phasellus bibendum nibh egestas mi bibendum commodo. Donec lobortis ullamcorper eros quis vehicula. Pellentesque et neque a velit bibendum volutpat.
</p>
<button class="btnKalma">About Kalma ↓</button>
</div>
<img src="./rsc/bamboo.jpg" alt="Bamboo Spray" class="imgBamboo" />
</div>
<div class="lavender-section">
<img src="./rsc/lavender.jpg" alt="" class="imgLavender" />
<div class="lavender-description">
<h3>Room & Linen Spray: HIMBING</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet ipsum lorem, quis vulputate nunc venenatis vitae. Donec rhoncus elit at auctor pellentesque. Suspendisse luctus egestas vestibulum. Suspendisse finibus turpis eget orci fringilla,
in pretium mauris facilisis. Fusce efficitur quam non odio tristique porta. Phasellus bibendum nibh egestas mi bibendum commodo. Donec lobortis ullamcorper eros quis vehicula. Pellentesque et neque a velit bibendum volutpat.
</p>
<button class="btnHimbing">About Himbing ↓</button>
</div>
</div>
</section>
<section class="section" id="section-3">
<div class="benefits-header">
<h2>Benefits</h2>
</div>
<div class="benefits-body">
<div class="first-box">
<ul>
<li>Room freshener</li>
<ul>
<li>Leaving your rooms smelling fresh and relaxing</li>
</ul>
<li>Insect Repellant</li>
<li>Toilet Deodorizer</li>
<li>Sanitizer</li>
</ul>
</div>
<div class="second-box">
<ul>
<li>Car Humidifier</li>
<li>Air Purifier</li>
<li>Disinfectant Spray</li>
<li>Workspace Cleaner</li>
</ul>
</div>
</div>
</section>
</body>
</html>
It's because you do a 'reset' of the margin and padding of all elements with * (universal selector, matches all types) and its declarations.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
If you remove that, it's showing as you want it to be. Read more about * at MDN. You can also make only adjustments to ul's margin and padding as you wish.
body {
font-family: 'Poppins', sans-serif;
font-weight: 300;
color: rgb(48, 48, 48);
line-height: 1.9;
background-color: #f3f3f3;
}
.benefits-body {
display: flex;
justify-content: space-around;
}
<div class="benefits-body">
<div class="first-box">
<ul>
<li>Room freshener</li>
<ul>
<li>Leaving your rooms smelling fresh and relaxing</li>
</ul>
<li>Insect Repellant</li>
<li>Toilet Deodorizer</li>
<li>Sanitizer</li>
</ul>
</div>
<div class="second-box">
<ul>
<li>Car Humidifier</li>
<li>Air Purifier</li>
<li>Disinfectant Spray</li>
<li>Workspace Cleaner</li>
</ul>
</div>
</div>
How would I make this section mobile responsive? I've designed it in a figma and copy and pasted the CSS that figma produced. Can flexbox alone make the text and image stack ontop of each as the screen size shrinks. Or would I just design the layout for each size screen in figma and then use media queries to call up the right css layout? Or is there any other way that's better to do this?
/* Global Settings */
* {
margin: 0;
padding: 0;
box-sizing: 0;
}
li,
a {
font-size: 0.75rem;
font-family: "Roboto";
font-weight: 700;
color: #303133;
text-decoration: none;
}
h1 {
font-size: 0.75rem;
font-family: "Roboto";
}
button {
width: 176px;
height: 47px;
background: #6442ff;
color: #ffffff;
font-family: "Roboto";
font-size: 12px;
line-height: 18px;
align-items: center;
border: none;
}
.section2-h1 {
position: absolute;
width: 582px;
height: 99px;
left: 160px;
top: 1645px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 50px;
line-height: 59px;
color: #303133;
}
.section2-p {
position: absolute;
width: 537px;
height: 163px;
left: 158px;
top: 1765px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 15px;
line-height: 25px;
/* or 167% */
display: flex;
align-items: center;
color: #777777;
}
.section2-img {
position: absolute;
width: 528px;
height: 402px;
left: 738px;
top: 1626px;
}
.section2-button {
position: absolute;
width: 176px;
height: 47px;
left: 161px;
top: 1962px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Web Design and Web Development">
<meta name="robots" content="index,follow">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<title>Hello</title>
</head>
<body>
<section id="section2">
<header class="section2-head">
<h1 class="section2-h1"> Lorem ipsum dolor sit ame.
</h1>
<p class="section2-p">Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
<img src="img/hello.jpg" alt="" class="section2-img">
<button class="section2-button">READ MORE</button>
</header>
</body>
</html>
A word of advice, I would recommend that you learn how to write your own CSS rather than using the CSS produced by Figma. The CSS code produced by Figma uses absolute positioning to position your HTML elements which would work on one screen size, but the website would not be responsive as it won't work well on any other screen size. To make your website responsive, you should use things like margin and padding to position your code. You can use the Figma code as more of a starting point.
To answer your question, yes flexbox can be used to make the text stack on top of each other. This can be done by changing it from display: flex; to display: block; on smaller screen sizes using a media query. I would advise against using media queries to change the CSS for each screen size using the Figma CSS as you would have to do that for a lot of screen sizes. You should just have that one breakpoint to stack the items at a thin breakpoint.
Below is a code snippet of a suggestion on how to change the Figma CSS code to something more responsive:
/* Global Settings */
* {
margin: 0;
padding: 0;
box-sizing: 0;
}
li,
a {
font-size: 0.75rem;
font-family: "Roboto";
font-weight: 700;
color: #303133;
text-decoration: none;
}
h1 {
font-size: 0.75rem;
font-family: "Roboto";
}
button {
width: 176px;
height: 47px;
background: #6442ff;
color: #ffffff;
font-family: "Roboto";
font-size: 12px;
line-height: 18px;
align-items: center;
border: none;
}
.section2-head {
margin: 160px;
display: flex;
align-items: flex-start;
}
.section2-text {
max-width: 537px;
margin-right: 20px;
}
.section2-h1 {
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 50px;
line-height: 59px;
margin-bottom: 10px;
color: #303133;
}
.section2-p {
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 15px;
line-height: 25px;
display: flex;
align-items: center;
margin-bottom: 40px;
color: #777777;
}
.section2-img {
width: 100%;
max-width: 528px;
}
#media (max-width: 1100px) {
.section2-head {
margin: 80px;
display: block;
}
.section2-text {
margin-bottom: 40px;
margin-right: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Web Design and Web Development">
<meta name="robots" content="index,follow">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<title>Hello</title>
</head>
<body>
<section id="section2">
<header class="section2-head">
<div class="section2-text">
<h1 class="section2-h1"> Lorem ipsum dolor sit ame.
</h1>
<p class="section2-p">Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
<button class="section2-button">READ MORE</button>
</div>
<img src="img/hello.jpg" alt="" class="section2-img">
</header>
</section>
</body>
</html>
I'm having this problem that my header,footer and bar part are not fixed when i scroll through the page if i attach an image the image kinda off overlaps and becomes above the header.
this is the css code:
*{
padding: 0;
margin: 0;
}
.header{
height: 80px;
width: 100%;
background: url(images/header.jpeg);
position: fixed;
}
.bar{
width: 100%;
height: 43px;
background: url(images/menu-boarder.jpeg);
flex-flow: row wrap;
align-items: center;
position: fixed;
}
body{
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
margin-top: 20px;
overflow: auto;
width: 80%;
}
.menu{
float: left;
list-style: none;
margin-top: 10px;
}
.menu li{
display: inline-block;
}
.menu li a{
color: #fff;
text-decoration: none;
padding: 10px;
font-family: sans-serif;
font-size: 24px;
}
.menu li a:hover{
background: #fff;
color: #333;
padding: 43px;
font-weight: bold;
}
.search {
display: flex;
float: right;
padding-top: 7px;
position: relative;
right:80px;
}
.searchTerm {
width: 400%;
border: 3px solid #000000;
color: #000000;
border: 3px solid #000000;
padding-bottom: 10px;
padding-top: 20px;
padding-right: 25px;
padding-left: 15px;
height: 20px;
}
.searchTerm:focus{
color: #000000;
}
.homeage_product {
position: relative;
width: 50%;
}
.homeage_but {
width: 100%;
height: auto;
}
.searchButton {
width: 100px;
border: 1px solid #000000;
background: #000000;
padding-right: 8px;
padding-left: 10px;
color: #FFFFFF;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.fa-shopping-cart, .glyphicon-user{
color: #000000;
}
#lblCartCount {
font-size: 12px;
background-color: crimson;
color: #fff;
padding: 0 5px;
vertical-align: top;
}
.form-inline {
display: flex;
}
.footer{
width: 100%;
height: 100px;
background: url(images/footer.jpeg);
bottom: 0px;
left: 0px;
right: 0px;
position: fixed;
margin-bottom: 0px;
}
the html code :
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Cookie|Bakery shop</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
</div>
<br><br><br><br>
<div class="bar">
<ul class="menu">
<li>Home</li>
<li>Contact us</li>
<li>About us</li>
<li>Product</li>
</ul>
<div class="search">
<form class="form-inline">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton"><i class="fa fa-search"></i></button>
</form>
also here i can't figure out why the following <div> tag is not clickable (meaning the user and the shooping cart):
<div class="icons">
<a herf="xx.html"><i class="fa fa-shopping-cart" style="font-size:36px; margin-right: 10px;">
<asp:Label ID="lblCartCount" ForeColor="White"/>3</i></a>
<a herf=""><i class="glyphicon glyphicon-user" style="font-size:30px; margin-right: 5px; "></i></a>
</div>
</div>
the rest of the html code:
</div>
<div class="content">
<!-- Image of a product with button refrence to the product it self -->
<div class="homeage_product" >
<img src="images/cake.jpg" alt="" style="width:100%; height:300px; padding: 0;">
<button class="homeage_but" >CLICK ME!</button>
</div>
</div>
<h4><center><u>Welome to our Bakery shop!</u></center></h4>
<p>
Lorem ipnam dolor sit amet, consectetur adipiscing elit Sed felis turpis, ulturicies nee herndrerit a
ullarneorper in maars Donee a erat molestie, condimentum ex eu, vehicula elst Ut egestas consectenor
libero, et dictum elir tineidunt sed Sed tellus nisi, faciliais sut nulla eu, euismod blandit marpia. Praesent
uficies semper auctor. Quisque eftieitur sollacstudin metus pec porta. Donec bbero notla, accumsan ut
negue sit amet, tincsdurt facilisis felis. Phasellus ac ante pretium, vehicula ex sed, feugsat ipsum Nullam
dapibus erat vitae ligula venenatis vestibulum Morbi aliquam sapien eu volutpet volutpat. Quisquue
sapien nisl, pulvinar eu finabua eget, tempus quis ante Cras sed blandst eros. Quisque posuere eros at
tellus tincidtant tristique.
</p>
<div class="footer">
</div>
</body>
</html>
Add z-index your header style in css:
.header
{
z-index: 99;
}
The z-index property specifies the overlay order of positioned elements. Elements with a greater z-index will therefore always be in front of elements with a lower z-index. Setting the z-index to a value greater than (or even equal to) 0 sets that element to be on top of non-positioned elements with no z-index specified. You could always set it to a value lower than 99, but, it is common practice to avoid potential clashes with other positioned elements.
Let me know if this works for you :)
I'm new to HTML and CSS and I'm wrote this for school.
All of a sudden my background image disappeared and I have no idea what the problem is!
The background image is gradient-bg.jpg and in the same directory as the header image.
What am I overlooking?
HTML:
<head>
<meta charset="utf-8" />
<title>
Laboration 1 av Emil
</title>
<link rel="stylesheet" type="text/css" href="style/stilmall.css" />
</head>
<body id="backnd">
<div id="wrapper">
<div id="header">
<h1 class="title">Musikbaren</h1>
</div>
<article id="content" style="float:left">
<h2 class="Rubrik">Detta är en rubrik</h2><hr/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta tristique faucibus. Cras id faucibus massa, vitae scelerisque dui. Vivamus sollicitudin arcu arcu, a cursus risus efficitur non. Pellentesque quis nisl a erat tempus scelerisque eu nec sapien. Aliquam nec mauris iaculis, varius tellus ac, sagittis dui.
</article>
<nav id="navbar" style="float:right">
<ul class="button-group">
<LI class="button"><a href="#" >Meny 1</a></LI>
<LI class="button"><a href="#" >Meny 1</a></LI>
<LI class="button"><a href="#" >Meny 1</a></LI>
</ul>
</nav>
<footer id="footer" style="text-align: center;">
Här skrivs kontaktuppgifter!!!!!!!!!!!!!
</footer>
</div>
</body>
</html>
CSS-file:
#wrapper {
background-color: white;
border-top-left-radius: 35px;
border-top-right-radius: 35px;
margin: 0 auto;
width: 980px;
min-width:980px;
border: solid 3px white;
}
#backgnd {
background-image:url("../images/gradient-bg.jpg");
background-repeat: repeat-x;
}
#header {
background-image:url('../images/header-bg.jpg');
background-repeat:no-repeat;
width: 980px;
height: 140px;
border-radius: 35px;
}
h1{
padding-left: 50px;
color: #800000;
}
#content {
font-family: Times New Roman;
background-color: white;
width: 747px;
margin-left: 19px;
padding-top: 5px;
}
p{
padding-left: 10px;
padding-right: 10px;
}
#navbar {
background-color: white;
width: 185px;
margin-right: 19px;
padding-left: 5px;
padding-top: 5px;
}
#footer{
clear:both;
text-align:center;
padding:5px;
opacity: 0.5;
}
a{
display: block;
width: 100%;
font-size: 30px;
line-height:50px;
text-align: center;
color:black;
text-decoration: none;
list-style-type: none;
}
a:hover {
color: red;
}
.button {
display: block;
margin-bottom: 5px;
height: 50px;
width: 150px;
background-color:#b3b3b3;
border-radius: 10px;
margin-right: 10px;
}
.title{
font-family: Times New Roman;
font-size: 78;
padding-left: 68px;
height: 140px;
line-height: 140px;
margin-bottom: 5px;
margin-top: 0px;
}
.Rubrik{
padding-left: 50px;
color: black;
font-size: 30px;
font-family: Times New Roman;
}
Your <body> no longer has an ID of #backgnd this has changed to #backnd for whatever reason, this could also be the other way around.
Change the following:
#backgnd {
background-image:url("../images/gradient-bg.jpg");
background-repeat: repeat-x;
}
Into:
#backnd {
background-image:url("../images/gradient-bg.jpg");
background-repeat: repeat-x;
}
and it should work as before.
Hope this helps!
I am having a problem with an overlapping DIV.
This is how the webpage appears when the window is maximised
This is how the webpage appears when the window is shrunk
This is how the webpage appears when the user scrolls to the right (red arrow) to view the text/image but the problem is that the content overlaps the side bar (blue arrow).
So my question is, how do stop this happening (or how should I be doing this)?
This is my HTML/CSS (it's not in a Fiddle because I can't demonstrate the issue that way)
<!DOCTYPE html><head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title>Example Title</title>
<style>
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
.content {
width:auto;
float:left;
clear: right;
}
#sidebar #menubar li, #sidebar #menubar li:link, #sidebar #menubar li:visited {
padding-top: 10px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
}
#sidebar #menubar li a, #sidebar #menubar li a:link, #sidebar #menubar li a:visited {
font-family: 'Open Sans', sans-serif; font-size: 80%;
color: #FFF;
text-decoration: none;
}
#logo {
height: 90px;
width: 200px;
margin-top: 0px;
margin-right: 25px;
margin-bottom: 25px;
margin-left: 25px;
}
#sidebar #menubar li:hover {
padding-top: 10px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
background-color: #06C;
}
#sidebar #menubar li a:hover {
font-family: 'Open Sans', sans-serif; font-size: 80%;
color: #FFF;
text-decoration: none;
}
#sidebar #menubar li#active{
font-family: 'Open Sans', sans-serif;
color: #FFF;
text-decoration: none;
padding-top: 10px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
background-color: #0066CC;
}
#sidebar #menubar {
padding: 0px;
margin: 0px;
list-style-type: none;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-size: 125%;
color: #006;
text-decoration: none;
}html, body {
height:100%;
margin: 0px;
padding: 0px;
background-color: #FFF;
}
#sidebar {
width: 250px;
height: 100%;
left: 0;
top: 0;
float:left;
background-color: #006;
padding-top: 25px;
position: fixed;
clear: right;
overflow-y:auto;
overflow-x:hidden;
bottom: 0px;
}
#content {
width: auto;
float: left;
margin-left: 250px;
padding-top: 125px;
padding-right: 125px;
padding-bottom: 125px;
padding-left: 125px;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
}
#media only screen and (max-width: 500px){
#sidebar{
position:relative;
height:auto;
width:100%;
float:left;
clear: right;
padding-bottom: 25px;
}
#content {
position:relative;
width:auto;
float:left;
margin: 0px;
padding: 25px;
clear: right;
}
}
</style>
</head>
<body>
<section><div id="sidebar">
<div id="logo"><img src="http://dummyimage.com/200x89/000/fff&text=Logo" width="200" height="89" alt="" /></div>
<ul id="menubar">
<li >Link 1</li>
<li >Link 2</li>
<li >Link 3</li>
<li >Link 4</li>
<li >Link 5</li>
</ul>
</div></section>
<div id="content">
<div class="content">
<h1>Example H1</h1>
<p>Duis aliquam mauris ac felis tincidunt varius. Maecenas pharetra id risus sed adipiscing. Vestibulum non libero eu quam semper commodo. Aliquam et diam ac tortor molestie blandit. Nullam et sem elit. Aenean tincidunt vitae lacus luctus fringilla. Cras mattis placerat semper. Etiam ullamcorper nunc vel mauris suscipit feugiat. In ac sollicitudin tellus, quis condimentum velit. Sed aliquam, leo non luctus dignissim, sapien felis ultrices sapien, vitae sollicitudin tortor sapien viverra diam. Nam varius nulla sapien, in pharetra sem placerat pretium. Ut varius vehicula nisl vel scelerisque. In hac habitasse platea dictumst. Sed iaculis, risus condimentum accumsan sagittis, mauris sem accumsan lectus, interdum porta metus leo sit amet tortor.
</p>
<div class="content-image"><img src="http://dummyimage.com/650x400/000/fff&text=Large+Image" alt="" width="650" height="400" border="0" align="middle" /></div>
</div>
</div>
<div style='clear:both;'></div>
</body>
</html>
EDIT: The reason why the side bar has a position: fixed is because this happens if it isn't:
This is because the sidebar is fixed. To achieve what you want, try floating both the sidebar and the content to the left.
Here's a simplified example: Fiddle
#sidebar
{
float:left;
background-color:#56B7BF;
width:150px;
height:400px;
}
#content
{
float:left;
background-color:#BF5E56;
width:400px;
height:400px;
}
The side bar needs to have a position absolute, give this a read:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
<!DOCTYPE html><head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title>Example Title</title>
<style>
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
.content {
width:auto;
float:left;
clear: right;
}
#sidebar #menubar li, #sidebar #menubar li:link, #sidebar #menubar li:visited {
padding-top: 10px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
}
#sidebar #menubar li a, #sidebar #menubar li a:link, #sidebar #menubar li a:visited {
font-family: 'Open Sans', sans-serif; font-size: 80%;
color: #FFF;
text-decoration: none;
}
#logo {
height: 90px;
width: 200px;
margin-top: 0px;
margin-right: 25px;
margin-bottom: 25px;
margin-left: 25px;
}
#sidebar #menubar li:hover {
padding-top: 10px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
background-color: #06C;
}
#sidebar #menubar li a:hover {
font-family: 'Open Sans', sans-serif; font-size: 80%;
color: #FFF;
text-decoration: none;
}
#sidebar #menubar li#active{
font-family: 'Open Sans', sans-serif;
color: #FFF;
text-decoration: none;
padding-top: 10px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
background-color: #0066CC;
}
#sidebar #menubar {
padding: 0px;
margin: 0px;
list-style-type: none;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-size: 125%;
color: #006;
text-decoration: none;
}html, body {
height:100%;
margin: 0px;
padding: 0px;
background-color: #FFF;
}
#sidebar {
width: 250px;
height: 100%;
left: 0;
top: 0;
float:left;
background-color: #006;
padding-top: 25px;
position: absolute;
clear: right;
overflow-y:auto;
overflow-x:hidden;
bottom: 0px;
}
#content {
width: auto;
min-width: 700px;
float: left;
margin-left: 250px;
padding-top: 125px;
padding-right: 125px;
padding-bottom: 125px;
padding-left: 125px;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
}
#media only screen and (max-width: 500px){
#sidebar{
position:relative;
height:auto;
width:100%;
float:left;
clear: right;
padding-bottom: 25px;
}
#content {
position:relative;
width:auto;
float:left;
margin: 0px;
padding: 25px;
clear: right;
}
.content img {
display: none;
}
}
</style>
</head>
<body>
<section><div id="sidebar">
<div id="logo"><img src="http://dummyimage.com/200x89/000/fff&text=Logo" width="200" height="89" alt="" /></div>
<ul id="menubar">
<li >Link 1</li>
<li >Link 2</li>
<li >Link 3</li>
<li >Link 4</li>
<li >Link 5</li>
</ul>
</div></section>
<div id="content">
<div class="content">
<h1>Example H1</h1>
<p>Duis aliquam mauris ac felis tincidunt varius. Maecenas pharetra id risus sed adipiscing. Vestibulum non libero eu quam semper commodo. Aliquam et diam ac tortor molestie blandit. Nullam et sem elit. Aenean tincidunt vitae lacus luctus fringilla. Cras mattis placerat semper. Etiam ullamcorper nunc vel mauris suscipit feugiat. In ac sollicitudin tellus, quis condimentum velit. Sed aliquam, leo non luctus dignissim, sapien felis ultrices sapien, vitae sollicitudin tortor sapien viverra diam. Nam varius nulla sapien, in pharetra sem placerat pretium. Ut varius vehicula nisl vel scelerisque. In hac habitasse platea dictumst. Sed iaculis, risus condimentum accumsan sagittis, mauris sem accumsan lectus, interdum porta metus leo sit amet tortor.
</p>
<div class="content-image"><img src="http://dummyimage.com/650x400/000/fff&text=Large+Image" alt="" width="650" height="400" border="0" align="middle" /></div>
</div>
</div>
<div style='clear:both;'></div>
</body>