I'm new with HTML and CSS and I'm trying to make a page, but I have a problem with the header since it doesn't span the whole width. Image of the website
Here's my HTML code:
<nav class="links">
Home
About
Products
Services
Locations
Contact us
</nav>
</head>
<body class="body">
<header>
<img class="gato" src="Imagenes/cat.jpg">
<h1>ArchiteXture</h1>
<p></p>
</header>
And here's my CSS code:
header{
background-color:#ACBBF0;
padding:20px;
width:96%;
border-style:solid;
border-left:0px;
border-right:0px;
border-color:#5666A0;
}
.body{
background-color:#CBDFE8;
width:96%;
border-right:3px;
border-bottom:3px;
border-top:0px;
border-style:solid;
border-color:#5666A0;
margin-left:2%;
}
.links{
background-color: #ACBBF0;
background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 13px, 29px, 37px, 53px;
font-weight:bold;
padding:20px;
text-align:center;
border-bottom:3px;
border-left:0px;
border-right:0px;
border-style:solid;
border-color:#5666A0;
}
I tried to remove paddings, and margin.
I also tried to use the F12 tool in Chrome to inspectionate the code, but I don't see why I get that space between the header and the body since body is the "father".
Thanks in advance
There's three main errors:
The padding and margin should be set to 0. Sol.: Remove all padding
and margins at once ( with *{margin:0; padding;0;},
There're some wrong ubicated closing tabs (line 9). Sol.: correct order of opening and closing tabs (1st head, 2nd body),
and you don't give an addaptative size to the photo. Sol.: give the size in percentage (the width or the height, as you prefer).
*{
padding: 0;
margin: 0;
}
header{
background-color:#ACBBF0;
padding:20px;
width: inherit;
border-style:solid;
border-color:#5666A0;
}
.body{
background-color:#CBDFE8;
width: inherit;
border-right:3px;
border-bottom:3px;
border-style:solid;
border-color:#5666A0;
}
.links{
background-color: #ACBBF0;
background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 13px, 29px, 37px, 53px;
font-weight:bold;
padding:20px;
text-align:center;
border-bottom:3px;
border-style:solid;
border-color:#5666A0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Hi</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<nav class="links">
Home
About
Products
Services
Locations
Contact us
</nav>
<header>
<img class="gato" src="photo.jpg" style="width: 100%;">
<h1>ArchiteXture</h1>
<p></p>
</header>
</body>
</html>
Related
The following is a minimal (ish) example in which a chequered gradient fill pattern is glitchy in Firefox (version 74) i.e. it is not pixel perfect. There are line artefacts. Why is this? Is that normal? Is there a fix, other than using an image for the background?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<style>
.r{width:20px;height:20px;background:white;float:left;}
.w{overflow:hidden;}
#p75{
width:80px;
height:20px;
background-position:0px 0px,10px 10px;
background-size:20px 20px;
background-image:linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%,#ccc 100%),
linear-gradient(45deg,#ccc 25%,white 25%,white 75%,#ccc 75%,#ccc 100%);
float:left;
}
</style>
</head>
<body>
<div class="w">
<div class="r">0</div>
<div id="p75"></div>
</div>
</body>
Rotating gradients have always had that problem for more on that check this question
One way to fix the issue is to not use angles at all, and make use of repeating gradients.
html {
height: 100%;
background:
repeating-linear-gradient(90deg, #fff 0px 10px, transparent 10px 20px),
repeating-linear-gradient(0deg, #000 0px 10px, #fff 10px 20px);
background-blend-mode: difference;
}
Edit: thanks to #Temani Afif without repeating gradient.
html {
height: 100%;
background:
linear-gradient(90deg, #fff 50%, transparent 0) 0 0/20px 100%,
linear-gradient(0deg, #000 50%, #fff 0) 0 0/100% 20px;
background-blend-mode: difference;
}
you can overlap them a tiny bit , here i added 0.1% to the color start/stop setup , chrome use to be the one.
.r {
width: 20px;
height: 20px;
background: white;
float: left;
}
.w {
overflow: hidden;
}
#p75,
.p75 {
width: 80px;
height: 20px;
background-position: 0px 0px, 10px 10px;
background-size: 20px 20px;
background-image: linear-gradient(45deg, #ccc 25%, transparent 25.1%, transparent 75%, #ccc 75.1%, #ccc 100%), linear-gradient(45deg, #ccc 25%, white 25.1%, white 75%, #ccc 75.1%, #ccc 100%);
float: left;
}
.p75 {
margin:0 1em 1em;
height: 200px;
width:100%;
background-size: 19px 19px;
<div class="w">
<div class="r">0</div>
<div id="p75"></div>
</div>
<p>or decrease background-size of 1px</p>
<div class="p75"></div>
Another solution is to set the whole pattern from triangles and pretune values via css custom properties :
div {
--bgsize: 40;
--sq1: 0 0;
--sq2: calc(var(--bgsize) / 2 * 1px) calc(var(--bgsize) / 2 * 1px);
--sq3: var(--sq2);
--sq4: calc(var(--bgsize) * 1px ) 0px;
}
#a20:checked ~ div { --bgsize: 20; }
#a50:checked ~ div { --bgsize: 50; }
#a150:checked~ div { --bgsize: 150;}
#a100:checked~ div { --bgsize: 100;}
div {
height:200px;
background:
linear-gradient(45deg, gray 25% , transparent 26%),
linear-gradient(225deg, gray 25% , transparent 26%),
linear-gradient(45deg, gray 25% , transparent 26%),
linear-gradient(225deg, gray 25% , transparent 26%)
;
background-position:
var(--sq1) ,
var(--sq2) ,
var(--sq3) ,
var(--sq4);
background-size: calc(var(--bgsize) * 1px) calc(var(--bgsize) * 1px );
}
reset bg-size:<br>
<label for=a20>20px</label><input type=radio name=test id=a20>
<label for=a100>100px</label><input type=radio name=test id=a100>
<label for=a150>150px</label><input type=radio name=test id=a150>
<div></div>
demo with option to reset --bgsize and color
https://codepen.io/gc-nomade/pen/GRJGXwv
I am trying to create a 3 color background with colors going diagonally.
I found a great example with colors i like here: Responsive Diagonal Two-Tone Backgrounds with CSS (Corner to Corner)
.btn {
background:#212531;
background: linear-gradient(to right bottom, #2f3441 50%, #212531 50%);
display:inline-block;
padding:0.75em 2.0em;
font-size:1.5em;
text-align:center;
margin:0.25em 0;
color:#ffffff;
font-weight:normal;
text-transform:uppercase;
font-family:sans-serif;
}
.btn:hover, .btn:focus {
background:#2d3d64;
background: linear-gradient(to right bottom, #415382 50%, #2d3d64 50%);
}
body { text-align:center; background:#e6e9f6; padding-top:1.0em; }
a { text-decoration:none; }
<a class="btn" href="#">Check Out My Background</a>
I want to modify this example to have a third color, going from the bottom left corner, diagonally up to the middle of the screen and then stopping there.
How can i achieve this?
You can try like below. Simply consider an extra gradient with a diagonal direction.
.box {
width:200px;
height:100px;
background:
linear-gradient(to bottom left ,transparent 50%,yellow 50.5%),
linear-gradient(to bottom right,red 50%,blue 50.5%);
}
<div class="box">
</div>
According to this example:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
You can use something like that:
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
Is it possible to make a circle with 60% one color and 40% other color around an image.
I have tried using the below code,
//CSS
.waitlist .img-thumbnail {
border: 2px solid #dee2e6;
background: linear-gradient(90deg, #2A89F6 50%, transparent 50%),
linear-gradient(-90deg, #CCC 50%, transparent 50%);
}
//HTML
<img src="images/1.jpg" alt="" class="img-fluid rounded-circle img-thumbnail mb-2" width="100">
The output for above code is,
But I want the output as,
Is it possible to achieve the required output?
you can do it like this:
.box {
border-radius:50%;
display:inline-block;
padding:5px;
background:
linear-gradient(-40deg, grey 50%,transparent 0), /*adjust the deg value here to control the %*/
linear-gradient(to right, red 50%,transparent 0),
grey;
}
.box img {
border-radius:50%;
display:block;
}
<div class="box">
<img src="https://picsum.photos/100/100?image=1069" >
</div>
I want to put a div between two different backgrounds.
It looks something like below image:
As you can see, the div placed in between two background, white and blue.
How can I achieve this?
You can use position:absolute and a negative margin-top on the div you want in the middle
Check this
You can use below code by applying to that div. In this code you can use two different colors to background that you want.
background: linear-gradient(bottom, #FFFFFF 50%, #008ED3 50%);
background: -o-linear-gradient(bottom, #FFFFFF 50%, #008ED3 50%);
background: -moz-linear-gradient(bottom, #FFFFFF 50%, #008ED3 50%);
background: -webkit-linear-gradient(bottom, #FFFFFF 50%, #008ED3 50%);
background: -ms-linear-gradient(bottom, #FFFFFF 50%, #008ED3 50%);
In above code do not remove any single line, because each line is for browser compatibility, each line code is for different browsers.
You can position your white div so that it stacks on top of the divs with blue and white background.
https://jsfiddle.net/z6ohochn/
#blue {
background: blue;
width:100%;
height:60px;
}
#white {
width:80%;a
height:50px;
background:white;
z-index:2;
position:relative;
top:-80px;
left:10%;
border-radius:5px;
}
#gray {
background: gray;
width:100%;
height:60px;
}
I have HTML code with background image,which is man's head.I have html button on man's eye,and I want when browser windows resizes,button be always on eye,this is my code.
Please help me,thanks a lot to help me.
<!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>Post</title>
</head>
<body>
<div>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img id="bgimage" src="heroes.jpg"/>
<div id="content">
<p align="center"><input type="submit" class="butt" onclick="dosomething();"/></p>
</div>
</td>
</tr>
</table>
</div>
<style>
body,html{margin:0;padding:0; height:100% width:100%}
#bgimage{ position:fixed; left:0; top:0; z-index:1;height:100%; width:100%;}
#content{position:absolute;left:0; top:0; z-index:70; height:100%; width:100%;}
.butt {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #3c4fd9;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}.butt:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}.butt:active {
position:relative;
top:1px;
}
.butt{
margin-top:260px;
margin-right:190px;
}
.butt{
}
</style>
</body>
</html>
button.classname{
position:fixed;
top:value; /*set a value so that it comes on eye horizontally*/
left:value; /*set a value so that it comes on eye vertically*/
}
Fixed position and absolute position work in different way. If you use fixed position ,body will be the parent of the item but absolute positioned item can have user defined parent( just give parent element a position property.)
So, if you want to keep the man and the eye button together you have to use same parent. use same position for both man and eye (fixed or absolute) having same parent.
second thing is, you are resizing the man's head by using width: 100% and height: 100%; so, if you want the eye button also change the position use percentage in position (eg. top: 50%). have a look at http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/ . It might help you.
I tried to not make that many adjustments to your code as possible to make this solution as easy to implement as possible, but I have done what you're asking in the following way.
Put this in the "head" section of your HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
HTML:
<img id="bgimage" src=""/>
<div id="content">
<input type="submit" class="butt" onclick="dosomething();"/>
</div>
CSS:
body,html{ margin:0;padding:0;height:100%;width:100%}
#bgimage{
position:fixed;
left:0;
top:0;
z-index:1;
height:100%;
width:100%;
}
#content{
position:absolute;
left:0;
top:0;
z-index:70;
height:100%;
width:100%;
}
.butt {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #3c4fd9;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
.butt:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}
.butt:active {
position:relative;
top:1px;
}
jQuery:
$('.butt').css({
"position" : "absolute",
"left" : "39%",
"top" : "41%"
});
to put the jQuery in your HTML file just copy and paste this:
<script type="text/javascript">
$(document).ready(function(){
$('.butt').css({
"position" : "absolute",
"left" : "39%",
"top" : "41%"
});
)};
</script>
This isn't perfect on all resolutions, you might have to tweak the percentages in the jQuery, the only alternative is to create a CSS using multiple #media queries to adjust with every screen size.