I am writing my own css, but the strange thing is that the my .content border-top and border-bottom are sticking together.
Here is my code for css:
body{
width: 100%;
margin: auto;
}
header{
position: relative;
margin: 20px;
min-width: 1200px;
min-height: 70px;
}
p{
font-family: courier;
font-size: 130%;
margin: 10%;
}
.content{
margin-top: 100px;
min-width: 1200px;
border-top: 3px solid orange;
border-bottom: 30px solid rgb(239, 98, 98);
}
.content .col-left{
width: 20%;
float: left;
}
.content .col-mid{
width: 60%;
float: left;
}
.content .col-right{
width: 20%;
float: left;
}
.footer{
margin-top: 20px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>IEEI</title>
<!-- Custom styles for this template -->
<link href="css/reset.css" rel="stylesheet">
<link href="css/customized.css" rel="stylesheet">
</head>
<body>
<header>
<img src="http://via.placeholder.com/150x150">
</header>
<div class="content">
<div class="col-left"><img src="http://via.placeholder.com/100x150" style="width:100%"></div>
<div class="col-mid">
<p>
Instead of referencing the image directly, stick it within a DIV.
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
</p>
</div>
<div class="col-right"><img src="http://via.placeholder.com/100x150" style="width:100%"></div>
</div>
<div class="content">
<p>test footer</p>
</div>
<div class="footer">
<p>test footer</p>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I am wondering how to move the red border bottom to the right position.
I have tried to put a new content box in the HTML, the position seems to be OK but messes up the output. I am new to the CSS, please help me out.
Your .content element only contains floated elements, which "don't count" concerning the borders and size of their container element. Add overflow: auto; to .content to make .content wrap its floating contents:
body{
width: 100%;
margin: auto;
}
header{
position: relative;
margin: 20px;
min-width: 1200px;
min-height: 70px;
}
p{
font-family: courier;
font-size: 130%;
margin: 10%;
}
.content{
margin-top: 100px;
min-width: 1200px;
border-top: 3px solid orange;
border-bottom: 30px solid rgb(239, 98, 98);
overflow: auto;
}
.content .col-left{
width: 20%;
float: left;
}
.content .col-mid{
width: 60%;
float: left;
}
.content .col-right{
width: 20%;
float: left;
}
.footer{
margin-top: 20px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>IEEI</title>
<!-- Custom styles for this template -->
<link href="css/reset.css" rel="stylesheet">
<link href="css/customized.css" rel="stylesheet">
</head>
<body>
<header>
<img src="http://via.placeholder.com/150x150">
</header>
<div class="content">
<div class="col-left"><img src="http://via.placeholder.com/100x150" style="width:100%"></div>
<div class="col-mid">
<p>
Instead of referencing the image directly, stick it within a DIV.
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
</p>
</div>
<div class="col-right"><img src="http://via.placeholder.com/100x150" style="width:100%"></div>
</div>
<div class="content">
<p>test footer</p>
</div>
<div class="footer">
<p>test footer</p>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Also would be a good idea to provide some height to the element of .content ID.
Related
I'm having an issue, primarily on mobile devices (in my case, an iOS device) where a div is seemingly preventing scroll-chaining; this is problematic because it's the first place you would touch to scroll (as opposed to a smaller div above it). Similarly for scrolling back up. I couldn't find anything online stating that there was a parameter or property default to mobile webkit that would contain a div. It seems though maybe this is behavior on iOS webkit, as notably, a second swipe on the final image after the "bounce" of the scroll of the div returns to normal positioning in the div allows a scroll (sometimes seemingly inconsistently?)
I've managed to recreate the issue with a test with minimum code repeated from my project (view on mobile! overscroll works fine on desktop)
https://codepen.io/hennigarj/pen/ZEjYrpW
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<style>
#container {
display: block;
width: 100%;
height: 100%;
padding-top: 4vh;
}
.flex-items {
width: 100%;
overflow: auto;
}
.flex-items:nth-child(1) {
display: block;
height: 10vh;
}
.flex-items:nth-child(2) {
display: block;
margin-top: 4vh;
margin-bottom: 4vh;
height: 64vh;
text-align: center;
}
.flex-items img {
max-width: 100%;
}
.flex-items:nth-child(3) {
display: block;
padding-bottom: 6vh;
}
</style>
</head>
<body>
<div id="container">
<div class="flex-items">
Div 1
</div>
<div class="flex-items">
<section id="highlights">
<div class="highlight">
<img src="https://placehold.jp/400x536.png" />
</div>
<div class="highlight">
<img src="https://placehold.jp/400x536.png" />
</div>
<div class="highlight">
<img src="https://placehold.jp/400x536.png" />
</div>
</section>
</div>
<div class="flex-items">
Div 3
</div>
</div>
</body>
</html>
Anyone have any ideas? I've tried all sorts of overflows and overscroll-behaviors on everything but nothing seems to fix this, and there is no value to specifically enable scroll-chaining through overscroll.
This is probably clear as day and I'm completely missing it.
Thank you :)
I've tried various different potential heights, overscroll-behaviors, overflows on divs (to no success). Ideally, hitting the end of the div would continue the scroll-chain past it, just as it does on desktop, but it contains. I've tried -webkit-overflow-scroling: auto as well.
Having an issue with the float parameter so made a simple code snippet to show the problem (sure it's something simple but can't pinpoint it).
As I understand the float declaration it should:
move the first section up and to the left or right
the next section should move up and to the left or right next to the first section as long as there is still enough width space
Above should continue until width space is not available and a new row has to be made
However, the sections are only stacking one on top of the other and to the side designated in the declaration. Can't get them to move next to one another.
header,
footer {
text-align: center;
height: 30px;
width: 100%;
border: 1px solid black;
clear: both;
}
section {
text-align: center;
height: 30px;
width: 20%;
float: left;
border: 1px solid black;
clear: both;
}
<header>Header</header>
<section>Section 1</section>
<section>Section 2</section>
<section>Section 3</section>
<footer>Footer</footer>
The problem is the "clear" rule you can proceed in two ways:
Solution 1:
If you want to use the "clear" style rule this will have to be applied to a parent containing (div in the example) section with "float":
html
<!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 rel="stylesheet" href="index.css" />
<title>Document</title>
</head>
<body>
<header></header>
<div id="parent">
<section></section>
<section></section>
<section></section>
</div>
<footer></footer>
</body>
</html>
css
header,
footer {
height: 100px;
width: 100%;
border: 1px solid black;
clear: both;
}
#parent {
clear: both; /* add this here and remove clear:both from section */
}
section {
height: 300px;
width: 20%;
float: left;
border: 1px solid black;
}
in this way the row containing the section tags will be aligned and everything that comes after will not be moved based on the positions given by the "float".
The clear property is used to prevent other floated elements from appearing alongside an element. It applies only to block elements and is not inherited.
Solution 2
Only remove the clear:both from section in the css
Using clear: both on your sections is forcing them to go on new lines instead of stacking next to each other.
If you remove that and only apply clear: both to your footer, it should work correctly.
Sorry for bad english. How do you align this image to center and adding space on top after the header and for the footer.
Image Link (bc new user)
If I tried this code
margin-left: auto;
margin-right: auto;
width: 50%;
it goes to the center but the background also moves.
What I want is to move the image in the center, having spaces in both header and footer. And background color stays. Below is the code I use.
HTML
<template>
<div class="list">
<headerpc></headerpc>
<dropdown />
<div class="main">
<img src="../home-img/list.png" alt="" />
</div>
<div class="count">
<footerpc></footerpc>
</div>
</div>
</template>
CSS
<style scoped lang="scss">
$font-color: #fff;
.list {
.main {
position: relative;
display: block;
z-index: 1;
background: #131a28;
}
.count {
background: #131a28;
}
}
</style>
you can try giving a specific height to the image and set margin as auto.
img{
width: 300px;
height: 200px;
margin: auto;
}
this will center the image along both axes in its container div.
To center an image, set left and right margin to auto and make it into a block element. here, I have provide the sample code for aligning an image in the center for your reference.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top:10%
margin-bottom:10%
}
</style>
</head>
<body>
<h2>Center</h2>
<img src="img_flower.jpg" style="width:50%;">
</body>
</html>
I made a header. It contains only a logo and a website title. The logo is a link to the main page. My problem is that I can't seem to get the logo to be all the way to the left in the header and I want it to resize so it fits into the header (instead of: header gets bigger because of logo). I placed the logo and the website name/title in two different divs.
Setting the with or height to 100% was something that often came by. I have tried to use this, but it wouldn't work.
"object-fit" should also be an option, but my IDE doesn't recognize this property.
When I use "float: left;" for the logo, it goes all the way to the left, but it also goes out of the header (well, it looks like it does) and pushes my other divs beneath the header/page content to the right.
the HTML:
<div class="header">
<a href="index.html" class="logo">
<img src="image.png">
</a>
<div class="header-right">
<h1>Website title/name</h1>
</div>
</div>
the CSS:
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
.logo{
display: block;
margin-left: auto;
max-width: 100%;
height: auto;
}
one way you can achieve this by having two images one for desktop version and other for mobile version. Using window.navigator you can identify whether you are in mobile or in desktop.
Sometimes resizing the logo may shrink and may not look good. Instead having two different logos (small one for mobile = small size) should serve your purpose.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
.logo{
float: left;
display: block;
margin-left: auto;
width:250px;
height: 50px;
height: auto;
}
</style>
</head>
<body>
<div class="header">
<a href="index.html" class="logo">
<img width="200px" height="150px" src="https://groceriesandveggies.in/wp-content/uploads/2017/09/gv_small_logo.jpeg">
</a>
<div class="header-right">
<h1>Website title/name</h1>
</div>
</div>
</body>
</html>
Im trying to use a full screen image as my headers background but for some reason the image is not showing up and I cant figure out what im doing wrong. Can someone help? The image is in the same folder as the html and css files btw.
CSS
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#header{
background-image:url(headerbackground.png);
width: 100%;
height: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
float: right;
}
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header>
<div id="header">
<ul class="col-4">
<li>SOBRE</li>
<li>TRABALHOS</li>
<li>CONTACTO</li>
</ul>
</div>
</header>
</body>
</html>
Since you've given your header div (#header) no explicit height and floated the only child it has, it collapses and acts like it has no content. Either give it a height or add overflow:auto to the CSS rules for it.
Agree with #j08691.
Working with html layout and css, it's always helpful, for me at least, to add following css:
border: 1px solid green; //or any color you like
so that we can see clearly how is the layout.
additional, in case you have issue with src image size, you may use
background-size: cover;