I'm new to CSS stylesheets and I am trying to practice on making borders around pictures.
Here is my HTML and CSS code if this helps:
h1{
font-family: Verdana, sans-serif;
color:#576D94, serif;
}
p{
font-family: Garamond, serif;
font-size: 18px;
color:#4A4943;
}
img{
height:100px;
width:300px;
border:1px solid #4682b4;
}
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<h1>Welcome to my webisite!</h1>
<p>This is Alex's website welcome!!</p>
<img src="http://entnet5.com/~c86950x1/wp-content/uploads/2015/07/small-animals.jpg" />
</body>
</html>
Here is the code I want you to look at specifically:
img{
height:100px;
width:300px;
border:1px solid #4682b4;
}
Related
This question already has answers here:
Why does the order of media queries matter in CSS?
(2 answers)
Closed last year.
I know this is a stupid question, but I'm having trouble with the small screen media query. I gave the image a class, so it should work. Also, when I tried to add an id, it didn't work, so is there something wrong with my code or the media query thing? Any assistance or advice would be greatly appreciated.
#media only screen and (max-width : 600px){
.mondaycont .monday{
position: relative;
width: 20em;
margin-top: 10px;
}
}
.mondaycont{
width: 84%;
}
.mondaycont .monday{
position: relative;
width: 40em;
margin-top: 20px;
}
.mondaytext{
font-family: 'Inter', sans-serif;
font-weight: 400;
color: white;
margin-top: 50px;
position: relative;
}
.mondaytextbold{
font-family: 'Inter', sans-serif;
font-weight: bold;
color: white;
margin-top: 10px;
position: relative;
}
<!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.0">
<title>ERROR 404</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<style>body{background-color: #262626;}</style>
<div class="container text-center"><p class=" mondaytext">This page feels like a monday...</p>
<p class=" mondaytextbold">Go Home</p> </div>
<div class="container-fluid mondaycont text-center">
<img class="img-fluid monday" src="./images/ERROR404.png" alt="404"></div>
</body>
</html>
Your media query is followed by a declaration that applies to all resolutions, overwriting your media query width definition. Media queries do not affect specificity, so the normal "last rule wins" applies.
Exchange the position of these two rules:
.mondaycont .monday {
position: relative;
width: 40em;
margin-top: 20px;
}
#media only screen and (max-width: 600px) {
.mondaycont .monday {
position: relative;
width: 20em;
margin-top: 10px;
}
}
.mondaycont {
width: 84%;
}
.mondaytext {
font-family: 'Inter', sans-serif;
font-weight: 400;
color: white;
margin-top: 50px;
position: relative;
}
.mondaytextbold {
font-family: 'Inter', sans-serif;
font-weight: bold;
color: white;
margin-top: 10px;
position: relative;
}
<!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.0">
<title>ERROR 404</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<style>
body {
background-color: #262626;
}
</style>
<div class="container text-center">
<p class=" mondaytext">This page feels like a monday...</p>
<a href="./index.html">
<p class=" mondaytextbold">Go Home</p>
</a>
</div>
<div class="container-fluid mondaycont text-center">
<img class="img-fluid monday" src="./images/ERROR404.png" alt="404"></div>
</body>
</html>
So I have been searching to find a way to change the color of the bottom border of my navigation bar links with a linear animation starting from the bottom going upwards. I was able to find a thread with some code that I semi-understand, just a few CSS lines which has sent me in the right direction, however the colour change is animated from the top down, whereas I would like the opposite.
I am using Bootstrap if that makes any different, is there any way I can do the opposite and have the transition start from the bottom and go upwards? My code is posted below...
* {
box-sizing: border-box;
}
body {}
#header-nav {
background-color: #262626;
font-family: 'Kanit', sans-serif;
font-size: 1.1em;
text-transform: uppercase;
border-bottom: #212121 thick solid;
}
#header-nav .container {
padding-top: 10px;
padding-bottom: 10px;
/* border-bottom: purple thick solid;*/
margin: 0px;
}
/*212121*/
#header-nav a {
color: #FFF;
margin-right: 2rem;
padding: 10px;
/* border-bottom: purple thick solid; */
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
#header-nav a:hover {
text-decoration: none;
/* background-color: purple;*/
border-bottom: white thick solid;
}
<!DOCTYPE html>
<html>
<head>
<!-- Meta & Other -->
<title>Infamous | Home</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Infamous official website">
<meta name="keywords" content ="Infamous, Minecraft, Server, Game, Gaming">
<meta name="author" content="MrWardy">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./Stylesheets/default.css">
<!-- Fonts -->
<script src="https://kit.fontawesome.com/35fad75205.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar-nav ml-auto">
<div class="container">
<a class="active" href="#"><i class="fas fa-home"></i> Home</a>
<i class="fas fa-question"></i> About
<i class="fas fa-book"></i> Rules
<i class="fas fa-vote-yea"></i> Vote
<i class="fas fa-tags"></i> Store
</div>
</nav>
</header>
<!-- JavsScript -->
<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.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
Use gradient for this:
.box {
background:#000;
padding:10px 20px;
}
a {
display:inline-block;
color:#fff;
font-size:30px;
text-decoration:none;
padding-bottom:10px; /* control the space for the gradient */
background:
linear-gradient(currentColor,currentColor)
bottom /* make it bottom */
/100% 0px /*start at heght = 0; */
no-repeat;
transition:0.3s all;
}
a:hover {
background-size:100% 6px; /* make the height 6px*/
}
<div class="box">
a link
</div>
Another syntax where you adjust the position instead:
.box {
background:#000;
padding:10px 20px;
}
a {
display:inline-block;
color:#fff;
font-size:30px;
text-decoration:none;
padding-bottom:10px;
background:
linear-gradient(currentColor,currentColor)
left 0 bottom -7px
/100% 6px
no-repeat;
transition:0.3s all;
}
a:hover {
background-position:left 0 bottom 0;
}
<div class="box">
a link
</div>
I was wondering how I would delete the white space that is presented in this photo in css or html. I want the background to be transparent. Thanks
http://i.stack.imgur.com/IRlE9.png
This is the code I used :
<html>
<head>
<link rel="stylesheet" type="text/css" href="./StyleSheets/style.css">
</head>
<body>
<div id="header">
<div class="img">
<img src="./Images/Abado.png">
</div>
<div class="Navbar">
Home
About us
Forums
Login
Signup
</div>
</div>
</body>
</html>
body{
padding:0;
margin:0;
}
img{
height: 50px;
background-color:transparent;
}
#header{
margin:0;
padding:0;
width:100%;
background:#124EF4;
height: auto;
}
.Navbar{
margin:0;
padding:0;
float:left;
background: #0033BF;
}
.Navbar a{
text-decoration: none;
font-size: 18px;
color:white;
}
You can use photoshop or any other image editor program to make your images transparent. In photoshop, you can select the magic eraser tool and delete the white background, and save the photo as in png format.
so I did searches on here beforehand, trying to find an answer to my question, but all the solutions I found gave me no results. Basically, I have an image in my div#wrapper that I'd like to display, but it won't unless I fill the area -after- the respective div with text.
I have overflow:auto; in my #wrapper since I have floats in the succeeding divs.
CSS file:
#media only screen and (min-width: 25em) {
html {
background: url(images/gridbg.jpg) repeat fixed center top;
}
}
#media only screen and (max-width:25em) {
html {
background-color:#0c0c1f;
}
}
img {
border:0px;
}
textarea:focus, input:focus{
outline: none;
}
#wrapper {
margin:0 auto;
width:60em;
overflow:auto;
background-image:url(images/cont-bg.png);
}
#content {
text-align:justify;
position:fixed;
width:59em;
height:100%;
overflow:auto;
padding-top: 0.4em;
padding-bottom: 0.4em;
padding-left: 0.4em;
padding-right: 0.4em;
outline:none;
z-index:2;
margin-top:12em;
}
#homeNav {
position:fixed;
float:left;
margin-left:0.65em;
margin-top:0.65em;
z-index:3;
}
#primaryNav {
z-index:2;
float:right;
margin-left:28em;
margin-top:1em;
position:fixed;
}
#navGFX {
background-image:url(images/navGFX.png);
background-repeat:no-repeat;
width:60em;
height:8em;
float:left;
position:fixed;
z-index:1;
margin-top:3em;
}
HTML file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ag Design</title>
<link href="main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="scrollstyles.css"/>
<script type='text/javascript' src="js/flexcroll.js"></script>
</head>
<body>
<div id="wrapper">
<div id="navGFX">
<div id="homeNav"><img src="images/buttons/btn_logo.png"></div>
<div id="primaryNav">
<img src="images/buttons/btn_home.png">
<img src="images/buttons/btn_link1.png">
<img src="images/buttons/btn_link2.png">
<img src="images/buttons/btn_link3.png">
<img src="images/buttons/btn_link4.png">
</div>
</div>
<div id="content" class="flexcroll">
This area is full of filler text
</div>
</div>
</body>
</html>
I haven't the foggiest clue what I'm doing wrong. Anyone have any ideas? :/
Just remove the CSS:
position: fixed;
from the #wrapper id and the background-image will appear
Can anybody help, I`m starter in web? Here is code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.window {
margin:0;
padding:0;
border: solid 1px #666666;
}
.image {
height:50px;
widows:50px;
float:left;
}
.text {
font-size:12px;
color:#666666;
float:left;
}
-->
</style>
</head>
<body>
<div class="window">
<div class="image">image</div>
<div class="text"></div>
</div>
</body>
First, for width, u use window, use width:50px; for appear div image and div text on div window, use clear div, see code below...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.window {
margin:0;
padding:0;
border: solid 1px #666666;
}
.image {
height:50px;
width:50px;
float:left;
}
.text {
font-size:12px;
color:#666666;
float:left;
}
.clear {
clear:both;
}
-->
</style>
</head>
<body>
<div class="window">
<div class="image">image</div>
<div class="text"></div>
<div class="clear"></div>
</div>
</body>
Is ok?
Misspelt width?
widows:50px;
because you have float:left for the two child elements you have to clear them. Add overflow:auto for the .window.
Demo: http://jsfiddle.net/CVcjf/1
you should assign a width and height to the divs in order to make its visible.