I would like to wrap covered the banner but was under tope.Unfortunately, tampering with zindex and positions did not help.I have no idea how to do it correctly.I hope I explained well what I mean
*{margin:0;padding: 0;border: 0;}
body{text-align: center;}
/*HEADER*/
.content{max-width:980px;margin: auto;height:100%; }
header{width:100%;height:100px;position:fixed;z-index: 5;}
#logo{font-size: 1.1em;font-family: 'Cabin', sans-serif;color:darkgray;float:left;text-transform: uppercase;font-weight: 700;display: inline}
#logo>img{margin-right:10px;margin-top:30px;}
nav{float:right;margin-top:50px;}
nav>ul>li{display:inline;list-style: none; }
nav>ul>li>a{margin-left:10px;text-decoration: none;font-size: 1.0em;font-family: 'Cabin', sans-serif;color:darkgray;text-transform: uppercase;}
.baner{width:100%;height:530px;background: url('baner.png') repeat-x;position:fixed;top:115px;}
.wrap{max-width:100%;margin: auto;top:800px;background: red; position:relative;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Cabin:700,400' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<div class="content">
<div id="logo"><img src="logo.png" alt="">Treehouse</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<div class="baner">
<h1></h1>
<h2></h2>
<section class="button"></section>
</div>
<div class="wrap">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, et, repellat. Dicta sunt, eligendi, iusto et eveniet eum enim accusamus dignissimos tempora. Nihil modi, ex veritatis, maxime sequi unde possimus?</p>
</div>
<footer>
</footer>
</body>
</html>
Can you help me?
header must always be visible , while the banner is hiding under another divem in this case the " wrapper"
enter image description here
Related
I have an assessment from my professor and i need to create a website the same way my professor made it. i am almost done but the last thing that i couldnt figure out how to do is the boxed review from my professor i tried it but it was not as i hoped to be . everything is working fine only the boxed review doesnt work and i dont know how to fix it. Can someone help me please?
my code:
<!--
Assignment 12 (HTML Semantics ();
-->
<!-- Make changes to the code below -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Assignment-12</title>
<style>
.boxed {
width: 500px;
height: 100px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="boxed">
<aside><p></p></aside>
<h2>Reviews</h2>
<article>
<h3>Would not recommend</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto,
accusantium!
</p>
<p><small>1/5 stars</small></p>
</article>
<article>
<h3>These cats are crazy</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod,
aspernatur!
</p>
<p><small>2/5</small></p>
</article>
<article>
<h3>Awful service</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste, neque!
</p>
<p><small>1/5</small></p>
</article>
</div>
<header>
<nav>
<ul>
<li>
Home
<ul>
<li>Food</li>
<li>Toys</li>
</ul>
</li>
<li>Dogs</li>
<li>
Cats
<ul>
<li>Food</li>
<li>Toys</li>
<li>Adopt</li>
</ul>
</li>
<li>Birds</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<h1>Welcome to the petstore</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis
laborum ipsa sint reprehenderit amet expedita architecto itaque
consequuntur quas laudantium?
</p>
</main>
<hr />
<nav>
<ul>
<li>Home</li>
<li>Cats</li>
<li>Adopt</li>
</ul>
</nav>
<h2>Cat Adoption</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error beatae at
tenetur quo, non ratione nulla! Voluptates repudiandae ab hic.
</p>
<img src="/images/cats.png" alt="Images of Cats" />
<p>
Doordeweeks voor 22:00 besteld, morgen in huis. Weekend besteld, maandag
in huis.
</p>
</body>
</html>
I made a few changes on the style.
For better uses, you can look here
<style>
.boxed {
width: 500px;
height: 100px;
border: 1px solid #000;
z-index: 100;
background-color: white;
position: absolute;
top: 0%;
right: 40%;
}
</style>
Also, the div you give boxes class does not include all the elements and it provides a better view if you fix it.
Here I wanted to make a website template through BOOTSTRAP and CSS.But in my code some bootstrap class is not working like lead,font-weight,color,bg-color etc.If I use some bootstrap text-color in a section than when I use some other color in css in the same section ,I doesn't work. I want to use same font-family over every text.But if I use font family,than lead class doesn't work.In the same way,bootstrap font-weight-bold/bolder is working but light/lighter is not working not even in CSS,What can I do in this situation?
Here is my code:
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--ALL LINK-->
<link rel="stylesheet" href="./bootstrap.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="shortcut icon" href="./img/ia_100000000.png" type="image/x-icon">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<title>AppAmp Health Tracker Demo</title>
</head>
<body>
<div class="section bg-light py-5">
<div class="container">
<div class="row">
<div class="col h1">
Our Team and History
</div>
</div>
<div class="row py-5">
<div class="col-xl-6 lead section1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis perspiciatis vero accusantium excepturi aperiam eius sit quis nobis cupiditate voluptatem tempora a odio, ad, officiis ex harum saepe fuga at modi quibusdam voluptas voluptatum!</div>
<div class="col-xl-6 lead font-weight-lighter">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis perspiciatis vero accusantium excepturi aperiam eius sit quis nobis cupiditate voluptatem tempora a odio, ad, officiis ex harum saepe fuga at modi quibusdam voluptas voluptatum!</div>
</div>
</div>
</div>
</body>
</html>
CSS
p,span,h1,h2,h3,h4,h5,a,blockquote,i,button,li,div{
font-family: 'Work Sans', sans-serif;
}
.section1{
font-weight:400;
}
If your font family does not support light or lighter font weights, it will not render light text. It is about font family. You should add supported font weights to link
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght#200;300;400;500;600;700&display=swap" rel="stylesheet">
On the other hand, i tried the following text classes from bootstrap and it is working.
<div class="col-xl-6 lead section1 text-danger">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Debitis perspiciatis vero <span class="text-warning">accusantium</span>
excepturi aperiam eius sit quis nobis cupiditate voluptatem tempora a
odio, ad, officiis ex harum saepe fuga at modi quibusdam voluptas
voluptatum!
</div>
And it is a working pen: https://codepen.io/umutcakirbm/pen/KKaqwVp
EDIT:
Lead class has this properties
.lead {
font-size: 1.25rem;
font-weight: 300; // it will not work
}
If you give extra font-weight-lighter/bolder/light etc. , it will override it because it has !important attribute.
And also text-* classes has !important attribute so you should add !important at your own css to override text class. Like this;
<span class="text-warning" style="color: #000 !important;">accusantium</span>
I was working today to use custom CSS with Bootstrap and some of the CSS properties do work but some of them were not working correctly or Not Working. After juggling some time, I use !important at the end of the property in CSS, It Worked for me.
The !important rule in CSS is used to add more importance to a property/value than normal.
In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!
Wants to know more about !important? Click Here to See on W3School.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Best Regards, Ahmed Iqbal B.
I have written style for my div element and div element at body section. When the code runs I see two div element at screen. Even when the body section is empty, the div seems at screen. I write on Visual Code. Please help me..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 400px;
height: 400px;
border: 1px solid black;
text-align: center;
}
p {
letter-spacing: 1px;
}
span {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<h1>article 1</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi sit, omnis voluptatibus quasi exercitationem cupiditate reprehenderit quidem distinctio. Omnis <span>temporibus</span> necessitatibus illo deleniti quia reprehenderit aspernatur molestias
rerum veniam quam!
</p>
</div>
</body>
</html>
It might be a cache related issue. Press "ctrl + shift + i", right click on the reload icon at the top left corner and select "Empty cache and hard reload". This MIGHT solve the issue.
I need to style inner span element which is inside of contenteditable block by focus on that inner span, it has to be highlighted when is focused. Is that even possible somehow?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="block" contenteditable="true" data-id="123">
<p>
Lorem ipsum dolor sit amet <span>consectetur</span> adipisicing elit. Non facere
atque aspernatur, pariatur architecto inventore explicabo eligendi
<span>maxime</span> laudantium corrupti esse ab nostrum,
at quis <span>quas</span> temporibus eum? Asperiores, iste.
</p>
</div>
<style>
.block {
outline: none;
}
.block span {
background-color: antiquewhite;
}
.block span:focus {
background-color: red;
}
</style>
</body>
</html>
In order to highlight just the span element when you focus it try this in your stylesheet :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="block" contenteditable="true" data-id="123">
<p>
Lorem ipsum dolor sit amet <span>consectetur</span> adipisicing elit. Non facere
atque aspernatur, pariatur architecto inventore explicabo eligendi
<span>maxime</span> laudantium corrupti esse ab nostrum,
at quis <span>quas</span> temporibus eum? Asperiores, iste.
</p>
</div>
<style>
.block {
outline: none;
}
.block span {
background-color: antiquewhite;
}
[contenteditable="true"] span:active {
background-color: red;
}
</style>
</body>
</html>
I added a simple script so the element keeps being red when the mouse leaves. Have a look :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="block" contenteditable="true" data-id="123">
<p>
Lorem ipsum dolor sit amet <span>consectetur</span> adipisicing elit. Non facere atque aspernatur, pariatur architecto inventore explicabo eligendi
<span>maxime</span> laudantium corrupti esse ab nostrum, at quis <span>quas</span> temporibus eum? Asperiores, iste.
</p>
</div>
<style>
.block {
outline: none;
}
.block span {
background-color: antiquewhite;
}
</style>
<script>
let selectedElement = null;
const setFocus = e => {
if (selectedElement)
selectedElement.style.backgroundColor = 'antiquewhite';
selectedElement = window.getSelection().focusNode && window.getSelection().focusNode.parentNode;
if (selectedElement && selectedElement.tagName == 'SPAN')
selectedElement.style.backgroundColor = 'red';
};
document.onkeyup = setFocus;
document.onmouseup = setFocus;
</script>
</body>
</html>
Ok, as you requested no JavaScript and I already invested a lot of time in this question, this is my last answer. I know it is not entirely correct but it is not entirely wrong either.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="block" data-id="123">
<p contenteditable="true">
Lorem ipsum dolor sit amet </p><span contenteditable="true">consectetur</span>
<p contenteditable="true"> adipisicing elit. Non facere atque aspernatur, pariatur architecto inventore explicabo eligendi
</p><span contenteditable="true">maxime</span>
<p contenteditable="true"> laudantium corrupti esse ab nostrum, at quis </p><span contenteditable="true">quas</span>
<p contenteditable="true"> temporibus eum? Asperiores, iste.
</p>
</div>
<style>
.block {
outline: none;
}
.block span {
background-color: antiquewhite;
}
.block span:focus {
background-color: red;
}
p,
span {
display: inline;
}
</style>
</body>
</html>
Similar case here:
CSS: :focus of elements within contenteditable
You can use tabindex in span tags. that will solve your problem.
you can read more about tabindex here enter link description here
and focus will work when you use your keyboard. in this case, use your tab to get focus in span tags.
body {
font-size: 1.2rem;
line-height: 2rem;
}
.block {
outline: none;
}
.block span {
background-color: antiquewhite;
}
.block span:focus,.block span:hover {
background-color: red;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="block" contenteditable="true" data-id="123">
<p>
Lorem ipsum dolor sit amet <span tabindex=0>consectetur</span> adipisicing elit.
Non facere atque aspernatur, pariatur architecto inventore explicabo
eligendi <span tabindex=0>maxime</span> laudantium corrupti esse ab nostrum, at
quis <span tabindex=0>quas</span> temporibus eum? Asperiores, iste.
</p>
</div>
</body>
</html>
when you make the screen smaller than 768px the table is not responsive, neither the navigation bar and footer is at the page bottom.
Is it okay if we only add span class(col-*) to one of the td in one of the rows of table.
.clearfix::after {
content: "";
display: table;
clear: both;
}
/*section heading style*/
section h1 {
display: none;
}
/*aside styles*/
aside .panel-default>.panel-heading {
color: #7386D5;
margin: 0;
}
.pager li a {
border-radius: 3px;
}
.nav-stacked li a {
margin-bottom: 15px;
}
/*footer Styles*/
footer {
background: #efefef;
height: 49px;
line-height: 49px;
border: 1px solid #e3e3e3;
}
footer p {
margin: 0;
text-align: center;
color: #555;
}
/*main section styles*/
main {
margin-bottom: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Blog</title>
<!--Link to StyleSheet-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">My Blog</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span> Home</li>
<li><span class="glyphicon glyphicon-paperclip"></span> About</li>
<li><span class="glyphicon glyphicon-envelope"></span> Contact</li>
<li><span class="glyphicon glyphicon-book"></span> Archives</li>
</ul>
</div>
</nav>
</header>
<section>
<h1>Blog Posts</h1>
<div class="container">
<div class="row">
<main class="col-md-9">
<!-- Responsive Bootstrap Table -->
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Biography</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
<td>johncarter#mail.com</td>
<td class="col-md-6 col-xs-3 col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda atque delectus quis itaque cumque neque iste, ullam dolorem quas. Facere voluptate architecto dolorum totam quo doloribus animi velit molestias.</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker#mail.com</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas soluta officiis non, adipisci quaerat doloremque molestiae delectus aspernatur sequi consectetur architecto quas, error magnam nemo, facere voluptatem neque illum repellat!</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo#mail.com</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem modi dignissimos blanditiis doloribus porro labore voluptatem voluptate ipsa nesciunt, repudiandae officiis tempora, veniam, facilis unde, incidunt ipsum beatae! Quae, nulla!</td>
</tr>
<tr>
<td>4</td>
<td>John</td>
<td>Doe</td>
<td>johndoe#mail.com</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ratione cupiditate architecto assumenda esse accusantium vitae, delectus necessitatibus ea itaque eveniet, totam alias, fuga ut! Saepe culpa fugit, optio sit?</td>
</tr>
</tbody>
</table>
</div>
</main>
<!-- Blog post section ends here -->
<aside class="col-md-3">
<nav class="panel panel-default">
<h3 class="panel-heading">Blog Sidebar</h3>
<ul class="nav nav-pills nav-stacked panel-body">
<li>Portfolio</li>
<li>FAQ</li>
<li>Privacy Policy</li>
<li>Archives <span class="caret"></span>
<ul id="collapse-target" class="collapse nav nav-pills nav-stacked">
<li>January <span class="badge">2</span></li>
<li>February <span class="badge">42</span></li>
<li>March <span class="badge">23</span></li>
<li>April <span class="badge">1</span></li>
<li>May <span class="badge">12</span></li>
<li>June <span class="badge">43</span></li>
<li>July <span class="badge">32</span></li>
<li>August <span class="badge">122</span></li>
<li>September <span class="badge">76</span></li>
<li>October <span class="badge">76</span></li>
<li>November <span class="badge">56</span></li>
<li>December <span class="badge">98</span></li>
</ul>
</li>
</ul>
</nav>
</aside>
</div>
</div>
</section>
<footer>
<p><small><span class="glyphicon glyphicon-copyright-mark"></span> Copyright 2017 programmers inc.</small></p>
</footer>
<!--Link to Javascript-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../javascript/scripts1.js"></script>
</body>
</html>
According to the documentation, this is expected behavior.
Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
The table will scroll horizontally on small devices, not collapse in any way.
Regarding your footer, it is at the bottom. It's just that there isn't enough content on your page to push it all the way down to the bottom of the screen. In order to ensure the footer is always at the bottom, take a look at Bootstrap's Sticky Footer example. A quick Google Search for that should lead you to several other solutions as well. Pick any one.
If you want to hide or show certain elements based on the screen size, take a look at the documentation for Responsive Utilities. For example, adding the class .hidden-md to certain rows should hide them on medium sized devices. The class .visible-lg will make an element visible only on large screens.