enter image description here
I would like to list items A and B side by side in CSS. What should I do?
HTML code
<!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="ex1.css">
<link rel="stylesheet" href="grid.min.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 logo-title">
<div class="logo">
<a class="title" href="">
</a>
</div>
<div class="category">
이야기하다
금융하다
함께하다
</div>
</div>
</div>
</div>
</body>
</html>
CSS code
.logo {
height: 78px;
}
body {
font-family: Noto Sans KR,system-ui,AppleSDGothicNeo,sans-serif;
}
a {
text-decoration: none;
color: #000;
}
/* head title */
.category {
font-size-adjust: 18px;
font-weight: 700;
}
.title {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block;
width: 118px;
height: 30px;
background: url(https://t1.daumcdn.net/kakaopay/homepage/production/v1.0.0_1599023671711/img/pc/sp-icon.png) no-repeat 0 0;
background-position: 0% 43%;
}
I hope a tags are arranged in a horizontal line.
I want the A and B in the picture in a row, and I've adjusted the width of the parent element, but it didn't work.
Just change the HTML structure to use the propper bootstrap classes.
<div class="container">
<div class="row align-items-center">
<div class="col logo">
<a class="title" href="">
</a>
</div>
<div class="col-auto category">
이야기하다
금융하다
함께하다
</div>
</div>
</div>
jsFiddle
.logo {
height: 78px;
float:left
}
body {
font-family: Noto Sans KR,system-ui,AppleSDGothicNeo,sans-serif;
}
a {
text-decoration: none;
color: #000;
margin-top:5px;
float:left
}
/* head title */
.category {
font-size-adjust: 18px;
font-weight: 700;
}
.title {
float:left;
display: inline-block;
width: 118px;
height: 30px;
margin:0px;
background: url(https://t1.daumcdn.net/kakaopay/homepage/production/v1.0.0_1599023671711/img/pc/sp-icon.png) no-repeat 0 0;
background-position: 0% 43%;
}
<!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="ex1.css">
<link rel="stylesheet" href="grid.min.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 logo-title">
<div class="logo">
<a class="title" href="">
</a>
</div>
<div class="category">
이야기하다
금융하다
함께하다
</div>
</div>
</div>
</div>
</body>
</html>
MODIFY THE CSS
.logo {
height: 78px;
float:left
}
body {
font-family: Noto Sans KR,system-ui,AppleSDGothicNeo,sans-serif;
}
a {
text-decoration: none;
color: #000;
margin-top:5px;
float:left
}
/* head title */
.category {
font-size-adjust: 18px;
font-weight: 700;
}
.title {
float:left;
display: inline-block;
width: 118px;
height: 30px;
margin:0px;
background: url(https://t1.daumcdn.net/kakaopay/homepage/production/v1.0.0_1599023671711/img/pc/sp-icon.png) no-repeat 0 0;
background-position: 0% 43%;
}
Use bootstrap grid system.
<div class="container">
<div class="row">
<div class="col-6 logo-title">
<div class="logo">
<a class="title" href="">
</a>
</div>
</div>
<div class="col-6">
<div class="category d-flex align-items-center justify-content-center">
이야기하다
금융하다
함께하다
</div>
</div>
</div>
</div>
.logo {
height: 78px;
}
body {
font-family: Noto Sans KR,system-ui,AppleSDGothicNeo,sans-serif;
}
a {
text-decoration: none;
color: #000;
}
/* head title */
.category {
font-size-adjust: 18px;
font-weight: 700;
height: 78px;
}
.title {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block;
width: 118px;
height: 30px;
background: url(https://t1.daumcdn.net/kakaopay/homepage/production/v1.0.0_1599023671711/img/pc/sp-icon.png) no-repeat 0 0;
background-position: 0% 43%;
}
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="ex1.css">
<link rel="stylesheet" href="grid.min.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6 logo-title">
<div class="logo">
<a class="title" href="">
</a>
</div>
</div>
<div class="col-6">
<div class="category d-flex align-items-center justify-content-center">
이야기하다
금융하다
함께하다
</div>
</div>
</div>
</div>
</body>
</html>
Related
I've divided screen to 2 parts and want to have same height for both the divs.
What I want is left side div should have same height and should occupy the height same as right part.
When I see this screen in mobile format it is not showing proper.
I tried using height 100% but not working. What am I missing over here?
This is what I've tried.
Link to codepen
#main_header_div{
color: white;
position: absolute;
width: 100%;
height: inherit;
top: 0;
background-color: rgba(152, 38, 38, 0.7);
color:white;
}
#div_1_text {
margin-top: 15%;
margin-left: 15%;
color: white;
}
#div_2_text {
margin-top: 5%;
margin-left: 15%;
color: white;
}
#div_3_text {
margin-left: 15%;
color: white;
}
#div_4_button {
margin-left: 15%;
color: white;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-6" style="padding-right: 0; padding-left: 0;">
<div class="jumbotron jumbotron-fluid" style="height:100%; background : url('https://live.staticflickr.com/65535/50566935741_ba2c76c194_b.jpg');">
<div id="main_header_div">
<h3 id="div_1_text">Image Taken From Flickr !</h3>
<p id="div_2_text">For DEMO</p>
<p id="div_3_text">TEXT 3</p>
<button id="div_4_button" type="button" class="btn btn-outline-secondary">BUTTON</button>
</div>
</div>
</div>
<div class="col-md-6" style="padding-right: 0; padding-left: 0;">
<div style="width:100%;">
<img class="image-responsive" src="https://live.staticflickr.com/65535/50566935741_ba2c76c194_b.jpg" />
</div>
</div>
</div>
</body>
</html>
I found this (I cheat a little by given a fix size to the div: myDiv, who has the background-image because I think that background-image doesn't have size):
.myDiv{
height: 680px; /*manual check to get image height*/
}
#main_header_div{
color: white;
position: absolute;
width: 100%;
height: inherit;
top: 0;
background-color: rgba(152, 38, 38, 0.7);
}
#div_1_text {
margin-top: 15%;
margin-left: 15%;
color: white;
}
#div_2_text {
margin-top: 5%;
margin-left: 15%;
color: white;
}
#div_3_text {
margin-left: 15%;
color: white;
}
#div_4_button {
margin-left: 15%;
color: white;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-6" style="padding-right: 0; padding-left: 0;">
<div class="jumbotron jumbotron-fluid myDiv" style="background : url('https://live.staticflickr.com/65535/50566935741_ba2c76c194_b.jpg');">
<div id="main_header_div">
<h3 id="div_1_text">Image Taken From Flickr !</h3>
<p id="div_2_text">For DEMO</p>
<p id="div_3_text">TEXT 3</p>
<button id="div_4_button" type="button" class="btn btn-outline-secondary">BUTTON</button>
</div>
</div>
</div>
<div class="col-md-6" style="padding-right: 0; padding-left: 0;">
<div style="width:100%;">
<img class="image-responsive" src="https://live.staticflickr.com/65535/50566935741_ba2c76c194_b.jpg" />
</div>
</div>
</div>
</body>
</html>
I want to add some space between items in CSS , I tried many ways but didn't work.
I want this for hamburger menu, here is my CSS codes and HTML (note: I'm not pro!)
I have 3 a tags "Home" "Products" "About"
and I want to sort them like that.
Home
Products
About
but I couldn't add space between them (note: "side-item" class are child and "side-itemS" class is parent"
.sidemenu {
position: absolute;
right: 0px;
width: 40%;
height: 100vh;
width: 20%;
background-color: rgb(39, 44, 52);
}
.side-items {
position: absolute;
display: flex;
flex-direction: column;
right: 8%;
font-family: 'Noto Serif', serif;
}
.side-item {
list-style-type: none;
}
.side-item a {
color: white;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital#1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>ElectroLand</title>
</head>
<body>
<header>
<div class="container">
<nav>
<div class="logo"><img src="/img/logo.png"></div>
<div class="nav-list">
<ul class="nav-item"><li>Home</li></ul>
<ul class="nav-item"><li>Products</li></ul>
<ul class="nav-item"><li>About</li></ul>
<div class="hamburger" onclick="clk()" id="burger">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
</div>
</div>
</nav>
</div>
<div class="sidemenu">
<div class="side-items">
<ul class="side-item"><li>Home</li></ul>
<ul class="side-item"><li>Products</li></ul>
<ul class="side-item"><li>About</li></ul>
</div>
</div>
</header>
<script src="/func.js"></script>
</body>
</html>
Try to add align-items : space-between in .side-items css
You need to use justify-content : space-between in .side-items with height : 100%.
See the code below :
.sidemenu {
position: absolute;
right: 0px;
width: 40%;
height: 100vh;
width: 20%;
background-color: rgb(39, 44, 52);
}
.side-items {
height:100%;
justify-content:space-between;
position: absolute;
display: flex;
flex-direction: column;
right: 8%;
font-family: 'Noto Serif', serif;
}
.side-item {
list-style-type: none;
}
.side-item a {
color: white;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital#1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>ElectroLand</title>
</head>
<body>
<header>
<div class="container">
<nav>
<div class="logo"><img src="/img/logo.png"></div>
<div class="nav-list">
<ul class="nav-item"><li>Home</li></ul>
<ul class="nav-item"><li>Products</li></ul>
<ul class="nav-item"><li>About</li></ul>
<div class="hamburger" onclick="clk()" id="burger">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
</div>
</div>
</nav>
</div>
<div class="sidemenu">
<div class="side-items">
<ul class="side-item"><li>Home</li></ul>
<ul class="side-item"><li>Products</li></ul>
<ul class="side-item"><li>About</li></ul>
</div>
</div>
</header>
<script src="/func.js"></script>
</body>
</html>
Use the below code for adding space between side menu items.
.side-item{
list-style-type: none;
padding: 10px;
}
The text of second h5 element doesnt resize properly and get out over the background color, I also tested put the h5 inside a div and apply css to the div but it didnt work, what am I missing?
Here is the relevant code (I had to remove other elements and css properties):
.container {
position: relative;
display: inline-block;
margin-top: 50px;
}
.card .front {
color: white;
text-align: center;
font-weight: bold;
position: absolute;
}
.card .front h5 {
background-color: #5E92F2;
padding: 10px 0 10px 0;
margin-top: 98%;
width: 198px;
height: 44px;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<section class="container">
<div class="card">
<div class="front" style="background-image: url('image.jpg');">
<h5>Image 1</h5>
</div>
<div class="back">Abc</div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front" style="background-image: url('image.jpg');">
<h5>Image 1 With more text</h5>
</div>
<div class="back">Abc</div>
</div>
</section>
try this :
h5{
font-size: 100%;
}
As the h5 has a fixed height, that is the expected behavior.
Change to min-height: 44px; in the .card .front h5 rule
.container {
position: relative;
display: inline-block;
margin-top: 50px;
}
.card .front {
color: white;
text-align: center;
font-weight: bold;
position: absolute;
}
.card .front h5 {
background-color: #5E92F2;
padding: 10px 0 10px 0;
margin-top: 98%;
width: 198px;
min-height: 44px;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<section class="container">
<div class="card">
<div class="front" style="background-image: url('image.jpg');">
<h5>Image 1</h5>
</div>
<div class="back">Abc</div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front" style="background-image: url('image.jpg');">
<h5>Image 1 With more text</h5>
</div>
<div class="back">Abc</div>
</div>
</section>
For h5 you are adding height: 44px; so the font-size is taking default h5 font size if you decrease the font size it will fix the issue or increase the height of h5
so use something like
.card .front h5{
font-size:16px;
}
or
.card .front h5{
height:64px;
}
Your css set heigth of the element to 44px and font-size to 1.25rem, change one of the properties or both, for example heigth to auto if you want to keep font-size, or change font-size to 100% if you want to keep the heigth of the element. There are several ways to do this.
I am trying to change the opacity of my images, so that I can use a hover affect later on, to change the opacity back, creating a cool affect. The problem is the opacity attribute doesn't work! I can't seem to figure out the solution. Is it possible that Bootstrap is preventing this somehow?
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
<!-- HEADER -->
<section id="header">
<h1 class="name">Jessica Shae</h1>
<div class="container heading">
<div class="row">
<div class="col-md-4">
<img src="img/7.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/2.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/9.jpg" class="display">
</div>
<div class="row">
<div class="col-md-12 text-xs-center">
</i>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<h2 class="title">The Dark Room</h2>
<div class="container photo-collection">
<div class="row">
<div class="col-md-4 affect">
<img src="img/1.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/10.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/4.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/18.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/6.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/8.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/12.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/11.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/14.jpg" class="work">
</div>
</div>
</div>
</section>
And my CSS: (the opacity attribute is in .affect)
* {
/*background-color: rgb(0, 0, 0);*/
background: #070606;
}
/* HEADER */
.display {
height: auto;
width: 500px;
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
max-width: 100%;
border: 4px solid white;
border-radius: 6%;
}
.heading {
max-width: 100%;
}
.name {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 500%;
font-weight: 100;
text-align: center;
color: whitesmoke;
width: 100%;
margin-bottom: 20px;
margin-top: 15px;
}
h1:after {
display: block;
height: 2px;
background-color: #e62222; /*Great way to give single line color */
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 20px;
}
.fa {
margin-top: 18px;
}
.fa:link, /*Prevents color change when clicked */
.fa:visited {
text-decoration: none;
color: #bdc3c7;
}
.fa:hover,
.fa:active {
color: #ebedee;
}
/* GALLERY */
.work {
width: 300px;
height: 100%;
margin-top: 50px;
border: 3px solid white;
}
.title {
font-family: 'Prociono', serif;
font-size: 350%;
color: whitesmoke;
text-align: center;
padding-top:40px;
}
.affect img {
opacity: 1;
background-color: #070606;
}
You need to have a base state, and a hover state for your image. Change your CSS to:
.affect img {
opacity: 0.2;
background-color: #070606;
transition: opacity .35s;
}
.affect:hover img {
opacity: 1;
}
This creates the hover effect.
Opacity default value is 1 try making it 0.5.
I've made div with bootstrap class attribute center-block and I want to align it vertically but nothing is working only manually adding margin to the div. Any tips how to accomplish this ?
Css code:
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 642px;
height: 642px;
border: 1px solid white;
}
.menu > p{
width: 300px;
height: 300px;
margin: 10px;
float: left;
color: white;
text-align: center;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
body{
background-image: url(img/landscape1.jpg);
background-size: cover;
}
</style>
<title>Website</title>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Logo</h1>
</div>
<div class="center-block menu">
<p id="">demo1</p>
<p id="">demo2</p>
<p id="">demo3</p>
<p id="">demo4</p>
</div>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The div with the class center-block cant be vertically aligned because its not inside an element that with a greater height. "container-fluid" doesnt have a height, so it will be as high as its content inside (the center-block div). The same goes for container-fluid's parents (body and html tags). So you need to wrap it in a container that is higher. I've made a pen to illustrate.
http://codepen.io/ugreen/pen/GjBWWZ
The magic part is this guy:
.flex {
display: flex;
align-items: center;
height: 100%;
border: 1px solid red;
}
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 640px;
height: 640px;
}
.menu li > p{
width: 200px;
color: white;
text-align: left;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
ul {
list-style-type: none;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Text Logo</h1>
</div>
<ul>
<div class="center-block menu">
<li> <p id="1">demo1</p></li>
<li> <p id="2">demo2</p></li>
<li> <p id="3">demo3</p></li>
<li><p id="4">demo4</p><li>
</div>
</ul>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
</body>
</html>