I have used some code from stackoverflow oct 13 by Mark e Haas. The aim is to have two images side by side with a fig caption below them and for the images to respond to the screen size.
The image sizing is working inthe sense that te images stay on the screen as the size shrinks. The issue is with the I have tried amending various parameters but the caption always appears on the left of the image not below it. Before i start invetigating using a grid to place the image in is it possible to have the place itself below the Image preferably in the middle.
Code is below.
<style type="text/css">
<!-- css -->
#content { /* main display pane for all content */
float: left;
/* width: 595px; */
width: 75%;
min-height: 600px;
/* border: 1px solid #ccc; */
margin-left: 1px;
padding: 5px;
padding-bottom: 8px ;
background: #white;
}
div.fill-screen {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 10;
text-align: bottom;
}
img.make-it-fit {
max-width: 99%;
max-height: 10%;
float: left;
margin: auto;
}
img.make-right {
max-width: 99%;
max-height: 10%;
float: right;
margin: auto;
}
figure {
padding: 4px;
margin: auto;
}
figcaption {
font-style: italic;
text-align: bottom;
}
/Style
<html>
<head>
<link rel="stylesheet" type="text/css" href="/media/trsppic.css" />
</head>
<div id=content>
<!-- <div class='fill-screen'> -->
<figure>
<img class='make-it-fit' src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg' width=30%>
<figcaption>test</figcaption>
</figure>
<figure>
<img class='make-right' src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg' width=30%>
</figure>
</div</div>
</html>
Try this, i had modified a little bit the HTML but works fine.
.fig_box {
float: left;
width: 50%;
height: fit-content;
position: relative;
}
.make-it-fit {
width: 50%;
}
span.caption {
position: absolute;
top: 100%;
width: 50%;
left: 0;
text-align: center;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="/media/trsppic.css" />
</head>
<div id=content>
<!-- <div class='fill-screen'> -->
<div class="figure_content">
<div class="fig_box">
<img class='make-it-fit'
src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg' />
<span class="caption">test1</span>
</div>
<div class="fig_box">
<img class='make-it-fit'
src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg' />
<span class="caption">test2</span>
</div>
</div>
</html>
Related
I need to do a vertical and horizontal rectangles with coloured border. When they cross on the top left part, there should be a square with a logo inside. I need it to be responsive to the page crop so that the square and rectangles keep their scale.
sketch
<-- language: html -->
<body>
<div class="header">
<div class="logo">
<img class="logo_file" src="exemple_images/logo.jpg">
</div>
</div>
<div class="row">
<div class="leftcolumn">
<div class="xxss_icons">
<img class="icon" src="exemple_images/instagram.png">
<img class="icon" src="exemple_images/facebook.png">
<img class="icon" src="exemple_images/twitter.png">
</div>
</div>
</div>
<div>
</div>
</body>
/* Header */
.header {
border: 1px solid #FCFF76;
display: flex;
font-size: 70px;
text-align: center;
}
.logo {
border-right: 1px solid #FCFF76;
width: 9.5%;
float: left;
}
.row {
display: flex; /* equal height of the children */
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
Just made a quick example. If you can, I would recommend you to use Bootstrap (https://getbootstrap.com/docs/4.5/getting-started/introduction/), it is really easy to install and will help you to style things faster (and always responsive) ;)
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 0px;
border-right: solid yellow 1px;
}
.square {
padding: 0;
margin: 0;
position: absolute;
border: solid yellow 1px;
height: 160px;
width: 160px;
}
.navbar{
overflow: hidden;
background-color: #111;
position: fixed;
top: 0;
width: 100%;
height: 160px;
border-bottom: solid yellow 1px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="sidenav.css" />
<title>Document</title>
</head>
<body>
<div class="navbar">
</div>
<div class="sidenav">
<div class="square"></div>
</div>
</body>
</html>
I want to have a centered box with two images on each side of a box, overlapping. Later, I'll move top image for each box with jquery animate function away from bottom image.
This is my code so far:
html,
body,
#wrapper {
height: 100%;
min-height: 100%;
}
#wrapper {
align-items: center;
display: flex;
justify-content: center;
}
#center {
width: 800px;
border: 1px solid black;
text-align: center;
position: relative;
}
img {
width: 100%;
height: auto;
float: left;
}
#left {
//border:1px solid red;
width: 400px;
float: left;
//position:absolute;
}
#right {
//border: 1px solid green;
width: 400px;
float: right;
//position:absolute;
}
#top {
z-index: 1;
}
#under {
z-index: -1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style1.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="center">
<div id="left">
<img src="http://s32.postimg.org/p5mgljj5x/drums_left.jpg" id="top">
<img src="http://s32.postimg.org/4vp56ei11/workout_left.jpg" id="under">
</div>
<div id="right">
<!--<img src="http://s32.postimg.org/6ep4p4dz9/drums_right.jpg" id="under">-->
<img src="http://s32.postimg.org/mzs5r1fph/workout_right.jpg" id="top">
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>
I have managed to center this box and add one picture for each side (left, right), but when I want to add another picture on either side, that has z-index: -1 it breaks into new line..
Fiddle that is showing problem: https://jsfiddle.net/bjgydLvo/
You need to give your second image a class and position it absolute.
<img class="second" src="http://s32.postimg.org/4vp56ei11/workout_left.jpg" id="under">
.second {
position: absolute;
top: 0;
z-index: 2;
left: 0;
width: 100%;
}
Make sure you position your left element relative too
#left {
width: 400px;
float: left;
position: relative;
}
Remove #under
Working example
https://jsfiddle.net/46pk1vdf/4/
z-index wont work without assigning position..
Updated fiddle : https://jsfiddle.net/bjgydLvo/2/
#under{
z-index:-1;
float: none;
height: auto;
left: 0;
position: absolute;
width: 400px;
z-index: -1;
}
For some strange reason, centering divs using margin: 0 auto is not working. My code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Picture Gallery</title>
<link rel="stylesheet" href="css/week7.css">
</head>
<body>
<h1>The Mighty Avengers</h1>
<div class="slide1">
<img src="images/hawkeye.jpg" alt="Hawkeye" />
<img src="images/capmar.jpg" alt="Captain Marvel" />
<img src="images/beast.gif" alt="Beast" />
<img src="images/thor.jpg" alt="Thor" />
</div>
<div class="slide2">
<img src="images/cap.jpg" alt="Captain America" />
<img src="images/ant.jpg" alt="Ant Man" />
<img src="images/vision.jpg" alt="The Vision" />
<img src="images/scar.jpg" alt="Scarlet Witch" />
</div>
</body>
</html>
and CSS:
html {
background-color: gray;
}
h1 {
text-align: center;
}
img {
height: 250px;
margin-left: -20px;
width: 250px;
}
.slide1, .slide2 {
display: block;
margin: 0 auto;
width: 85%;
}
None of the other instances of this type of centering talked about on Stack have been any help. I've tried this with and without a display type set on the classes, to no avail. Any insight into this would be appreciated.
Firstly margin: 0 auto; is working in your case but the problem is another - The images width is not enough to full fill the container, so if you want to center the images here is a code for it:
img:first-child {
margin-left: 0;
}
.slide1, .slide2 {
display: block;
margin: 0 auto;
width: 85%;
text-align: center;
}
I guess this is what you looking for:
Working : Demo
HTML: No Change
CSS
html {
background-color: gray;
}
h1 {
text-align: center;
}
img {
height: 250px;
margin-left: -2px; /* So that it resides side by side*/
width: 250px;
}
.slide1, .slide2 {
display: block;
margin: 0 auto;
width: 500px; /* As you are having 250px for each image */
}
What is it you are trying to achieve? Your slide divs are centered. I've applied a yellow border to them so that you can see.
.slide1, .slide2 {
display: block;
margin: 0 auto;
width: 85%;
border:1px solid yellow;
}
I've also updated your img css to make it more responsive so that the images dont wrap onto a second row.
img {
height: auto;
width: 25%;
max-width:250px;
}
https://jsfiddle.net/Lmmb03ck/4/
Hope that helps.
That's because your image is 150px.. and your div is 80% of the document
You can fix it doing a text-align: center; on .slide1, .slide2.
I've got a small problem, I want my footer to stay at the bottom of the screen with position: absolute. But my margin: auto to put it in the middle of the screen isn't working anymore.
html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
<link rel="shortcut icon" href="../IMAGES/favicon.ico">
<title>TEST</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/stylesheet.css">
</head>
<body>
<div id="header">
<div id="logo">
<img src="../IMAGES/logo.png" />
</div>
<div id="logotitel">
Den Allerstrafste "Ful-Ambi" Live-Band van groot Antwerpen en omstreken!
</div>
</div>
<div id="nav">
<div id="links">
<div class="link">Home</div>
<div class="link">Wie is wie</div>
<div class="link">Foto's</div>
<div class="link">Repertoire</div>
<div class="link">Links</div>
<div class="link">Contact</div>
</div>
</div>
<div class="clear"></div>
<div id="content">
TEST
</div>
<div class="clear"></div>
<div id="footer">
<div id="copy">
Developed by Yoshi © vAntstAd
</div>
</div>
</body>
</html>
CSS:
/* PAGE LAYOUT */
html
{
padding: 0px;
margin: 0px;
}
body
{
background-image: url(../IMAGES/background.png);
padding: 0px;
margin: 0px;
color: white;
font-family: 'Source Sans Pro', serif, sans-serif;
}
.clear
{
clear: both;
}
/* HEADER */
#header
{
width: 1100px;
height: 150px;
background-color: #282828;
margin: auto;
border-bottom: solid;
border-color: red;
}
#logo
{
width: 283px;
height: 100px;
margin: auto;
}
#logotitel
{
width: 1100px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: x-large;
}
/* NAV */
#nav
{
width: 1100px;
height: 50px;
margin-top: 25px;
margin-right: auto;
margin-left: auto;
margin-bottom: 25px;
background-color: red;
}
#links
{
width: 600px;
height: 50px;
margin: auto;
}
.link
{
width: 100px;
height: 50px;
line-height: 50px;
float: left;
text-align: center;
color: white;
text-decoration: none;
}
.link:hover
{
color: #282828;
text-decoration: underline;
}
/* CONTENT */
#content
{
width: 1100px;
height: auto;
margin: auto;
color: #282828;
position: relative;
}
/* FOOTER */
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
margin: auto;
background-color: #282828;
}
#copy
{
width: auto;
float: right;
margin-right: 5px;
height: 50px;
line-height: 50px;
}
Since you know the width of the footer (1100px), you can just do a left:50%;margin-left:-550px to center it.
Example: Centering an absolutely positioned element
http://jsfiddle.net/vdWQG/
Therefore, footer would become:
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
left:50%; /* Add this */
margin-left:-550px; /* Add this (this is half of #footers width) */
background-color: #282828;
}
If you want the element to stick on the bottom of the page as the user scrolls down, use position: fixed instead of position:absolute
To have a footer at the bottom, centered horizontally, you can apply the following CSS:
footer{
width: 100%;
max-width: 600px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
This will center the fixed element, but will also keep it responsive, as it will shrink when the browser has become less wide than the footer.
See this Fiddle for an example
I am making a website that uses numerous DIVs with a 100% height. Now when the text is bigger than the page I want the normal scrollbars to appear. Unfortunately they don't. and with trying overflow:auto anywehre, it gets worse and worse.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title><PageTitle> | Anga Designs</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/standard.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="css/iefix.css" /><![endif]-->
<!-- /Stylesheets -->
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<!-- /Scripts -->
<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- /Meta Tags -->
</head>
<body>
<div id="bgstripe"></div>
<div id="outercontainer">
<div class="leftbar"></div>
<div id="innercontainer">
<div id="header">
<div class="leftbar"></div>
<div class="innercontent">
</div>
</div>
<div id="content">
<div>
<span class="articletitle">Page Title!</span>
<div class="articletitlebar"></div>
</div>
<div class="articletext"><p>
Put your text here
</div>
</div>
</div>
<div id="faderight"></div>
</div>
<!-- /container -->
</body>
</html>
CSS
body, html {
margin: 0;
background-color: #eeeeee;
height: 100%;
font-family: Tahoma;
overflow: auto;
}
#bgstripe {
float: left;
background-color: #67a7ff;
width: 50%;
height: 100%;
}
#faderight {
position: relative;
float: right;
background: url('../images/layout/fade-right.jpg');
width: 50px;
height: 100%;
}
#outercontainer {
position: relative;
margin: auto;
width: 1000px;
height: 100%;
background-color: #2a5d95;
}
#innercontainer {
position: fixed;
float:left;
width: 950px;
background-color: #2a5d95;
}
.leftbar {
position: absolute;
background: url('../images/layout/leftbar.png');
width: 50px;
height: 100%;
}
.innercontent {
position: relative;
float: left;
background-color: #2a5d95;
height: 100%;
width: 100%;
margin-left: 50px;
}
#header {
position: relative;
float: left;
width: 950px;
height: 200px;
}
#content {
position: relative;
float: left;
width: 100%;
height: 100%;
}
.articletitle {
background-color: #003366;
padding: 10px 10px 10px 60px;
font-size: 20px;
font-family: Georgia;
color: #eeeeee;
}
.articletitlebar {
position: absolute;
width: 50px;
height: 40px;
background: url('../images/layout/articletitlebar.png');
margin-top: 10px;
}
.articletext {
display:block;
position: absolute;
margin-left: 70px;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
width: 700px;
min-height: 500px;
}
Anyone who can help me with this? I'm totally lost right now..
Online sample: http://rune.blupfis.nl/wendy/
position:fixed on #innercontainer is part of the problem, if not the whole issue. That will act like an absolutely positioned element and be removed from the normal flow.
The problem here is that the height of your contentdiv is set to 100%. This makes it expand so that it is the same height as its contents. If you try something more like this:
#content {
float: left;
height: 500px;
overflow: auto;
position: relative;
width: 100%;
}
you should see the scroll bars appearing (but some other styling may be lost now).