If you look here... http://matiny.tk/Mixed%20Swim/Mixed.html
This is a simple site I'm making. It uses Bootstrap to switch the menu when the screen shrinks. Nicely enough, the Menu label/checkbox combo is not working, though it has worked on another site of mine. This is the relevant code...
<label for="menulogo" id="menulabel" class="visible-sm visible-xs"><img src="Menu.png"></label>
<input type="checkbox" id="menulogo">
</nav>
<nav id="menu">
SHOP
ABOUT
BLOG
GALLERY
CONTACT
</nav>
label {
font-size: 40px;
width: 100%;
color: white;
z-index: 2;
}
#menulogo {
opacity: 0;
}
#menu a {
background: rgba(0,0,0,.35);
font-size: 50px;
color: white;
height: 75px;
}
#menu {
margin-top: 100px;
text-align:center;
z-index: 3;
display: none;
position: fixed;
}
#menulogo:checked + #menu {
display: block;
}
As it turns out, my order of elements was incorrect. If one is going to use something like... #menulogo:checked + #menu, then the + or ~ selector means that the nav with #menu has to go right after the checkbox input, like so...
<label for="menulogo" id="menulabel" class="visible-sm visible-xs"><img src="Menu.png"> MENU</label>
<input type="checkbox" id="menulogo">
<!--These must be in sequence-->
<nav id="menu">
SHOP
ABOUT
BLOG
GALLERY
CONTACT
</nav>
Related
TL;DR: Here's a CodePen.
I have a UI with an image and a grid of text with long lines which looks like this:
I'm using CSS Flexbox with two elements: the image and the text. And then to lay out the text, I'm using CSS Grid. Now, when I view this on a narrow screen for mobile, it correctly wraps everything and stacks the two elements:
But on desktop, with a slightly narrower div, the flex box wraps before the grid text like this:
How can I get the text to wrap while leaving the flex box alone in this case? I fear I may need to use some media queries, but I'm not even sure if I'm using the right CSS components for this.
Here's the code:
index.html:
<div class="media-callout">
<div class="media-thumb">
<img height="170" width="120">
</div>
<div class="media-callout-grid">
<div class="media-callout-key">Authors</div>
<div>Babalola, J & Ogunkola, Babalola</div>
<div class="media-callout-key">Year</div>
<div>2013</div>
<div class="media-callout-key">Title</div>
<div class="media-callout-value">Scientific Literacy: Conceptual Overview, Importance and Strategies for Improvement</div>
<div class="media-callout-key">Journal</div>
<div><em>Journal of Educational and Social Research</em></div>
<div class="media-callout-key">Location</div>
<div>vol. 3, no. 1, pp. 265–274</div>
<div class="media-callout-key">DOI</div>
<div>10.5901/jesr.2013.v3n1p265</div>
</div>
</div>
style.css:
.media-callout {
display: flex;
flex-wrap: wrap;
justify-content: center;
row-gap: 20px;
column-gap: 10px;
padding: 1em;
max-width: max-content;
}
.media-thumb img {
float: left;
height: 175px;
width: auto;
}
.media-callout-grid {
display: grid;
font-size: 12pt;
grid-template-columns: 6em 1fr;
align-content: center;
gap: 0 15px;
}
.media-callout-key {
text-align: right;
font-weight: bold;
}
.media-callout-value {
word-break: break-word;
word-wrap: break-all;
}
A media query does indeed resolve this:
#media screen and (min-width: 600px) {
.media-callout {
flex-wrap: nowrap;
}
}
The query must come AFTER the .media-callout block. I also had to use this approach to prevent the image from being squashed.
I have been struggling with the flexbox column layout. I am trying to create a 3 column layout that stretch vertically all the way to the end of the page (height:100%;). However, 2 of the columns must have specific widths that still scale down on different size screens, is this possible?
CSS:
.container {
display: -webkit-flex;
display: flex;
height: 100%;
}
.initial {
-webkit-flex: initial;
flex: 1;
width: 510px;
min-width: 100px;
}
.flex1 {
-webkit-flex-basis: 28px; /* Safari 6.1+ */
flex-basis: 28px;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
}
HTML
<div class="container">
<section class="elem initial">
<div id="Left">
<h1>Heading</h1>
<p>Lorem Ipsum...</p>
</div>
</section>
<section class="elem flex1">
<div class="col"><img src="img/stripe"/></div>
</section>
<section class="elem flex2">
<div id="Right">
<h2>Header</h2>
<ul>
<li>List item.</li>
</ul>
</div>
</section>
</div>
Here's a working example of what you might be looking for, if I've understood the question correct.
I've commented the important stuff in the code. Take a look at the code, and compare it with your own. You've been using some unnecessary flexbox elements such as flex-basis: 28px; which should just be width: 28px;
HTML
<div class="container">
<section class="elem initial">
<div id="Left">
<h1>Heading</h1>
<p>Lorem Ipsum...</p>
</div>
</section>
<section class="elem flex1">
<div class="col"><img src="img/stripe"/></div>
</section>
<section class="elem flex2">
<div id="Right">
<h2>Header</h2>
<ul>
<li>List item.</li>
</ul>
</div>
</section>
</div>
CSS
html, body {
height: 100%; /* Makes it possible to illustrate the full 100% height */
}
.container {
display: flex; /* Adds flex functionality */
height: 100%;
}
.initial {
width: 510px;
min-width: 100px;
background-color: orange;
}
.flex1 {
width: 28px;
background-color: red;
}
.flex2 {
flex: 1; /* Fills the rest of the available space */
background-color: green;
}
UPDATE
I forked the pen in order to create a new working example based on the comments from the author of this question. He wanted the columns to wrap and the gutter to disappear at a certain size - I've used media queries to accomplish this.
Link to the new forked CodePen
HTML is the same.
CSS
html, body {
height: 100%; /* Makes it possible to illustrate the full 100% height */
}
.container {
display: flex; /* Adds flex functionality */
flex-direction: column;
height: 100%;
}
#media all and (min-width: 768px) {
.container {
flex-direction: row;
}
}
.initial {
width: 510px;
min-width: 100px;
background-color: orange;
}
.flex1 {
display: none;
}
#media all and (min-width: 768px) {
.flex1 {
display: flex;
width: 28px;
background-color: red;
}
}
.flex2 {
flex: 1; /* Fills the rest of the available space */
background-color: green;
}
Remember your vendor-prefixes.
It's my problem:
http://jsfiddle.net/Vqa7v/
body {
background: url("http://imgs.ir/imgs/201307/1336_menu.png") no-repeat scroll center top transparent;
}
#menu {
display: block;
height: 193px;
margin: auto;
position: relative;
top: 32px;
width: 400px;
}
nav {
left: 0;
min-width: 426px;
position: absolute;
text-align: center;
top: 79px;
}
nav a {
padding: 5px 7px;
color:white;
}
<div id="menu">
<nav>
HOME
SERVICES
ABOUT
BLOG
CONTACT
</nav>
</div>
At first, the menu is fit to background position, but make the Result window smaller & smaller to see when the menu get out of the background position.
How to avoid that and fix menu to background image position? (I want to have a menu in center of my website on its background image)
Had some real trouble understanding what you were looking for, but is this it? Basically it needed a whole bunch of changes that I've made to nav etc.
http://jsfiddle.net/robsterlini/Vqa7v/2/
I solved it by my self: http://jsfiddle.net/Vqa7v/4/
.menu {
position:absolute;
top: 20px;
left:15px;
}
nav {
text-align: center;
position:absolute;
width:100%;
height:100px;
background:url('http://upload7.ir/images/27569577012963327319.jpg') no-repeat;
min-width:500px;
}
nav a {
padding:0 5px 0 0;
line-height:35px;
color:oldlace;
text-shadow:0 0 2px #000;
text-decoration:none;
letter-spacing:1px;
}
<nav>
<div class="menu">
HOME
SERVICES
ABOUT
BLOG
CONTACT
</div>
</nav>
Small the RESULT window width and see the menu is fixed to the background image.
I have a problem with safari. I have searched for 6 hours straight for a fix, so exscuse me if my explanation is bad. So the thing is: I have added a hover effect on my thumbnails, it works in all browsers, but the thumbs are not placed correctly in safari and IE.
I have tried to use:
#media screen and (-webkit-min-device-pixel-ratio:0){
img.a {
position: absolute;
top: -500;
z-index: 10;
}
img.b {
position: absolute;
top: -500;
}
}
But this works for webkit browser, meaning chrome as well.
The css I am currently using which works in chrome and firefox:
img.a {
position: absolute;
top: -500;
margin-left: -115px;
z-index: 10;
width: 230px;
height: 120px;
border: none;
}
img.b {
position: absolute;
top: -500;
margin-left: -115px;
width: 230px;
height: 120px;
border: none;
}
If anyone has a solution it would really save my day :)
Here is the site if you need to inspect: www.janthorb.com
Get rid of the CSS
div#thumbnails {
text-align:center;
}
and also get rid of your margin-left: -115px for your images and you will have something that works in both browswers.
You page code is a mess, no alignment. HTML structure is not reasonable, and cause CSS also is very not science. I rewrote your structure, you can reference.
.demo{ width:820px;margin:0 auto;}
.list{ margin-right:-20px; zoom:1;}
.list li{ float:left; width:230px; height:135px; margin:0 36px 25px 0; overflow:hidden; zoom:1;}
.link{ position:relative;width:228px; height:120px; display:block;border:thin dashed #1b1b1b; overflow:hidden;}
.link img{ position:absolute;top:0;left:0; }
.link .gray{ z-index:11;}
.link .hover{ z-index:10;}
<ul class="list">
<li>
<a class="link" href="#">
<img class="gray" src="http://www.janthorb.com/thumb1_bw.jpg" alt="">
<img class="hover" src="http://www.janthorb.com/thumb1.jpg" alt="">
</a>
</li>
<li>
<a class="link" href="#">
<img class="gray" src="http://www.janthorb.com/thumb1_bw.jpg" alt="">
<img class="hover" src="http://www.janthorb.com/thumb1.jpg" alt="">
</a>
</li>
</ul>
and demo is here
I have a horizontal scrolling website with a fixed sidebar and footer. I am trying to get my content to 100% height to sit on the footer. Although my sidebar is at 100% height even though there is hardly any content in it I cannot get my contents divs to go to 100% and sit on the footer. Here is my HTML structure:
<html class="multiplebgs" xmlns="http://www.w3.org/1999/xhtml">
<body>
<div class="wrapper">
<div class="sidebar">
<div class="hlogo">Lorem Ipsum</div>
<div class="navigation demi f11">
<ul>
<li>ABOUT US</li>
<li>WHAT WE DO</li>
<li>OUR THEORY</li>
<li>PORTFOLIO</li>
<li>CLIENTS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
<section class="habout step">
<div class="content" id="content1">
</div>
</section>
</div>
<div class="footer fcolor">
</div>
</body>
</html>
And my CSS:
html {
background: url(../img/bg.png) no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg.png', sizingMethod='scale')";
height:100%;
}
body {
margin:0;
height: 100%;
font-family:Verdana,Tahoma,Arial,Sans-Serif;
color:black;
font-size:12px;
width: 12660px;
}
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -45px;
}
.content{
float:left;
width:1000px;
margin: 0px;
height: 100%;
padding: 0 360px;
}
#content1 { background:url(../img/bgaboutus.png) no-repeat bottom center;}
.sidebar {
float:left;
width:350px;
position: fixed;
background: url(../img/bg.png) no-repeat fixed;
-webkit-background-size: cover;
background-size:cover;
height: 100%;
z-index: 1;
}
.step {
float: left;
margin: 0px;
position:relative;
height: 100%;
min-width: 1000px;
padding: 0px;
overflow:auto;
}
.no-multiplebgs .habout {}
.multiplebgs .habout {background: url(../img/naboutus.png) top right no-repeat fixed;}
Even if I apply the CSS of the sidebar class which is 100% height the section and content divs wont stretch to 100% height.
Any suggestions are welcome.
Thanks
The problem was in class .wrap{ height: auto !important;} . Once I removed the height auto the content div expanded to 100% .
Thanks