Flexbox layout without media queries - flexbox

is it possible to do this layout https://codepen.io/Eu-g/pen/jOEdaEW?editors=1100 with flexbox and without media queries?
<nav>
<div class="first">first prev</div>
<div class="last">next last</div>
<div class="page">1 2 3 4 5 6 7</div>
</nav>
nav {
overflow: hidden;
outline: 1px solid navy;
text-align: center;
display: block;
margin: auto;
}
.first {
outline: 1px solid pink;
float: left;
}
.last {
outline: 1px solid red;
float: right;
}
.page {
outline: 1px solid green;
position: relative;
display: inline-block;
}
Thanks.

Related

Positioning div elements without serverside calculations

I have created a site that has a dynamically built menu, which draws out tabs, according to some arrays in the backend. Selecting a tab fetches the whole page again, with different css classes applied, depending on the selected tab.
Basically, I am using style="position: absolute; left: xxxxpx" where the xxxx is calucated in the backend.
I want to change the site so that the gui is more independent of the backend.
I am unsure how to proceed with changing this so that all the layout calculations are made by css. I was thinking about doing it with css variables, and keeping the essential same code, but I am unsure how to determine which node and therefore how far it should be offset.
My Current Code
1st tab selected
<div class="topTabSelected tab-admin noprint" style="left: 204px;">Administration</div>
<div class="topTab tab-design noprint" style="left: 336px;"> Design ManagerProject Manager</div>
<div class="topTab tab-project noprint" style="left: 468px;">Project Manager</div>
3rd tab selected
<div class="topTab tab-admin noprint" style="left: 204px;">Administration</div>
<div class="topTab tab-design noprint" style="left: 336px;"> Design ManagerProject Manager</div>
<div class="topTabSelected tab-project noprint" style="left: 468px;">Project Manager</div>
CSS
.tab-admin{
background-color: var(--admin-tab-bg);
}
.tab-design{
background-color: var(--design-tab-bg);
}
.tab-project{
background-color: var(--project-tab-bg);
}
.topTabSelected {
position: absolute;
top: 31px;
z-index: 8;
color: white;
font-weight: bold;
border-left: 1px solid black;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: transparent;
padding: 3px;
border-radius: 5px 5px 0 0;
width: 120px;
height: 17px;
text-align: center;
}
.topTab {
position: absolute;
top: 31px;
z-index: 2;
color: white;
font-weight: bold;
border-left: 1px solid black;
border-top: 1px solid black;
border-right: 1px solid black;
padding: 3px;
border-radius: 5px 5px 0 0;
width: 120px;
text-align: center;
}
.topTab a {
text-decoration: none;
color: white;
}
.topTab a:hover {
text-decoration: underline;
color: white;
}
Backend code to calculate positions:
$tabwidth = 132;
$widthmodifier = 200;
for ($mainpageCounter = 1; $mainpageCounter <= count($mainpage); $mainpageCounter++) {
$topTabDivStart = "\n<div class=\"topTab " . ($p == $mainpageCounter ? "topTab-Selected " : "") . $mainpage[$mainpageCounter]["cssClass"] . " noprint\" style=\"left: " . $widthmodifier . "px;\">";
$topTabDivEnd = "</div>\n";
if ($p == $mainpageCounter) {
echo $topTabDivStart . $mainpage[$mainpageCounter]["title"] . $topTabDivEnd;
} else {
echo $topTabDivStart . "" . $mainpage[$mainpageCounter]["title"] . " $topTabDivEnd";
}
$widthmodifier += $tabwidth;
}

Position sticky + RTL + Box-shadow breaks on Edge

