Ik zit met een groot probleem!
Ik ben bezig met een photoviewer met 3 info buttons in de footer.
Nu is het probleem ik krijg ze niet goed uitgelijnd.
En als het gelukt is komen ze op mobile niet goed uit.
HELP wat doe ik fout.
Ik hoop dat jullie mij kunnen helpen.
Wat ik al aangepast heb is:
position: fixed;
Width: 100%;
En daarnaast heb ik vrij lang met
left: 57.3%; gespeeld
Hieronder volgt heel de code
<!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" xml:lang="en" lang="en">
<head>
<title>XXXXXX</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
<link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$.supersized({
// Functionality
slide_interval : 5000, // Length between transitions
transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 800, // Speed of transition
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : [ // Slideshow Images
{image : '1.jpg', thumb : '1.jpg', url : '},
{image : '2.jpg', thumb : '2.jpg', url : '},
{image : '3.jpg', thumb : '3.jpg', url : '},
{image : '1.jpg', thumb : '1.jpg', url : '},
{image : '2.jpg', thumb : '2.jpg', url : '},
]
});
});
</script>
</head>
<style type="text/css">
ul#demo-block {
margin: 0 15px 15px 15px;
}
ul#demo-block li {
margin: 0 0 10px 0;
padding: 10px;
display: inline;
float: left;
clear: both;
color: #aaa;
background: url('img/bg-black.png');
font: 11px Helvetica, Arial, sans-serif;
}
ul#demo-block li a {
color: #eee;
font-weight: bold;
}
</style>
<body>
<h1><a href="[email protected]" style="color: white; text-decoration: none">PlanXYZ</a></h1>
<style>
h1 {
font-family: "Times New Roman";
color: white;
position: absolute;
top: 77%;
left: 45%;
margin-right: -50%;
transform: translate(-50%, -50%) }
}
</style>
<h6><a href="[email protected]" style="color: white; text-decoration: none">[email protected]</a></h6>
<style>
h6 {
font-family: "Times New Roman";
font-size:14px;
color: white;
position: absolute;
top: 82.7%;
left: 47.8%;
margin-right: -50%;
transform: translate(-50%, -50%) }
}
</style>
<p><a href="http://www.dropbox.com" style="color: white; text-decoration: none">Pers</a></p>
<style>
p {
font-family: "Times New Roman";
font-size:14px;
color: white;
position: absolute;
top: 85.9%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
}
</style>
<!--End of styles-->
<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<!--Arrow Navigation-->
<a id="prevslide" class="load-item"></a> <a id="nextslide" class="load-item"></a>
<div id="thumb-tray" class="load-item">
<div id="thumb-back"></div>
<div id="thumb-forward"></div>
</div>
<!--Time Bar-->
<div id="progress-back" class="load-item">
<div id="progress-bar"></div>
</div>
<!--Control Bar-->
<div id="controls-wrapper" class="load-item">
<div id="controls">
<!--Slide counter-->
<div id="slidecounter"> </div>
<!--Slide captions displayed here-->
<div id="slidecaption"></div>
<!--Thumb Tray button-->
<!--Navigation-->
<ul id="slide-list">
</ul>
</div>
</div>
<!--Designed by Binddesign-->
</body>
</html>
[/quote]
Ik denk dat het probleem hem zit in het stuk
[quote] font-family: "Times New Roman";
font-size:14px;
color: white;
position: absolute;
top: 85.9%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }Ik hoop dat iemand mij kan helpen.
Alvast super erg bedankt voor jullie hulp/ tips