As you can see, the nav element has a bit too much top padding. The links' outlines are in the right spot though, there's just that extra annoying space. Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>'''+title+'''</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css"/>
<link rel="icon" type="image/x-icon" href="/favicon.ico"/>
<link rel="shortcut icon" href="/favicon.ico"/>
<style>
#import url(http://fonts.googleapis.com/css?family=Merriweather:400,700);
html, body {
margin: 0;
background: #333333;
height: 100%;
position: relative;
font-family: "merriweather";
overflow-y: hidden;
}
h1 {
font: bold 40pt roboto, arial, sans-serif;
margin: 0;
background: yellow;
padding: 30px;
}
nav {
display: inline-block;
}
nav a {
cursor: pointer;
font: bold 18px roboto;
display: inline-block;
transition-duration: 0.2s;
padding: 15px 30px;
background: linear-gradient(
#FF9900, #FF9900 50%, #333333 50%, #333333
/*outline: none;*/
);
background-size: 100% 200%;
color: black;
}
nav a:hover {
background-position: 100% 100%;
color: yellow;
}
nav a:focus {
outline:none;
}
#content-white-bkg {
background: white;
padding: 30px;
margin: 15px;
box-sizing: border-box;
overflow-y: scroll;
}
*:not(nav) > a:link {
cursor: pointer;
color: #FF9900;
transition-duration: 0.35s;
/*border-bottom: 1px solid #FF9900;*/
}
*:not(nav) > a:visited {
color: #FF6600;
cursor: pointer;
transition-duration: 0.35s;
}
*:not(nav) > a:hover, *:not(nav) > a:focus {
color: black;
outline: none;
}
a {
text-decoration: none;
color: black;
}
nav > a.selected {
background: #333333;
color: yellow;
text-shadow: 0 0 3px #FF9900, 0 0 5px #FF9900, 0 0 7px #FF9900, 0 0 10px #FF9900, 0 0 15px #FF9900;
transition-duration: 0.5s;
}
nav > a.selected:hover {
color: #333333;
}
::selection {
background: #FF7700;
}
::-webkit-selection {
background: #FF7700;
}
::-moz-selection {
background: #FF7700;
}
h3 {
font: bold 18px nunito;
margin-top: 0;
}
</style>
</head>
<body>
<h1 title='MUCAS: Multi-User Chat Application Server'>
<span><img width="95" height="53" title="" alt="" src="https://lh3.googleusercontent.com/-JNE2j3gX9mc/Vfn58paI2oI/AAAAAAAABRI/dqt4nqR5dZ4/w426-h238/MUCAS%2Blogo.jpeg"/></span>
<nav>Home/chatLog inSign upAbout MUCASContact me</nav>
</h1>
<div id="content-white-bkg">
'''+body+'''
<script>
var cwb = document.getElementById("content-white-bkg");
document.getElementById("content-white-bkg").style.height = (window.innerHeight-200)+"px";
window.onresize = function() {
document.getElementById("content-white-bkg").style.height = (window.innerHeight-200)+"px";
}
var path = window.location.pathname;
document.getElementById("nav-"+path).className = "selected";
</script>
</div>
</body>
</html>
Can anybody help me with this? Is it a layout issue, or something else?
Try this:
nav a {
vertical-align: top;
}
check the developer tools in your browser. Select the nav element and view the CSS panel associated with that element. Look at the inherited styles and the computed style. Is the margin or padding on the nav inheriting? Maybe it is a parent or child element of it is computed to zero. This could be the links, list, list items, or parent. If you can use flexbox I highly recommend it for aligning components and layout.
You can try
nav {
vertical-align: super;
}
"vertical-align: super" will treat your "nav" as a superscript. I tried putting it in your code and found it works. You can try if you think it can solve your problem. Thanks.
This should do the trick:
nav a {
float: left;
}
I should also change the h1 to a div element for semantics. h1 is used for example a page title and not to wrap a navigation bar and an logo in..
You are doing several things wrong here.
You are placing a navigation item and image inside of an header element. You are not using float for the elements you want to float.
Use a around it instead.
I made a jsfiddle illustrating the float, without correcting the semantics.
Consider doing something like this instead:
<div class="header">
<img src="image.jpg">
<nav>...links here...</nav>
</div>
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!
I'm sorta new to web development. My navbar seems to have this problem where anytime I resize the width of the window it edges off to the right. Example: https://imgur.com/OdVdwBR
I'm not sure if its the method I used to make the nav or something internal that's only happening to my system, but anyway;
How would I fix this?.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: sans-serif;
}
/*Navigation Bar*/
nav{
display: flex;
justify-content: space-around;
align-items: center;
font-family:'Nunito', sans-serif;
background-color: #49e949;
box-shadow: 0px 0px 10px 0px #535353dc;
white-space: nowrap;
}
.nav-links{
list-style: none;
display: flex;
justify-content: space-around;
width: 50%;
font-weight: 700;
font-size: 18px;
}
.nav-links a{
text-decoration: none;
color: #ffffff;
padding: 1rem 5rem;
display: block;
transition: 0.2s;
}
.nav-links a:hover{
color: #49e949;
background-color: #ddfddd;
}
.nav-links .active-page{
color: #49e949;
background-color: #ddfddd;
}
/*Content*/
.container{
text-align: center;
position: absolute;
top: 40%;
margin: 0;
left: 44%;
}
.count-container{
display: flex;
align-items: center;
}
.count-container div{
cursor: pointer;
}
.count-number{
font-size: 50px;
margin: 0px 40px;
}
/*Arrows*/
.add-arrow{
border-top: 25px solid transparent;
border-left: 50px solid #4667fa;
border-bottom: 25px solid transparent;
}
.subtract-arrow{
border-top: 25px solid transparent;
border-right: 50px solid #ff3333;
border-bottom: 25px solid transparent;
}
/*Arrows End*/
.reset{
text-transform: uppercase;
border: 2px solid black;
font-weight: 500;
border-radius: 5px;
padding: 5px;
cursor: pointer;
outline: none;
transition: 0.3s;
}
.reset:hover{
background-color: black;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/counter.css" type="text/css">
<title>Counter</title>
</head>
<body>
<nav>
<ul class="nav-links">
<li>Colour Switcher</li>
<li>Counter</li>
<li>Sidebar</li>
<li>Modal</li>
</ul>
</nav>
<div class="container">
<div class="count-container">
<div class="subtract-arrow" id="subtract-arrow"></div>
<h1 class="count-number" id="count-number">0</h1>
<div class="add-arrow" id="add-arrow"></div>
</div>
<button class="reset" id="reset">reset</button>
</div>
<!--Javascript-->
<script src="js/counter.js"></script>
</body>
</html>
Your padding: 1rem 5rem; property inside of .nav-links a is pushing your links outside of their container when the size of the navbar decreases in width. W3C defines a rem unit as:
Equal to the computed value of font-size on the root element.
In most browsers this computed value is equal to 16px so 5rem is actually pretty large. This means that there is 160px of combined padding between each of your links. So you could go with 1 or 2 rem instead and that will give you a lot more leeway as far as when elements will start getting pushed out of their container relative to screen size.
This happens because the width of your links are at a set width due to padding on each link which is set here in your CSS:
.nav-links a {
text-decoration: none;
color: #ffffff;
padding: 1rem 5rem;
display: block;
transition: 0.2s;
}
The width of your page isn't going to change the padding of those links, unless you tell it to. You can use media-queries to change the padding to be smaller when the page reaches a certain width like this:
#media (max-width: 900px) {
.nav-links a {
padding: 1rem 2rem;
}
}
Be sure to put this media query at the bottom of your CSS stylesheet.
You can read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/#media
My css class is not applying the style yet I have imported the css file. What might be the issue?
Here is the code:
.edubtn{
background-color: #862165;
border: 0;
padding: 2 10px;
color: rgba(255,255,255,0.7);
}
.edubtn:hover{
color: #fff;
}
<div class="edubtn" onclick="show()" >ORDER</div>
The only thing wrong with your css is you need to fix the padding attribute:
.edubtn{
background-color: #862165;
border: 0;
padding: 2px 10px;
color: rgba(255,255,255,0.7);
}
Rememeber if there is an error above this class, the css parser will skip the current block until the next working block.
Hey found the problem: I had put my css inside another (#media screen) brackets
#media screen and (max-width: 500px){
.attachchild{
width: 90%;
margin-top: 20px;
}
.edubtn{
background-color: #862165;
border: 0;
padding: 2px 10px;
color: rgba(255,255,255,0.7);
}
.edubtn:hover{
color: #fff;
}
your code works fine,
the background color is dark purple which is = to saying background-color: #862165;
the text color is white which is = to saying color: rgba(255,255,255,0.7);
I run your code and I did a <h2> with the same style and it works
HTML Code :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Beep-Boop</title>
</head>
<body>
<h2 class="something"> Something..</h2>
<div class="edubtn" onclick="show()" >ORDER</div>
</body>
Style CSS :
.something{
background-color: #862165;
border: 0;
padding: 10px;
color: rgba(255,255,255,0.7);
}
.something:hover{
color: #fff;
}
.edubtn{
background-color: #862165;
border: 0;
padding: 10px;
color: rgba(255,255,255,0.7);
}
.edubtn:hover{
color: #fff;
}
I have a transparent navigation bar that is fixed, and i am trying to get an image, or even just text aligned to the left. The following is the html code and css code I am using:
-------------------------------------------html code------------------------------------------------
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Home</title>
</head>
<body>
<div id="navigation">
<b>
Home
Portfolio
Our Apps
Support
Press
About
</b>
</div>
<div id="content">
Content Here!
</div>
</body>
</html>
-------------------------------------------------CSS Code------------------------------------------
body {
padding: 0; /* Gets rid of the automatic padding */
margin: 0; /* on HTML documents */
font-family: Lucida Grande, Helvetica, Arial, sans-serif;
font-size: 12px;
}
#navigation {
position: fixed;
text-align: center;
top: 0;
width: 100%;
color: #ffffff;
height: 20px;
padding-top: 5px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
#navigation a:visited {
color: white;
}
#content {
width: 80%;
padding-top: 70px;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
}
Thanks for any help!
-Aaron
You could use css floats.
CSS
#navigation div.block-left {
float: left;
}
#navigation div.block-right {
float: right;
}
HTML
<div id="navigation">
<div class="block-left">
Put stuff here!
</div>
<div class="block-left">
<b>
Home
Portfolio
Our Apps
Support
Press
About
</b>
</div>
Because both blocks are floating left they will stack in order from left to right.
Also, you shouldn't be using anymore as afaik its deprecated. Better options would be or
I think you will need to explain further, but if I correctly understood what you want, you might try this:
#navigation {
background-image: url('path/to/img.gif');
}
In declaration "#message a" I have a style padding that looks like this
padding: 2px 15px;
so what is the point to have padding top and bottom when there is no change in appearance. Even if I change padding to
"padding: 100px 15px;"
this 100px doesn't make any change in appearance. This 15px is correct and make some change in appearance.
<!DOCTYPE>
<html>
<head>
<title>Chapter 3: Expandable Rows</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body
{
margin:5px;
padding: 0;
font-family: Arial, sans-serif;
font-size: small;
text-align: center;
width: 768px;
}
#register
{
float: left;
width: 100%;
margin:0;
padding: 0;
list-style: none;
color: #690;
background: #BDDB62;
}
#register a
{
text-decoration: none;
color: #360;
}
#reg
{
float: left;
margin: 0;
padding: 8px 14px;
}
#find
{
float: right;
margin: 0;
padding: 8px 14px;
}
#message
{
clear:both;
font-weight: bold;
font-size:110%;
color:#fff;
text-align: center;
background: #92B91C;
}
#message p
{
margin: 0;
padding: 8px 14px;
}
#message strong
{
text-transform: uppercase;
}
#message a
{
margin: 0 0 0 6px;
padding: 2px 15px;
text-decoration: none;
font-weight: normal;
color: #fff;
}
</style>
</head>
<body>
<ul id="register">
<li id="reg">Not registered? Register now!</li>
<li id="find">Find a store</li>
</ul>
<div id="message">
<p><strong>Special this week:</strong> $2 shipping on all orders! LEARN MORE</p>
</div>`enter code here`
</body>
</html>
The anchor tag is an inline element so it will not display vertical padding.
While padding can be applied to all sides of an inline element, only
left and right padding will have an effect on surrounding content.
To see the vertical padding applied change the a to display:inline-block.
#message a{
padding: 2px 15px;
display: inline-block;
}
Example http://jsfiddle.net/sL7kT/
See this article on how CSS properties are applied to inline elements.
Simply a tag cannot be adjusted by width, height , padding etc..
Add: display: inline-block; to make anchor inline block.
#message a {
display: inline-block;
padding: 100px 10px;
}
Demo: http://jsfiddle.net/eAxsh/
you have your a tag in paragraph tag so its abide to the line height of its parents which is your paragraph tag.. so if you give the vertical padding it wont applyl.. rather use inline-block on your a tag