The following code works well on Chrome, but on Edge the Sticky element is out of place
.main {
display: flex;
max-width: 1200px;
width: 100%;
flex-flow: row nowrap;
margin: auto;
text-align: center;
font-size: 30px;
}
.sticky {
width: 300px;
max-height: 715px;
position: sticky;
top: 10px;
padding: 15px;
margin: 20px 30px 0 0;
box-shadow: 0px 5px 25px 0px rgba(41,128,185,0.15);
background: yellow;
}
.content {
height: 1600px;
flex: 1 1;
background: red;
}
<body dir="rtl">
<main class="main">
<div class="content">Scrollable content here</div>
<div class="sticky">Sticky content here</div>
</main>
</body>
Result in Edge:
I noticed that if I remove the box-shadow from the sticky component or the dir=rtl from the body. It all works as expected.
It appears to be a bug in Edge, and after one resize the window in e.g. jsFiddle, it corrects itself.
What Edge also does, with dir="trl" set on the body, it render the scrollbar on the left side of the viewport, which e.g. neither Chrome nor Firefox does.
A workaround could be to instead of swap position with dir=rtl on the body, use Flexbox's own order property, and then set the direction on the inner elements to control the flow.
Fiddle demo
Stack snippet
.main {
display: flex;
max-width: 1200px;
/*width: 100%; default /*
/*flex-flow: row nowrap; default */
margin: auto;
text-align: center;
font-size: 30px;
}
.sticky {
width: 300px;
max-height: 715px;
position: sticky;
top: 10px;
padding: 15px;
margin: 20px 30px 0 0;
box-shadow: 0px 5px 25px 0px rgba(41,128,185,0.15);
background: yellow;
}
.content {
height: 1600px;
flex: 1 1;
background: red;
order: 1; /* added, move last */
}
<body>
<main class="main">
<div class="content">Scrollable content here</div>
<div class="sticky">Sticky content here</div>
</main>
</body>
Updated based on a comment.
After some more testing and research, trying to move the box-shadow, which obviously cause this issue, to an inner element such a pseudo, still offset the .sticky element.
So two simple solutions, so dir="rtl" can be kept on the body, is to either, using a pseudo, use an image to create the shadow, or, as in below sample, use the filter property.
Here I used a CSS trick to apply it only on Edge, but it can fully replace the box-shadow, and which way to go is more about how old browsers one need to support.
Fiddle demo 2
Stack snippet 2
.main {
display: flex;
max-width: 1200px;
width: 100%;
flex-flow: row nowrap;
margin: auto;
text-align: center;
font-size: 30px;
}
.sticky {
width: 300px;
max-height: 715px;
position: sticky;
top: 10px;
padding: 15px;
margin: 20px 30px 0 0;
box-shadow: 0px 5px 25px 0px rgba(41,128,185,0.15);
background: yellow;
}
/* CSS to target Edge only */
#supports (-ms-ime-align: auto) {
.sticky {
box-shadow: none;
filter: drop-shadow( -5px -5px 15px rgba(41,128,185,0.15) );
}
}
.content {
height: 1600px;
flex: 1 1;
background: red;
}
<body dir="rtl">
<main class="main">
<div class="content">Scrollable content here</div>
<div class="sticky">Sticky content here</div>
</main>
</body>

My menu bar will not resize when window resizes

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.

Z-index with positioning not working with positioning & Alignment

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}

IE7 li ul bug on dropdown menu

