My background is interrupted by the list and by the h3 but it has to be one solid line. The yellow thing is a background image. Pleas need help. Is for a school project.
In the image you see a yellow driangle dis ist the interrupted image:
This is my code:
* {
background-image: url("https://placehold.it/300x300/");
background-repeat: no-repeat;
background-color: #252525;
color: white;
font-family: arial;
}
h1 {
text-align: center;
font-size: 42pt;
background-image: url("https://placehold.it/300x300/f00/fff");
text-transform: uppercase;
}
h3 {
text-align: center;
font-size: 28pt;
text-transform: uppercase;
}
li {
list-style-type: none;
margin-top: 20px;
margin-bottom: 20px;
}
a {
color: yellow;
list-style-type: none;
width: 120px;
text-align: center;
font-size: 18pt;
box-shadow: 3px 3px 3px black;
font-weight: bold;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Jonas Ploberger">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Übersicht jonas Ploberger</title>
<link rel="stylesheet" href="startseite.css">
</head>
<body>
<h1>PlobergerJonas</h1>
<h3>Home</h3>
<ul>
<li>Home</li>
<li>PS Bilder</li>
<li>Ausbildung</li>
<li>Kontakt</li>
</ul>
</body>
</html>
Here:
* {
background-image: url("https://placehold.it/300x300/");
background-repeat: no-repeat;
background-color: #252525;
color: white;
font-family: arial;
}
you are using the universal selector '*' and so you are setting a background image to every element in your html document.
So you want to replace that selector with either 'body' or any other element you want to have that background image on.
Related
I need some help with my messy code (excuse me for having lot of text in my native language). I need to fit the IFRAME in between head and footer of the site, so it will look the same on every monitor (resolution).
Thanks!
body {
margin: 0;
background-image: linear-gradient(to right, #292c33, #a0b2d0, #dee9f6, #a0b2d0, #292c33);
}
p{
color: #272727;
text-align: left;
display: block;
font-family: 'Montserrat', sans-serif;
padding-left: 14px;
font-size: 12px;
text-decoration: none;
// nadefinování písma na stránce
}
.nav{
background-color: #eaeaea;
overflow: hidden;
}
.nav a{
float: left;
display: block;
color: #272727; // barva fontu
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 100%;
border-bottom: 3px solid transparent;
font-family: 'Montserrat', sans-serif;
height: 30px;
}
.nav a:hover{
border-bottom: 3px solid #310a0b;
}
.nav a.active{
border-bottom: 3px solid #b50c0f;
}
.fotka{
display: block;
float: right;
width: 5%;
height: 5%;
margin: 12px;
}
footer{
padding: 1px;
background-color: #eaeaea;
color: #272727;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
position: fixed;
bottom: 0;
width: 100%;
}
.zvideo{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
}
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='icon' href='favicon.ico?' type='image/x-icon'/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<title>Hlavní stránka</title>
</head>
<body>
<div class="nav">
<a class="active" href="index.html">Domů</a>
Zaklínač
Hry
Knížky
<img class="fotka" alt="logo stránky" src="logo.png">
</div>
<!--NÁSLEDUJE DIV IFRAMU-->
<div class="zvideo">
<iframe class="zvideo" src="https://www.youtube.com/embed/hquuwfa3FCo?autoplay=1&mute=1" width="1152px" height="648px" frameborder="0" allow="autoplay"></iframe>
</div>
<footer>
<p>Autor: Jan Michalisko</p>
<p>Můj email: hachikolp#gmail.com</p> <!--mailto: mi přišel velmi barbarský, takže jsem tam nechal jenom paragraf-->
</footer>
</body>
</html>
I hope that you will be able to identify what is footer, head etc., i am really not a good at coding yet, lol. Thank you for help!
According to the comments, you just trying to center an iframe. The I in iframe stands for inline. So the correct name for the <iframe> tag is: inline frame. As the name indictaes, it is not a block level element but an inline element. As such it can not be centered by using margin: 0 auto; by default. So you need to add display: block; first, in order to change the iframe into a block level element.
iframe {
display: block;
margin: 0 auto;
background-color: blue;
}
<iframe src="">Just a Test</iframe>
When moving my div container from float:center; to float:left;
Ideally i'd like for the button to touch the bottom of the div "self"
It adds extra space below my contact button.
Any suggestions?
I've tried playing with margin, padding,overflow:hidden; etc inside the div container .self in the CSS file but with no luck.
body{
/*background-color: rgb(17, 17, 17);*/
background-color: ghostwhite;
}
.self {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
height:auto;
margin: auto;
text-align: center;
font-family: sans-serif;
background-color: ghostwhite;
float:left;
}
.title {
color: black;
font-family: sans-serif;
font-size: 18px;
}
ul.school {
list-style:none;
list-style-position: inside;
padding-left:0;
margin-left:0;
}
.degrees{
color: black;
font-family: sans-serif;
font-size: 14px;
}
button {
border: none;
outline: 0;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: black;
}
button:hover, a:hover {
opacity: 0.7;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Steven Amerman">
<meta name="pragma" content="no-cache">
<link rel="stylesheet" type = "text/css" href="..\css\index.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Steven Amerman</title>
</head>
<body>
<div class="self">
<img src="..\images\Steven.png" alt="Steven Amerman" style="width:100%">
<h1>Steven Amerman</h1>
<p class="title">Software Developer</p>
<ul class="school">
<li><img src="../images/wvuIcon.png" id="wvuIcon" alt="WVU" style="width:20px; height:20px"> West Virginia University</li>
</ul>
<p class="degrees">B.S. in Computer Science</p>
<i class="fa fa-linkedin-square"></i>
<p><button>Contact</button></p>
</div>
</body>
</html>
extra space
no space
The issue is on the p tag's margin containing the contact button. You should change its margin to 0, for instance:
.self p:last-child{
margin-bottom: 0px;
}
Just remove the <p></p> tags around the button at the bottom.
body {
/*background-color: rgb(17, 17, 17);*/
background-color: ghostwhite;
}
.self {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
height: auto;
margin: auto;
text-align: center;
font-family: sans-serif;
background-color: ghostwhite;
float: left;
}
.title {
color: black;
font-family: sans-serif;
font-size: 18px;
}
ul.school {
list-style: none;
list-style-position: inside;
padding-left: 0;
margin-left: 0;
}
.degrees {
color: black;
font-family: sans-serif;
font-size: 14px;
}
button {
border: none;
outline: 0;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: black;
}
button:hover,
a:hover {
opacity: 0.7;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Steven Amerman">
<meta name="pragma" content="no-cache">
<link rel="stylesheet" type="text/css" href="..\css\index.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Steven Amerman</title>
</head>
<body>
<div class="self">
<img src="..\images\Steven.png" alt="Steven Amerman" style="width:100%">
<h1>Steven Amerman</h1>
<p class="title">Software Developer</p>
<ul class="school">
<li><img src="../images/wvuIcon.png" id="wvuIcon" alt="WVU" style="width:20px; height:20px"> West Virginia University</li>
</ul>
<p class="degrees">B.S. in Computer Science</p>
<i class="fa fa-linkedin-square"></i>
<button>Contact</button>
</div>
</body>
</html>
Cheers! So I've got this page, you know? And I'm practicing some of this html/css stuff in my spare time, it looks fun, and I've got this title on my front page and I want to add a subtitle under it, that is aligned to the left of the title, but I've got no idea and I can't find it anywhere on the web. I've got knackered, and I'm no longer in the mood. I marked the place where I want to slap the text.
<!DOCTYPE html>
<html lang="ro">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Anime-uri online, cu subtitrare în limba română." />
<meta name="author" content="Redd" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<title>Taciturn | 沈黙寡言</title>
<link rel="stylesheet" type="text/css" href="/assets/css/bss.css" />
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1>沈黙寡言</h1>
<a class="button" href="/portal.php">Portal</a>
</div>
</div>
</section>
</body>
#import url('https://fonts.googleapis.com/css?family=Raleway');
#import url('https://fonts.googleapis.com/css?family=Oswald');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background: url(/assets/img/biX0.jpg) no-repeat;
display: table;
top: 0;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
max-width: 500px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-family: 'Raleway', sans-serif;
color: #AE070A;
text-shadow: 0px 0px 300px #000;
font-size: 600%;
-webkit-text-stroke: 0.5px #FFF;
}
.button {
border-radius: 9px;
font-family: 'Oswald', sans-serif;
color: #036AB1;
font-size: 140%;
padding: 10px 20px;
border: solid #036AB1 3px;
text-transform: uppercase;
text-decoration: none;
}
.button:hover {
color: #AE070A;
border: solid #AE070A 3px;
}
/* Paragraph
p {
font-size: 160%;
line-height: 210%;
text-align: justify;
margin: 3%;
font-family: sans-serif;
}
Paragraph */
#media screen and (max-width: 768px) {
.content h1 {
font-size: 250%;
}
.button {
font-size: 110%;
padding: 7px 15px;
}
p {
font-size: 100%;
line-height: 160%;
}
}
align left in css will do, but you need put your sub title inside same code block.
Currently, I'm working on a basic navigation bar that changes the color of the text when clicked to go to a new page (So text on one page is a different color than text on another). I started the project ultimately using multiple CSS files to get the result I am looking for but it is horrendously inefficient. Obviously "if" statements don't exist in CSS but are there a way to call on an action if a certain page is loaded.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Project</title>
<link href="css/main.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="navigation">
<ul>
<li class="login">Login</li>
<li class="shop">Shop</li>
<li class="wname">Website Name</li>
<li class="contact">Contact</li>
<li class="about">About</li>
</ul>
</div>
</div>
</body>
</html>
CSS Code
* {
box-sizing: border-box;
}
.header {
text-align: center;
width: 100%;
}
li {
color: rgba(102, 102, 102, .5);
padding: 20px;
margin: 20px;
font-size: 16px;
font-family: "Open Sans Condensed", sans-serif ;
text-transform: uppercase;
display: inline-block;
}
.wname {
font-size: 32px;
color: #F68404;
font-weight: 200;
border-bottom: solid 1px;
border-bottom-color: #F68404;
}
li:active {
color: #F68404;
border-bottom: solid 1px;
border-bottom-color: #F68404;
}
li:hover {
color: #F68404;
font-weight: 300;
}
/*.jumbotron {
background: url("https://newevolutiondesigns.com/images/freebies/city-wallpaper-11.jpg") no-repeat top center;
background-size: cover;
height: 800px;
}
.main {
color: rgb(102, 102, 102);
font-family: "Open Sans Condensed", sans-serif;
text-align: center;
}
.btn-main {
font-size: 32px;
padding: 10px;
border: solid 1px #000;
background-color: aliceblue;
color: #000;
border-radius: 10%;
}
.btn-main:hover {
color: aliceblue;
background-color: #000;
border: solid 1px aliceblue;
}*/
/*Class Rules for all anchors/hyperlinks*/
a {
text-decoration: none;
color: inherit;
}
I would appreciate any help,
Jordan
Change this rule to add an active class as well:
li.active,
li:hover {
color: #F68404;
font-weight: 300;
}
And in your individual pages, use the class for the <li>. Let's say, in the Shop page, use this code:
<li class="shop active">Shop</li>
This is because, you aren't using anything that checks the location and does stuff. Also, you aren't using any back end applications, which generate dynamic header, based on the URL.
I am trying to add a button to my simple web page. The button itself looks great, but I am not quite sure how to position it. I would like for it to be centered and positioned below the main text. It currently sits off to the left side. Any idea on how to do so?
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="spiekermann.css">
<title></title>
<style>
#logo {
width: 100%;
text-align: center;
padding: 10em 0 0.2em 0;
font-family: lato;
}
#sub {
color: #fff;
font-family: lato;
text-align: center;
word-spacing: 5em;
}
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
text-align: center;
}
.button:hover {
background-color: #707488;
}
</style>
</head>
<body>
<div class id="logo">
<h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
<p>Designer Typographer Entrepreneur </p>
</div>
Learn More
</body>
</html>
Any help would be greatly appreciated. Thanks!
You don't necessarily need a container. Try the following:
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
text-align: center;
width: 62px;
}
Auto margins don't apply to inline-block elements.
You can add a container to the buttons and align them to center . see example below
also when you are trying to create a style . try to make them reusable as they can be. One advantage of this is you can write lesser css.
#logo {
width: 100%;
text-align: center;
padding: 10em 0 0.2em 0;
font-family: lato;
}
#sub {
color: #fff;
font-family: lato;
text-align: center;
word-spacing: 5em;
}
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
text-align: center;
}
.button:hover {
background-color: #707488;
}
.text-center {
text-align: center;
}
<div class id="logo">
<h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
<p>Designer Typographer Entrepreneur </p>
</div>
<div class="text-center">
Learn More
</div>
Try putting the Button in a <div> and make text-align:center
<div class="btnContainer ">
Learn More
</div>
<style>
.btnContainer {
text-align:center;
}
</style>
Without extra markup adding the following rules to .button will do the trick
left: 50%;
position: absolute;
transform: translate(-50%, 0);
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="spiekermann.css">
<title></title>
<style>
#logo {
width: 100%;
text-align: center;
padding: 10em 0 0.2em 0;
font-family: lato;
}
#sub {
color: #fff;
font-family: lato;
text-align: center;
word-spacing: 5em;
}
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
}
.button:hover {
background-color: #707488;
}
#button {
text-align: center;
}
</style>
</head>
<body>
<div class id="logo">
<h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
<p>Designer Typographer Entrepreneur </p>
</div>
<div class id="button">
Learn More
</div>
</body>
</html>
how do you think this way?