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>
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>
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>
body {
background: white;
font-family: 'Ubuntu', sans-serif;
}
.cas {
display: inline-block;
border: 2px solid #0C8346;
background: #0C8346;
font-weight: 300;
font-size: 20px;
padding: 5px;
width: 200px;
text-align: center;
color: white;
vertical-align: middle;
}
.sad {
display: inline-block;
border: 2px solid #D73909;
background: #D73909;
font-weight: 300;
font-size: 20px;
padding: 5px;
width: 200px;
text-align: center;
color: white;
vertical-align: middle;
}
.asd {
display: inline-block;
border: 2px solid #D3D3D3;
background: #D3D3D3;
font-weight: 300;
font-size: 20px;
padding: 5px;
width: 200px;
text-align: center;
color: white;
vertical-align: middle;
}
p.sda {
font-width: 700;
font-size: 26px;
}
.no-gutters {
margin-right: 0;
margin-left: 0;
>.col,
>[class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
.sh {
margin-left: -2px;
width: 585px;
border: 2px solid gray;
border-top: none;
}
.hs {
margin-left: -17px;
width: 587px;
padding-left: 2px;
border: 2px solid gray;
border-top: none;
border-right: none;
margin-right: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="dasdasd.css">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght#300;400;500;700&display=swap" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="row align-items-center">
<div class="col-6 cas">
CONS
</div>
<div class="col-6 sad">
PROS
</div>
</div>
<div class="row no-gutters">
<div class="col-6">
<input type="input" name="as" class="asd hs">
</div>
<div class="col-6">
<input type="input" name="as" class="asd sh">
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/ulg/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
</body>
</html>
I'd like for the input under the cons to start where the cons starts, and to end where it ends now. Is this possible, or should I just make the pros and cons bigger? Or is there a better way to do it? Please help!! Also please go easy on me, I'm a beginner... Thank you so very much!!! Well that's all I want to ask, this is just filler...
please add your styles
input, .title{
width: 100%;
}
input{
background: #D3D3D3;
}
.title--cons{
background: #D73909;
color: #fff;
}
.title--pros{
background: #0C8346;
color: #fff;
}
#pros-cons div[class^='col-']{
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="dasdasd.css">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght#300;400;500;700&display=swap" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<div class="container" id="pros-cons">
<div class="row align-items-center">
<div class="col-6">
<div class="title title--cons">
CONS
</div>
</div>
<div class="col-6">
<div class="title title--pros">
PROS
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<input type="input" name="as" class="asd hs">
</div>
<div class="col-6">
<input type="input" name="as" class="asd sh">
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/ulg/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
</body>
</html>
I'm currently working on putting together a very basic site and using CSS/ Bootstap. I am unable to figure out however why my columns are stacking on each other. I've looked through Stack Overflow and the official bootstrap documentation and as far as I can see, it should be working: I am looking to create three equal columns underneath the "about me" header that span the page.
<!DOCTYPE html>
<html lang="en">
<title>Testing | </title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Bootstrap Core CSS-->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Copse|Cutive|Lora:700|Sanchez|Scope+One|Slabo+27px|Trocchi|Vesper+Libre" rel="stylesheet">
<style>
header {
text-align: center;
background: url('sunlightthroughgrass.jpg');
background-size: cover;
color: black;
width: auto;
height: auto;
}
a {
color: white;
}
h1 {
font-family: 'Vesper Libre', serif;
font-size: 70px;
}
img {
max-width: 400px;
max-height: 400px;
margin: 40px 0px 0px 0px;
border: 7px solid white;
border-radius: 20px;
width: auto;
height: auto;
}
ul {
text-align: center;
padding: 10px;
background: rgba(0, 0, 0, 0.5);
}
li {
display: inline;
padding: 0px 10px 0px 10px;
}
<!-- article {
max-width: 500px;
padding: 20px;
margin: 0 auto;
}
#media (max-width: 500px) {
h1 {
font-size: 36px;
padding: 5px;
}
li {
padding: 5px;
display: block;
}
}-->
</style>
</head>
<body>
<div class="container-fluid">
<header>
<img src="robin.jpg">
<h1>Test Person|Testing</h1>
<ul class="nav nav-pills">
<li>About Me
</li>
<li>Resume
</li>
</ul>
</header>
<div class="row">
<div class="col-lg-4">
Test Test Test
<div class="col-lg-4">
Nother Test
<div class="col-lg-4">
Third Nother Test
</div>
</div>
</div>
</div>
<!-- SCRIPTS GO UNDER HERE -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<!--Anti-Spam-->
<script type="text/javascript" src="js/obscure.js"></script>
You are nesting your col-lg-4 divs, do it like this instead:
<div class="row">
<div class="col-lg-4">
Test Test Test
</div>
<div class="col-lg-4">
Third Nother Test
</div>
<div class="col-lg-4">
Third Nother Test
</div>
</div>
I am having problem with positioning div. I have the following css
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: absolute;
border-radius: 10px;
z-index: 2;
}
Here is the javascript:
$("#main").click(function(event){
$("#popup").css({'left':event.pageX, 'top':event.pageY, 'display':'block'});
});
here goes the HTML
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="shortcut icon" href="img/favicon-ksu.ico" type="image/x-icon">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main2.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h1">Something Goes arround here <span style="color: red;">Something More here</span></h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="helper" id="helper">
Click Here!
</div>
<div class="popup" id="popup">
oops! You clicked at wrong place. Try again!
</div>
<div class="workspace" id="workspace" contenteditable="true"></div>
<div id="main" class="main">
</div>
</div>
</div>
</div><!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main2.js"></script>
</body>
</html>
everything works fine up to here! But when i specify following,
body {
padding: 0px;
width: 1230px;
margin: 0 auto;
}
the div is not positioned at the place of click, div appears somewhere else. I am wondering what is wrong! If someone could help!!!
changing position to fixed from absolute solves this problem.
Instead of this:
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: absolute;
border-radius: 10px;
z-index: 2;
}
use this:
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: fixed;
border-radius: 10px;
z-index: 2;
}