How can I use multiple colors for my website?
I am using gradient colors for the header, it looks like ![this][1] I want to also show the card columns at the middle of the site, and the background should go white, how can I accomplish that?
I tried to do style a div
.testdiv {
background: #ffffff;
}
But that only changes the div background, which looks like ![this][2]
Edit: My full code for the issue.
<section class="bottom-articles">
<article class="bottom-article">
<img class="article-image" src="/images/layer-2.jpg">
<div class="article-text-wrapper">
<h3 class="article-title">Issue 1</h3>
<div class="article-description">
</div>
</div>
</article>
And for styling, I came up with something like
.bottom-article {
padding-top: 40px;
float:right;
margin-right: 300px;
padding-right: 80%;
}
<!DOCTYPE html>
<html>
<head>
<style>
body{background-color:orange;}
#p1 {background-color:transparent;}
#p2 {background-color:#ffffff;}
</style>
</head>
<body>
<p>HEX colors:</p>
<p id="p1">transparent</p>
<p id="p2">white</p>
</body>
</html>
try doing
.testdiv {
background-color: transparent;
}
I'm doing a site and I'm starting with the mobile stylesheet first.
But the container-fluid's width isn't the same as the window's width.
What I tried to do to fix this was:
.container-fluid{
width: 105%
}
The problem now is that when I make the window a little smaller, it's still not enough, but when I make the window a little bit bigger, it's TOO MUCH, when I do that a scroll bar appears at the bottom.
100% doesn't work since I already said that it's not the full width of the window.
Here's the entire body from the HTML file:
<body>
<!-- Introduction -->
<div id="introduction" class="container-fluid">
<div class="row">
<header>
<h1> Mosescu Bogdan Gabriel </h1>
<img id="profilepic" src="profilepic.png" />
<h2> Web Designer | Motion Graphics Artist </h2>
</header>
</div>
</div>
<!-- //Introduction// -->
<div id="about" class="container-fluid">
<div class="row">
<h1 id="about-title"> Who I am </h1>
</div>
</div>
</body>
and this is the CSS file:
/*Introduction CSS */
#introduction{
background-color: #542437;
color: white;
margin-top: -21px;
}
#introduction header{
text-align: center;
}
#introduction header h1{
font-family: montserrat;
font-weight: bold;
}
#introduction header h2{
font-family: montserrat;
font-weight: normal;
font-size: 1em;
}
#profilepic{
border-radius: 100%;
width: 150px;
height: 150px;
}
/* //Introduction CSS// */
/* About CSS */
#about{
background-color: #f2f2f2;
color: #1a1a1a;
text-align: center;
margin-top: -24px;
}
#about-title{
font-family: montserrat;
font-weight: bold;
font-size: 2.25em;
border-bottom: solid 1px black;
}
Bootstrap containers are padded.
.container-fluid {
padding-right:15px;
padding-left:15px;
margin-right:auto;
margin-left:auto
}
You need to remove the padding.
.container-fluid {
padding-right:0;
padding-left:0;
margin-right:auto;
margin-left:auto
}
Edit: This is a bare bones example. If you copy this and paste into a new .html document you'll see no padding on the container. If you then remove the container-fluid override you'll see padding.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- put your override styles here - AFTER you include Bootstrap -->
<link href="style-mobile.css" rel="stylesheet">
</head>
<style>
/* override Bootstrap's container */
.container-fluid {
padding-right:0;
padding-left:0;
margin-right:auto;
margin-left:auto
}
</style>
<body>
<div class="container-fluid">
This text hits the left side of the viewport.
</div>
</body>
</html>
Edited HTML example to include new css link
Edit: Bootstrap 4
#Dagrooms commented: "The best way to do this in Bootstrap 4 is to add px-0 to your container-fluid div."
This will remove the padding from the left and right of the container, so that it will touch the sides of the browser viewport.
<div class="container-fluid px-0">
This text hits the left side of the viewport.
</div>
Try this, wrap all the content inside container-fluid with a bootstrap row class. It should work, thanks.
<div id="introduction" class="container-fluid">
<div class="row">
<header>
<h1> Mosescu Bogdan Gabriel </h1>
<img id="profilepic" src="profilepic.png" />
<h2> Web Designer | Motion Graphics Artist </h2>
</header>
</div>
</div>
<div id="about" class="container-fluid">
<div class="row">
<h1 id="about-title"> Who I am </h1>
</div>
</div>
If you just change .container-fluid that won't work because the row and col inside the container all get their own corrections. Try adding full-width to your container-fluid and then adding this:
.full-width { padding-left: 0; padding-right: 0; }
.full-width .row { margin-right: 0; margin-left: 0; }
.full-width .col-md-12 { padding-left: 0; padding-right: 0; }
With Bootstrap 4:
<div class="container-fluid p-0">
<div class="row m-auto">
your content here
</div>
</div>
After a long time of searching and trying out what did it for me in the end was a "w-100" in the "col-xs-12" div tag.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 w-100">
My content that did not span 100% now with w-100 it does
</div>
</div>
</div>
<div className="container-fluid p-0 m-0 row justify-content-center" >
If you use bootstrap, you can use p-0 and m-0 and they will set the 15px padding from .container-fluid and -15px margin from .row to 0.
I guess there are many ways to do this. in Bootstrap 4, all you have to do is wrap the Container in a Div with Class=Row
<div class="Row">
<header class="container-fluid">
<nav class="navbar navbar-dark bg-secondary">
<h1 class="navbar-brand">Try this out</h1>
</nav>
<header>
</div>
This is the only thing I could get to work, after trying most of these answers.
css:
#mydiv {
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
background-color:#2A2A52
}
html:
<div class="container-fluid px-0">
<div id="mydiv">
<div class="row">
<div class="col-md-12">
<p>YOUR CONTENT HERE</p>
</div>
</div>
</div>
</div>
note: I needed to specify px-0 on the container and wrap the row in a separate div in order for the text to line up horizontally with additional text on the page that was part of a typical container-fluid div.
If none of this works try:
*{margin:0;padding:0}
to remove the padding/margin that might be overlapping on your code. It worked for me, since adding a row wrapping the container-fluid created a horizontal scroll on my page.
I am making a basic slide demo and i got a problem with :not(:target) selector
i want to have my base slide at first. but when i try this code i got a blank page.
here my code and my css file.
thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>order form</title>
<link href="slide.css" rel="stylesheet" type="text/css">
</head>
<section>
<header class="slide" id="foo">
<h1>Θέμα ενότητας</h1>
</header>
<article class="slide" id="main">
<h1>Σκυλος :</h1>
next
</article>
<article class="slide" id="setter">
<h1>Setter</h1>
<p> </p>
next
<footer class="slide" id="thankyou">
<h1>Ευχαριστώ!</h1>
<p>Closing credits</p>
</footer>
</section>
*csss
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
:not(:target){
display:none;
}
:first-of-type:not(:target) {display:block;}
You get a blank page because the :not(:target) applies to all elements.
You probably want article:not(:target) (the same goes for the :first-of-type rule)
Keep in mind though that if you make an overriding rule to display your first slide, it will always remain active.
To use this technique you will have to place your first slide as the last one (in the DOM). This way you can target it with article:last-of-type to show it at start and then use the more specific article:target ~ article:last-of-type to hide it when another one is active.
Something like this
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
article,
article:target ~ article:last-of-type{
display:none;
}
article:target,
article:last-of-type{display:block;}
<section>
<header class="slide" id="foo">
<h1>Θέμα ενότητας</h1>
</header>
<article class="slide" id="setter">
<h1>Setter</h1>
<p> </p>
next
</article>
<article class="slide" id="Beagle">
<h1>Beagle</h1>
<p> </p>
start
</article>
<article class="slide" id="main">
<h1>Σκυλος :</h1>
next
</article>
<footer class="slide" id="thankyou">
<h1>Ευχαριστώ!</h1>
<p>Closing credits</p>
</footer>
</section>
With the CSS code posted below, I thought that I would be making a nav bar that extends the width of the browser and has a red background. I also thought I would be making the logo for the page appear ont he far left, with the text immediately to the right. What do I need to do to make a #ff0000 nav bar extend the whole width of the browser? How can I align this text to be to the right of the logo and at the top of the browser window?
Here is the CSS code:
.logo{
float:left
}
.titletext {
text-align: right;
}
nav {
display: table;
width:100%;
background-color: #ff0000;
}
Here is the HTML code:
<DOCCTYPE = HTML>
<html>
<head>
<div class="titletext">
<h2>Penguin NetOPS Solutions</h2>
<h3>IT Repair</h3>
</div>
<div class="logo">
<img src="http://www.logodesignlove.com/images/classic/penguin-logo.jpg" alt="Mountain View" style="width:200px;height:200px">
</div>
<nav>
About Us |
Calculate Loan Payments|
Credit Check |
Contact Us|
Special Offer
</nav>
</head>
</html>
JS Fiddle
Never write code inside the <head> tag, you should use float:right for .titletext
HTML
<body>
<div class="titletext">
<h2>Penguin NetOPS Solutions</h2>
<h3>IT Repair</h3>
</div>
<div class="logo">
<img src="http://www.logodesignlove.com/images/classic/penguin-logo.jpg" alt="Mountain View" style="width:200px;height:200px">
</div>
<div class="clearfix"></div>
<nav>
About Us |
Calculate Loan Payments|
Credit Check |
Contact Us|
Special Offer
</nav>
</body>
CSS
.clearfix
{
clear:both;
}
.logo{
float:left
}
.titletext {
float: right;
}
nav {
display: table;
width:100%;
background-color: #ff0000;
}
Your HTML is not valid. You insert content into head tag.
Check this DEMO
<head>
<title>Your title</title>
</head>
<body>
<!-- Place here your content -->
<div class="titletext">
<h2>Penguin NetOPS Solutions</h2>
<h3>IT Repair</h3>
</div>
<div class="logo">
<img src="http://www.logodesignlove.com/images/classic/penguin-logo.jpg" alt="Mountain View" style="width:200px;height:200px">
</div>
<nav>
About Us |
Calculate Loan Payments|
Credit Check |
Contact Us|
Special Offer
</nav>
</body>
Hey guys i am working on this gallery.
Now I've thumbnails set on block grid and ive added an overlay div on first list item and the problem is that i am not able to set it dynamically i mean 100 percent width and height because the gallery is responsive so what i wanted is that overlay should fix on thumbbs.
i am unable to set the fiddle so i am uploading a live example.
you can see overlay extending thumbs.
please suggest a solution
Link
Thanks.
I need overlay on every thumb.
Here is my Code new one
<style>
.thumbsList li {
position: relative;
}
.overlay
{
position: absolute;
z-index: 22;
background-color: black;
opacity: 0.6;
height:100%;
with:100%;
z-index: 22;
}
</style>
</head>
<body>
<div class="row projectsRow">
<ul class="large-block-grid-3 medium-block-grid-3 small-block-grid-2 thumbsList">
<li >
<div class="overlay"></div>
<img class="projectsThumbs" src="img\projects\1.jpg" alt="">
</li>
<li >
<div class="overlay"></div>
<img class="projectsThumbs" src="img\projects\2.jpg" alt=""></li>
<li >
<div class="overlay"></div>
<img class="projectsThumbs" src="img\projects\3.jpg" alt=""></li>
</ul>
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Give a position: relative; to the your <li> elements. Also put the <div class="overlay"></div> tag inside each <li> tags.
.thumbsList li {
position: relative;
}
And put the following code inside all <li> instead of just the first one.
<div class="overlay"></div>