i am trying to copy a website it has a nav bar with buttons in side, those buttons only have border-radius to sides i tried giving border-radius but my buttons turned into horizontally oval shape
<html>
<head>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#navigationBar {
background-color: #e4e4e4;
height: 40px;
}
</style>
</head>
<body>
</nav>
<nav id="navigationBar">
<button class="options">Islamic</button>
<button class="options">Educational</button>
<button class="options">Arts & Creative</button>
</nav>
</body>
</html>
Using percentages for border-radius will cause this ugly oval shape. Set a pixel amount (12px here):
<html>
<head>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#navigationBar {
background-color: #e4e4e4;
padding: 10px;
}
.options{
min-width: 100px;
min-height: 50px;
border-radius: 12px 0px;
}
</style>
</head>
<body>
</nav>
<nav id="navigationBar">
<button class="options">Islamic</button>
<button class="options">Educational</button>
<button class="options">Arts & Creative</button>
</nav>
</body>
</html>
Maybe not this width & height ratio, but you can adjust it. Good idea is to merge style to css files.
With border-top-right-radius and border-bottom-right-radius and value which stands next to them you can modify the shape of the border.
<html>
<head>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#navigationBar {
background-color: #e4e4e4;
padding: 10px;
}
.options{
min-width: 100px;
min-height: 50px;
border-top-right-radius: 20%;
border-bottom-right-radius: 20%;
}
</style>
</head>
<body>
</nav>
<nav id="navigationBar">
<button class="options">Islamic</button>
<button class="options">Educational</button>
<button class="options">Arts & Creative</button>
</nav>
</body>
</html>
You have to play with border radius. In this case you can use:
.options{ border-radius: 0 10px 10px 0; }
giving 15px border-radius would work
.options {
border-radius: 15px;
}
Related
I am trying to build a simple webpage using Bootstrap and D3, but I do not know how to get rid of all the whitespace at the bottom. I would like to get rid of it.
I have tried setting the min-height of the body and html to 100%, but it hasn't done anything. My code is here: https://github.com/eelegiap/thesis-code/tree/main/search
body {
padding-left: 3vh;
padding-top: 3vh;
padding-bottom: 20px;
}
#searchCol {
padding-left: 6vh
}
form {
width: 25%
}
#results {
padding-right: 10vh;
}
#resultsContainer {
max-height: 30%;
overflow-y: auto
}
.result {
padding-left: 4vh;
}
.poemResult {
cursor: pointer;
border-radius: 10px;
padding-left: 10px;
padding-top: 5px;
}
#poemContainer {
max-height: 30%;
overflow-y: auto;
}
#poemMeta {
padding-top: 10vh;
padding-left: 15vh;
padding-bottom: 5vh
}
#poemTxt {
padding-left: 15vh;
padding-bottom: 10vh;
}
.input-group {
max-width: 75%;
padding-bottom: 5vh
}
/* Tooltip text */
.titleTooltip .tooltiptext {
visibility: hidden;
position: absolute;
text-align: left;
width: fit-content;
height: fit-content;
padding: 2px;
padding-right: 15px;
font: 12px sans-serif;
background: #e5ffff;
border: 1px solid gray;
border-radius: 8px;
pointer-events: none;
z-index: 1;
}
.titleTooltip:hover .tooltiptext {
visibility: visible;
}
.token mark {
display: contents;
}
input,
.dropdown-toggle {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.searchBar {
min-height: 50px
}
#search {
background-color: lightsteelblue;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
<!-- MDB -->
<link rel="stylesheet" href="mdb5/css/mdb.min.css" />
<body>
<div class="container">
<br>
<div class="row">
<h2>Contemporary Russian Internet Poetry</h2>
</div>
<div class="row">
<div class="col-sm-6">
<div class="row" id="poemContainer">
<div id="poemMeta"></div>
<div id="poemTxt"></div>
</div>
</div>
<div class="col-sm-6" id="searchCol">
<div class="row">
<div class="input-group">
<div class="form-outline flex-fill searchBar">
<input type="search" id="form1" class="form-control form-control-lg" />
<label class="form-label" for="form1">Search by keyword(s)</label>
</div>
<button type="button" id='search' class="btn searchBar">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<div class="row" id="resultsContainer">
<div id="results"></div>
</div>
</div>
</div>
</div>
</body>
<!-- MDB -->
<script type="text/javascript" src="mdb5/js/mdb.min.js"></script>
<!-- embedding JS libraries -->
<!-- d3 -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- own js files -->
<script src="js/main.js"></script>
<script src="js/text.js"></script>
<script src="js/searchResults.js"></script>
You are using padding-bottom: 20px; in your body. It created the bottom padding or some spaces in the down side of your websites.
You have to remove it.
To be honest, idk why this works, but I changed the max-height variables to pixel heights instead, and this fixed the trailing whitespace problem.
I have issues with rendering some elements in Google Chrome. When I test the code with Firefox or Edge, everything is fine. It seems like Chrome computes a smaller width for "col-sm-1" or it is ignoring the padding.
I have the following html:
/*dropdown size*/
.dropdown-sm {
font-size: 1.25rem;
}
/* Custom dropdown */
.custom-dropdown {
position: relative;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
/* margin: 10px; */
}
.custom-dropdown select {
background-color: #00c292;
color: #fff;
font-size: inherit;
padding: .5em;
padding-right: 2.5em;
border: 0;
margin: 0;
border-radius: 3px;
text-indent: 0.01px;
text-overflow: '';
-webkit-appearance: button;
}
.custom-dropdown::before,
.custom-dropdown::after {
content: "";
position: absolute;
pointer-events: none;
}
.custom-dropdown::after {
content: "\25BC";
height: 1em;
font-size: .625em;
line-height: 1;
right: 1.2em;
top: 50%;
margin-top: -.5em;
}
.custom-dropdown::before {
width: 2em;
right: 0;
top: 0;
bottom: 0;
border-radius: 0 3px 3px 0;
}
.custom-dropdown select[disabled] {
color: rgba(0, 0, 0, .3);
}
.custom-dropdown select[disabled]::after {
color: rgba(0, 0, 0, .1);
}
.custom-dropdown::before {
background-color: rgba(0, 0, 0, .15);
}
.custom-dropdown::after {
color: rgba(0, 0, 0, .4);
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="checkbox.css">
</head>
<body>
<main role="main">
<div id="boottom-page" class="container-fluid">
<div class="row">
<div class="col-sm-1">
<span class="custom-dropdown dropdown-sm">
<select data-name="change-role">
<option>Change role to...</option>
<option>User</option>
<option>Author</option>
<option>Admin</option>
</select>
</span>
</div>
<div class="col-sm-2">
<div>
<div>
<button type="button" class="btn btn-info">Change </button>
<button type="button" class="btn btn-info">Delete</button>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
Both Firefox and Edge render them just fine:
but Chrome breaks the layout:
What can I do to fix the layout issues for Chrome?
Tested your code in Firefox and Chrome. They are nearly looking the same, nothing is breaking the layout.
But on your screenshot they are on different sizes.
I think there are different zoomlevels set in your browsers. Please
check if both are on 100%;
To avoid Chrome breaks the layout, add min-width to col-sm-1 and col-sm2.
HTML with new classes: dropdown-container and button-container
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="checkbox.css">
</head>
<body>
<main role="main">
<div id="boottom-page" class="container-fluid">
<div class="row">
<div class="col-sm-1 dropdown-container">
<span class="custom-dropdown dropdown-sm">
<select data-name="change-role">
<option>Change role to...</option>
<option>User</option>
<option>Author</option>
<option>Admin</option>
</select>
</span>
</div>
<div class="col-sm-2 button-container">
<div>
<div>
<button type="button" class="btn btn-info">Change </button>
<button type="button" class="btn btn-info">Delete</button>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
CSS
.dropdown-container {
min-width: 130px;
}
.button-container {
min-width: 230px;
}
What I need is as:
1. the line height between blue lines is 5px.
2. the line height between blue, black and brown line is 20 px.
Please see the code I have tried. I couldn't figure out what's wrong.
<!DOCTYPE html>
<html>
<head>
<style>
.divClass{
overflow-y: auto;
width: 100%;
height:100%;
line-height: 20px;
}
.divclass span{
line-height: 5px;
}
</style>
</head>
<body>
<div class="divClass">
<span style="color:blue;">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</span><br>
<span>second efgh</span><br>
<span style="color:brown;">third hijklmnopqrstuvwxyz</span>
</div>
</body>
</html>
Please help thanks in advance.
<!DOCTYPE html>
<html>
<head>
<style>
.divClass{
overflow-y: auto;
width: 100%;
height:100%;
line-height: 20px;
}
.span-blue{
line-height: 5px !important;
}
.span-other{
line-height: 20px !important;
}
</style>
</head>
<body>
<div class="divClass">
<span style="color:blue;" class="span-blue">first
abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz
abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</span><br>
<span class="span-other">second efgh</span><br>
<span style="color:brown;" class="span-other">third
hijklmnopqrstuvwxyz</span>
</div>
</body>
</html>
Here you go:
HTML:
<style>
.divClass{
overflow-y: auto;
width: 100%;
height:100%;
line-height: 20px;
}
#blue{
line-height: 5px;
}
</style>
</head>
<body>
<div class="divClass">
<div id="blue" style="color:blue;">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz <br>abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</div><br>
<span>second efgh</span><br>
<span style="color:brown;">third hijklmnopqrstuvwxyz</span>
</div>
</body>
</html>
Hopefully this is what you need. Inspect the elements to check if it is proper line height.
Thank you Yuri fro guiding me. Your answer helped me solve the issue. Still, I would like to post my resolved code with minimal changes. Please find the corrected code below. Thanks all.
Corrections done: Replaced span with div and added margin-bottom instead of line-height with new values.
<!DOCTYPE html>
<html>
<head>
<style>
.divClass{
overflow-y: auto;
width: 100%;
height:100%;
line-height: 20px;
}
.divclass div {
margin-bottom: 100px;
}
</style>
</head>
<body>
<div class="divClass">
<div style="color:blue;">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</div><br>
<div>second efgh</div><br>
<div style="color:brown;">third hijklmnopqrstuvwxyz</div>
</div>
</body>
</html>
Having line-height: 5px will make your text overlap, so I guess you want each line 5px far from each other. To do so, you need to make line-height 5px greater than font-size. The "line height between blue black and brown" is called margin (you can also use padding) and in order to work ,you have to set display: block to span tags
.divClass{
width: 100%;
height: auto;
font-size: 15px;
}
span { display: block; }
.blue{
color: blue;
line-height: 20px;
}
.brown { color: brown; }
.black, .brown, .blue {margin: 10px 0;}
<div class="divClass">
<span class="blue">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</span>
<span class="black">second efgh</span>
<span class="brown">third hijklmnopqrstuvwxyz</span>
</div>
You have applied line-height: 5px; to .divclass span
You have to specify for which span you want this particular CSS
when there are multiple spans available in this div.
For this, you can use span:first-child or add class to that particular span.
I have used span:first-child here.
span:first-child{
line-height: 5px;
}
span{
overflow-y: auto;
width: 100%;
height:100%;
line-height: 20px;
}
<div class="divClass">
<span style="color:blue;">first abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz abcdefghhijklmnopqrstuvwxyz</span><br>
<span>second efgh</span><br>
<span style="color:brown;">third hijklmnopqrstuvwxyz</span>
</div>
Hope this helps :)
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
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