I am currently making my study project page. I want it to be responsive as it is a part of it.
However, when the screen size is to small words in head, section and body are overlapping. I can't make the words go to another line if there is not enough space for all of them (for whole sentence). I've tried using word-break, but it didn't work. Does anyone have idea what can I do to change it?
<html lang="pl-PL">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="css.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="My hobby page.">
<meta name="keywords" content="books, hobby">
<meta name="author" content="Bogna Gondek">
<link rel="stylesheet" href="css.css">
<script type="text/javascript" src="js.js"></script>
<title>Książki Moje Hobby | Witamy</title>
</head>
<body>
<header>
<h1>Książki Moje Hobby</h1>
<nav>
<ul>
<li><a class="aktywny" href="strona_główna.html">Strona Główna</a></li>
<li>Kontakt</li>
</ul>
</nav>
</header>
<div id="wnętrze">
<section>
<h2>„Bajki są więcej niż prawdą: nie dlatego, że mówią nam, że smoki istnieją, ale dlatego, że mówią, że smoki można pokonać.”</h2>
<h3>― Neil Gaiman, „Coraline"</h3>
</section>
</div>
<footer>
Książki Moje Hobby, Copywright © 2019
</footer>
</body>
</html>
body
{
font-family: Times, Courier, Verdana, Comic, Arial;
font-size: 20px;
line-height: 2px;
padding:0;
margin: 0;
background-color: white;
}
header
{
width: 100%;
margin: auto;
overflow: hidden;
padding-top: 20px;
min-height: 70px;
background-color: #404040;
}
header h1
{
margin-left: 20px;
float:left;
color: #f2f2f2;
}
header nav
{
float:right;
margin-top:10px;
margin-right: 20px;
margin-bottom: 20px;
}
header li
{
float:left;
display:inline;
padding: 0 20px 0 20px;
}
header a
{
text-decoration: none;
color: #f2f2f2;
font-size: 22px;
}
header a:hover
{
font-weight: bold;
}
header .aktywny
{
color: #b3b3b3;
}
div#wnętrze
{
max-width:100%;
height: 100%;
margin: auto;
overflow: hidden;
background:url("obrazki/glownyobrazek.jpg") no-repeat 0;
color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
section
{
background-color: red;
max-width: 80%;
word-wrap: break-all !important;
}
footer
{
padding: 20px;
margin-top: auto;
background-color: #404040;
text-align: center;
color: #f2f2f2;
}
The issue is the line-height you have set on the body.
body
{
font-family: Times, Courier, Verdana, Comic, Arial;
font-size: 20px;
line-height: 1;
padding:0;
margin: 0;
background-color: white;
}
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>
I've been working on my website the entire day but now I suddenly noticed that in mobile format my buttons (the logo and the menu button they are called #logo and #menu-icon) don't work anymore. The used to work some time ago. And in the desktop (over 768 pixel wide) version they all work fine.
/*--------STYLE.CSS--------*/
#import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:300,500,700');
* {
margin: 0;
padding: 0;
border: 0;
}
html {
height: 100%;
}
body {
height: 100%;
background: #424949;
color: #f5f5f5;
font-family: 'Alegreya Sans', sans-serif;
margin: 0;
}
h2 {
font-size: 250%;
font-weight: 700;
text-align: center;
padding-top: 2%;
}
p {
font-size: 160%;
font-weight: 500;
line-height: 150%;
padding: 3%;
text-indent: 2%;
text-align: justify;
}
img {
max-width: 100%;
height: auto;
width: auto;
margin-bottom: -4px;
}
header {
background-color: #1a1a1a;
width: 100%;
height: 86px;
}
#header-inner {
max-width: 1200px;
margin: 0 auto;
}
#logo {
margin: -5px 0 -5px 20px;
padding: 0 10px 0 10px;/*top right bottom left*/
float: left;
width: 96px;
height: 96px;
background: url(img/logohead96x.png) no-repeat center; /*org img/logo128x.png*/
}
nav {
float: right;
padding: 4px 20px 0 0;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(img/nav.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul {
list-style-type: none;
margin-right: 10px;
}
nav ul li {
font-family: 'Alegreya Sans', sans-serif;
font-size: 150%;
display: inline-block;
float: left;
margin-top: 35px;
}
nav ul li a {
color:#f5f5f5;
text-decoration: none;
padding: 25px;
}
nav ul li a:hover {
color: #707b7c;
}
.current {
color: #707b7c;
}
.container {
overflow: hidden;
width: 100%;
height: auto; /*calc(100% - 86px - 29px)*/
background-color: #1a1a1a;
}
.container-inner {
height: 100%;
max-width: 1100px;
margin: 0 auto;
}
.container img {
max-height: 100%;
min-width: 100%;
height: 100%;
}
.container video {
max-height: 100%;
min-width: 100%;
height: 100%;
}
footer {
background: #1a1a1a;
width: 100%;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
}
.social i {
font-size: 460%;
margin: 1%;
padding: 5% 5% 5% 4%;
color: #707b7c
}
.social i:hover {
color: #f5f5f5;
}
footer.second {
background-color: #424949;
margin: 0;
}
footer.second p {
margin: 4px 0 0 0; /*top right bottom left*/
padding: 0 0 0 0;
text-align: left;
font-size: 130%;
font-family: 'Alegreya Sans', sans-serif;
}
/*--------MEDIA--------*/
#media screen and (max-width: 768px) {
h2 {
font-size: 150%;
}
p {
font-size: 120%;
}
header {
position: absolute;
}
#logo {
margin: -5px 5px -5px 5px;
background: url(img/logohead64x.png) no-repeat center;
}
#menu-icon {
display: inline-block;
}
nav {
padding: 25px;
}
nav ul, nav:active ul {
display: none;
z-index: 1;
position: absolute;
padding: 20px;
background: #1a1a1a;
right: 20px;
top: 60px;
border: 3px solid #ffffff;
border-radius: 10px 0 10px 10px;
width: 40%;
}
nav:hover ul {
display: block;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0 10px 0;
}
.banner {
padding-top: 86px;
}
.social i {
font-size: 180%;
}
}
<!-- Home page of slothy.cloud -->
<!DOCTYPE html>
<html>
<!--
My small cozy website.
© veryslothysloth 2018
-->
<head>
<!-- Links -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#2e86c1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Open Graph Protocol -->
<meta property="og:url" content="://slothy.cloud" />
<meta property="og:type" content="website" />
<meta property="og:title" content="slothy.cloud | by veryslothysloth" />
<meta property="og:description" content="A small slothy website." />
<meta property="og:image" content="img/slothyicon.png" />
<meta property="og:image:secure_url" content="img/slothyicon.png" />
<!-- Twitter card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="slothy.cloud |by veryslothysloth">
<meta name="twitter:description" content="A small slothy website.">
<meta name="twitter:image" content="img/slothyicon.png">
<meta name="twitter:image:src" content="img/slothyicon.png">
<!-- Data -->
<title>slothy.cloud | by veryslothysloth</title>
<meta charset="utf-8">
<meta name="description" content="A small slothy website.">
<meta name="keywords" content="sloth,slothy,veryslothysloth,file,upload,hosting,lolisafe">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#aed6f1">
</head>
<body>
<header>
<!-- Header -->
<div id="header-inner">
<nav>
<ul>
<li>Home</li>
<li>Cloud</li>
<li>Stat</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<!-- Main Body -->
<div class="container">
<video loop>
<source src="img/alley.mp4" type="video/mp4">
</video>
<!--<div class="container-inner">
<p>Test Text</p>
</div>-->
</div>
<!-- Footer -->
<footer>
<ul class="social">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-steam"></i></li>
<li><i class="fa fa-at"></i></li>
</ul>
</footer>
<!-- Second Footer -->
<footer class="second">
<p>© veryslothysloth</p>
</footer>
</body>
</html>
This may be a completely stupid mistake or small typo but I'm quite tired and can't seem to figure this out myself with my really limited coding skills... I'm quite new to all this. Thanks in advance!
The div .container lies over the nav and menu-icon. So the hover doesnt works.
add a z-index to the header to solve it
header {
z-index: 99;
}
I'm not 100% sure what "they don't work" means, but it does stand out that one of the links is to index.html and the other is to #. The first will reload the current page (assuming the HTML you provided is index.html, the second will scroll the current page to the top. What behavior are you seeing, and what behavior are you looking for?
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.
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?