I'm fairly new to all this but I've done it quite a few times now and should probably be able to find the error. But i can not figure out why the css document won't import to my html. I search around first and went to W3Schools.com to read how to use external documents however i can not find why it won't work. Sorry if the answer is painfully obvious but here is my code. Thanks in advance!
(Using NotePad++ if that matters at all)
<html>
<head>
<script type="text/javascript" src="DeveloperLogMain.js"></script>
<link type="text/css" rel="spreadsheet" href="DeveloperLogMain.css">
</head>
<body id='body'>
<div id='head'>
<h1 id='title'><b>Developing Log</b></h1>
</div>
<br>
<br>
<br>
<br>
<div id='navbar'>
<ul>
<li><a href='#'><b>Home</b></a></li>
<li><a href='#'><b>HTML</b></a></li>
<li><a href='#'><b>CSS</b></a></li>
<li><a href='#'><b>JavaScript</b></a></li>
</ul>
</div>
<div id='footcontainer'>
<footer id='footer'><b>End Of Log</b></footer>
</div>
</body>
</html>
the css document is called "DeveloperLogMain.css".
cointaining
#head {
position: fixed;
width: 100%;
top: 0;
}
#title {
background-color: DarkRed;
color: white;
text-align: center;
border-bottom: solid;
border-color: black;
}
#footcontainer {
position: fixed;
bottom: 0;
width: 100%;
}
#navbar {
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 90px;
background-color: grey;
position: fixed;
}
li a {
display: block;
color: black;
border: 2px solid;
border-color: DarkRed;
text-align: center;
}
li a:hover {
background-color: black;
color: white;
}
#footer {
background-color: DarkRed;
text-align: center;
height: 25px;
color: white;
}
rel should be equal to stylesheet not spreadsheet:
<link type="text/css" rel="stylesheet " href="DeveloperLogMain.css">
Related
I am having issues with my styling for a landing page on SharePoint.
SharePoint loves to write over HTML with its own which makes the styling a bit funky.
There are a few table elements that appear with the element selector in the developer tools on the page, but I do not believe those are interfering with my custom HTML. There are two s that appear and I believe is messing with my HTML/CSS. They are both #s4-bodyContainer & #contentRow. The more I look at it it seems that the #s4-bodyContainer is the one it will not fill. I have changed the margin of it to 0, as well as the width to 100% and the content still will not cover the whole width/height of the containing div?
Here is my relevant HTML/CSS:
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#s4-workspace{
overflow: hidden;
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
}
.troopers {
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
.flexbox-container {
margin-top: 0px;
width: 100%;
}
html, body {margin: 0; height: 100%; overflow: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Example Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Projects Site</h1>
<h1 class="gold">Insert Sample Text</h1>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 1
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
</div>
</div>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 2
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
Sub 4
Sub 5
</div>
</div>
</div>
</div>
<footer>
<img src="" class="logo"/>
</footer>
</body>
</html>
Here is what they look like on page:
If I'm not mistaken, the CSS rules for the #s4-bodyContainer on SharePoint are not inline (from external file: corev15.css). Meaning you should be able to override them if you attach your CSS at the end of the master-page body. If it doesn't work you can resort to the !important tag to give your CSS properties precedence. checkout CSS Specificity.
Using ! important doesn't always fixes the issue. The problem basically with ! important is perhaps your styling library might also be using it. So try checking whether your margin and width property is being applied to that specific section through Google inspector or any other browser inspector. Try checking whether your styling software has made a property called max-width and whether it is being applied. And most of all if a little modification and fidlling with ! important doesn't work. Go for inline css..
That is an issue with space if image is used as original inline-element like an text element. Solution:
Just add
display:block; to .troopers
See example!
(Alternative: set line-height: 0; font-size: 0 to wrapper of image div.tst. That avoid unwhanted space from text effects as well.)
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#s4-workspace{
overflow: hidden;
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
}
.troopers {
/* ADD ... */
display: block;
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
.flexbox-container {
margin-top: 0px;
width: 100%;
}
html, body {margin: 0; height: 100%; overflow: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Example Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Projects Site</h1>
<h1 class="gold">Insert Sample Text</h1>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 1
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
</div>
</div>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 2
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
Sub 4
Sub 5
</div>
</div>
</div>
</div>
<footer>
<img src="" class="logo"/>
</footer>
</body>
</html>
After a deep swipe of anything on the internet that could remotely helpful to this issue, I finally came across a similar topic on the MSDN :
The solution says to implement this:
.ms-webpartPage-root{
border-spacing:0px!important;
}
And it works!
My CSS style sheet header is not working. It works best in internal stylesheet or embedded stylesheet, but did not work when its code in external stylesheet. Only the header class did not wok but other code working best.
.header1{
background-color: brown ;
padding: 20px;
background-image: url("pics/saqib.png");
}
#pic{
float: right;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float:left;
background-color: #333;
border-top-left-radius: 35%;
border-top-right-radius: 35%;
margin-left:2px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: green;
}
.navbar{
padding: 20px;
margin-top: 150px;
}
/* End nav bar */
.skin{
background-color: lightblue;
}
.table {
margin-top: 0px;
width: 100%;
}
.table .sidebar{
border-right: 2px solid black;
width: 20%;
}
.footer{
background-color: blue;
padding: 20px;
padding: 100px;
}
.left{
float: left;
display: block;
width: 40%;
color: gray;
border-right: 2px solid white;
border-color: gray;
padding-right: 70px;
}
.right{
float: right;
display: block;
width: 40%;
color: gray;
}
pre a{
font-family: helvatic, sanshrif;
font-size: 15px;
color: white;
}
pre a:hover{
color: green;
}
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
<meta charset="UTF-8"/>
</head>
<body>
<header class="header">
<div id="pic"> <img src="pics/saqib.png"/></div>
<div class="navbar">
<ul>
<li>Home</li>
<li>Software</li>
<li>Contact Us</li>
<li>About us</li>
</ul>
</div>
</header>
<div class="skin">
<table class="table">
<tr>
<td class="sidebar">
This is sidebar
</td>
<td style="padding: 50px;">
<h1>My First Website</h1>
<p> A collection of all steps to complete a process in known as Transaction. DBMS should support transaction. It must ensure that all steps in a transaction are executed successfully or none of them is executed. It facility ensures that the database is always in consistent state even if a transaction fails due to some problem such as system crash or power failure etc.</p>
</td>
</tr>
<tr>
<th colspan="2">
<footer class="footer">
<div class="left">
<pre>Home | Software | Contact Us | About us</pre>
</div>
<div class="right">
The most important function of DBMS
is data processing. It includes creation,
storage and arrangements of data in database.
</div>
</footer>
</th>
</tr>
</table>
</div>
<body>
</html>
Your stylesheet defines a .header1 class but your HTML is looking for header. Make those the same.
You can change in either one place to make it work:
In HTML:
<header class="header">
to:
<header class="header1">
or in CSS:
.header1 {
background-color: brown;
padding: 20px;
background-image: url("pics/saqib.png");
}
to:
.header {
background-color: brown;
padding: 20px;
background-image: url("pics/saqib.png");
}
It should be:
.header{
background-color: brown ;
padding: 20px;
background-image: url("pics/saqib.png");
}
EDIT#2: Fixed it i have added to my code position: absolute; top 130px; display:block; thanks for all respondes ... code on codepen was fixed too .. :D
EDIT: So i fixed the content-holder problem now i have a new one i cant move him inside my main .... i have been trying vertical align and it doesnt work Codepen: http://codepen.io/anon/pen/VvKdrL
My new code :
header>a
{
font-size: 38px;
font-weight: 500;
border-bottom: 1px solid #888;
text-align: left;
color: #555;
font-family: "Monserat";
}
header
{
border-bottom:1px solid #888;
}
main
{
height: 530px;
display: block;
margin-top: -40px;
}
ul
{
list-style-type: none;
}
li a
{
font-size: 22px;
font-family: Helvetica;
margin: 4px;
font-weight: 500;
font-family: "Roboto";
line-height: 34px;
color: #222;
}
a
{
text-decoration: none;
}
li::before
{
content: "➢";
}
.center
{
width: 960px;
margin: 0 auto;
}
.content-holder
{
position: absolute;
width: 250px;
height: 200px;
top: 130px;
background: #eee;
display: block;
z-index: 2;
}
.background
{
z-index: 1;
background-repeat: no-repeat;
}
.footer
{
border-top: 1px solid #888;
height: 20px;
content:
}
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:500,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="center">
Name
</header>
<main class="center sizemain">
<div class="background"></div>
<div class="content-holder">
<ul>
<li>
List
</li>
<li>
List
</li>
<li>
List
</li>
<li>
List
</li>
<li>
List
</li>
</ul>
</div>
</main>
<footer class="footer">
</footer>
</body>
</html>
Thanks for respondes
You need to comment out both the margin-top and the margin. Margin applies 50px to every side.
.content-holder {
width: 250px;
height: 190px;
background: #eee;
/* margin: 30px; */
/* margin-top: 50px; */
vertical-align: 50px;
z-index: 2;
}
See: http://www.w3schools.com/css/css_margin.asp
The problem that i am facing is that text inside the a tag is not adjusting on a single line.
Here's my html.
<html>
<head>
<link rel="stylesheet" href="style5.css" type="text/css">
</head>
<body>
<div id="outer">
<ul>
<li class="current">Home</li>
<li>content</li>
<li>search</li>
<li>more</li>
</ul>
<div id="homepage">
Set as Homepage
</div>
<div id="clear">
</div>
</div>
<div id="wrapper">
<div id="pic">
<img src="logo.png">
<div id="content">
<p> Secure Search </p>
</div>
</div>
<div id="forms">
<form>
<input type="text" name="submit" size="70" style="font-size:20pt;"/>
</form>
<div id="pic_2">
<img src="powerd-by-google.png">
</div>
</div>
<div id="footer">
© 2012 - We Respect your Privacy - About AVG Secure Search
</div>
</div>
</body>
</html>
and here's my css.
body
{
margin: 0;
padding: 0;
background-color: white;
}
h1,h2,h3
{
margin: 0;
padding: 0;
}
p,ul,ol,li
{
margin: 0;
padding: 0;
}
#outer
{
background-color: rgb(67,68,71);
}
#outer ul
{
list-style: none;
margin-left: 5px;
border-left: 1px solid;
}
#outer li
{
float: left;
}
.current
{
background-color: rgb(56,63,137);
}
#outer a
{
width: 90px;
display: block;
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-weight: bold;
color: white;
border-right: 1px solid;
padding: 5px;
}
#outer a:hover
{
color: black;
background-color: white;
}
#outer .current a:hover
{
color: white;
background-color: inherit;
}
#homepage a
{
float: right;
font-weight: none;
color: white;
background-color: rgb(67,68,71);
display: inline;
text-transform: lowercase;
border-right: none;
}
#homepage a:hover
{
color: white;
background-color: inherit;
}
#clear
{
clear: both;
}
#wrapper
{
width: 960px;
margin: 0 auto;
overflow: auto;
}
#pic
{
margin-top: 100px;
margin-left: 389px;
position: relative;
}
#content
{
position: absolute;
top: 60px;
left: 90px;
}
#forms
{
margin-top: 50px;
position: relative;
}
#pic_2
{
position: absolute;
top: 0px;
left: 867px;
}
#footer
{
width: 500px;
margin: 375px auto 0px;
}
#footer a
{
text-decoration: none;
}
now the problem is with the a tag in the homepage div, i have tried very hard but i have no idea why its text is not adjusting on a single line instead it seems to creep up on multiple lines.
Any suggestions in this matter would be really helpful.
thank you.
I'm assuming you're talking about the 'set as homepage' button.
If so, The issue is that your css is writing a fixed with to the element inherited from #outer a which is making that element 90px wide.
You can fix this by simply adding the css style width: inherit; to #homepage a
Example:
http://jsfiddle.net/2jByx/1/
You need to add width to the "set as homepage" element
#homepage a {
.....
width: 120px; //added width
}
Take a look at here, http://jsfiddle.net/VkmHr/
is that you looking for?
Problem:
https://postimg.cc/image/tunhwh8qj/
The trouble I am currently having is that the border around my body is not outlining everything. As I have recently learned I'm guessing this means an element is out of the flow due to floating? However I am not certain how to fix it in this case.
My html is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<img src="final.jpg" id="banner">
<ul id="nav">
<li class="links">Home</li>
<li class="links">Location</li>
<li class="links">Facilities</li>
<li class="links">Attractions</li>
<li id = "endlink">Bookings</li>
</ul>
<div id="leftcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
<div class="slideshow">
<img src="1.jpg" width="600" height="450" />
<img src="2.jpg" width="600" height="450" />
<img src="3.jpg" width="600" height="450" />
</div>
</div>
<div id ="footer">
<p> fsafasfasf </p>
</div>
</body>
</html>
and my CSS is:
html{
font-family: sans-serif;
background-color:#464E54;
height: 100%;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 3px solid black;
padding: 0;
height: 100%;
}
#banner{
padding: 0px;
margin: 0;
display: block;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
border-bottom: 1px solid #7f7f7f;
border-top: 1px solid #7f7f7f;
}
#mainc {
float: left;
width: 654px;
background-color: white;
margin: 0;
padding-left: 8px;
padding-right: 4px;
height: 100%;
}
#leftcolumn {
padding-left: 3px;
float: left;
background-color: #dad8bf;
width: 290px;
border-right: 1px solid #7f7f7f;
height: 100%;
}
#footer {
clear: both;
position: relative;
bottom: 0.5px;
margin: 0;
background-color: #dad8bf;
border-top: 1px solid #7f7f7f;
}
#footer p{
margin: 0;
}
.links {
float: left;
margin: 0px;
border-right: 1px solid #7f7f7f;
}
#endlink {
float: left;
margin: 0px;
border-right: none;
}
#lastlink{
display: block;
width: 184px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
#lastlink:hover{
background-color: #999999;
}
a:link {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:visited {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover {
background-color: #999999;
}
a:active{
background-color: #999999;
}
.slideshow {
height: 483px;
width: 632px;
margin: auto;
padding: 0px;
}
.slideshow img {
padding: 0px;
border: 1px solid #ccc;
background-color: #eee;
}
thanks in advance guys!!
This is happening because your body has fix height of 100%.Change body tag css as:
height:auto;
min-height: 100%
if this doesn't work then add following with this:
overflow:auto;
Probably better NOT to use the body element for your container. Instead, just add
<div class="container"></div>
around your code and in your CSS changehtml to body and body to div.container.
body{
font-family: sans-serif;
background-color:#464E54;
height: 100%;
}
div.container{
width: 960px;
margin: auto;
background-color: white;
border: 3px solid black;
padding: 0;
}
Edit: I completely missed the 100%, that's gotta be it.
Add overflow: hidden to your body element. When elements are floated it will not push the parent container height past it unless there is a clearer