I'm trying to make an image gallery from scratch using only css3... And here's what I have so far.
Here's an imgur album of my main three problems.
The biggest problem is that I'm using position: relative so that I can align the image caption to the bottom. This is causing my images to reposition themselves once an image is clicked on.
The first image is off margin by like 5 pixels. I checked it using Chrome's Inspect Element tool, and there's no reason for this.
In codepen (and here), the images are super long. I suspect this isn't a real issue, but it looks a little wonky compared to my screenshots.
I tested it in safari and chrome, and these issues persist in both browsers (except number 3). Here's my code in progress:
body {
background: #eee;
font: 400 14px/20px'PT Serif', serif;
color: #2b2e2e;
margin: 0;
padding: 0;
}
article {
width: 80%;
margin: 0 auto;
}
nav,
img,
header,
figure {
display: inline-block;
margin: 0;
padding: 0;
}
header {
width: 30%;
margin-right: 3%;
}
nav ul li {
font: 12px/16px normal'Raleway', sans-serif;
letter-spacing: 2px;
display: block;
margin: 2px 0;
vertical-align: top;
}
date {
border-bottom: 2px solid #000;
border-top: 2px solid #000;
display: block;
font-size: 12px;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
}
h1 {
font: 700 36px/40px'PT Sans Narrow', sans-serif;
text-transform: uppercase;
padding: 0 1em;
}
header {
background: #fff;
height: 80%;
margin-bottom: 3%;
}
p {
margin: 16px 0 20px 0;
}
ul,
ol {
margin-bottom: 20px;
}
div {
margin: 0;
padding: 0;
display: inline-block;
}
img {
width: auto;
height: 200%;
margin: 0 auto;
}
figure {
vertical-align: top;
position: relative;
overflow: hidden;
cursor: pointer;
width: 30%;
height: 30%;
margin: 0 3% 3% 0;
}
figcaption {
background: #fff;
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: .25em 1em;
}
figure:first-of-type {
width: 63%;
height: 80%;
margin-bottom: 3%;
}
figure:focus {
width: 80%;
height: 80%;
transition: all 1s ease-out .5ms;
-webkit-transition: all 1s ease-out .5ms;
-moz-transition: all 1s ease-out .5ms;
-o-transition: all 1s ease-out .5ms;
position: absolute;
top: 0;
left: 10%;
text-align: center;
z-index: 1000;
outline: none;
}
<html>
<head>
<title>Sample Article</title>
<link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>
</head>
<body>
<article>
<header>
<nav>
<ul>
<li>Top
<ul>
<li>Sub</li>
</ul>
</li>
<li>Menu
<ul>
<li>Links</li>
<li>Go</li>
<li>Here</li>
</ul>
</li>
<li>Links
<ul>
<li>And</li>
<li>Here</li>
</ul>
</li>
</ul>
</nav>
<h1>Example Article Title</h1>
</header>
<figure tabindex=1>
<img src="http://i.imgur.com/JdRTuQB.jpg" />
<figcaption>Text goes here. Obviously there'll be more. Like this.</figcaption>
</figure>
<figure tabindex=2>
<img src="http://i.imgur.com/4PkhPlq.jpg" />
<figcaption>Text goes here too</figcaption>
</figure>
<figure tabindex=3>
<img src="http://i.imgur.com/kTcyEOe.jpg" />
<figcaption>Some more captions</figcaption>
</figure>
<figure tabindex=4>
<img src="http://i.imgur.com/mIeUOYX.jpg" />
<figcaption>Almost done! Hehehe</figcaption>
</figure>
</article>
</body>
</html>
http://codepen.io/anon/pen/EadOyL?editors=110
PROBLEMS
Strange margin between header and first figureThere seems to occur when you use inline-block and dont add float direction.Fix: float:left;
Image long or long imageThis is caused by you setting: your figure to 30% and setting the child img to height 100%.That means that there the image is forced to all ways have full with and you set the width to auto. This results in a long image. My suggestion is simply setting a smaller fixed height so that more of the width of the image is shown. I used 90vh because it uses viewport measurements it scales good on mobile devices.
Image moves out of order when I click imageFirst of all nice hack. :focus is not really a click now is it? focusing an element is what current element is selected. And on way of selecting it is with a click. Now since you use positon relative on the element and position absolute the element will not take up any space since that's what position absolute does.
tl;dr : ...I added a div with class fig-container thats relative positioned and has the same height and width as the figure. And added a diffrent effect on the :focus i set the absolute positioned element (figure) with a top of 50% and left of 50% that makes the top left corner of the figure all ways be in the centre of the viewport. and added a transform translate of -50% x and -50% y transform: transition(-50%, -50%); this will move it to the centre of itself. In other words: centre that element.
I WANT YOU TO CODE FOR ME:
Fine here is the codepen
Related
I am having trouble turning my normal navbar into a sticky one. When I don't set the position as fixed, the navbar looks and works fine. But when I make the position fixed, it glitches out and looks wonky, and I have examples of both down below. My HTML and CSS are here too:
body {
margin: 0px;
padding: 0px;
font-family: 'Arial', serif;
}
header {
position: fixed;
}
p {
line-height: 200px;
}
.navbaratta {
background-color: #E9B63C;
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
margin-top: 0;
}
.navbaratta>li {
display: inline-block;
padding-right: 70px;
border-right: 1px solid #000;
margin-right: 70px;
}
.navbaratta>li>a {
text-decoration: none;
color: #1A1A1A;
font-weight: bold;
}
.navbaratta>li>a:hover {
color: #474747;
}
.Logo {
display: block;
margin-left: auto;
margin-right: auto;
}
.LogoDiv {
background-color: #1A1A1A;
width: 100%;
}
li.HOME {
border-left: 1px solid #000;
padding-left: 70px;
}
<header>
<div class="LogoDiv">
<img src="NavBarFinal.png" class="Logo">
</div>
<ul class="navbaratta">
<li class="HOME">HOME</li>
<li>BIOGRAPHY</li>
<li>CONTACT US</li>
<li>PHOTO GALLERY</li>
</ul>
</header>
with position fixed:
without position fixed:
The header is not taking the complete width. So, just update your header CSS.
header {
position: fixed;
width: 100%; // Added
}
You need to add positional properties when you fix a div or alternatively you give it a width. I usually prefer first approach. So use it as below will solve your problem.
Your problem caused by using element with relative positioning which is displayed as block so it takes width of parent element when it is relative. So you dont care its width since its parent is body. However when you change it to fixed positioning there is nothing in terms of reference so it wraps content thats all. By entering left:0 and right:0 you stretch it to whole screen. You also need to add a padding top to your body element. Otherwise some parts of your text will be displayed behind navbar. I hope it helps
header {
position: fixed;
left: 0;
right: 0;
}
I've been trying to create a feed page and I want it to be totally responsive. The layout is a score on the right with a fixed width and a link on the left which should take up the rest of the horizontal space.
The code I have so far has the link just taking up the whole line and passing underneath the score div.
This will be a problem if the link title is so long that it gets cut off by the score as I can't stop the link div's width once it collides in which case I'd like to use the text-overflow: ellipsis feature.
My code is below along with a jsfiddle link
HTML
<body>
<ul id="tracklist">
<li class="trackwrap"> <a class="tracklink" href="#">Link 1</a>
<p class="trackscore">x score</p>
</li>
</ul>
</body>
CSS
#tracklist {
margin: 0;
position: relative;
list-style-type: none;
background: white;
padding: 10px 20px 10px 20px;
}
.trackwrap {
position: relative;
margin: 0;
width: 100%;
height: 24px;
transition: 1s;
margin-bottom: 2px;
transition: 1.5s;
}
.tracklink {
background: red;
margin: 0;
display: inline;
position: absolute;
left: 3px;
width: 100%;
max-height: 24px;
font-size: 16px;
line-height: 24px;
}
.trackscore {
background: blue;
margin: 0;
display: inline;
position: absolute;
right: 52px;
font-size: 14px;
color: white;
text-align: right;
line-height: 24px;
}
http://jsfiddle.net/4Lf8v9tn/
This needs to be responsive so I'd prefer it if answers could use width: 100% for the link div
Thanks
Add a min-width on your .trackwrap like so: http://jsfiddle.net/4Lf8v9tn/1/
I have been struggling with some CSS Style. The problem is that i am not able to position the images properly. Due to some reason the image is not displaying in proper expected flow. And I also want to centralize the whole content. It is not properly centralize when you resize the the browser. You can easily notice all this issue once you copy past my code. Here is my code. Thanks
HTML
body {
font-family: 'Open sans',sans-serif;
}
#content p {
padding: 5px;
font-size: 0.8em;
}
#wrap {
max-width: 900px;
padding: 3%;
margin: 0 auto;
}
ul {
list-style-type: none;
padding: 0;
}
#contact a {
padding-left: 35px;
background-repeat: no-repeat;
background-size: 20px;
}
#content a {
width: 100%;
display: inline-block;
height: 100%;
}
#content li img {
width: 100%;
}
a {
text-decoration: none;
}
#content li {
float: left;
width: 25%;
margin: 3%;
box-sizing: border-box;
background-color: bisque;
}
footer {
clear: both;
text-align: center;
}
footer img {
width: 25px;
}
h1 {
font-weight: normal;
font-family: 'Change one', sans-serif;
color: #fff;
font-size: 2.4em;
padding: 0px;
margin: 0px;
display: inline-block;
}
h2 {
font-size: .9em;
font-weight: normal;
color: #fff;
margin: 10px 0;
}
#content ul {
padding: 0;
margin: 0;
}
<div id="wrap">
<div id="content">
<ul>
<li><a href="img/numbers-01.jpg"><img src="img/numbers-01.jpg">
<p>Experimentation with color and texture</p></a>
</li>
<li><a href="img/numbers-02.jpg"><img src="img/numbers-02.jpg">
<p>Experimentation with color and texture Experimentation with color and texture</p></a>
</li>
<li><a href="img/numbers-06.jpg"><img src="img/numbers-06.jpg">
<p>Experimentation with color and texture</p></a>
</li>
<li><a href="img/numbers-09.jpg"><img src="img/numbers-09.jpg">
<p>Experimentation with color and textureExperimentation with color and texture</p></a>
</li>
<li><a href="img/numbers-12.jpg"><img src="img/numbers-12.jpg">
<p>Experimentation with color and texture</p></a>
</li>
</ul>
</div>
<footer>
<img src="img/twitter-wrap.png">
<img src="img/facebook-wrap.png">
<p>© 2014 Chimed.</p>
</footer>
</div>
The issue is that some of your text items in the <p> elements wrap to 3 lines, and some only wrap to 2 lines. This makes them taller than the others. When the next <li> wraps to the next line, it ends up being positioned to the right of the taller item.
Represented visually:
To fix this, you could try to make all your items the same height. That way they would wrap cleanly around each other.
Two "issues" are in your code, as I can see so far.
You're trying to center your content and doing it right with the #wrap. But the list elements inside the list have a width of 25% each, plus 3% margin to the sides, so 31% in total. So the closest you can get to 100% width of the surrounding element is 93%, leaving a gap on the right side, because of your float: left for the list elements. This should fix the problem:
ul {
width: 93%;
margin: 0 auto;
list-style-type: none;
padding: 0;
}
#content li {
display: inline-block;
vertical-align: top;
width: 25%;
margin: 3%;
box-sizing: border-box;
background-color: bisque;
}
I added a width and centering margin to the ul and you're li elements are now inline-block and aligned at their top line.
Up until a couple days ago using position:absolute; and bottom:-36px was enough to hide the controls down the page, and they would popup whenever the mouse was hovered over the player. Now I'm able to scroll down to see them. How can I fix this while keeping the same slide-up effect?
Also, one more thing... I set the controls div with line-height:36px expecting it to be 36px in height but it is actually 38px (making bottom:-36px kind of useless since 2px are visible). The timer and the P, M and F divs get two extra px on the top and the seek bar gets them on the bottom. Where are these extra px coming from?
Sample
Any help on how to fix these issues and understand what's going on will be greatly appreciated. Thank you.
EDIT1:
Thanks to Fahad I managed to solve my first issue. The snippet didn't work outside of codepen but I fixed it adding position:relative; to the parent div. It still is unclear to me why line-height adds those extra px, though.
Giving the parent div a relative position raised another problem, don't ask me why but sometimes I need to scroll inside the "player" (well, you can ask) and when I do the controls don't stay at the bottom. Please see for yourselves:
Sample
EDIT2:
Apparently that can be easily solved by replacing position:absolute; with position:fixed; in the controls div. I'm still testing just in case this little change is messing with anything else.
You can assign overflow-y: hidden; to your body tag using CSS (to disable vertical scrolling) and change the bottom value to -38px.
html,
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #EEE;
margin: 0;
overflow-y: hidden;
}
#player {
background-color: #333;
text-align: center;
height: 100vh;
}
#toggle {
margin: auto;
width: 500px;
font-size: 24px;
line-height: 60px;
background-color: #B83B3B;
}
#toggle:hover + #controls {
bottom: 0;
}
#controls {
position: absolute;
left: 0;
right: 0;
bottom: -38px;
line-height: 36px;
background-color: #B83B3B;
transition: bottom 0.3s ease;
}
#left {
float: left;
}
#right {
float: right;
}
#curTime {
font-size: 13px;
font-weight: bold;
margin: 0px 8px;
display: inline-block;
vertical-align: middle;
}
#center {
overflow: hidden;
}
#seekBar {
-webkit-appearance: none;
outline: none;
background-color: #1F7783;
height: 6px;
margin: 0;
width: 100%;
}
#seekBar::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #EEE;
height: 12px;
width: 12px;
border-radius: 12px;
cursor: pointer;
opacity: 0.8;
}
.button {
margin: 0px 8px;
font-size: 24px;
display: inline-block;
vertical-align: middle;
}
<div id="player">
<div id="toggle">Hover to show controls.</div>
<div id="controls">
<div id="left">
<div class="button">P</div>
<span id="curTime">0:01</span>
</div>
<div id="right">
<div class="button">M</div>
<div class="button">F</div>
</div>
<div id="center">
<input type="range" id="seekBar" step="any">
</div>
</div>
</div>
Here's the example on CodePen.
I'm trying to line up these image links in a row but having some difficulty with it. If I add some CSS parameters like float left and float right, it ends up positioning it in weird spots on the page.
This is what I got:
.preview {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
}
.preview img {
width: 100%;
height: 100%;
padding: 0;
}
.preview > div {
background-color: rgba(0,0,0,0.75);
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transition: opacity 0.3s linear;
text-shadow: #000 1px 1px 0;
color: #ccc;
text-align: center;
}
.preview:hover > div {
display: block;
opacity: 1.0;
}
.preview > div div {
padding: 20px 40px;
}
.preview h2 {
font-size: 1.2em;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 10px;
}
.preview p {
margin-bottom: 10px;
}
<a href="http://www.page.com/album">
<div class="preview">
<img src="http://upload.wikimedia.org/wikipedia/commons/e/ec/Record-Album-02.jpg" title="Photo Albums" alt="" />
<div>
<div>
<h2>Photo Albums</h2>
</div>
</div>
</div>
</a>
<a href="http://www.page.com/storybook">
<div class="preview">
<img src="http://www.clipartbest.com/cliparts/RiA/6a5/RiA6a5eoT.jpeg" title="Digital Story Books" alt="" />
<div>
<div>
<h2>Digital Story Books</h2>
</div>
</div>
</div>
</a>
How can I line them up so that there is a half an inch of space in between?
Here is a preview of what I have:
http://jsfiddle.net/FZ2rZ/
This should do it:
.preview {
display: inline-block;
margin: 0 40px 0 0;
}
Inline-block for the div containing the image will display the images in a row as you'd like. The margin applies 40px to the right side of the images.
By default images are block elements, meaning they will take up the entire width of the page. Inline elements (like an or tag) do not collapse and will be on the same row. Learn more about display CSS property.
*edited to correct margin instead of padding.
Avoid float if you can. Floating is for a limited scenario. Usually it is appropriate to use display:inline-block;. That said, when you do, any space you have inbetween tags will also be displayed (you're making it "inline" and spaces are inline, too.)
You can take what you have an add this CSS:
a {
display:inline-block;
}
a:not(:first-child) {
margin-left:.5in;
}
Then, delete the space here
</a>
<a href="http://www.page.com/storybook">
to get
</a><a href="http://www.page.com/storybook">
Here's your modified fiddle.