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>
Related
I would like to align the text in my navigation menu respective to the logo on the left, so it is centered vertically. Right now, it is aligned to the top, which I don't want. I tried using align-items center for the text in the navigation menu, but wasn't able to work.
Navigation Picture
body{
margin:0;
padding:0;
}
.header{
background-color: salmon;
height: 100px;
}
.header img {
float: left;
width: auto;
height: 100%;
}
.header h1 {
margin-top: 0px;
padding-top:10px;
left: 10px;
}
ul li{
display: inline;
font-weight: bold;
align-items: center;
}
li a{
align-items: center;
}
<!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>Document</title>
<link rel = "stylesheet" href="Logo - Copy.css">
</head>
<body>
<div class="header">
<img src="Small_scream.png">
<ul>
<li>
<a>My website name</a>
<a>Home</a>
<a>Fine</a>
</li>
</ul>
</div>
</body>
</html>
The generic way to vertically align something is with vertical-align: middle , though that doesnt work if the parent/container doesn't already have reason to be taller than the thing you're trying to align.
A generally easier way to design this layout would be using flexbox , then you can use things such as align-items.
If you're interested in more about that, then here is a good place to start.
Please see below an example using flexbox.
body {
margin: 0;
padding: 0;
}
.header {
background-color: salmon;
height: 100px;
display: flex;
align-items: center;
gap: 10px;
}
<div class="header">
<img src="https://via.placeholder.com/100">
<a>My website name</a>
<a>Home</a>
<a>Fine</a>
</div>
Here is solution for your query.
You will have to add CSS in header class instead of ul li & li a.
.header{
background-color: salmon;
height: 100px;
display: flex;
align-items: center;
}
<!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>Document</title>
<link rel = "stylesheet" href="Logo - Copy.css">
</head>
<body>
<div class="header">
<img src="Small_scream.png">
<ul>
<li>
<a>My website name</a>
<a>Home</a>
<a>Fine</a>
</li>
</ul>
</div>
</body>
</html>
i cant style my hr tag between h1 and button,if i use a older version of bootstrap that is working,but with 5.0.0 isnt.
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<h1><strong>THE BIGGEST STARTUP EVENT OF THE YEAR</strong></h1>
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
</div>
</div>
</body>
</html>
this is the style sheet
body,
html {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed;
background-size: cover;
}
}
hr{
border-color: #F05F44;
border-width: 3px;
max-width: 65px;
You need to override the bootstrap style. That can be done by using !important on the style.
body,
html {
background: url(header.jpg) no-repeat center center fixed;
background-size: cover;
font-family: 'Montserrat', sans-serif;
height: 100vh;
width: 100vw;
}
hr {
border-color: #F05F44 !important;
height: 3px !important;
max-width: 65px !important;
}
<link href="//fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="//cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<div class="container">
<div class="row">
<h1><strong>THE BIGGEST STARTUP EVENT OF THE YEAR</strong></h1>
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
</div>
</div>
do hr.<className> for edit any hr tag
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Hello, world!</title>
</head>
<style>
body,
html {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed;
background-size: cover;
}
hr.new1 {
border-top: 1px solid red;
}
/* Dashed red border */
hr.new2 {
border-top: 1px dashed red;
}
/* Dotted red border */
hr.new3 {
border-top: 1px dotted red;
}
</style>
<body>
<div class="row">
<h1><strong>THE BIGGEST STARTUP EVENT OF THE YEAR</strong></h1>
<hr class="new1">
<hr class="new2">
<hr class="new3">
<button class="btn btn-primary btn-xl">Find out more</button>
</div>
</body>
</html>
I am currently using the latest version of bootstrap and I have created a landing page. However, the success button is not clickable on 13inch/15inch laptops and desktops which is weird.
The URL is here.
<!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">
<meta name="description" content="Loot.es - First CSGO SMS Service in the World. We send out notifications of matches live to our users for major Counter Strike Global Offensive tournaments. ">
<meta name="author" content="nivekyo">
<link rel="icon" href="img/favicon.ico">
<title>Loot.es - CSGO SMS Service</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" >
<link href="css/landing.css" rel="stylesheet" >
</head>
<body>
<div class="container">
<h1 class="title">The notification we've all been waiting for.</h1>
<p class="lead" style="font-size: 1.2em;">Get notified when a team wins at all major Counter-Strike tournaments.</p>
<div class="left"><img class="bubble" src="img/speech.png"/></div>
<p class="join"><a class="btn btn-success btn-lg" role="button" href="https://steamcommunity.com/groups/lootes"><i class="fa fa-steam-square"></i> Join now, it's free.</a></p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">
Privacy Policy | #nivekyo
</p>
</div>
</footer>
</body>
</html>
CSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
#media (min-width: 1200px) {
.container {
width: 560px;
padding-top: 200px;
}
}
html {
position: relative;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
padding-top: 50px;
}
.container {
text-align: center;
}
.title {
font-family: 'Open Sans Condensed', sans-serif;
}
.join {
padding-top: 30px;
}
a:hover {
text-decoration: none;
}
img.bubble {
padding-top: 20px;
width: auto;
height: 180px;
}
.left {
text-align: left;
}
With much thanks!
It is not because of 15" Screen, but it is because of the padding on the footer and .container. Solution:
footer, footer .container {padding-top: 0;}
Adding the above code to landing.css works.
i am not able to fix my footer at the bottom of the page.when the data is large in,the footer is showing on the data which i need to put on bottom of the page.below is my code please tell me what i am doing wrong.
<!doctype html>
<html class = "no-js" ng-app = "PreSales-Huddle" lang = "en">
<head>
<meta charset = "utf-8">
<title ng-bind = "title"> </title>
<meta name = "description" content = "">
<meta name = "viewport" content = "width = device-width">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel = "stylesheet" href = "styles/main.css">
<link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<head profile = "http://www.w3.org/2005/10/profile">
<meta name="google-signin-scope" content="profile email">
<style>
body {
background-size: cover;
background-position: top center;
}
.footer {
text-align: center;
width: inherit;
color: #747474;
border-top: 1px solid #e5e5e5;
position: static;
bottom: 0;
margin-top: 75%;
padding-right: 0%;
font-family: calibri;
}
</style>
</head>
<body>
<div class = "container" >
<header class = "header">
</header>
<div class="title" id="titleText" disabled>ABC</div>
<main class = "main" id = "main">
<div ng-view = ""></div>
</main>
<footer class = "footer" id="footer">
<p><span style="background-color:whitesmoke">footer. </span></p>
</footer>
</div>
Write position: fixed, bottom: 0 for class footer inside css.
.footer {
position: fixed;
bottom: 0;
}
<!doctype html>
<html class="no-js" ng-app="PreSales-Huddle" lang="en">
<head>
<meta charset="utf-8">
<title ng-bind="title"> </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css />
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css>
<meta name="google-signin-scope" content="profile email">
<style>
body {
background-size: cover;
background-position: top center;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
width: inherit;
color: #747474;
border-top: 1px solid #e5e5e5;
position: static;
bottom: 0;
margin-top: 75%;
padding-right: 0%;
font-family: calibri;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
</header>
<div class="title" id="titleText" disabled>ABC</div>
<main class="main" id ="main">
<div ng-view=""></div>
</main>
<footer class="footer" id="footer">
<p><span style="background-color:whitesmoke">footer. </span></p>
</footer>
</div>
I cleaned up your HTML and added this to your CSS:
position: fixed;
bottom: 0;
width: 100%;
footer {
position: absolute;
bottom: 0;
}
I am new to the world of XHTML and CSS. I put together a page that requires 3 column layout. The code gives me the desired effect across Internet Explorer, Firefox and Google Chrome however am unsure if it is the correct way to code.
I have posted the code for it before it worked and after applying the necessary changes to make it work.
Questions
Is this the correct way to code it?
Is it the best way to code?
What issues can I run into with the code?
Before it worked
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample page</title>
<link rel="stylsheet" type="text/css" href="web.css" media="all" />
<style type="text/css" media="all">
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: arial, verdana, sans-serif;
font-size: medium;
font-weight: normal;
font-style: none;
text-decoration: none;
}
img#bg {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
border: 1px solid #eeeeee;
width: 960px;
margin: 0px auto;
position: relative;
z-index: 1;
}
#header {
background-color: orange;
}
#container {
overflow: auto;
}
#leftnav {
background-color: yellow;
float: left;
width: 100px;
}
#rightnav {
background-color: blue;
float: right;
}
#rightnav p {
border: 1px solid #000000;
font-size: small;
font-style: italic;
}
#content {
background-color: gray;
}
#footer {
clear: both;
background-color: green;
}
ul {
margin: 0px;
padding: 5px;
}
ul li {
list-style-type: none;
display: inline;
}
</style>
</head>
<body>
<div>
<img src="images/background.jpg" alt="background" id="bg" />
</div>
<div id="wrapper">
<div id="header">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<div id="container">
<div id="leftnav">
<ol>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ol>
</div>
<div id="rightnav">
<p>Test</p>
</div>
<div id="content">
content
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
After it worked
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample page</title>
<link rel="stylsheet" type="text/css" href="web.css" media="all" />
<style type="text/css" media="all">
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: arial, verdana, sans-serif;
font-size: medium;
font-weight: normal;
font-style: none;
text-decoration: none;
}
img#bg {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
border: 1px solid #eeeeee;
width: 960px;
margin: 0px auto;
position: relative;
z-index: 1;
}
#header {
background-color: orange;
}
#container {
overflow: hidden;
}
#leftnav {
background-color: yellow;
float: left;
width: 100px;
}
#rightnav {
background-color: blue;
float: right;
width: 100px;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
#rightnav p {
border: 1px solid #000000;
font-size: small;
font-style: italic;
}
#content {
background-color: gray;
}
#footer {
clear: both;
background-color: green;
}
ul {
margin: 0px;
padding: 5px;
}
ul li {
list-style-type: none;
display: inline;
}
</style>
</head>
<body>
<div>
<img src="images/background.jpg" alt="background" id="bg" />
</div>
<div id="wrapper">
<div id="header">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<div id="container">
<div id="leftnav">
<ol>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ol>
</div>
<div id="rightnav">
<p>Test</p>
</div>
<div id="content">
content
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
The code is pretty much ok - few things you may do:
1.) You don't need to define properties that are set by default in the browser: font-weight: normal; is already the default browser value for body so you can omit that if you are not changing it's look.
2.) margin: 0px; does not need the px with it - do margin: 0;
3.) Name ids and classes with content-related names - not with layout related: #rightnav might be on the right side in your current css layout but one day you may change your mind and put it on left side and the id kinda looses some relevance. #subnav might be a better choice.
4.) Don't really understand what you wanted to acomplish with this bit of code (since i don't have time to setup a live site example):
padding-bottom: 1000px;
margin-bottom: -1000px;
but looks bit ugly altough it is perfectly valid and can do the job.
5.) <img src="images/background.jpg" alt="background" id="bg" /> - If the image is a background and not content related use the css property background-image to apply it.
I won't comment on meta tags since I don't have enough knowledge about it.
A few comments with regards to meta tags...
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
These meta tags are useless.
<meta name="keywords" content="" />
The meta keywords used to matter. No search engines bother with it anymore as it's always abused.
<meta name="description" content="" />
And this meta tag is... well... not useless, but almost. The content within the page should all the describing for you.