I want to create a CSS class that, when applied to a div or a p element will place that text in a colored box with an icon based on a unicode character vertically centered to the left of the text. This is to use to create "To Do", "Note", "Warning" type call outs.
For example I have this so far:
.todo {
background-color: lightyellow;
float: right;
border: solid black 1px;
padding: 10px;
max-width: 30%;
}
.todo:before {
content: "\2714";
font-size: 250%;
}
The usage of this class:
<div class="todo">
This is something that really needs to be done.
Even if you don't want to still do it.
</div>
Gives me a result like:
What I would like to do is make the check-mark bigger (my font-size term seems to be ignored) and place it vertically centered in the box and to the left of all text. Can this be done without requiring styling or
other elements in the div itself?
Well, you started right with :before but use position to define its position and alignment.
.tick{
padding-left: 15px;
position: relative;
}
.tick::before {
content: '\2713';
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
}
<p class="tick">To do</p>
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hello, world!</title>
<style type="text/css">
body {
margin: 0;
}
ul {
background-color: lightyellow;
float: left;
border: solid black 1px;
padding: 10px;
max-width: 30%;
}
ul li {
margin: 0;
padding: 0;
list-style-type: none;
font-weight: 500;
}
ul .icon {
float: left;
font-size: 22px;
padding: 0 15px 0 0;
}
</style>
</head>
<body>
<ul>
<li>
<i class="fa fa-check icon"></i>
<p>This is something that really needs to be done. Even if you don't want to still do it. This is something that really needs to be done. Even if you don't want to still do it.</p>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Related
I'm super new to HTML and CSS and I'm trying to make a small website for an assignment. I haven't gotten very far and I'm having trouble with text wrapping.
The first line of the text looks great, and I have used 20px padding to add a buffer between the edges of the window and the text it's self. The problem comes when the window is smaller than the length of the text. When the text wraps to the next line, it doesn't obey the margins and I'm not quite sure how to fix this or how to word a search query to try and fix it.
Here is a screenshot of the issue:
Text wrapping issue.
Here is the CSS:
body {
color: white;
background-color: #131516}
.headerblock {
padding: 10px;
background-color: black;
margin-top: 0px;
margin-left: 0px;
color: #5b5b5b;
font-size: 30px;
transition: 0.2s;
box-sizing: border-box;
text-align: center;
width: 100%;
}
.headerblock:hover{
color: white;
transition: 0.2s;
}
help {
padding: 20px;
word-break: normal;
width: fit-content;
}
And here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<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/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
<title>-----------------</title>
</head>
<div class="headerblock">
DEEZ NUTZ
</div>
<body>
<help>
Welcome to my webpage. This is where I post things that I want on my webpage. Anything I post will appear here on my webpage.
</help>
</body>
</html>
Thanks in advance!
You just need to change your CSS a little bit, Because when you are text going to the next line for screen resizing, it can not get the property of padding=20px; So, you just need to add display flex.
help {
display:flex;
padding-left: 20px;
word-break: normal;
}
the reason you'd choose to use flexbox is that you want to lay a collection of items out in one direction or another. As you layout your items you want to control the dimensions of the items in that one dimension or control the spacing between items
The best way to keep text neat and wrapped inside a element is to use the <p> (paragraph) element.
This element automatically wraps your text, as well as adds a space above and below it. So you can simply give it some extra padding to make it even neater, then you can easily keep any paragraph text correctly wrapped.
.help {
padding: 20px;
}
<p class='help'>
Welcome to my webpage. This is where I post things that I want on my webpage. Anything I post will appear here on my webpage.
</p>
Just change the help tag to anything else like p(paragraph) and if you want to use the css for the p tag, just give it a class like p class="h" in html
body {
color: white;
background-color: #131516}
.headerblock {
padding: 10px;
background-color: black;
margin-top: 0px;
margin-left: 0px;
color: #5b5b5b;
font-size: 30px;
transition: 0.2s;
box-sizing: border-box;
text-align: center;
width: 100%;
}
.headerblock:hover{
color: white;
transition: 0.2s;
}
.h {
padding: 20px;
word-break: normal;
width: fit-content;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<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/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
<title>-----------------</title>
</head>
<div class="headerblock">
DEEZ NUTZ
</div>
<body>
<p class="h">
Welcome to my webpage. This is where I post things that I want on my webpage. Anything I post will appear here on my webpage.
</p>
</body>
</html>
I'm fairly new to HTML and CSS. I'm trying to get some navigation buttons to have the same size, one third of the width of the panel that they sit in. I've been given the original code and while I can tweak it, I can't replace it outright.
The buttons are in an unordered list. They're arranged horizontally and should fill the entire width of the panel they're in. In Internet Explorer they are rendered correctly, each being the same size. In Chrome and Firefox they are slightly different sizes: the button with the shortest displayed text has the smallest width, and as the text gets longer, so does the button. All of the text strings are much smaller than their buttons, so the buttons should not need to grow to accomodate the string.
The code sets the list item elements to 1% width, which I've read is a hacky way to get them to take up approximately the same size. Common sense suggests that 33% should give me what I want, but instead the total width occupied by all three buttons is about 33%, leaving the rest of the space that they're supposed to fill empty. I've tried various different percentages but the result is not what I'd expect: 10% seems to work for wider windows but not for narrow ones; between 10-33% the buttons are the same size but get gradually smaller, no longer filling the available space; anything above 33% and the buttons start growing again, but only the first two and without necessarily filling the available space.
I've tried changing the display property for the li elements from table-cell but none of the options seem to work. Similar changes for the ul elements are also unhelpful. I also thought that reducing the max-width for the text strings to abotu 80% might stop the buttons from growing proportionally to the length of the string, but it made no difference.
The list:
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
html {
font-size: 62.5%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
min-width: 400px;
background-color: #bbc98f;
}
ul,
ol {
margin-top: 0;
margin-bottom: 10px;
}
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav-pills > li {
float: left;
border-style: solid;
text-align: center;
}
.nav-pills > li + li {
margin-left: 2px;
}
.nav-justified > li {
float: none;
display: table-cell;
width: 1%;
}
.panel {
margin-bottom: 10px;
margin-top: 10px;
background-color: #ffffff;
}
.panel-body {
padding: 15px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body class="">
<div class="body-content">
<div class="panel panel-body">
<ul class="nav nav-pills nav-justified">
<li>
Parts
</li>
<li>
Recipes
</li>
<li>
Robot Programs
</li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
I'd like all three buttons to be the same size regardless of the page width when they're in a single row (they already switch to a vertical stack below a particular width). What am I missing?
Thanks in advance.
"I've been given the original code and while I can tweak it, I can't replace it outright."
What exactly can or can't be replaced?
Tables (display: table-cell, etc) should not be used for layout.
You can either go with 'floats', 'flexbox' or 'grid'.
If you have exactly 3 elements, you could simply use floats:
/* Using Floats */
.nav-justified > li {
display: inline-block;
float: left;
width: 33.3333%;
}
.nav-justified::after { /* clearfix */
content: '';
display: table;
clear: both;
}
If you want the <li> elements to have the same size, regardless of how many they are, easiest is to use flexbox:
.nav-justified {
display: flex;
}
.nav-justified > li {
flex: 1 1 0; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0 */
}
This will allocate the same amount of size for each item, regardless of their content.
If you're using bootstrap framework use the class of the bootstrap rather than creating your own style.
Nav class and style of bootstrap
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
html {
font-size: 62.5%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
min-width: 400px;
background-color: #bbc98f;
}
ul,
ol {
margin-top: 0;
margin-bottom: 10px;
}
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav-pills > li {
float: left;
border-style: solid;
text-align: center;
}
.nav-pills > li + li {
margin-left: 2px;
}
.nav-justified > li {
float: none;
display: table-cell;
width: 1%;
}
.panel {
margin-bottom: 10px;
margin-top: 10px;
background-color: #ffffff;
}
.panel-body {
padding: 15px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<body class="">
<div class="body-content">
<div class="panel panel-body">
<ul class="nav nav-pills">
<li>
Parts
</li>
<li>
Recipes
</li>
<li>
Robot Programs
</li>
</ul>
</div>
</div>
</body>
I am looking to disable the scrolling on the overlay. The way this overlay is acting is to display a flashing logo before the users can actually display the website. But, I want scrolling disabled. Please take a look at my code to determine the error. I am looking to disable the scrolling on the overlay. The way this overlay is acting is to display a flashing logo before the users can actually display the website. But, I want scrolling disabled. Please take a look at my code to determine the error.
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<link rel="stylesheet" href="animate.css">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:200,300,400,700,900" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
<style>
#overlay {
position: absolute;
display: none;
background: dodgerblue;
width: 100%;
height: 100vh;
overflow: hidden;
padding: 0;
margin: 0;
}
html,
body {
margin: 0;
padding: 0;
background-color: black;
}
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
color: white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>//$( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
$(document).ready(function() {
$('#overlay').fadeIn('fast').delay(4500).fadeOut('fast');
});</script>
<script>
$(document).ready(function() {
$('#navbar').fadeIn('fast').delay(4500)
});
</script>
<body>
<div class="animated slideOutDown" id="overlay" style="overflow: hidden; text-align: center; animation-delay: 3s; animation-duration: 2.5s;padding-top: 80px; background-color: #181818;"><img class="animated flash" style="height: 350px; animation-delay: 1s; animation-duration: 1.5s;" alt="logo"></img></div>
</body>
</html>
You can hide the scrollbar for the body and prevent scrolling by adding "overflow: hidden;" to the html, body CSS:
html,
body {
margin: 0;
padding: 0;
background-color: black;
overflow: hidden;
}
Then you need to also set overflow back to auto once the overlay fades out, so you could do for example:
$(document).ready(function() {
$('#overlay').fadeIn('fast');
setTimeout(function(){
$('#overlay').fadeOut('fast');
$('html, body').css('overflow', 'auto')
}, 4500);
});
(Note: The way you are doing it, anyone with Javascript disabled will not be able to view your website. So you might want to consider how to make it viewable for those with Javascript off, even though that's a small % of people.)
The problem that I have with my code is that the <p>Welcome to my Profile</p> will not center. I've tried using Bootstrap's text-center class but it doesn't work desirably. I've also tried multiple things like using text-align: center; in CSS and even using width: 100%; for both the header and the div. Are there any solutions? Thanks in advance.
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">
<title>Jane's Personal Profile</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Jane Doe</h1>
<ul>
<li>Social Media</li>
<li>Portfolio</li>
</ul>
</header>
<div class="row">
<div class="span8 offset2 text-center">
<p>Welcome to my Profile</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
header {
height: 75px;
padding-left: 10px;
box-shadow: 5px 5px 10px grey;
width: 100%;
}
header > h1 {
float: left;
}
ul {
display: table-row;
float: right;
list-style: none;
}
ul > li {
display: table-cell;
vertical-align: middle;
height: 70px;
padding: 10px;
padding-right: 20px;
font-size: 16px;
}
h1 {
font-family: 'Abril Fatface', cursive;
}
Looks like you're using "text-center" as a class. Unless you set your CSS to recognize the class, there is nothing for the CSS to do.
Try adding this to your CSS
.text-center {
text-align: center;
}
You should always provide a jsFiddle for problems like this, btw ;)
If Bootstrap has a class setting the paragraph element to align left, you may also need to change the paragraph to a div. Alternatively, you could add a class to the paragraph such as "center-me" and add CSS
p.center-me {
text-align: center;
}
Bootstrap adds a giant bunch of CSS. Make sure, when you are using Bootstrap, to check if it has CSS styles that are affecting what you want to accomplish. Most browsers contain a developer's window where you can see what styles are being applied to any window. In Chrome, you can right click on any element and select "Inspect" to pull up this window and see both the HTML and the styles that are being applied from any CSS source.
EDIT: Fixed it, I am daft. It was because h1 is below the div.
So I was making some web page for a school project and I keep running into this annoying problem, I am trying to make an image gallery on the page with multiple thumbnails all in ordered categories on a page. e.g. since it is video game themed it should be like heroes and maps. Problem is when I place an image, the image pushes the text I had at the top of the screen under it, probably a really simple solution to this just need a bit of help. thanks. here is the link
CSS:
#font-face {
font-family: bigNoodle;
src: url(Font/big_noodle_titling_oblique.ttf);
}
#splash {
z-index: 100;
position: absolute;
background: white url('Pictures/logo.png') center no-repeat;
top: 0;
right: 0;
left: 0;
bottom: 0;
font-family: bigNoodle;
color: #939393;
padding: 10px;
font-size: 40px;
}
body {
background: url('Pictures/bg.jpg') center fixed no-repeat;
}
h1 {
z-index: 1;
font-family: bigNoodle;
text-align: center;
text-transform: uppercase;
font-size: 60px;
color: #F99E1A;
padding-top: 10px;
margin: 0;
padding: 0;
}
div.picture img {
height: 200px;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type='text/javascript' src='anim.js'></script>
<title>Wiki</title>
<link rel="icon" type="image/x-icon" href="Pictures/logo.png" />
</head>
<body>
<div id="splash">Click to continue...</div>
<div class="picture">
<img src="Pictures/Heroes.jpg">
</div>
<h1>Welcome</h1>
</body>
</html>
You can achieve it in multiple ways
Way 1:
You can apply z-index for text
for instance text 'welcome' is there inside h1
h1
{
z-index:999;
}
way 2:
take your image as background of div
https://jsfiddle.net/ogyk1914/