I have created a table with responsive images, but have no idea how to add fixed texts over the images that stay there when the window is resized. The closest I came was by using <p class=""> but then the text isn't responsive...
Here is the script:
https://jsfiddle.net/2vax05et/
The basic layout:
<div id="p-container">
<a href="#1">
<figure>
<img src="" alt="">
</figure>
</a>
[....]
</div>
The CSS:
body {
width: 80%;
margin: 30px auto;
font-family: sans-serif;
}
h3 {
text-align: center;
font-size: 1.65em;
margin: 0 0 30px;
}
div {
font-size: 0;
}
a {
font-size: 16px;
overflow: hidden;
display: inline-block;
margin-bottom: 8px;
width: calc(50% - 4px);
margin-right: 8px;
}
a:nth-of-type(2n) {
margin-right: 0;
}
#media screen and (min-width: 50em) {
a {
width: calc(25% - 6px);
}
a:nth-of-type(2n) {
margin-right: 8px;
}
a:nth-of-type(4n) {
margin-right: 0;
}
}
a:hover img {
filter:brightness(80%);
}
figure {
margin: 0;
}
img {
border: none;
max-width: 100%;
height: auto;
display: block;
background: #ccc;
transition: .2s ease-in-out;
}
.p a {
display: inline;
font-size: 13px;
margin: 0;
}
.p {
text-align: center;
font-size: 13px;
padding-top: 100px;
}
Any ideas?
HTML:
<a href="#1">
<figure>
<img src="image.jpg" alt="">
</figure>
<p>Text</p>
</a>
CSS:
a{
position: relative;
}
a p {
position: absolute;
top: 1em;
left: 1em;
}
The p element containgin the text will expand only to the bounds of the souronding a.
You might consider adding appropriate Padding and Hyphanation according your needs.
Source: https://css-tricks.com/text-blocks-over-image/
Use viewport units as font-size. It will scale fluidly depending on the size of your screen.
Example:
font-size: 2vw
Related
I have a group of images and what I want is to be able to flip the image. For the front of the image it will show numbers(see image below) and on the back it will have a picture. If the user clicks another image and it matches the first picture clicked, then it will disappear after a couple of seconds. Right now I am stuck on getting the images to flip. I will paste my html code and css down below.
To make the image flip I tried using the hover effect but this did not work either
#flipper:hover {
transform: rotateY(180deg);
}
body {
color: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
h2 {
text-align: center;
}
body {
background-color: white;
}
img {
width: 30%;
float: left;
margin: 1.66%;
}
p {
margin-left: 1.66%;
font-family: "Contrail One", cursive;
font-size: 35px;
text-transform: uppercase;
border-bottom: 2px solid black;
width: 30%;
padding-bottom: 20px;
}
div.a {
text-align: center;
font-family: sans-serif;
}
#flipper:hover {
transform: rotateY(180deg);
}
<link href="https://fonts.googleapis.com/css?family=Contrail+One" rel="stylesheet">
<div id="flipper">
<img class="flip" src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg" alt="">
<img src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg" alt="">
<img src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg " alt="">
<img src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg " alt="">
<img src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg " alt="">
<img src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg " alt="">
<img src="http://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg " alt="">
<img src="http://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg " alt="">
</div>
I think to start off, i couldnt tell if you had already linked your written CSS to your HTML. I see only 1 link and its not to your css. Looks like a google font.
I created a https://codepen.io/robert9111/pen/MzabWZ
<!-- HTML -->
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img class="size" src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg/">
</div>
<div class="back face center">
<p>This is nice for exposing more information about an image.</p>
<p>Any content can go here.</p>
</div>
</div>
</div>
<!-- CSS -->
#f1_container {
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
z-index: 1;
}
.size {
width: 450px;
height: 281px;
}
#f1_container {
perspective: 1000;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
box-shadow: -5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
}
for you to check out. I think this may solve your issue.
I didn't do them all as I think it would be good for you to write out some of that code.
I'm having trouble with my styling. This is my code:
<html>
<head>
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto');
html,
body {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
#header {
height: 100px;
background-color: lightgrey;
text-align: center;
}
#menu {
height: 30px;
background-color: #B81F00;
}
#menu a {
text-decoration: none;
color: white;
text-align: center;
width: 15vw;
line-height: 0;
display: inline-block;
/*border: black solid 1px;*/
height: 30px;
padding-left: 10px;
padding-right: 10px;
}
#menu a:hover {
background-color: white;
color: #7B1700;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 600px) {
#menu a {
background-color: #B81F00;
float: center;
display: block;
width: 100%;
margin-top: 20px;
font-size: 20px;
line-height: 20px;
margin: 0;
padding: 0;
}
#menu {
position: relative;
padding-top: 0;
margin-top: 0;
height: auto;
}
}
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="menu">
<a href="#">
<p>Section1</p>
</a>
<a href="#">
<p>Section2</p>
</a>
<a href="#">
<p>Section3</p>
</a>
<a href="#">
<p>Section4</p>
</a>
</div>
</body>
</html>
Now, when I open it in mobile viewpoint, I get this:
As you can see, there is a little whitespace between those two elements, but I can't figure out what caused this.
The P elements have a margin, you should remove it. Use padding instead.
#menu a p {
padding: 1em;
margin: 0;
}
If you want to center the content of the P perfectly try to use flex-box.
I'm creating a page that looks like this:
Here is the code
body { min-height: 50vh;
line-height: 1;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#headlogo{
position: absolute;
top: 12px;
margin: 0 auto;
font-weight: bold;}
#header {
padding: 0;
background-color: #1565C0;
}
#header .section {
margin: 0 auto;
padding: 0;
width: 900px;
overflow: hidden;
}
#header .section ul {
display: inline-block;
float: right;
margin: 0;
overflow: hidden;
padding: 50px 0 10px;
}
#header .section ul li {
background: url(./images/headernav.gif) no-repeat top right;
display: inline-block;
float: left;
list-style: none;
margin: 0 10px;
padding: 0;
}
#header .section ul li a {
color: #fff;
display: inline-block;
font-size: 15px;
height: 30px;
line-height: 30px;
margin: 0;
padding: 0 8px;
text-align: center;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.03em;
}
#header .section ul li a:hover {
background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected {
background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected a {
background: url(./images/headernavselected.gif) no-repeat top left;
color: #E3F2FD;
}
#body {
margin: 0 0;
background-color:#DEDEDE;
}
#body .section {
margin: 0 auto;
min-width: 800px;
width: 800px;
overflow: hidden;
background-color:#FFFFFF;
padding: 60px 100px 50px 100px;
min-height: 50vh
}
#footer {
background: #1565C0;
margin: 0;
padding: 0;
}
#footer .section {
margin: 0 auto ;
padding: 20px;
width: 800px;
overflow: hidden;
};
<div id="header">
<div class="section">
<img src="./images/headerlogo.png" width="340" height="110" alt="" title="">
<ul>
<li class="selected">
Home
</li>
<li>
Store
</li>
<li>
Products
</li>
<li>
Forum
</li>
<li>
Support
</li>
</ul>
</div>
</div>
<div id="body">
<div class="section">
Lorem ipsum
</div>
</div>
<div id="footer">
<div class="section">
© copyright 2023 | all rights reserved.
</div>
The CSS is available here:
http://jsfiddle.net/85L448ds/
But I don't know how to make the page more responsive to sizing inconsistency. I want the page to default to 800 pixels wide, except where there is wide content or the browser window is too small (it should have a gray background outside this area). Whereas the height should be such that the height should not be less than the browser height.
In other words, I'd like it to work something like:
Width = 800
If Width > Window_Width then
Width = Window_Width
If Content_Width > Width then
Width = Content_Width
Whereas height should be the greater of: Content_Height and Windows_Height.
Note: Content_Width/Height cannot be predicted because I have a forum where the table structure is sometimes oversize to accomodate large images.
I've tried setting the CSS min-width property to 800, but that makes the default width 100%.
I thought height would be easy, just need to set the body to 100% height or 100vh, but that seems to have no effect...
I believe CSS Media Queries will resolve your problem.
Of course it is possibly just one of the solutions, but it is purely CSS and really easy to manage.
For more information about media queries: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Using media queries happens like in this following example, where your #headLogo is set to change its properties once the viewport width is less or equal to 768px:
#media (max-width: 768px)
{
#headLogo {
text-align: center;
max-width: 300px;
}
}
Run snippet in full page and then play with window size after reduce the size of window your menu will hide and one button you can see. now show menu on button click.
If you run snippet so at first time you can see button because your
window size is < 768px if you want see menu then see result in full page
for responsive site use width in % not in px.
and you can also use bootstrap for that.
body {
min-height: 50vh;
line-height: 1;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.smallButton{
display:none
}
#headlogo {
position: absolute;
top: 12px;
margin: 0 auto;
font-weight: bold;
}
#header {
padding: 0;
background-color: #1565C0;
width:100%;
height: 90px;
}
#header .section {
margin: 0 auto;
padding: 0;
overflow: hidden;
}
#header .section ul {
display: inline-block;
float: right;
margin: 0;
overflow: hidden;
padding: 50px 0 10px;
}
#header .section ul li {
display: inline-block;
float: left;
list-style: none;
margin: 0 10px;
padding: 0;
}
#header .section ul li a {
color: #fff;
display: inline-block;
font-size: 15px;
height: 30px;
line-height: 30px;
margin: 0;
padding: 0 8px;
text-align: center;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.03em;
}
#header .section ul li a:hover {
background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected {
background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected a {
background: url(./images/headernavselected.gif) no-repeat top left;
color: #E3F2FD;
}
#body {
margin: 0 0;
background-color: #DEDEDE;
width:100%
}
#footer {
background: #1565C0;
margin: 0;
padding: 0;
width:100%;
}
#footer .section {
margin: 0 auto;
padding: 20px;
overflow: hidden;
}
#media (max-width: 768px)
{
#header .section ul {
display:none
}
.smallButton{
display:block;
position: absolute;
right: 0;
top: 32px;
}
#body .section {
margin: 0 auto;
overflow: hidden;
background-color: #FFF;
width: 500px;
height: 700px;
position: relative;
}
}
#media (min-width: 768px){
#body .section {
margin: 0 auto;
overflow: hidden;
background-color: #FFF;
width: 800px;
height: 700px;
position: relative;
}
}
<div id="header">
<div class="section">
<a href="index.html" id="headlogo">
</a>
<button class="smallButton">---</button>
<ul>
<li class="selected">
Home
</li>
<li>
Store
</li>
<li>
Products
</li>
<li>
Forum
</li>
<li>
Support
</li>
</ul>
</div>
</div>
<div id="body">
<div class="section">
Lorem ipsum
</div>
</div>
<div id="footer">
<div class="section">
© copyright 2023 | all rights reserved.
</div>
updated fiddle
You don't actually need media queries for that
html,
body {
width: 100%;
height: 100%;
}
will make body occupy all available space in window. It will shrink and expand with window re-size.
I am trying to achieve similiar effect to this:
The header and its subheader are both vertically aligned to the image.
I've written following code:
http://jsfiddle.net/u4zxn4eb/
It works but is it the best way to achieve this?
<div class="wrapper">
<h1>
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/sachagreif/128.jpg" alt="">
<div class="vertical_align">
Your company's name
<p>Description</p>
</div>
</h1>
</div>
CSS:
body {
background: lightgrey;
}
.wrapper {
background: grey;
width: 100%;
}
h1 {
font-size: 18px;
margin: 0;
position: relative;
top: 35px;
}
.vertical_align {
display: inline-block;
vertical-align: middle;
}
img {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
p {
margin: 0;
}
EDIT
As #chrisbedoya suggested I shouldn't put div inside h1 tag.
Deleted.
Instead of using h1 tag to position the whole, it's better to apply these rules separately:
.vertical_align a,
.vertical_align p {
position: relative;
top: 40px;
}
Well, define "best". If your method is standards compliant and works in all browsers then use it. If you're interested, here's how I'd do it:
<style>
#header {
height: 100px;
margin: 0px;
padding: 0px;
width: 500px;
}
#rectangle {
background-color: #f0f0f0;
height: 80px;
margin: 0px;
padding: 0px;
position: absolute;
left: 0px;
top: 0px;
width: 500px;
z-index: 1;
}
#square {
background-color: #ff0000;
height: 80px;
margin: 0px;
padding: 0px;
position: absolute;
left: 20px;
top: 20px;
width: 80px;
z-index: 2;
}
#text {
/* background-color: #00ff00; */
margin: 0px;
padding: 0px;
position: absolute;
left: 120px;
top: 41px;
width: 360px;
z-index: 2;
}
h1 {
font-family: Arial;
font-size: 20px;
line-height: 20px;
margin: 0px;
padding: 0px;
}
p {
font-family: Arial;
font-size: 12px;
line-height: 12px;
margin: 5px 0px 0px 0px;
padding: 0px;
}
</style>
<div id="header">
<div id="rectangle"></div>
<div id="square"></div>
<div id="text">
<h1>Company Name</h1>
<p>Company Tagline</p>
</div>
</div>
Well, this question is way too subjective and better suited for CodeReview. But I thought I'd give you my input.
First, let's clean up the HTML. Get some HTML5 in there as well.
<div class="wrapper">
<header>
<a href="#" class="logo-link">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/sachagreif/128.jpg" alt="">
</a>
<div class="vertical_align">
<h1>Your company's name</h1>
<h2>Description</h2>
</div>
</header>
</div>
Then make the CSS nice and tidy. We don't need much:
.logo-link {
display: inline-block;
position: relative;
top: 24px;
margin: 0 24px;
}
.logo-link img {
display: block;
}
.vertical_align {
display: inline-block;
vertical-align: top;
}
Here's an example.
I would use a position: relative property to align the image slightly below the header like you have in your image there.
I would like to put a header and a button on the same horizontal line but on opposite sides of the page (left and right). I'm using Twitter Bootstrap so I've put them in a .row and then specified that they each are .col.sm-6. I put the button in a div, so I could move it to the right of that column with text-align:right.
How could I make that button center itself on mobile? When the window gets smaller and the second column jumps under the first, the button is still right-aligned.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="row">
<h1 class="col-sm-6">Resources</h1>
<div class="col-sm-6" style="margin-top: 20px">
<button style="text-align:right">Sign up your event</button>
</div>
</div>
You can define a class for your button like <button class="button">Sign up your event</button> and then use #media-queries to center it using the following CSS when the window size is reduced to mobile width, like this:
#media (max-width: 768px) {
.button {
display: block;
margin: 0px auto;
}
}
Here's a working demo (view as full page and then reduce your browser window):
.outfitcontainer {
position: relative;
width: 200px;
height: 80%;
background-color: #FFFFFF;
display: inline-block;
margin-left: 60px;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
}
.outfit img {
display: inline-block;
}
.outfit,
.overlay {
position: absolute;
width: 200px;
height: auto;
left: 0;
}
.outfit {
z-index: 10;
background-color: white;
}
.outfitcontainer:hover .outfit {
opacity: .5;
cursor: pointer;
}
.outfit:hover + .overlay {
z-index: 50;
}
.overlay:hover {
z-index: 50;
}
.overlay {
z-index: 0;
text-align: center;
font-weight: bold;
}
.overlay p {
display: block;
padding: 10px 0;
color: black;
opacity: 1;
line-height: 50%;
}
.overlay p:nth-child(1) {
margin-top: 50%
}
.price,
.item {
font-family: "Brandon Grotesque Medium";
font-size: 1em;
color: #000000;
line-height: 25%;
margin-top: -10px;
}
.oldprice {
text-decoration: line-through;
color: #383838;
font-size: .75em;
line-height: 25%;
}
.designer {
font-family: "Didot Light Italic";
font-size: 1em;
color: #000000;
line-height: 25%;
margin-top: -15px;
}
.second-section {
width: 100%;
height: auto;
z-index: 50;
background-color: #000000;
}
.button {
text-align: right;
}
#media (max-width: 768px) {
.button {
display: block;
margin: 0px auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<h1 class="col-sm-6">Resources</h1>
<div class="col-sm-6" style="margin-top: 20px">
<button class="button">Sign up your event</button>
</div>
</div>