I made a simple logo and when I tried to effect its border radius to make it a circle, however a problem occurred. It's edges became malformed where it didn't form a perfect circle and box shadows began to appear on the bottom and sides despite the fact I didn't implement them. If anyone could help me find a work around I would appreciate it.
Also I didn't include the CSS reset, so the positioning might be a bit off.
html {
font-size: 62.5%;
}
body {
}
/* Fonts */
#font-face {
font-family: "Apercu";
src: url(../fonts/Apercu\ Regular.otf) format("opentype");
font-weight: normal;
}
#font-face {
font-family: "Aller";
src: url(../fonts/aller/Aller_Std_Rg.ttf) format("opentype");
font-weight: normal;
}
/* Navbar */
.navbar {
display: flex;
width: 100%;
height: 8rem;
background-color: #08b3a1;
background-size: 13px 10px;
background-image: linear-gradient(
45deg,
transparent 48%,
#fff5ee 48%,
#fff5ee 52%,
transparent 52%
);
align-items: center;
}
.logo-title-container {
display: flex;
gap: 1rem;
align-items: center;
box-shadow: none;
}
.logo {
margin-left: 2rem;
width: 4.4rem;
border-radius: 50%;
box-shadow: none;
border: none;
}
.header-left-title {
font-size: 3rem;
font-family: "Aller";
font-weight: normal;
color: rgb(228, 230, 229);
}
<!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">
<link rel="stylesheet" href="/styles/style.css"></link>
<title>Web Scraper 1.0</title>
</head>
<body>
<header class="navbar">
<div class="logo-title-container"><i><img class="logo" src="https://i.ibb.co/T0qwp4v/2-objects.png" alt="2-objects" border="0"></i>
<h1 class="header-left-title">Razor</h1>
</div>
</header>
</body>
</html>
This is because you are using a .png file with transparent borders. Remove the transparent edges and you will have a perfect circle
So I was able to solve the issue, for some reason the Lunacy editor automatically adds a transparent border to an image by default. I had to crop it with a built in VS Code Image editor to fix it.
Related
I just switched from VSC to Adobe Dreamweaver and i don't know if I should keep it or not; but that's besides the point.
When I try to add a background to some text, it fills the whole screen with the background with the background, and if I try to change the width it only adds on to the background which is filling the whole screen.
I don't know if it's user error, something changed in HTML/CSS overnight or if it's because of the Dreamweaver display box thing on the top of my screen
#charset "utf-8";
* {
margin: 0;
padding: 0;
}
.Container {
padding: 25%;
padding-left: 50%;
padding-right: 50%;
font-family: comfortaa;
font-style: normal;
font-weight: 600;
color: white;
background: #00C3FF;
margin: 0;
}
body {
background-image: url(http://www.incomeactivator.com/images/freebg5.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="file:///C|/Users/REDACTED/Documents/style.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>
var __adobewebfontsappname__ = "dreamweaver"
</script>
<script src="http://use.edgefonts.net/comfortaa:n3:default.js" type="text/javascript"></script>
</head>
<body>
<div class="Container">
<h1>Hello</h1>
</div>
</body>
</html>
p.s: let me know if you need a ss of the results I get.
Instead of using the class, you can change the texts background color by adding
background-color: rgb(255, 236, 139)
in the h1 tag
Demo:
YOURTEXT
It should work as expected if you apply the css to the H1 tag:
.Container h1{}
You have used padding property incorrectly. Reference
Correct syntax: padding: top right bottom left
padding:0 50% 0 50%;
So the css should be:
.Container{ margin: 0; }
.Container h1{
padding:0 50% 0 50%;
font-family: comfortaa;
font-style: normal;
font-weight: 600;
color: white;
background: #00C3FF;
}
I am attempting to re-create something similar to this image below, minus the little page curl in top right hand corner.
Banner Example:
I am adding the code to a previously coded website by another designer. I am first coding it separately, but cannot get the text and banner to be responsive, though the image is. Nor can I get it to overlay like I wish on the image itself.
Here is my code below, I know it is something simple but seem to be hitting a mental wall.
#charset "UTF-8";
/* CSS Document */
/*Header Image*/
.headerimage
img
{
}
h1
{
position: absolute;
display: block;
width: 100%;
font-size: 1.45em;
font-family: 'Roboto Slab', Rockwell, Serif;
font-weight: bold;
color: #FFF;
text-shadow: 0 .125em .125em rgba(0, 0, 0, .5);
padding: .6em 1em .6em 1.7em;
background: linear-gradient(to right, rgba(178,34,34,0) 0%,rgba(169,32,32,0.8) 5%,rgba(160,30,30,1) 50%,rgba(152,29,29,0.8) 75%,rgba(178,34,34,0) 100%);
}
.interior-header img
{
display: block;
position: relative;
width: 100%;
height: auto;
border: 1px solid #b22222;
padding: 1px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Heading</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="interior-header img>
<div class="headerimage">
<img src="images/Joslyn-Interior-Images.jpg" width="630" height="240" alt="Traffic Control" />
<h1>Traffic Control</h1>
</div>
</div>
</body>
</html>
Traffic Violations Image
I didn't want to type out all your code so here is an example.
Note: When I posted this one, no codes were up, I left it up in case it helps others. The code for the answer is at the bottom of the answer.
https://jsfiddle.net/norcaljohnny/5o95L0qy/
.box {
background: grey;
height: auto;
width: 100%;
}
.text {
font-size: 6vw
}
Updated: Here is the current JsFiddle. Hope this helps.
https://jsfiddle.net/norcaljohnny/65wnds86/
When I apply a linear gradient to the body in CSS like below
body
{
background: linear-gradient(#10416b, black);
}
It doesn't apply it to the entire web page, instead what happens is it is applied to the first half of the page, and then starts over from blue to black for the second half, (#10416b is a blue color). Adding in height:100%; to the body doesn't change anything.
I fixed the problem by doing the below in CSS
.background {
background: linear-gradient(#10416b, black);
height: 100%;
}
and this in HTML
<!DOCTYPE html>
<html class="background">
// lots of unrelated code in between the tags
</html>
But I still don't understand why setting the background with the linear gradient in the body didn't work. If somebody could explain this to me that would be great.
Use 100vh instead of 100%
body {
height: 100vh;
background: linear-gradient(#10416b, black);
}
https://jsfiddle.net/r77r0cco/1/
body in and of itself doesn't have a height, so it looks to its parent element <html> which, because it has no content, also has no height.
vh uses the viewport dimensions instead of a parent element's
The body has no height of it's own as such without the HTML having a height or the body containing content.Then the gradient will repeat because repeat is the default in the background shorthand property.
html {
height: 100%;
}
body {
background: linear-gradient(#10416b, black);
}
Firstly, I'd like to thank #Paulie_D who inspired me to come up with this answer.
Below you can see 2 methods to get your body have a gradient background.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My awesome webpage</title>
<style>
html {
min-height: 100%; /* Unlike 'height', which is used by
#Paulie_D, this will make your webpage
automatically resize when it exceeds
the 100% height, thus it won't start the
gradient over
*/
}
body {
background: linear-gradient( 180deg,
#C0C0AA 0%,
#1CEFFF 100%
);
}
/***** Content design *****/
#hello {
font-family: sans-serif;
font-size: 5em;
text-align: center;
color: #424242;
text-shadow: 0 0 1rem darkgray;
transition: 0.25s;
}
#hello:hover {
font-size: 100vh;
color: darkgray;
}
</style>
</head>
<body>
<div id="hello">Hover and scroll!</div>
</body>
</html>
This method will automatically resize the gradient to fit the whole content.
If you want the gradient to be the size of the window height, you can use a `::before` pseudoelement on `body`, to draw a fix-positioned gradient with a `z-index` of `-1`. Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My awesome webpage</title>
<style>
body::before {
content: "";
background: linear-gradient( 180deg,
#C0C0AA 0%,
#1CEFFF 100%
);
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
z-index: -1;
}
/***** Content design *****/
#hello {
font-family: sans-serif;
font-size: 5em;
text-align: center;
color: #424242;
text-shadow: 0 0 1rem darkgray;
transition: 0.25s;
}
#hello:hover {
font-size: 100vh;
color: darkgray;
}
</style>
</head>
<body>
<div id="hello">
Hover and scroll!
</div>
</body>
</html>
Sorry, I don't usually answer Stack Overflow questions, but this was a top result of a Google query, so I couldn't resist. If you can improve this answer, please request an edit.
I've been able to properly position & scale a few elements in my webpage using html & css, however due to the rules of positioning, I've gotten stuck on how to continue this action with two more elements.
The chevron icon in the picture must be below the last paragraph entitled "scroll down", & I also want it to scale with the screen size as I have been successfully able to do with the other text/elements as you can see:
here is the html:
<!DOCTYPE html>
<html>
<head>
<title>myWebpage</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />
<link href="css/font-awesome.min.css"rel="stylesheet">
<link href="main-sanctuary.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Hellloooooooooooooo!</h1>
<p id="first-p">Welcome All!<br>Make Yourself at home.</p>
<p id="secondary-p">Scroll down.</p>
<button id="logBtn">Log In</button>
<button id="signBtn">Sign Up</button>
<i class="fa fa-chevron-down fa-4x"></i>
</header>
</body>
</html>
and here is the css:
* {
margin:0;
padding:0;
}
body,html {
height: 100%;
background: honeydew;
}
/* Header*/
header {
height: 100vh;
background-image: url(https://s3-us-west-2.amazonaws.com/assests/books-apple.jpg);
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
text-shadow: 0 1px 3px rgba(0,0,0,.8);
text-align: center;
position:relative;
}
h1 {
color: honeydew;
font-family: "Helvetica Neue";
font-size : 7.5vw;
margin-bottom: 30px;
}
#first-p {
color: honeydew;
font-family: "Helvetica Neue";
font-weight: lighter;
font-style: normal;
font-size : 3.5vw;
margin-bottom: 50px;
}
#secondary-p {
position: inherit;
color: #FFD700;
font-family: "Helvetica Neue";
font-weight: lighter;
font-style: normal;
font-size : 2vw;
margin-bottom: -90px;
}
.fa {
color: #FFD700;
}
So how do I properly position the .fa under #secondary-p on my webpage & scale it as well?
Just remove margin-bottom : -90px; from #secondary-p, this will make Cheveron Icon go below Scroll Down (#sencondary-p).
And for scaling the Cheveron Icon, add font-size to it with a value in vw. Like This :-
.fa{
color : #FFD700;
font-size : 4vw;
}
Demo is here.
Update
For shifting them a little bit down, wrap the .fa element and the #sencondary-p element inside a div and give that div some margin-top. Like this :-
HTML :-
<div id="wrapper">
<p id="sencondary-p">Scroll Down</p>
<i class = "fa fa-chevron-down fa-4x"></i>
</div>
CSS :-
#wrapper{
margin-top : 100px; /*Increase the value to shift more down*/
}
See the updated demo here.
Put the chevron inside a div and set the div's position. (Use position: static, which will keep the position consistent.)
I want to delete the margin top of my page. I will show you what I mean with a screenshot
You can see in my pic there are a red arrow that indicate my problem. How I can delete this margin?
I post here my css:
div#header {
background-color: #6495ED;
background: -moz-linear-gradient(100% 100% 90deg, black, gray);
background: -webkit-gradient(linear, center top, center bottom, from(gray), to(black));
margin: 0px;
width: 100%;
}
body {
background-color: #000000;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
h1 {
text-align: center;
color: #FFFFFF;
font-family: sans-serif;
font-size: 26px;
font-weight: bold;
padding: 5px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
color: #FFFFFF;
font-family: sans-serif;
}
p {
color: #FFFFFF;
font-family: sans-serif;
padding: 5px;
}
a {
text-decoration: none;
color: #FFFFFF;
}
So any suggestion about how I can delete this margin just above my header?
Here you can see my html:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<title>Lista coupon</title>
<script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../js/memoria.js" type="text/javascript"></script>
<style src="../css/style.css" type="text/css"></style>
</head>
<body onload="loadJson();">
<div id="header">
<h1>Lista coupon salvati</h1>
</div>
<div id="content">
<p>Di seguito trovi tutte le promozioni salvate</p>
<div id="list">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
Set margin: 0; to <h1> element
Demo: http://jsfiddle.net/5w6Es/
Same problem as with the margin-left of <ul> elements, or margin-top / margin-bottom of <p> elements, etc.
You need to reset their default styles when using them at the borders of your page.
Try removing padding and margin also for the html element, (not only the body)
Try also to remove the default margin (differently) applied by every browser to the h1 element that you didn't redefined/reset and which is probably collapsing over the #header element
html {
margin: 0;
padding: 0;
}
h1 {
...
margin: 0;
}
You need to add margin:0px; to this CSS: http://jsfiddle.net/vv6DL/
h1 {
text-align: center;
color: #FFFFFF;
font-family: sans-serif;
font-size: 26px;
font-weight: bold;
padding: 5px;
margin:0px;
}
You don't say what browsers its occuring in.
If you use Firebug and its tools you should be able to see what is causing the spacing and then set that to zero, however, a "cheat" would be to use a reset css script such as Meyers http://meyerweb.com/eric/tools/css/reset/ to clean up all those browser inconsistencies.
Try This
h1
{
margin:0px;
}
The best way I've found to do this is by adding the :first-child pseudo-element in your css to your first element such as <h1> or <ul> etc etc within your body-element.
So an example using your mark up above would be
h1:first-child { margin-top: 0; }
This eliminates interfering with all further <h1> elements in your code and also without needless css classes added to your html mark-up.
I hope this helps as I was having the sam problem with little luck with the answers provided.