So, I don't know how to explain this really well. My website has a banner (it's a picture) at the top and then a menu underneath the banner, and I want the menu and above to have a dark gray background, with the rest a really light grey background. How would I do this?
This is what my website layout currently looks like (excuse the horrible art):
This is what I want the website to look like: (notice the background colors)
<html>
<body>
<div style='background:#123'>
your banner
</div>
<div style='background:#567'>
your text
</div>
</body>
</html>
or
<html>
<head>
<link rel=stylesheet type="text/css" href="my.css">
</head>
<body>
<div class='banner'>
your banner
</div>
<div class='main'>
your text
</div>
</body>
</html>
and in my.css
.banner {background:#123}
.main {background:#456}
Related
For an html header, a div box containing elements including a logo, would it be possible to put the logo as well as the colors in the css file? For example:
<html>
<head>
<link rel="stylesheet" href="myurl.css"/>
</head>
<body>
<div class="header">
<div class="header-left>
<img id="logo"/>
</div>
</div>
In the stylesheet, I would like to say
#logo {
src: mylogo.jpg;
}
so that the look and feel is all within the stylesheet. Then to select a different skin, the only thing needed is to switch the stylesheet.
I want to tile an image through the entire web document which I want to print. I have used background property to tile that, but I have to set the z-index property to make that image placed over all elements of the web page. Help me solve this.
stick it to the root style
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root
{
background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRxExzbsZCvO6lpE1tll_7pQLB5nd4RkWkrMannssfhAYni_Ct");
opacity: .4;
}
</style>
</head>
<body>
<div id="overlay" onclick="off()"></div>
<div style="padding:20px">
<h2>Overlay</h2>
<p>Add an overlay effect to the page content (100% width and height with background with 40% opacity).</p>
<button>some button here</button>
</div>
</body>
</html>
So I'm trying to make a pure CSS3 autoplaying image slider on a web page project I'm doing. So the HTML of the page looks like this:
https://pastebin.com/c0ZiyHGd
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Joelson Querub</title>
</head>
<body>
<header>
<nav>
Portfolio
Sobre
Loja
</nav>
</header>
<main>
<div id="pinto">
<h1>Joelson Querub</h1>
<div id="images">
<img src="https://images.unsplash.com/photo-1517423568366-8b83523034fd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=92b82a18bf4bfbdfe1bd7eed8cd4ba49&auto=format&fit=crop&w=375&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=71d59cd22de21da8d2939bc203617983&auto=format&fit=crop&w=1560&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e79d1986f31127432328ba0b78f0b510&auto=format&fit=crop&w=375&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1529088363398-8efc64a0eb95?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=179403fa836a063432aec8ccc04ee248&auto=format&fit=crop&w=424&q=80"
alt="Pug Fofoso">
</div>
</div>
</main>
</body>
</html>
So what I want is to only one pug image appear at a time, and to make them automatically slide leftwards. The size is important, and the current size is the one I want. Also, notice that there is a text overlaying the image. That text must stay there. I would like to do a smooth slide that is infinite, but that doesn't do that subtle return to the first image.
I tried my luck with some CSS but it din't go very far. You guys can take a look:
https://pastebin.com/S2UZ4uK2
Or for an easier way to see it all:
https://codepen.io/anon/pen/OwWgoX
Though CodePen messes up with the text positioning.
You can use wowslider. Wowslider . Just download the software. You can easily add any picture and also any kind of sliding transformation.
I'm having an issue setting my text color. I want to set the h1 element to #513271 but it doesn't seem to want to work. Below is my current code and below that are several solutions I've tried that also did not work.
My CSS is saved as stylesheet.css & it is in the same folder as my HTML (which is tributePage.html).
jumbotron h1 {
color: #513271;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link href="\stylesheet.css" rel="stylesheet" />
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
</head>
<div class="container">
<div class="jumbotron">
<body>
<h1 style="jumbotron-h1" class="text-center">Hey now, hey now.</h1>
</body>
</div>
</div>
</html>
I have also tried the following solutions. I have literally tried all of these by themselves, in various combinations, etc.
Change the CSS file path
C:\Users\Ashle\Coding\Assignments\FCC -- Tribute Page\stylesheet.css
C:\Users\Ashle\Coding\Assignments\FCC -- Tribute Page\
\stylesheet.css (I've used \ through \\\)
stylesheet.css\
Change the external CSS link style (no spaces between side carets, just included them so this would print below)
< link href="stylesheet.css" rel="stylesheet" type="text/css"/ >
< link href="stylesheet.css" rel="stylesheet" >
Change the h1 element name in CSS
h1, #h1, .h1
jumbotron h1, #jumbotron h1, .jumbotron h1
jumbotron-h1, #jumbotron-h1, .jumbotron-h1
purple text, #purple text, .purple text
purple-text, #purple-text, .purple-text
Change the font color with an inline element
< h1 style="color:purple;" class="text-center" >Hey now, hey now.< /h1 > Now, oddly enough, THIS will turn the title purple.
Thanks so much for your help!
For your CSS what you want is
.jumbotron h1 {
color: #513271;
}
Note the period before jumbotron to indicate it's a class
I hope my answer help you:
This is your original code:
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
</head>
<div class="container">
<div class="jumbotron">
<body>
<h1 style="jumbotron-h1" class="text-center">Hey now, hey now.</h1>
</body>
</div>
</div>
</html>
You cannot have a div element outside the body tag.
You need to include the link to css file in the head tag. Fix your code like this:
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Hey now, hey now.</h1>
</div>
</div>
</body>
</html>
You can see that in your css file you declare a 'jumbotron h1', but in your HTML code jumbotron appear to be a class, and to style a class in external css file you need to a dot (.) before the class name. Your css need to look like this:
.jumbotron h1 {
color: #513271;
}
Hope this help.
Your tag is not properly placed nor your external css tag is missing.
and
the class is not used for styling (except if you used bootstrap).
Here is the correct one:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
<link rel="stylesheet" href="dir/style.css" > <!-- put the external css link here -->
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Hey now, hey now</h1>
</div>
</div>
</body>
</html>
CSS:
jumbotron h1 {
color: #513271;
text-align: center;
}
I recommend you to practice doing external css files instead of inline/internal.
I had a similar problem where my stylesheet was not being reflected in my HTML doc. I finally figured out that my .css file was actually a .css.txt file. "mystyle.css.txt".
In any directory on your computer (I used the one the html/css files were in) click view at the top, then options. Select the view tab, then uncheck the option "Hide extensions for known file types". When this was unchecked i was able to delete the .txt extension from the .css file and it became a true .css file and reflected in my .html doc perfectly.
I am trying to beat a bootstrap layout into fitting some requirements I have. The layout started as the default generated by an MVC 5 project template, but I am stuck on getting an image to fill the entire browser width. I need the image to appear as follows:
If I add a section, with an img tag, the image doesn't stretch across the entire screen, but starts 'indented' from the left, and causes the brower so 'overflow' to the right, like:
The only alternative I can see is to set a background image for body-content, but that presents a whole lot of scary positioning issues for the content below the image, and there is quite a lot of that, e.g. below the text "Here's what you'll get' there is still a whole lot of content.
Here is an abridged version of my first attempt:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>s</title>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="/Content/site.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar">
...
</div>
<div class="container body-content">
<section id="landing">
<img src="/Content/Images/landing_back.png" alt="The Tax-Free Investment Account" />
</section>
<footer>
...
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
</body>
</html>
You can set the background image of the entire body like this:
body {
background-image: url("http://www.placecage.com/1000/800");
background-size:100%;
}
However if you are looking to make a specific element full width with Bootstrap then you should use container-fluid rather than container to hold your content as that element reaches the boundary of your screen width instead of being fixed width.
Note: run this snippet in full screen to get the full effect.
.container,
.container-fluid {
background-image: url("http://www.placecage.com/1000/800");
min-height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">Fixed width</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">Full width</div>
</div>
</div>