$('.title').click(function(){
$(this).addClass('titleact');
});
.title{
background:#eee;
cursor:pointer;
}
.titleact{
background:lightseagreen;
color:white;
}
.title input{
background:none;
border:none;
outline:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'>
<span>abc</span>
<input type='text' value='lorem'>
</div>
How to get text color white on input by clicking on title using css only?
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Change
"color:white;"
to
"color:white !important"
Or the better way would be to add
".titleact input{ color: white;}"
to your css.
TRY:
<script type="text/javascript">
$('.title').click(function(){
$(this).addClass('titleact');
$(this).find("*").css("color","#fff");
});
</script>
or
<script type="text/javascript">
$('.title').click(function(){
$(this).addClass("titleact");
$(this).find("*").addClass("titleact");
});
</script>
Related
When I decrease the height of the browser and the footer goes out of its area, the scroll does not appear but remains at the height of 20px all the way at the bottom? I found out this is becouse i have height:calc(100%-60px); but when it is set to the 100% the browser adds a scrollbar event even if it is not needed.Here is the code of the footer.
<footer>
<div>
Website crafted and designed by
</div>
</footer>
<style>
footer {
position: relative;
bottom:20px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
}
div {
padding: 0 var(--margin);
font-size: var(--font-size-base);
color: var(--color-gray);
}
div a {
color: #fff;
font-weight: 600;
</style>
and there is the example site when proble occours
---
import Layout from "../layouts/Layout.astro";
---
<Layout title="About ">
<main>
<h1>A lit bit about me</h1>
<p>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</p>
</main>
</Layout>
<style>
main {
padding: max(140px, 5%) var(--margin) 0 var(--margin);
height: 100%;
}
main h1 {
font-weight: 600;
font-size: var(--font-size-xxl);
}
main p {
padding-top: var(--margin);
font-size: var(--font-size-base);
}
</style>
And the layout conponent:
---
import "../styles/index.css";
import "../components/Navbar.astro";
import Navbar from "../components/Navbar.astro";
import Footer from "../components/Footer.astro";
export interface Props {
title: string;
}
const { title } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<Navbar />
<slot />
<Footer />
</body>
</html>
<style is:global>
:root {
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
--font-size-xl: clamp(2rem, 1.75vw + 1.35rem, 2.75rem);
--font-size-xxl: clamp(2.4rem, 2.25vw + 1.6rem, 5rem);
--color-text: #f3f3f3;
--color-dark: #111111;
--color-bg-logo: #b86202;
--color-gray: #d9d9d9;
--margin: clamp(25px, 7vw, 125px);
--margin-spacing: clamp(5px, 1vw + 0.5rem, 15px);
}
html,
body {
color: var(--color-text);
font-family: "Lato", sans-serif;
height: 100%;
width: 100%;
}
body {
background: url("/background.webp") center / cover no-repeat fixed;
}
</style>
I am facing problems with sticky navbar on my website.
I used the code of w3schools for this navbar. The problem is that sticky effect on nav menu does not work at all. Menu just disappers during scrolling.
Link to my website
Here is how nav menu looks like:
CSS:
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
You have to set the sticky code on the container to apply, not directly on the navbar. As sticky works only for siblings and not the whole page.
<div class="col-lg-12" style="
position: sticky;
z-index: 1;
top: 0;
">
<br>
<div id="navbar-complex" class="scrollmenu tab-content nav nav-tabs">
This way it works. after you have some z-index problem but this is different
#id1, #id2{
width: 50%;
float:left;
}
#id1{
background: lightgreen;
}
#id2{
background: lightblue;
}
#id1 nav{
position: sticky;
top:0;
z-index:1;
}
#id2 .navContainer{
position: sticky;
top:0;
z-index:1;
}
nav{
background: lightgray;
}
.content{
width: 100%;
height: 500vh;
}
<div id="id1">
<h1>What you are doing</h1>
<div class="navContainer">
<nav>I am supposed to be sticky</nav>
</div>
<div class="content">
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br> Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br> Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
</div>
</div>
<div id="id2">
<h1> What you want</h1>
<div class="navContainer">
<nav>I am sticky</nav>
</div>
<div class="content">
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br> Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br> Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
</div>
</div>
I am trying to add a background image to my website, I have set it so that the image will be in fullscreen, the problem is that I can't scroll down to see the rest of the page. Why?
<head>
<title>hemsida</title>
</head>
<body>
<img src="bilder/hemsidan.png"
style='position:fixed;top:0px;left:0px;width:100%;z-index:-1;'>
</body>
</html>
Use this :
After head and before body
<style>
body {
background-image: url("bilder/hemsidan.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</style>
Remove your tag img
You simply need to do this :
/* this will add background to your site and below content*/
body {
background-image: url(https://lorempixel.com/800/800/);
background-size: cover;
}
/* Then put the CSS related to your page*/
.content {
background: rgba(255,255,255,0.8);
margin: 30px;
padding:30px;
}
<div class="content">
<p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum v lorem ipsum lorem ipsum</p>
</div>
<div class="content">
<p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum v lorem ipsum lorem ipsum</p>
</div>
<div class="content">
<p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum v lorem ipsum lorem ipsum</p>
</div>
<div class="content">
<p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum v lorem ipsum lorem ipsum</p>
</div>
If you want to use the image as a background image then you should add it as such on the body tag. You can also user it as cover if you want it to fit the whole screen.
body {
background: url('bilder/hemsidan.png') 0 0 no-repeat transparent;
// background-size: cover;
}
Why not use a real background image? Do it like this:
body {
background: url(bilder/hemsidan.png) no-repeat 0 0;
background-size: cover;
}
The image in your case is fixed top left and overlays everything.
You can attach the image to the html body as an background image. The following html content is now in front of the background image.
<head>
<title>hemsida</title>
</head>
<body style='background: url("bilder/hemsidan.png") 0 0 no-repeat;'>
</body>
</html>
So I have a web page the content of which I would like to be focused in a center portion with a white background, some 800 pixels wide. The side of the page will be in blue.
The problem is that I don't seem to be able to extend this center div consistently down to the bottom of the page. (The page in question is here.)
<html>
<head>
</head>
<body bgcolor = "#1DAEEC">
<div class = "bodyDiv">
<div class = "accueilBanner">
Logo and navigation items
</div>
<div class = "belowBanner">
<div class = "searchBar">
Search bar content
</div>
<div class = "barredContent">
<div id = "rssNews">
News Feed
</div>
<div id = "descriptif">
Text description here - very long and extends down below the lowest item on the searchBar
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
The blue cuts off after the end of the content of the searchBar. I suspect the problem arises from the fact that the searchBar floats left and the barredContent is in absolute position. But there isn't much I can do to tinker the descriptif, since the rssNews floating off to the right and I need to continue having the descriptif wrap around as such :
____________ ___________________________________________________________
| Search Bar |Lorem ipsum lorem ipsum lorem ipsum lorem | RSS NEWS |
| C |ipsum lorem ipsum lorem ipsum lorem ipsum | |
| O |lorem ipsum lorem ipsum lorem ipsum lorem | |
| N |ipsum lorem ipsum lorem ipsum lorem ipsum | |
| T |lorem ipsum lorem ipsum lorem ipsum lorem | |
| E |ipsum lorem ipsum lorem ipsum lorem ipsum | |
| N |lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum|
| T |ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem|____________________<--the white doesn't extend below this point (and it should) and everything below has a blue background (which it shouldn't, apart from the sides)
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
Here's my CSS:
html {
max-width: 800px;
height:100%;
margin: 0 auto;
}
body {
height:100%;
font-family: "Lucida Grande", Tahoma;
font-size: 14px;
height:100%;
margin: 0px;
padding: 0px;
border: 0px;
}
.bodyDiv {
min-height:100%;
width:800px;
background-color:#FFFFFF;
margin:0px;
padding: 3px;
}
.accueilBanner {
max-width: 800px;
text-align: center;
position: relative;
}
.belowBanner {
position: relative;
max-width: 800px;
}
.searchBar {
float:left;
width:25%;
font-size: 13px;
}
.barredContent {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 73%;
}
#rssNews {
float:right;
width: 33%;
margin-left: 2%;
margin-bottom: 5px;
font-size: 10px;
}
#descriptif {
text-align:justify;
}
PICTURE:
Is it possible to fix this using only CSS? Or is JavaScript necessary? If so, then what script?
The problem is that .barredContent is absolute positioned.
If you change the style of .barredContent to
.barredContent {
float: right;
width: 73%;
}
it should work as you want.
You can then also remove the height and min-height style properties from your body tag and its first child element.
I hope to have helped you :)
Here is a quick example of how you could achieve this. What you need to do is to add this to your css:
html, body {
width: 100%;
height: 100%;
}
Once you have added this you can now set the height of your divs to 100% so to take the full height of the page.
Here is a FIDDLE show this in practice.
You could more easily solve this problem by putting #rssNews outside and next to .barredContent instead of inside, and adding static width to them, but, if you want a CSS-"hack", this is the only one I know of
.html, .body, .mydiv { height: 100%; }
I'm not sure if it works anymore, but if it does, remember that it used to force the scrollbar to appear because 100% height is more like 102% of what you can actually see in the browser, so you will have to reduce the height to about 98%, if not 97%. It depends on the browser.
Just want to ask a few questions about this example:
What is the best way to do this 3 column layout these days? Of course there were tables and now there are divs etc etc. What the latest greatest way to accomplish this? If it was totally up to me I'd have a container div, containing 3 other ones. Set to width: 33%; and display: inline;
Also, how does one get those vertical dividers? Again as far as I know you use that in a table and only display certain borders by which you get a vertical rule effect.
But what's the best way these days to get this effect? Having html5 and css3 in your toolbox..
Thanks in advance!
Try this
HTML
<div class="outer">
<div class="wrap">
<div class="sub">Lorem Ipsum</div>
<div class="sub">Lorem Ipsum </div>
<div class="sub">Lorem Ipsum </div>
</div>
</div>
CSS
.outer {
background: #734e91;
padding: 12px;
}
.wrap {
margin: 0 auto;
}
.sub {
padding: 12px;
width: 32%;
height: 150px;
background: #734e91;
display: table-cell;
border-right: solid #a175c4 1px;
}
.sub:last-child {
border: 0px;
}
DEMO UPDATED
jsFiddle demo: http://jsfiddle.net/yDXLp/3/
<style>
footer {
background-color: #eee;
margin: 10px auto;
}
footer h2 {
font-size: 1.5em;
font-weight: bold;
}
footer > div,
footer > .divider {
display: inline-block;
vertical-align: middle;
}
footer > div {
padding: 1%;
text-align: center;
width:30%;
}
footer > .divider {
font-style: normal;
height: 240px;
border: 1px solid #888;
-webkit-box-shadow: 1px 2px 1px #ccc;
box-shadow: 1px 2px 1px #ccc;
}
</style>
<footer>
<div>
<h2>Our Client</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<button>Read more</button>
</div>
<i class="divider"></i>
<div>
<h2>Pay Rates</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<button>Read more</button>
</div>
<i class="divider"></i>
<div>
<h2>About US</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<button>Read more</button>
</div>
</footer>
I recommend using box-sizing: border-box; (an alternative way to the standard css box model).
What does box-sizing: border-box; do? If you define the width of a div (e.g. 33%) and add borders and paddings it longer affects the calculated with of your div. It remains 33% of the parent with (33% - (borders + paddings)).
The standard box model adds them to the calculated with of 33% (33% + borders + paddings in our case).
HTML markup:
<div class="footer">
<div class="footer-item item1"></div>
<div class="footer-item item2"></div>
<div class="footer-item item3"></div>
</div>
CSS:
.footer {
box-sizing: border-box; /* will need vendor prefixes for webkit and mozilla */
}
.footer-item {
width: 33%;
float: left;
}
.footer-item + .footer-item {
border-left: 1px solid black;
}
Checkout Twitter Bootstrap(http://twitter.github.com/bootstrap/), Gumby Framework(http://gumbyframework.com/)
These frameworks may provide you readymade functionality for the horizontal bar. Else use borders. Set all borders except right as transparent in color
The css3 way of doing columns is using "column-*" family of properties
They are now supported by all major browsers and there should be no problems with them.
Personally I use these styles in my home site and they provide pretty flexible (perhaps with some small shortcomings) layout formatting.
The best way depends on what you want to achieve. How should the columns behave to resizing of the window etc.
If I was doing something like in the picture I would probably use a fixed width so I could have control of the line width for the text.
By using inline-block you can achieve columns that are collapsed and put under each other on a smaller screen (like a phone)
Try to figure aout the desired behavior first.
EDIT: Oops, I misread and confused horizontal with vertical ;-) I think the other answers explains his enough though.
Correct me if I'm wrong but I think that the css3 column property is for multiple columns for the same text body.