I'm having problems with my code. I have a fixed menu bar that works as it should but it doesn't resize when I change the size of the window. I need it to resize because if you change the window size, it will will not scroll horizontally and some buttons are cut off. How can I fix this?
Also feel free to make optimization or input on unnecessary code
Thanks
body {
margin: 0px;
padding: 0px;
background: url(images/gradient.jpg) no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
section {
margin: 0 auto;
border: 1px solid #000000;
border-radius: 8px;
background:#E5E7E9;
width: 958px;
height: 800px;
}
.bpic {
width: 200px;
height: 350px;
margin: 0px;
}
.biopic {
border: 2px solid #ddd;
border-radius: 8px;
padding: 5px;
width: 200px;
height: 350px;
margin: 40px 40px 40px 375px;
}
.bio {
margin: 40px;
font-family: verdana;
text-align: center;
}
#biography {
font-family: arial black;
font-size: 120%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
#assignments {
font-family: arial black;
font-size: 120%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
#projects {
font-family: arial black;
font-size: 120%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
#contact {
font-family: arial black;
font-size: 100%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
.email {
border: 1px solid #ddd;
border-radius: 8px;
padding: 5px;
width: 150px;
height: 96px;
margin: 3px 40px 3px 400px;
}
.banner {
width: 960px;
height: 143px;
margin: 0 auto;
padding: 0px;
background: url(images/banner.png) no-repeat;
}
.banner h2 {
font-family: vollkorn;
font-size: 350%;
color: white;
text-transform: uppercase;
margin: 0;
position: relative;
top: -40%;
left: 83%;
transform: translate(-50%, -50%);
}
.menu {
list-style-type: none;
margin: auto;
background-color: #333;
width: 100%;
background: url(images/menu.jpg) repeat-x;
position: fixed;
min-width: 1080px;
z-index: 1;
display: inline-block;
}
.menu ul {
float: left;
margin: 0px;
padding: 0 0 0 30%;
list-style: none;
}
.menu ul li {
padding: 0px;
display: inline;
}
.menu ul li a {
position: relative;
float: center;
display: inline-block;
height: 30px;
width: 180px;
text-align: center;
padding: 12px 0 0 0;
font-size: 13px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
outline: none;
min-height: 24px;
}
.menu li a:hover, .menu li .current {
position: relative;
color: #ffffff;
background: url(images/menuhoverright.jpg) top right no-repeat;
}
.menu li a:hover span, .menu li .current span {
position: absolute;
display: inline-block;
width: 15px;
height: 42px;
top: 0;
left: 0;
background: url(images/menuhoverleft.jpg) no-repeat;
}
.jprop {
border: 1px solid #ddd;
border-radius: 8px;
padding: 5px;
width: 200px;
height: 195px;
margin: 40px;
}
.jprop:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<!-- Homepage
My Biography Page
Author:
Date: 01/29/2017
-->
<meta charset="UTF-8" />
<title>Homepage</title>
<script src="modernizr-1.5.js"></script>
<link href="homestyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu">
<img src="images/menu.jpg" alt="menu" />
<ul>
<li><span></span>Biography</li>
<li><span></span>Assignments</li>
<li><span></span>Projects</li>
<li><span></span>Contact</li>
</ul>
</div>
<div class="banner">
<img src="images/banner.png" alt="banner" />
<h2>K V</h2>
</div>
<section>
<div id="biography">
<a name="biography"><h1>Biography</h1>
</div>
<div class="biopic">
<img src="images/biopic.jpg" width="230" height="490" alt="biopic" class="bpic"/>
</div>
<article>
<div class="bio">
<p>Hello, my name is &&&&&&. --
</p>
<p>I am currently pursuing my A.S. degree in computer information technology at?I plan to start
working in the field of IT, once I obtained my A.S. degree and certifications. While working, I plan on
continuing my education to obtain my bachelor’s degree in IT at UCF. I have always had a passion for
technology, especially computers. To be able to work in the field that I enjoy is one of my life goal.
</p>
</div>
</article>
</section>
<br>
<section>
<div id="assignments">
<a name="assignments"><h1>Assignments</h1>
</div>
<div class="jprop">
<a href="Jprop/basic.html">
<img src="images/jprop.JPG" alt="jprops">
</a>
</div>
</section>
<br>
<section>
<div id="projects">
<a name="projects"><h1>Projects</h1>
</div>
</section>
<br>
<section style="max-height: 210px;">
<div id="contact">
<a name="contact"><h1>Contact</h1>
</div>
<div class="email">
<a href="mailto:REDACTED">
<img src="images/email.png" alt="emails">
</a>
</div>
</section>
<br>
</body>
</html>
This bit of css from your style sheet is going to keep the menu from resizing below 1080px. So it will be too wide for many tablets and phones for example.
.menu {
min-width: 1080px;
}
Remove the min-width property, and see if that fixes it for you.
Related
So, I am using flexbox for some columns. Basically column 1 is left-aligned, column two i centered, and column three is right-aligned. No big deal, or so I thought. In Chrome, everything looks fine, even when looking at things through Chrome's Inspect tool...but on my iPhone I can't get the right column to justify-content.
My code looks like:
<div id="nav">
<div class="wrap">
<div>
<p><i class="far fa-dot-circle"></i> Watch</p>
</div>
<div>
<p><img src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="" title="" /></p>
</div>
<div>
<p><i class="fas fa-donate"></i> Give</p>
</div>
</div>
</div>
The css looks like:
#nav div {
align-items: center;
display: flex;
flex: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
letter-spacing: 2px;
line-height: 18px;
padding: 10px 20px 0;
text-transform: uppercase;
}
#nav > .wrap > div:nth-child(1) {
background: #00ff00;
justify-content: left;
}
#nav > .wrap > div:nth-child(2) {
background: #ff0000;
justify-content: center;
}
#nav > .wrap > div:nth-child(3) {
background: #0000ff;
justify-content: right;
}
#nav img {
max-width: 175px;
width: 100%;
}
#nav i {
color: #fff;
margin-right: 5px;
}
#nav a {
color: #fff;
text-decoration: none;
}
Here is the Fiddle: https://jsfiddle.net/1kw5g3h7/
I added the following code this morning and this works:
#nav > .wrap > div:nth-child(3) p {
text-align: right;
width: 100%;
}
I don't like this approach, it seems like to me the justify-content just isn't working is there a way to fix this using flexbox? I'm trying to understand why my original code isn't working on my iPhone? Maybe it's because I have Font Awesome icons in front of the text, I just don't know. Any ideas?
Thanks,
Josh
I didn't realize until now that I hadn't ever posted my final code. This is what I ended up with: https://jsfiddle.net/tc36e24s/2/
HTML:
<div id="head">
<div id="nav">
<i class="ion-android-close"></i>
<ul>
<li>Watch</li>
<li>Give</li>
<li><img src="images/logo.png" alt="Logo" title="Logo" /></li>
<li>Visitors</li>
<li>Contact</li>
</ul>
</div>
<div id="logo">
<p><img src="images/logo.png" alt="Logo" title="Logo" /></p>
<div onclick="openNav()" class="open">
<i class="ion-android-menu"></i>
</div>
</div>
</div>
CSS
body {
background: #009151;
}
#head {
display: flex;
flex-flow: column;
height: 100vh;
}
#nav ul {
flex: 0 1 auto;
}
#nav ul img {
max-width: 175px;
width: 100%;
}
#nav ul i {
color: #9ac2e7;
margin-right: 5px;
}
#nav li {
font-family: 'Open Sans', sans-serif;
letter-spacing: 2px;
line-height: 18px;
padding: 10px 20px 0;
text-align: center;
text-transform: uppercase;
}
#logo {
display: flex;
}
#logo img {
max-width: 200px;
margin: 20px 30px;
width: 100%;
}
#media screen and (max-width: 800px) {
#head .open {
color: #9ac2e7;
font-size: 30px;
margin: 20px 30px;
text-align: right;
width: 100%;
}
#head .open:hover {
cursor: pointer;
}
#nav {
background: #9ac2e7;
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
#nav ul {
align-items: center;
display: flex;
flex-flow: column;
height: 100%;
justify-content: center;
width: 100%;
}
#nav ul a {
color: #000;
text-decoration: none;
}
#nav li {
font-size: 20px;
padding: 10px 0;
}
#nav li:nth-child(3) {
display: none;
}
#nav .close {
color: #000;
font-size: 30px;
position: absolute;
right: 30px;
top: 20px;
}
}
#media screen and (min-width: 801px) {
#nav .close {
display: none;
}
#nav[style] {
display: block !important;
}
#nav ul {
align-items: center;
display: flex;
}
#nav ul a {
color: #9ac2e7;
text-decoration: none;
}
#nav li {
flex: 1;
font-size: 14px;
}
#logo {
display: none;
}
}
JS
function openNav() {
document.body.style.overflow="hidden";
document.getElementById("nav").style.display = "block";
}
function closeNav() {
document.body.style.overflow="scroll";
document.getElementById("nav").style.display = "none";
}
I added some JS to make my menu work on mobile, but other than that this is code I went with...which is pretty much the same as before except I added two additional links (one on each side of the logo).
Thanks,
Josh
My flex container holds three divs,
every div has property of flex-grow
I have a classed image that does not work on align-items: center;
this is the flex container
.top-container {
display: flex;
width: 100% !important;
height: 70px;
}
and this is the container inside
.top-notifications {
flex-grow: 6;
background-color: #F8F9F9;
text-align: right;
align-items: center;
}
and the image class is
.user-picture {
width: 35px;
height: 35px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}
every elements in boxes are aligned centered but the classed image
body {
margin: 0;
}
.top-container {
display: flex;
width: 100% !important;
height: 70px;
}
.logo {
background-color: #EAFAF1;
display:flex;
align-items:center;
}
.top-menu {
background-color: #FEF9E7;
display:flex;
align-items:center;
}
.top-notifications {
flex-grow: 1;
display:flex;
justify-content: flex-end;
align-items: center;
background-color: #F8F9F9;
}
/* top menu */
.top-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FEF9E7;
}
.top-menu li {
float: left;
}
.top-menu li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin: 5px;
}
.top-menu li a:hover {
background-color: #85C1E9;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 5px;
}
/* end top menu */
.user-picture {
width: 35px;
height: 35px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}
<div class="top-container">
<div class="logo"><img src="images/logo.png" class="logo" /> </div>
<div class="top-menu">
<ul>
<li><a class="active" href="#home">Dashboard</a></li>
<li>Users</li>
<li>Settings</li>
</ul>
</div>
<div class="top-notifications">
Notifications<i class="fa fa-bell-o fa-lg"></i>
Reports<i class="fa fa-flag fa-lg"></i>
<img src="images/boy.png" class="user-picture" />
</div>
</div>
align-items:center; is used on the flex parent, not on the flex item itself. See css flex guide
I would like to create a checkbox that looks like flipswitch.
I used this CSS classes. and I used this design elements. But I could not succeded. There is something that i missed. I do not know how to manage that?
Codes in XPages:
<div class="onoffswitch">
<xp:checkBox text="Label" id="onoffswitch"
defaultChecked="true">
<span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span>
</xp:checkBox>
</div>
CSS Class: Resources\Style Sheets
.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 6px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 56px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
I find that when you need to put markup inside a control it mostly won't work because the XPages rendering will change or ignore it. To get around this I use plain markup with a hidden control located outside of the markup. I manage the state of the hidden control with JQuery.
Here is a working example for your FlipSwitch:
<xp:checkBox text="Label" id="checkBox1"></xp:checkBox>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"
onclick="x$('#{id:checkBox1}').prop('checked', !(x$('#{id:checkBox1}').prop('checked')) )" />
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
The x$() function is a handly utility from Mark Roden:
function x$(idTag, param){ //Updated 18 Feb 2012
idTag=idTag.replace(/:/gi, "\\:")+(param ? param : "");
return($("#"+idTag));
}
I am having problems with the z-index. I am trying to get the button link to display overtop of the image, but it just isn't seeming to work. The image below shows how I am wanting it to look.
Here is the HTML:
<div class="featured">
<img src="images/featured.png" alt="Featured Image">
<div class="button-2">
Buy Now
</div>
</div>
Here is the CSS:
.featured img
{
float: left;
z-index: -1;
}
.button-2
{
-moz-box-shadow:inset 0px 1px 0px 0px #940c00;
-webkit-box-shadow:inset 0px 1px 0px 0px #940c00;
box-shadow:inset 0px 1px 0px 0px #940c00;
background-color:#8b0101;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0px;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:43px;
line-height:43px;
width:135px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #810e05;
float: left;
}
.button-2 a
{
color: #fff;
font-size: 20px;
letter-spacing: 2px;
}
.button-2:hover
{
background-color:#6c0301;
}
.button-2:active
{
position:relative;
top: 1px;
}
This is what is displaying: http://imgur.com/XungDOU
This is what I want it to do: http://imgur.com/XHXTKae
Try this:
.button-2{
position: absolute;
left:50%;
top:50%;
z-index:99}
It's my first time here on the forum. I am a beginner in webdesign and encountered a problem I could not find correct answer to. So far I searched for my answer on mutliple sites but the closest to my problem was this;
Horizontal to vertical menu, on browser window resize.
My problem is as followed: my nav ul list gets stacked when I resize my browserwindow to small....I know it must be possible to let it all stay horizontally on a desktopscreen as it is...like on the page of APPLE store for example. I just have no clue what I am doing wrong.
Underneath is my code....hopefully someone can help me and filter out my errors.
HTML
<div id="navcontainer">
<div id="navlist">
<ul>
<li id="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
CSS
body {
margin: 200px 0px 10px 0px;
padding: 0px;
text-align: center;
background-image:url(../images/bg.jpg);
background-repeat: repeat;}
/***** HEADER *****/
#header {
width: 900px;
text-align: center;
font-family: Raleway;
font-size: 30px;
font-weight: bolder;
font-variant: normal;
color: rgba(51,51,51,1);
position: absolute;
display: block;
top: 0px;}
/***** NAVIGATION *****/
#navcontainer {
position: relative;
background-image: url(../images/navbar.png);
background-repeat: repeat-x;
height: 37px;
-o-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
-moz-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
-webkit-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
-ms-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
font-family: Raleway;
display: block;
width: 100%; }
#navlist {
float:left;
position:relative;
left:50%;
padding-top: 1.5px;}
#navlist ul {
float:left; /* IE6 needs this */
position:relative;
left:-50%;
list-style:none;
margin: 0 auto;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 100%;
font-style: normal;
font-weight: bolder;
font-variant: normal;
text-decoration: none;
padding: 0px; }
#navlist li {
float:left;
display: inline;
padding-top: 6.8px;
padding-right: 25px;
padding-bottom: 6.8px;
padding-left: 25px;}
#navlist li a {
text-decoration: none;
color: #424242;
padding-top: 6.8px;
padding-right: 19px;
padding-bottom: 6.8px;
padding-left: 19px;}
#navlist li a:hover {
background-image: url(../images/navbar3.png);
background-repeat: no-repeat;
background-position: bottom;
padding-right: 19px;
paddin-left: 19px;}
#navlist li a:active {
background-image: url(../images/navbar1.png);
background-repeat: no-repeat;
background-position: bottom;
border-width: 1px;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: none;
border-left-style: inset;
border-top-color: rgba(102,102,102,1);
border-right-color: rgba(153,153,153,1);
border-left-color: rgba(153,153,153,1); }
#navlist li a:visited {
text-decoration: none;
color: #424242;
padding-top: 6.8px;
padding-right: 0px;
padding-bottom: 6.8px;
padding-left: 0px;}
#navlist li a:focus {
background-image: url(../images/navbar1.png);
background-repeat: no-repeat;
background-position: bottom;
padding-right: 19px;
padding-left: 19px;
border-width: 1px;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: none;
border-left-style: inset;
border-top-color: rgba(102,102,102,1);
border-right-color: rgba(153,153,153,1);
border-left-color: rgba(153,153,153,1);
text-shadow: 1px 1px #FFF, -0.3px -0.3px #000;}
I had this same problem with my navigation. My nav wasn't structured exactly like the solution below but applying the CSS accordingly worked great.
Here is the solution I found.
http://jsfiddle.net/9x7Am/5/
HTML
<ul id='navbar'>
<li><a href='#'> 1 </a></li>
<li><a href='#'> 2 </a></li>
<li><a href='#'> 3 </a></li>
<li><a href='#'> 4 </a></li>
<li><a href='#'> 5 </a></li>
<li><a href='#'> 6 </a></li>
</ul>
CSS
#navbar {margin:0; padding:0; overflow:hidden; width:100%;}
li {width:100%}
li a {padding: 6px 0; float:left; width:16%; text-align:center;}