hoping one of you guys can help me please.
I have a basic list menu with two dropdowns. This all works fine on all browsers except IE6 and IE7. Please take a look at my markup.
<nav>
<ul id="topNav"
><li id="topNavFirst">About Us</li
><li id="topNavSecond"><a href="../people/our-people.php" id="peopleNav">Our People</a
><ul id="subList1"><li>Mike Hadfield</li
><li>Karen Sampson</li
><li>Milhana Farook</li
><li>Kim Crook</li
><li>Amanda Lynch</li
><li>Gideon Scott</li
><li>Paul Fuller</li
><li>Peter Chaplain</li
><li>Laura Hutley</li
></ul
></li
><li id="topNavThird"><a href="../services/our-services.php" id="servicesNav">Our Services</a
><ul id="subList2"><li>Company & Commercial</li
><li>Employment</li
><li>Civil Litigation</li
><li>Debt Recovery</li
><li>Conveyancing</li
><li>Commerical Property</li
><li>Wills & Probate</li
><li>Matrimonial & Family</li
></ul
></li
><li>News</li
><li>Careers</li
><li>Contact</li
></ul><!-- /topNav -->
</nav>​
and the css
a {text-decoration:none;}
#topNav {
float:right;
height:30px;
margin:0;
font-size:12px;
}
#topNav li {
display:inline;
float:left;
list-style:none;
color:#666;
border-left: 1px solid #666;
padding: 0 3px 0 3px;
position:relative;
}
#topNav ul a {
white-space:nowrap;
}
#topNav li a:hover {
border-bottom:2px solid #369;
}
#topNavSecond a:hover {
border-bottom:2px solid transparent !important;
}
#topNavFirst {
border-left: 1px solid transparent !important;
}
/*****OUR-PEOPLE DROPDOWN*****/
#topNav ul{
background:#fff;
border:1px solid #666;
border-top:0px solid transparent;
border-bottom:2px solid #666;
list-style:none;
position:absolute;
left:-9999px;
width:100px;
text-align:left;
padding:5px 0 5px 0px;
margin:0 0 0 -4px;
z-index:10;
-webkit-box-shadow: 1px 1px 1px #666;
-moz-box-shadow: 1px 1px 1px #666;
box-shadow: 1px 1px 1px #666;
vertical-align: bottom;
}
#topNav ul li{
display:block;
border-left:0px;
margin-bottom: 0px;
padding:0;
vertical-align: bottom;
}
#topNav ul a{
padding:0 0 0 5px;
}
#topNav li:hover ul{
left:auto;
}
#topNav li:hover a {
color:#369;
}
#topNav li:hover ul a{
text-decoration:none;
color:#666;
}
#topNav li:hover ul li a:hover{
color:#fff;;
width:100%;
border-bottom:0px solid transparent !important;
}
#topNav ul li:hover {
background:#369;
display: block;
}
#topNav ul li a {
display: block;
padding:0 0 0 4px;
}
/************/
/*****OUR-SERVICES DROPDOWN*****/
#topNavThird a:hover {
border-bottom:2px solid transparent !important;
}
#topNavThird ul{
/*background:#fff url(images/service-ul-bg.png) no-repeat;*/
width:135px !important;
/*margin-left:120px !important;*/
}​
script
jQuery(document).ready(function () {
$('#subList1').css("display", "none");
$('#topNavSecond').hover(function () {
$('#subList1').stop(true, true).fadeIn('400');
},
function(){
$('#subList1').stop(true, true).fadeOut('400');
});
$('#subList2').css("display", "none");
$('#topNavThird').hover(function () {
$('#subList2').stop(true, true).fadeIn('400');
},
function(){
$('#subList2').stop(true, true).fadeOut('400');
});
});
here it is working perfectly
http://jsfiddle.net/BcWd9/6/
here is a screen shot of how it looks in IE7.
hadfield.andymcnallydesign.co.uk/images/ie7-error.jpg
as you can see the ul is appearing to the right of the li and not the left and it is overlaying the top list. I've tried removing white space, but no luck. Any ideas? If one of you can help it would be much appreciated.
Try this—instead of using a left value to hide the submenus, try using display: none; instead. Then position them using left and top on rollover. This seems to work for me in IE7 in windows and Chrome/Firefox, though I haven't been able to test it in IE6.
#topNav ul{
background:#fff;
border:1px solid #666;
border-top:0px solid transparent;
border-bottom:2px solid #666;
list-style:none;
display: none;
width:100px;
text-align:left;
padding:5px 0 5px 0px;
margin:0 0 0 -4px;
z-index:10;
-webkit-box-shadow: 1px 1px 1px #666;
-moz-box-shadow: 1px 1px 1px #666;
box-shadow: 1px 1px 1px #666;
vertical-align: bottom;
}
.
.
.
#topNav li:hover ul{
display: block;
position: absolute;
left: 3px;
top: 14px;
}
Here's an updated version on jsFiddle: http://jsfiddle.net/BcWd9/5/
I had the same problem. The way it worked out for me is adding an explicit width for the li element being displayed on hover
#nav li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
*zoom:1; /*IE7*/
*width:12em; /*IE7*/
}

Resources