This is how my code looks like
function myFunction() {
var x = document.getElementById("leftsidebar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
body {
padding-top: 5px;
background: #efefef;
color: #000;
font: 10pt/18pt Arial, sans-serif;
border-top: 6px;
}
#navbar {
max-width: 928px;
font-size: 22px;
background: #FFF;
box-shadow: 0 0 20px #CCC;
border: 1px solid #ccc;
zoom: 1;
margin: 0 auto 10px;
padding: 10px;
font-size: 2em;
font-weight: bold;
background-color: #4596d8;
margin-bottom: -4px;
}
#content {
display: flex;
max-width: 946px;
background: #FFF;
box-shadow: 0 0 20px #CCC;
border: 1px solid #ccc;
zoom: 1;
margin: 0 auto 10px;
font-size: 2em;
font-weight: bold;
margin-bottom: -4px;
background: #FFF;
}
#leftsidebar {
width: 200px;
border-right: 2px solid #4596d8;
}
#leftsidebar ui a {
display: block;
font-size: 18px;
color: black;
width: 100%;
padding-left: 10px;
padding-top: 10px;
box-sizing: border-box;
border-top: 1px solid red rgba(255, 255, 255, .1);
border-bottom: solid 1px;
text-decoration: none;
}
#leftsidebar ui a:hover {
background-color: #4596d8;
}
#maincontent {
width: 728px;
padding: 10px;
padding-top: 5px;
font: 10pt/18pt Arial, sans-serif;
}
h1 {
display: block;
font-size: 2em;
font-weight: bold;
border-width: 6px;
}
div {
display: block;
}
#container {
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: 0 0;
padding: 0;
}
table {
margin-left: 20%;
margin-right: 20%;
border: 1px solid #4596d8;
}
form {
margin-left: 0 auto;
margin-right: 0 auto;
}
#footer {
text-align: center;
margin: 0 auto;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
#media screen and (max-width: 600px) {
.leftsidebar a:not(:first-child) {
display: none;
}
.leftsidebar a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.leftsidebar.responsive {
position: relative;
}
.leftsidebar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
#navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
<div id="navbar">
MySite
</div>
<div id="content">
<div id="leftsidebar">
<ui>
Site1
Site2
Site3
<a href="site4.html" class="w3-bar-item w3-button">Site4/a>
Site5
</ui>
</div>
When I resize my site everything stays the same, nothing changes. I changed the lines so many times and nothing changed. Besides this problem everything else I could solve on my own.
My code is from this example. The only difference from the example site is, that my websites navbar is on the left and my logo in in the top navbar. So when I resize it or am on a certain width the menu elements are in the navbar hidden behind a icon.
You where using the .leftsidebar selector (class selector) instead of #leftsidebar the ID selector. The element doesnt have a class so you have to use #leftsidebar
function myFunction() {
var x = document.getElementById("leftsidebar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
body {
padding-top: 5px;
background: #efefef;
color: #000;
font: 10pt/18pt Arial, sans-serif;
border-top: 6px;
}
#navbar {
max-width: 928px;
font-size: 22px;
background: #FFF;
box-shadow: 0 0 20px #CCC;
border: 1px solid #ccc;
zoom: 1;
margin: 0 auto 10px;
padding: 10px;
font-size: 2em;
font-weight: bold;
background-color: #4596d8;
margin-bottom: -4px;
}
#content {
display: flex;
max-width: 946px;
background: #FFF;
box-shadow: 0 0 20px #CCC;
border: 1px solid #ccc;
zoom: 1;
margin: 0 auto 10px;
font-size: 2em;
font-weight: bold;
margin-bottom: -4px;
background: #FFF;
}
#leftsidebar {
width: 200px;
border-right: 2px solid #4596d8;
}
#leftsidebar ui a {
display: block;
font-size: 18px;
color: black;
width: 100%;
padding-left: 10px;
padding-top: 10px;
box-sizing: border-box;
border-top: 1px solid red rgba(255, 255, 255, .1);
border-bottom: solid 1px;
text-decoration: none;
}
#leftsidebar ui a:hover {
background-color: #4596d8;
}
#maincontent {
width: 728px;
padding: 10px;
padding-top: 5px;
font: 10pt/18pt Arial, sans-serif;
}
h1 {
display: block;
font-size: 2em;
font-weight: bold;
border-width: 6px;
}
div {
display: block;
}
#container {
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: 0 0;
padding: 0;
}
table {
margin-left: 20%;
margin-right: 20%;
border: 1px solid #4596d8;
}
form {
margin-left: 0 auto;
margin-right: 0 auto;
}
#footer {
text-align: center;
margin: 0 auto;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
#media screen and (max-width: 600px) {
#leftsidebar a:not(:first-child) {
display: none;
}
#leftsidebar a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
#leftsidebar.responsive {
position: relative;
}
#leftsidebar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
#navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
<div id="navbar">
MySite
</div>
<div id="content">
<div id="leftsidebar">
<ui>
Site1
Site2
Site3
<a href="site4.html" class="w3-bar-item w3-button">Site4/a>
Site5
</ui>
</div>
Your code has a lot of bugs. Firstly the ui (unordered list) has to have li as it children. Anything besides an li as a ui child is a bug. Though you can have your link inside li you cannot have it as child of ui directly. If you put value 0 as border it doesn't work and is a bug. You should value it as none instead of 0 so border: none; the same with background padding and outline it should have a value of none.
Margin cant be both 0 and auto just say auto instead of 0 auto. You should also see some actual code of others. You are using code like english not like computer you have used a lot uneccesary css properties. Watch others coding youtube. You can use padding and margin the best way instead of writing padding left padding top. Just use thus syntax: padding: top right bottom left;
For example padding: 0 9px 0 9px;
For your media queries search on internet and use #media only screen and (max-width: 600px) {} device that has 600 px width like a mobile
Dont use the same value use a different value.
#media only screen and (max-width: 900px) {} this implements on a 900px width device like tablet.
I am pretty new to web development. I have basic experience with html/css and am using bootstrap to create a website just to kind of teach myself. I want my image to cover the whole page which it does when i decrease the size of the browser but when using full screen it adds padding to the side.
full screen example
i have tried some things to fix it like changing padding to -20px or making overflow-x hidden but can't seem to fix it.
bootstrap code
<div id="banner" class="container-fluid">
<div class="col-lg-12 nopadding">
<img src="images/headercopy.jpeg">
</div>
</div>
css code
html, body {
line-height: 1.8;
background-color: rgb(0, 0, 0);
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
h3 {
text-align: center;
color: white;
}
.nav {
color: white;
}
.navbar-transparent .navbar-brand {
color: white; //nightalreadycolor
}
.navbar-collapse .page-scroll {
color: white; //nightalreadycolor
}
.navbar-transparent .navbar-brand:hover, .navbar-transparent .navbar-brand:focus {
background-color: transparent;
color: #c8e8f4; //light blue
}
.navbar .navbar-transparent .navbar-fixed-type {
background-color: red;
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.aboutimage {
background-size: 100% 100%;
}
img {
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
#about {
color: white;
height: 600px;
margin-right: 15px;
text-align: justify;
}
#about p {
display: block;
font-size: 20px;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
color: white;
}
#about p img {
padding-top: 5px;
outline: solid #f00 1px !important;
}
.container {}
#fleet {
border-right: thin solid black;
color: white;
width: 50%;
height: 600px;
float: left;
background-color: grey;
}
#fleet h1 {
text-align: center;
}
#fleet h2 {
padding-right: 10%;
float: right;
}
#rates {
color: white;
width: 50%;
height: 600px;
float: right;
background-color: #574951;
}
#rates h1 {
text-align: center;
}
#contact {
text-align: center;
height: 600px;
color: white;
background-color: #574951;
}
#reservation {
display: inline-block;
height: 600px;
color: white;
text-align: center;
}
Sorry if some of my code seems to be redundant or inefficient like i said I'm still very new to all of this. If there's any other information you need let me know.
Use images as a background. So if it's the #banner div that you want to fill up, your css will be like this:
#banner {
background-image: url('images/headercopy.jpeg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
Then you just have to use this markup:
<div id="banner" class="container-fluid"></div>
Of course you can set to your css code for the #banner the height you want etc.
I am trying to use the trick of two nested elements to make content scroll without the scrollbar being visible.
To illustrate what I mean:
<div class="outer">
<div class="inner">
//content here
</div>
</div>
The content is higher than the outer div, so I want it to scroll. However I don't want a visible scrollbar. So I set the following CSS:
.outer {
overflow: hidden;
}
.inner {
overflow-y: scroll;
width: 110%;
}
However this is behaving quite oddly. It works to an extent - the content scrolls slightly. However it doesn't scroll as far as it needs to to be visible, and the inner div seems to ignore the padding on the outer div.
This is my full CSS. The relevant bits are .section and .innerSection
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
html, body {
background-color: #330033;
height: 100%;
width: 100%;
color: #FFFFCC;
font-family: 'Andika', sans-serif;
font-size: 20px;
font-weight: 400;
text-align: center;
}
a:link{text-decoration: none; color: #FFFFCC;}
a:visited{text-decoration: none; color: #FFFFCC;}
a:hover{text-decoration: none; color: white; font-weight: bold;}
form {
margin: 0 auto;
max-width: 500px;
padding-bottom: 1em;
text-align: left;
}
h1 {
font-size: 72px;
}
h2 {
font-weight: 600;
}
h3 {
font-size: 64px;
}
.imgLink {
border-radius: 5px;
margin: 1%;
max-width: 50%;
}
.innerSection {
height: 100%;
overflow-y: scroll;
width: 110%;
}
.section {
background-color: rgba(51,51,51,0.5);
border-radius: 5px;
display: inline-block;
margin: 1%;
max-height: 42%; /*simplifies responsive height lower down*/
min-height: 42%;
overflow: hidden;
padding: 1%;
vertical-align: top; /*otherwise sections move down when content added*/
width: 28%;
}
#desktopTitle {
background-color: #330033;
}
#tabletTitle {
display: none;
}
#media screen and (max-width: 1020px), screen and (max-height: 925px) {
.section {
display: block;
max-height: fit-content;
min-height: 25%;
width: 94%;
}
#contact {
margin-top: 5%;
}
#desktopTitle {
display: none;
}
#resources {
display: none;
}
#tabletTitle {
display: block;
}
#twitter {
display: none;
}
}
#media screen and (max-width: 600px) {
#tabletTitle {
font-size: 48px;
}
}
Try this (modifications are commented):
.innerSection {
height: 100%;
overflow-y: auto; /*instead of scroll*/
width: 110%;
padding: 20px; /*add padding here*/
}
.section {
background-color: rgba(51,51,51,0.5);
border-radius: 5px;
display: inline-block;
margin: 1%;
height: 100%; /*It does not seem to work without specifying a height.*/
max-height: 42%;
min-height: 42%;
overflow: hidden;
padding: 1%;
vertical-align: top;
width: 28%;
}
I'm having a strange CSS problem where the main div container on my website shifts to the right when I visit certain pages. This happens even though there is no specific CSS rule to move it
I've uploaded a temp version of my site here:
http://myawesometestsite.ddns.net/
When you go to the Publications and Contact page the entire container shifts to the right by a few pixels. The position appears to be correct and unshifted on all other pages
This is the full CSS I'm using:
body {
background-color: #dcd8cf;
font-family: Raleway, Arial, sans-serif;
font-size: 1em;
}
h1 {
font-size: 1.5em;
color: #832C00;
margin-bottom: 30px;
}
h2 {
font-size: 1.2em;
color: #832C00;
margin-top: 30px;
}
h3 {
font-size: 1em;
margin-bottom: 5px;
margin-top: 20px;
}
h4 {
font-size: 1em;
font-style: italic;
margin-top: 0px;
margin-left: 10px;
margin-bottom: 5px;
}
.container {
position: relative;
left: 50%;
margin-left: -470px;
width: 940px;
border: 1px solid black;
}
/*
Header
*/
header {
position: relative;
display: inline-block;
width: 100%;
height: 180px;
background-color: #a63700;
}
header h1 {
position: absolute;
font-size: 2.5em;
color: #e6e6dc;
top: 50px;
left: 100px;
margin: 0px;
}
header h2 {
position: absolute;
font-size: 0.77em;
color: #e6e6dc;
top: 100px;
left: 100px;
margin: 0px;
opacity: 0.7;
}
header img {
border: 2px solid #e6e6dc;
border-radius: 50%;
max-width: 100%;
max-height: 100%;
}
.profileImage {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
max-width: 150px;
max-height: 150px;
}
.skillIcons {
position: absolute;
right: 25px;
top: 15px;
}
.skillIcons img {
display: inline;
width: 75px;
height: 75px;
padding: 5px;
margin: 15px;
opacity: 0.7;
}
/*
Navigation menu
*/
nav {
position: relative;
z-index: 1;
text-align: center;
letter-spacing: 2px;
background-color: #a63700;
height: 50px;
width: 100%;
}
nav a {
position: relative;
top: 20px;
color: #D1D1C9;
text-decoration: none;
padding: 0 30px;
}
nav a:hover {
border-bottom: solid 1px #e6e6dc;
padding-bottom: 3px;
}
.navSelected {
text-shadow:0px 0px 1px white;
color: white;
}
/*
Main content
*/
main {
position: relative;
background-color: white;
padding: 10px;
}
/*
Footer
*/
footer {
position: relative;
color: #e6e6dc;
background-color: #a63700;
font-size: 10pt;
padding: 10px;
}
.leftFooter ul {
padding-left: 0px;
}
.leftFooter li {
display: inline;
list-style-type: none;
}
.leftFooter li a {
color: #e6e6dc;
text-decoration: none;
}
.leftFooter li + li:before {
color: #e6e6dc;
content: "|";
padding: 10px;
}
.rightFooter {
position: absolute;
right: 10px;
top: 4px;
}
.rightFooter img {
display: inline;
max-width: 30px;
max-height: 30px;
vertical-align: middle;
margin-top: -3px;
}
.copyright {
font-size: 1em;
}
/*
Home page
*/
/*
Publications page
*/
.hangingIndent {
padding-left: 1.5em;
text-indent:-1.5em;
}
.publications h2 {
margin-top: 50px;
}
/*
Code page
*/
.codeProjects a {
color: #a63700;
text-decoration: none;
}
.codeProjects a:hover {
text-decoration: underline;
}
.codeProjects p {
margin-left: 10px;
}
/*
CV page
*/
.cvContainer {
width: 90%;
margin: 0 auto;
}
.cvEntry {
margin-bottom: 30px;
margin-left: 20px;
margin-right: 20px;
}
.sectionHeading {
width: 100%;
border-bottom: 1px solid #000;
}
.alignLeft {
display: block;
float: left;
text-align: left;
width: 80%;
margin-top: 10px;
}
.alignLeft p {
font-size: 1em;
}
.alignLeftSub {
margin-top: -10px;
margin-left: 20px;
}
.alignRight {
display: block;
float: right;
text-align: right;
width: 20%;
margin-top: 10px;
}
.clear {
clear: both;
}
/*
Contact page
*/
.contactInfo {
margin-left: 20px;
}
.contactInfo img {
display: inline;
max-width: 30px;
max-height: 30px;
vertical-align: middle;
}
.emailHidden {
display: none;
}
.contactInfo a {
margin-left: 5px;
color: #a63700;
text-decoration: none;
}
.contactInfo #emailAddress {
margin-left: 2px;
}
.contactInfo #emailAddress a {
margin-left: 8px;
}
/*
Media queries
*/
#media screen and (max-width : 940px) {
.container {
position: relative;
left: 0px;
margin: 0px;
width: 100%;
}
header h1 {
left: 5%;
margin: 0px;
}
header h2 {
left: 5%;
margin: 0px;
}
.skillIcons img {
max-width: 70px;
max-height: 70px;
margin-left: 5px;
margin-right: 0px;
}
}
#media screen and (max-width : 800px) {
header h1 {
display: none;
}
header h2 {
display: none;
}
.skillIcons img {
display: none;
}
nav {
height: 150px;
}
nav a {
display: block;
}
nav a:hover {
border-bottom: none;
padding-bottom: 0px;
}
}
#media screen and (max-width : 600px) {
.rightFooter {
position: relative;
display: block;
margin-left: 10px;
}
}
I don't believe there's anything in here that's causing the container to shift for just those 2 pages but maybe I'm missing something. Anyone have any idea whats causing this?
Add "overflow-y: scroll;" to your "body" selector. It should look like this in your CSS:
body {
background-color: #dcd8cf;
font-family: Raleway, Arial, sans-serif;
font-size: 1em;
overflow-y: scroll;
}
The lenght of the pages create a vertical scroll bar. Publication and contact are small then the other are more big then the screen. for fix this you need an overflow-y set to scroll;
body {
overflow-y: scroll;
}
I am reworking my website and hit two issues that I would like help with if possible.
The link to the test site is http://elovideo.com/test/index.html
1) I am adding embeded video with a poster so that it doesn't download when the page loads. When I view the page in Firefox and click on the movie, the hover still works on my other hyperlinks. My links light up, an underline appears or the hand is visible all indicating that those items can be selected.
However in Safari, once the video is selected my hover doesn't work. I am still able to click on the links, but for someone new to my site they wouldn't realize that some of the text is a hyperlink. The hover works fine prior to selecting the video for view/loading.
2) A dotted box appears around my video viewer when the movie is played in Firefox. I would like to be able to stop that from occurring. It doesn't happen in Safari.
I am quite certain the fault lies in user error as I am not highly skilled in writing code. Any help would be greatly appreciated. If I am doing something wrong, please let me know.
Thanks!
Erica
Style sheet CSS Code BELOW - HTML can be viewed on website source listed above.
html, body , ul, li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: 0;
}
a {
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.more {
text-align: right;
}
.left {
float: left;
}
.clear {
clear: both;
}
body, h1, h2, h3, form {
font: 14px tahoma, arial, sans-serif;
margin: 0;
padding: 0;
color: #7a895d; repeat-x;
}
body {
background: #7a895d url(images/headerback.jpg) repeat-x;
text-align: left;
}
#bodyinner {
background: url(images/white.jpg) repeat-y;
width: 960px;
margin: 0;
padding: 10px 30px 20px 10px;
z-index: 2;
}
#wrapper {
text-align: left;
margin: auto;
width: 1000px;
background: #7a895d ;
}
#header {
height: 100px;
position: absolute;
}
#header h1 {
margin-top: 0px;
}
#header h1 img {
display: block;
}
#bnav {
margin-top: 0px;
margin-left: 200px;
}
#bnav img {
float: left;
}
#nav {
margin-top: -80px;
margin-left: 200px;
}
#nav img {
float: left;
}
#headline {
padding: 210px 0px 0px 10px;
}
#photo {
float: left;
width: 624px;
}
#photo div {
border: 1px solid #a5b87c;
padding: 2px;
}
#photo img {
display: block;
}
#search-news {
float: right;
width: 240px;
}
#search-news div {
padding: 0px 0px 0px 0px;
}
#search-news #q {
width: 240px;
border: 1px solid #859D31;
margin: 1em 0 0 1em;
}
#search-news .downcast {
background: #E6E7E7;
border-top: 1px solid #CFD0D0;
padding: 0px 3px 3px 3px;
margin: 0.2em 0 0.4em 1em;
}
#search-news h3 {
background: url(images/bullet_letter.gif) no-repeat;
padding-left: 15px;
font-weight: bold;
margin: 1em 0 0.4em 1em;
}
#search-news p {
padding-left: 15px;
padding-right: 2px;
margin: 1em 0 0.4em 1em;
background: #7a895d repeat-x;
}
a {
font-weight: bold;
color: #5C5C5C;
}
#body-left {
float: left;
margin: 20px;
width: 408px;
}
#body-right {
float: right;
margin: 20px;
width: 450px;
}
#body-full {
float: left;
width: 1000px;
}
#body-left ul.plussbullets {
margin-top: 245px;
margin-left: 120px;
padding: 0;
font-weight: bold;
position: relative;
}
#body-left ul.plussbullets li {
background: top left url(images/bullet_plus.gif) repeat-x;
margin: 0 0 10px 0;
padding: 0 0 0 25px;
position: relative;
}
#body h2, #body p {
margin: 0.3em 0;
}
#body-right p {
margin-right: 2em;
}
#body a.green {
color: #9AAB68;
font-weight: normal;
text-decoration: underline;
}
#gallery img {
float: left;
padding: 0 0 5px 5px;
}
#footer {
color: #FFFFFF;
background: #42453D url(images/footer_bg.gif) repeat-x;
padding: 10px 10px 10px 10px;
font-weight: bold;
}
#footer p {
margin: 0;
text-align: center;
padding: 0px;
}
I don't quite understand what is being referenced in your first question. I don't see a hover working in either browser type.
In regards to removing the dotted outline, you want to use the following CSS for your object:
outline: none;