This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
This is the sample HTML generated from my javascript. Just wondering how come setting display:none; will affect the UI? Below is the code snippet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.card {
display: inline-block;
text-align: center;
margin: 5px;
padding: 10px;
width: 70px;
height: 100px;
font-size: 26px;
background-color: black;
border: solid 1px black;
color: white;
border-radius: 10px;
}
.holeCard {
/*visibility: hidden;*/
border: solid 1px black;
background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px );
}
</style>
</head>
<body>
<div class="card red">
<span class="dealerCardFace">2</span>
<span class="dealerCardSuit">♦</span>
</div>
<div class="card red holeCard">
<span class="dealerCardFace">7</span>
<span class="dealerCardSuit">♦</span>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
//$('.holeCard').eq(1).hide();
$(".holeCard > :nth-child(1)").hide();
$(".holeCard > :nth-child(2)").hide();
</script>
If I remove the display:none, it will look like below which is what I want.
It maybe due to the block has to share same component inside it too. But in your case you should use float: left instead of inline-block
$(".holeCard > :nth-child(1)").hide();
$(".holeCard > :nth-child(2)").hide();
.card {
float: left;
text-align: center;
margin: 5px;
padding: 10px;
width: 70px;
height: 100px;
font-size: 26px;
background-color: black;
border: solid 1px black;
color: white;
border-radius: 10px;
}
.holeCard {
/*visibility: hidden;*/
border: solid 1px black;
background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card red">
<span class="dealerCardFace">2</span>
<span class="dealerCardSuit">♦</span>
</div>
<div class="card red holeCard">
<span class="dealerCardFace">7</span>
<span class="dealerCardSuit">♦</span>
</div>
Related
In HTML5 & CSS3, The logo needs to float to the left top corner & the list of items/menu need to float to the right top corner.
In the output here, the logo is not invisible for some reason. But "alt" was mentioned, "in place of the logo."
Here is the output is received from my side. I've marked it with white color on top of the webpage:
/*---------------------------------------------------------*/
/*Basic Setup*/
/*---------------------------------------------------------*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #555555;
font-family: 'Lato', 'Arial', sans-serif;
color: #555555;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
/*---------------------------------------------------------*/
/*----------------REUSABLE COMPONENTS----------------------*/
/*---------------------------------------------------------*/
.row {
max-width: 110px;
margin: 0 auto;
}
/*-------------------------HEADINGS------------------------*/
h1 {
margin: 0;
margin-bottom: 20px;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
/*-----------------BUTTONS---------------*/
.btn:link,
.btn:visited {
display: inline-block;
color: #fff;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
}
.btn-full:link,
.btn-full:visited {
background-color: #e67e22;
border: 1px solid #e67e22;
color: #fff;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited {
color: #e67e22;
border: 1px solid #e67e22;
}
.btn:hover,
.btn:active {
background-color: #cf6d17;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #cf6d17;
}
.btn-ghost:hover,
.btn-ghost:active {
color: #fff;
border: 1px solid #cf6d17;
}
/*------------------------------------------------------------------------*/
/*----------------------------HEADER--------------------------------------*/
/*------------------------------------------------------------------------*/
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(Images/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-40%,-50%);
}
.logo {
height: 100px;
width: auto;
float: left;
margin-top: 20px;
}
.main-nav {
float: right;
list-style: none;
margin: 55px;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding: 8px 0;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #e67e22;
}
My HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="Vendors/CSS/normalize.css">
<link rel="stylesheet" type="text/css" href="Vendors/CSS/grid.css">
<link rel="stylesheet" type="text/css" href="Resources/CSS/Style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400,400i" type="text/css" rel="stylesheet">
<title>Shyam Restaurant</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="Resources/Images/logo-white.png" alt="Shyam Restaurant Logo" class="logo">
<ul class="main-nav">
<li>Food Delivery</li>
<li>How It Works</li>
<li>Our Cities</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food. <br>Hello super healthy meals</h1>
<a class="btn btn-full" href="#">I'm hungry</a>
<a class="btn btn-ghost" href="#">show me more</a>
</div>
</header>
<section class="section-features">
<div class="row">
<h2>Get food fast — not fast food</h2>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</p>
</div>
<div class="row">
<div class="col span-1-of-4">
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4">
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4">
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-1-of-4">
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
</body>
</html>
I can't find out why the logo is visible.
Your elements are floating correctly, however, the parent has a max width of 110px provided by the class row so, basically, they have no much room to position
I currently have a set of 'product' divs inside a wrapping containers. These product divs contain an image, header and p text. For some reason, the length of the p text is changing the position of the parent product div. Here is a screenshot: https://gyazo.com/9504729541e6bee17a27e4121af3a1c9
The p and h2 elements both have 0 padding and margins.
I will try to keep my code as minimal as possible.
HTML:
<div id="content" class="wrapper">
<div id="content-container">
<div id="product-container">
<div class="product-wrapper">
<div id="product" class="unhidden">
<div class="image-container">
<img src="assets/home-bg.jpg" class="thumbnail">
</div>
<div class="product-text">
<h2>Mexican Nachos - £6.99</h2>
<p>Tortilla chips and melted cheese with the option of salsa, jalapenos, ground meat, guacamole and tomatoes.</p>
</div>
</div>
<div id="product" class="unhidden">
<div class="image-container">
<img src="assets/enchilada.jpg" class="thumbnail">
</div>
<div class="product-text">
<h2>Enchiladas - £10.99</h2>
<p>Tortilla chips and melted cheese with the option of salsa, jalapenos, ground meat, guacamole and tomatoes.</p>
</div>
</div>
<div id="product" class="unhidden">
<div class="image-container">
<img src="assets/quesadilla.jpg" class="thumbnail">
</div>
<div class="product-text">
<h2>Quesadilla - £4.99</h2>
<p>Shorter length test</p>
</div>
</div>
<div id="product" class="unhidden">
<div class="image-container">
<img src="assets/shrimp.jpg" class="thumbnail">
</div>
<div class="product-text">
<h2>Shrimp Stir Fry - £10.99</h2>
</div>
</div>
</div>
</div> <!-- Product container -->
</div> <!-- Content container -->
</div> <!-- Content-wrapper container -->
CSS:
#content {
height: 100%;
padding-top: 100px;
}
.wrapper {
width: 65%;
margin: 0 auto;
}
#content-container {
display: inline-block;
width: 100%;
height: 100%;
background-color: white;
box-shadow: -20px 0px 25px -20px #000000, 20px 0px 25px -20px #000000;
overflow: scroll;
}
#product-container {
width: 100%;
height: 100%;
padding-top: 25px;
}
.product-wrapper {
width: 80%;
height: 100%;
margin: 0px auto;
text-align: center;
}
#product {
display: inline-block;
height: 352px;
width: 200px;
margin: 10px;
border: solid 2px black;
}
.image-container {
height: 200px;
width: 200px;
}
.product-text {
font-family: 'Open Sans Condensed';
height: 150px;
width: 100%;
text-align: center;
color: black;
border-top: solid 2px black;
background: #FFFFFF; /* Old browsers */
background: -moz-linear-gradient(top, #009641 0%, #a1d54f 96%, #80c217 100%, #7cbc0a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #009641 0%,#a1d54f 96%,#80c217 100%,#7cbc0a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #009641 0%,#a1d54f 96%,#80c217 100%,#7cbc0a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.product-text h2 {
font-size: 23px;
padding: 0;
margin: 0;
}
.product-text p {
font-style: italic;
font-weight: 700;
padding: 0;
margin: 0;
}
.thumbnail {
position: relative;
height: 200px;
width: 200px;
cursor: pointer;
z-index: 1200;
}
Your #product elements are display: inline-block. This means they will take inline level characteristics, one of which is baseline alignment (i.e., vertical-align: baseline).
Override the default setting with vertical-align: top.
(Also, you have multiple elements with id="product". ID values should be unique on a page. Consider switching to class="product" instead.)
add vertical-align:top to #product.
#product {
display: inline-block;
height: 352px;
width: 200px;
vertical-align: top;
margin: 10px;
border: solid 2px black;
}
And one more thing, its not a best practice to have same id's for different elements. Instead make it .product class.
I am trying to have a background box behind my text and I cant get it to work. I have done this before and it worked fine, but I can't see where I have gone wrong this time. I have checked to make sure I have linked the CSS to the HTML correctly by changing the background-color, which worked.
HTML:
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="SiteIcon.ico">
<title>Navigation</title>
<link rel="stylesheet" href="CSS/style for SubNav.css">
</head>
<body>
<h2><center><font color="orange" size="7">Navigation</font></center></h2>
<center>
<div id="1">The Online World</div>
<div id="2"><p>Animation</p></div>
<div id="3"><p>Creating an app</p></div>
<div id="4"><p>Mini Game</p></div>
<div id="5"><p>Gallery</p></div>
<div id="6"><p>Be Creative</p></div>
<div id="7"><p>About me</p></div>
</center>
</body>
</html>
CSS:
body {
color: black;
background-color: black;
margin: 0;
}
#1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
The problem is not with the HTML / element ID - browsers have supported the "lenient" ID for a long time, which is why it is part of HTML5. While the HTML4 specification is different, if this was a major breaking change it wouldn't be in HTML5 - 'nough said.
The real issue the CSS selector, not the element ID. A CSS selector that begins with a number must have the number escaped.
That is, #1 is an invalid CSS selector while #\31 is valid - and matches elements with id=1.
This is a CSS parsing rule, for backwards compatibility now, and not an HTML or ID restriction. See CSS character escape sequences for gritties on escaping "odd" CSS selectors. Or see the w3c token/lexing train tracks. (For example, the selector to match id=1hello is #\31 hello, with the space - good grief!)
The corrected selector can be verified with this fiddle:
<div id=1>Hello world!</div>
#\31 {
color: blue;
font-size: 30px;
}
That being said, I avoid element IDs that are not trivial CSS selectors to avoid this extra work.
While ids can technically be numbers (in HTML5), it's got weird support in browsers because of backwards compatibility with the HTML4 spec.
ids should start with a letter for compatibility.
<div id="a1">The Online World</div>
and
#a1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
works as expected.
Element IDs can't start with numbers. As soon as you change that, everything is good: http://jsfiddle.net/gr5956br/
body {
color: black;
background-color: black;
margin: 0;
}
#a1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
<body>
<h2><center><font color="orange" size="7">Navigation</font></center></h2>
<center>
<div id="a1">The Online World</div>
<div id="a2"><p>Animation</p></div>
<div id="a3"><p>Creating an app</p></div>
<div id="a4"><p>Mini Game</p></div>
<div id="a5"><p>Gallery</p></div>
<div id="a6"><p>Be Creative</p></div>
<div id="a7"><p>About me</p></div>
</center>
</body>
Your original version with numbers (just so you can see that's the issue):
body {
color: black;
background-color: black;
margin: 0;
}
#1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
<body>
<h2><center><font color="orange" size="7">Navigation</font></center></h2>
<center>
<div id="a1">The Online World</div>
<div id="a2"><p>Animation</p></div>
<div id="a3"><p>Creating an app</p></div>
<div id="a4"><p>Mini Game</p></div>
<div id="a5"><p>Gallery</p></div>
<div id="a6"><p>Be Creative</p></div>
<div id="a7"><p>About me</p></div>
</center>
</body>
You can also style the div's for less markup. And then style each link as needed. http://codepen.io/dfrierson2/pen/RNoWZe
body {
color: #fff;
background-color: pink;
margin: 0;
}
div {
width: 7%;
background: #fff;
}
#1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="SiteIcon.ico">
<title>Navigation</title>
<link rel="stylesheet" href="CSS/style for SubNav.css">
</head>
<body>
<h2><center><font color="orange" size="7">Navigation</font></center></h2>
<center>
<div id="1">The Online World</div>
<div id="2"><p>Animation</p></div>
<div id="3"><p>Creating an app</p></div>
<div id="4"><p>Mini Game</p></div>
<div id="5"><p>Gallery</p></div>
<div id="6"><p>Be Creative</p></div>
<div id="7"><p>About me</p></div>
</center>
</body>
</html>
Do you mean something like this?
HTML
<body>
<h2><center><font color="orange" size="7">Navigation</font></center></h2>
<center>
<div class="background-box" >
<div id="One">The Online World</div>
<div id="2"><p>Animation</p></div>
<div id="3"><p>Creating an app</p></div>
<div id="4"><p>Mini Game</p></div>
<div id="5"><p>Gallery</p></div>
<div id="6"><p>Be Creative</p></div>
<div id="7"><p>About me</p></div>
</div>
</center>
</body
CSS
body {
color: black;
background-color: black;
margin: 0;
}
#One{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
You shouldnt use numerical numbers for ID's. Replace with characters and you will be fine.
Fiddle
I have a search bar wrapped in a wrapper having background color. The search result is not visible as it is wrapped in the wrapper div. Now i want to somehow show the complete result. Also, i tried z-index but it did not help.
HTML:
<div class="col-md-12">
<div class="search_box_container">
<form>
<div class="col-md-10">
<input id="typeahead" type="text" data-provide="typeahead" class="form-control search_bar" name="search_bar" auto-complete="off">
</div>
<div class="col-md-2">
<button class="search_bar_button"></button>
</div>
</form>
</div>
</div>
CSS FOR WRAPPER:
.search_box_container{
padding: 0.5em;
background-color: #f0f0f0;
border-radius: 6px;
border:1px solid #DBDBDB;
position: relative;
overflow:hidden;
}
.search_bar{
height: 2.2em;
font-size: 1.45em;
color: black;
font-family: inherit;
}
.search_bar_button{
margin-top: 1px;
margin-left:-5px;
border-radius: 4px;
background: url('../img/search_bar_button.png') 0 0 no-repeat;
width: 5.2em;
background-position: 0px -2px;
height: 3.05em;
border: 2px solid #067b19;
}
JSFiddle
This is my code Im trying to get it centered in the middle of the page
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<title>cp</title>
</head>
<body>
<div class="well">
<font face="arial" size="5" color="#000000"><center><b>Control Panel</font></center>
</div>
</style>
<style type="text/css">
.span12{
background: lightblue;
color: while;
padding: 9px 0;
border-radius:5px;
text-align: center;
border: 1px #00BFFF solid;
margin: 0px auto;
width: 50%;
margin-top: 25%;
}
</style>
<div class="span12">
Welcome
</div>
<script src="js/bootstrap.js"></script>
It re-sizes with the page but I cant get the whole thing to be in the center of the page.
I just want the whole thing in the middle of the page
Remove the center tag and set margin-top:25%, It will solve your problem.
CSS
.span12{
background: lightblue;
color: while;
padding: 9px 0;
border-radius:5px;
text-align: center;
border: 1px #00BFFF solid;
margin: 0px auto;
width: 50%;
margin-top:25%; /* new */
}
HTML
<div class="span12">
Welcome
</div>
jsFiddle Live Demo