My problem is that my background is there, but it's behind my divs. I want it to be on the sides of the content div but it won't work. This is the part I think the problem is:
body {
background-image:"C:\Users\Peter\Documents\onze server met div\achtergrond.png";
background-color:;
min-height: 100%;
height:1500;
list-style-type:none;
margin:0;
padding:0;
overflow-y:scroll;
}
And this is the whole css code:
body {
background-image: "C:\Users\Peter\Documents\onze server met div\achtergrond.png";
background-color:;
min-height: 100%;
height: 1500;
list-style-type: none;
margin: 0;
padding: 0;
overflow-y: scroll;
}
li {
float: left;
}
.class1 A:link {
display: block;
width: 150px;
height: 20;
font-weight: bold;
color: #FFFFFF;
background-color: #bababa;
text-align: center;
padding: 6;
text-decoration: none;
text-transform: uppercase;
}
.class1 A:visited {
display: block;
width: 150px;
height: 20px;
font-weight: bold;
color: #FFFFFF;
background-color: #bababa;
text-align: center;
padding: 6;
text-decoration: none;
text-transform: uppercase;
}
.class1 A:active {
display: block;
width: 150px;
height: 20px;
font-weight: bold;
color: #FFFFFF;
background-color: #bababa;
text-align: center;
padding: 6;
text-decoration: none;
text-transform: uppercase;
}
.class1 A:hover {
background-color: #a6a6a6;
}
.class2 A:link {
}
.class2 A:visited {
}
.class2 A:active {
}
.class2 A:hover {
}
.class3 A:link {
text-decoration: underline;
color: #000080;
text-align: center;
}
.class3 A:visited {
text-decoration: underline;
color: #000080;
text-align: center;
}
.class3 A:active {
text-decoration: underline;
color: #000080;
text-align: center;
}
.class3 A:hover {
text-decoration: underline;
color: #000080;
text-align: center;
}
.class4 {
background-image: "C:\Users\Peter\Documents\onze server met div\achtergrond.png";
}
#content {
margin-top: 20;
text-align: left;
background-color: #EEEEEE;
height: 1000;
width: 70%;
float: left;
overflow-y: auto;
margin-left: 15%;
margin-right: 15%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 10px 10px 5px #888888;
margin-bottom: 10;
padding: 20;
background: "C:\Users\Peter\Documents\onze server met div\achtergrond.png";
}
#footer {
background-color: #FFA500;
clear: both;
text-align: center;
}
#header {
background-color: #FFA500;
}
#menu {
background-color: #bababa;
height:;
width: 100%;
float: center;
}
#container {
background-image: "C:\Users\Peter\Documents\onze server met div\achtergrond.png";
}
and this is my html
<html>
<head>
<LINK HREF="C:\Users\Peter\Documents\onze server met div\Hetstylesheet.css" REL="stylesheet" TYPE="text/css">
</head>
<body background="C:\Users\Peter\Documents\onze server met div\achtergrond.png">
<div id="container" style="width:*">
<div id="header">
<h1 style="margin-bottom:0;">Onze server webpagina</h1>IP:</div>
<div id="menu">
<span class="class1">
<li>Home</li>
<li>De Server </li>
<li>Contact</li>
<li>Updates</li>
<li>loes</li>
</span>
<span class="class3">
<div id="content">
<br><P Style="font-size:18pt;"><strong>WELKOM</p></strong></style>
<br><br>Hoi, diegene die dit ziet.<br>
VEEL PLEZIER!!!
</div>
<div id="footer">
Copyright © Peter Kingma</div>
</span>
</div>
</body>
</html>
Forward thanks
Try one approach (not using inline CSS would be preferred) or another, as you've got two different Background declarations going on. One inline, and one in your stylesheet.
In your stylesheet you've got a couple of things that are fighting/canceling each other as well:
body {
...
min-height: 100%; /*max-height:100%; will prevent an image from scaling larger than it's true size */
height:1500; /* this is the height you'll get no matter what, by setting it explicitly
}
<body background="this will override your stylesheet"> ... I'd remove it.
To your question ... <body> will ALWAYS be behind your content divs, and those divs will always be children of <body>. If you want to use a background image that appears to be on the side of a <div>, all you need to do is make sure <body> stays wider than the BG Image + width of the <div>s + any side margins you want/need.
body {
background:url(your.png) right 0; /* aligned to the right */
background-size:80px 60px; /* CSS3 not good for older browsers (using an image you know is 80px wide, for example, would work best for browser compatibility. */
min-width:###px; /*body bg img + width of div + any margins you want. */
}
div {
max-width:###px; /* follow <body>s rule from above */
}
Related
Just so you know, I'm still learning HTML, and I'm not very knowledgeable.
So I'm trying to figure out how to add multiple styles to one of my buttons on my navbar
<div id="navbar">
Home
Skills
Interests
<a style="float:right" href="#about">About</a>
</div>
On the bottom line I want to include: (You will need to use the style sheet below for the HTML to format correctly its just above the last sentence.)
style="background-color: #04AA6D"
Into the the code so that the background is turned green
I have this working on the other buttons that aren't floating right
here's my main pages one, the button named "home" is green on the back and that's how I want the About pages one to be.
<div id="navbar">
<a style="background-color: #04AA6D" href="#home">Home</a>
Skills
Interests
<a style="float:right" href="#about">About</a>
</div>
I'm using this style sheet (Needed for the page to format correctly.)
<style>
body {
margin: 0;
background-color: #f1f1f1;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
display: block;
transition: top 0.3s;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
li a:hover:not(.active) {
background-color: #111;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
</style>
I hope you understand what I mean, I'm horrible at explaining things 😂. Any Questions you need me to answer so that you can help please let me know
I tried connecting the two together like this
<a style="float:right" style="background-color: #04AA6D" href="#contact">Interests</a>
But that didn't work
body {
margin: 0;
background-color: #f1f1f1;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
display: block;
transition: top 0.3s;
}
.style1{
float:right !important;
}
.style2{
background: #04AA6D;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
li a:hover:not(.active) {
background-color: #111;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<div id="navbar">
<a style="background-color: #04AA6D" href="#home">Home</a>
Skills
Interests
<a class="style1 style2" href="#about">About</a>
</div>
You can implement the following approach:
Create classes for different CSS:
.style1{
float:right !important;
//i used '!important' because you are overriding other class
}
.style2{
background-color: #04AA6D
}
.style3{
//your 3rd extra css here
}
Then you can implement multiple css in following way:
<a class="style1 style2 style3">Example</a>
I'm new to html and css and I'm trying to make a webpage.
I created 2 big buttons, each about half the size of the screen. The problem is I can't display them next to each other. Instead they are displayed one above the other.
The little piece of html is below the css of the added snippet which probably looks a bit messy.
EDIT: the idea is to create a page divided in 2 like --> http://www.masitupungato.com/ <-- but a very basic look
Here are the screenshots:
body {
background: #191B1C;
color: white;
font-family: helvetica;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a{
color: white;
background: #2A2F30;
height: 616px;
width: 650px;
border-radius: 40px;
text-align: center;
font-size: 100px;
font-weight: bold;
text-decoration: none;
padding-top: 400px;
display: inline-block;
}
li a:hover{
background: #2FA2C4;
border: 4px solid white;
}
<div>
<ul>
<li id="left-container">Browse</li>
<li id="right-container">Upload</li>
</ul>
</div>
Add style for ul li
ul li {
float:left; //or display:inline-block;
}
body {
background: #191B1C;
color: white;
font-family: helvetica;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
float:left
}
li a {
color: white;
background: #2A2F30;
height: 616px;
width: 650px;
border-radius: 40px;
text-align: center;
font-size: 100px;
font-weight: bold;
text-decoration: none;
padding-top: 400px;
display: inline-block;
}
li a:hover{
background: #2FA2C4;
border: 4px solid white;
}
<div>
<ul>
<li id="left-container">Browse</li>
<li id="right-container">Upload</li>
</ul>
</div>
Use display: table-cell; on the li items.
li {
display: table-cell;
}
https://jsfiddle.net/9627av37/1/
body {
background: #191B1C;
color: white;
font-family: helvetica;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li { display: inline-block;}
li a{
color: white;
background: #2A2F30;
height: 616px;
width: 650px;
border-radius: 40px;
text-align: center;
font-size: 100px;
font-weight: bold;
text-decoration: none;
padding-top: 400px;
display: inline-block;
}
li a:hover{
background: #2FA2C4;
border: 4px solid white;
}
<div>
<ul>
<li id="left-container">Browse</li>
<li id="right-container">Upload</li>
</ul>
</div>
Just add li { display: inline-block; } to the CSS and pray users have a window that wide.
You can use table with 50% width for each td and get the button inside of them like
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%" align="center"><button>first</button></td>
<td width="50%" align="center"><button>second</button></td>
</tr>
</tbody>
</table>
Although this is not the best case, but you can use for your thing, best would be using bootstrap and other libraries that gives you grid system to do this.
Please look in those libraries too.
simple display:flex; should do it.
body {
background: #191B1C;
color: white;
font-family: helvetica;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
li a{
color: white;
background: #2A2F30;
display-inline:block;
height: 616px;
width: 650px;
border-radius: 40px;
text-align: center;
font-size: 100px;
font-weight: bold;
text-decoration: none;
padding-top: 400px;
display: inline-block;
}
li a:hover{
background: #2FA2C4;
border: 4px solid white;
}
<div>
<ul>
<li id="left-container">Browse</li>
<li id="right-container">Upload</li>
</ul>
</div>
Thank you for the quick answers guys. Both solutions worked.
If i use ul li {float: left;} the footer (wich i didnt insert in my snippet here) pops up but thats not a problem.
I had tried float: left; by writing it in my div class wich didnt work.
Anyway, thanks :)
I was just continuing with making this website and all of a sudden some of my navbar padding goes 'missing' and I can't seem to pinpoint the mistake. I've already played the detective game and commented out some of the stuff I thought was interfering. Luckily I have an original picture before the screw-up and one after. Some of the 'paragraph text' will be 'placeheld' for personal reasons and I think it's irrelevant, unless it's needed in order to fix the problem.
-Thanks.
Before and after picture: http://imgur.com/a/ts1FS
Code:
CSS:
body {
background-color: #1a1a1a;
color: #ccad00;
line-height: 1.9;
font-size: 19px;
}
p.desc{
text-indent: 50px;
}
h1 {
font-family: courier;
color: #ccad00;
}
h2 {
font-family: courier;
color: #ccad00;
text-align: center;
}
#divtitle {
width: 50%;
margin:auto;
padding-top: 50px;
text-align: center;
}
h2
{
font-family:courier;
color: #99cc00;
}
p {
line-height: 1.9
text-size: 19px;
}
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #ccad00;
height:40px;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
}
#nav li {
margin: 0px;
}
#nav li a {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #f2f2f2;
background-color: #ccad00;
float: left
}
#nav li a:hover {
color: #0d0d0d;
background-color: #35af3b;
}
.button {
background-color: #ffa600;
border: none;
color: #998200;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 40px;
font-family: courier;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button:hover {
background-color: white;
color: #998200;
}
div#containerbttn {
width: 800px;
height: 100px;
margin: auto;
background-color: green;
}
ul.square{
list-style-type: square;
}
.center {
text-align: center;
}
html:
<div id="nav">
<ul>
<li>Home
</li>
<li>Center
</li>
<li>Rules
</li>
<li>References
</li>
<li>Rankings
</ul>
</div>
<div>
<div id="divtitle" >
<h1> text </h1>
</div> -->
<div id="containerbttn">
<button class="button">GET STARTED!</button>
<button class="button">FAQ</button>
<button class="button">RANKINGS</button>
</div>
<h2> Synopsis: </h2>
<div class="center">
<p class="desc"> Welcome to ***!. This is a free...
<ul class="square">
<li> some text </li>
<li> some text </li>
</ul>
<p class="desc" > text </p>
</div>
</html>
Your problem exists because you have set the height of the #nav element to 40 px. When you add the padding to your a element, you make it larger than the ul element. This can be solved easily by updating two lines of code.
First, remove from css:
#nav{ height:40px; }
Then, add to html after ul but before closing the nav div:
<div style="clear:both;"></div>
Here is a jsfiddle of your working page: https://jsfiddle.net/8o279n5r/
And here is a great answer on what the clear property does: What does the CSS rule clear: both do?
Based on this, I've managed to figure it out, but when resizing the window, the h2 still presents a margin, which I've just removed by removing 20px from the h2, which I shouldn't have to do, however, this still presents a problem. When I resize the window, the divs do not follow the image and I'm left seeing the background. Is there any way I can fix this without having to remove 20px from every h2? But still have no gap/nothing breaks when resizing the window. If you view the snippet full window then resize your browser window you'll see what I mean.
body {
padding:0;
margin: 0;
font-family: 'Raleway';
}
.nav {
display:none;
background-color: black;
text-decoration: none;
color: silver;
margin: 0;
list-style: none;
text-align: center;
}
.nav > li {
display: block;
}
/* .nav > li:before {
content: "*";
} */
.nav > li > a {
text-decoration: none;
color: silver;
font-size:24px;
text-transform: uppercase;
font-weight: bolder;
letter-spacing: 4px;
}
.nav-btn {
display:block;
font-size: 30px;
background-color: black;
color: silver;
text-align: center;
cursor: pointer;
}
.image {
background-image:url('https://www.wbnx.com/uploads/downloads/cover_art/850x315_reign_mary.jpg');
width:100%;
max-height:400px;
background-position: left center absolute;
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
}
.title {
display: inline-block;
color: white;
position:relative;
margin: 15%;
text-transform: uppercase;
}
.image {
text-align: center;
position:relative;
background-color:green;
}
.image > h2 {
padding-top: 50%;
line-height: 50%;
}
#media screen and (max-width: 411px) {
.title > h2 {
font-size: 15px;
}
.image {
max-height:280px;
}
}
.submitbox {
color: yellow;
background-color: darkblue;
padding:0;
margin-top:-20px;
}
<!DOCTYPE html>
<head>
<title>Welcome to France!</title>
<link rel="stylesheet" href="Reign.css" type="text/css1">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- <div id="header">"Today I am King!"</div> -->
<nav>
<span class="nav-btn">Menu</span>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
<div class="image"><div class="title"><h2>"Today, I am king!"<br />Mary, Queen of Scots.</h2></div></div>
<div class="submitbox"><h2>Sign up for our Newsletter!</h2></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('span.nav-btn').click(function () {
$('ul.nav').toggle();
});
</script>
</body>
I am trying to center the navigation bar in the middle of the div body. I want the navigation bar to go from one side of the div to the other but have the list in the ul to be center in the middle of the div if that makes sense. I can't seem to figure it out even after trying online examples. Thanks
body {
margin: 0px;
padding: 0px;
background-color: #505050 ;
}
#body {
width: 75%;
margin: 0 auto;
position: center;
background-color: #C0C0C0;
height: 100%;
}
.nav {
}
.nav ul {
background-color: #CCCCCC;
width: 100%;
padding: 0;
text-align: center;
}
.nav li {
list-style: none;
font-family: Arial Black;
padding: 0px;
height:40px;
width: 120px;
line-height: 40px;
border: none;
float: left;
font-size: 1.3em;
background-color: #CCCCCC;
display:inline;
}
.nav a {
display: block;
color: black;
text-decoration: none;
width: 60px;
}
<div id="body">
<h2>Hello World!</h2>
<div class="nav">
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li><a href="#">News<a></li>
<li><a href="#">Contact<a></li>
</ul>
</div>
</div>
i attach fix here http://jsfiddle.net/o4716uo9/
use inline-block for li
background property should be setted in ul element, not li, in your case. Delete the float in nav li. Also, the a element it isn't closed correctly. Main changes:
.nav ul {
background-color: #cccccc;
text-align: center;
}
.nav ul li {
display: inline-block;
min-width: 120px;
[...]
}
I'll recommend you to take a look at the bootstrap framework. It could be interesting for you.
There are a couple things you can change to correct the issue:
1) Your <a> elements have a width of 60px. You can remove this.
2) You .nav li has a width of 120px. I would change this to 25% (If there are only going to be four navigational items).
http://jsfiddle.net/xLnz90ek/
Is that any closer to the desired effect.
Is this what you’re trying to do?
* { margin:0; padding:0 }
html {
background-color: #505050;
font-size: 4vw;
}
header {
width: 75%;
margin: 0 auto;
background-color: #C0C0C0;
}
nav {
background-color: #CCCCCC;
display: flex;
padding: 0.2rem 0;
}
nav a {
flex: 1 0 auto;
font-family: Arial Black;
font-size: 1rem;
background-color: #CCCCCC;
color: black;
text-decoration: none;
text-align: center;
margin: 0 0.3rem;
}
<header>
<h2>Hello World!</h2>
<nav>
Home
About
News
Contact
</nav>
</header>