2 replies [Last post]
Emma
Emma's picture
Offline
Enthusiast
Last seen: 14 weeks 4 days ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 148
Points: 34

Hi
any assistance appreciated- I can't get the two boxes that appear last in this html (containing images with overlaid text) to appear side by side no matter what I try! thanks, Emma

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Cafe</title>
<style>
* {box-sizing: border-box}
body, html {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
}
 
.bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
.bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
.bar .w3-button{white-space:normal}
.top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
 
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    text-align: center;
}
 
li {
   display: inline;
}
 
li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
 
li a:hover, .dropdown:hover .dropbtn {
color: #33ccff; TEXT-DECORATION: none;
    background-color: grey;
 
}
li.dropdown {
    display: inline-block;
}
 
 
.mySlides {display: none}
img {
vertical-align: middle; 
max-width: 100%;
}
 
/* Slideshow container */
.slideshow-container {
  max-width: 1920px;
  position: relative;
  margin: auto;
}
 
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}
 
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
 
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
 
/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 28px;
  padding: 8px 12px;
  position: absolute;
  bottom: 25px;
  width: 100%;
  text-align: center;
}
 
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
 
/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
 
.active, .dot:hover {
  background-color: #717171;
}
 
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
 
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
 
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
 
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
.info {
  color: #707070;
  font-size: 15px;
  width: 100%;
  padding: 10px;
  text-align: center;
background-color: #f7f7f7;
}
.grey{
 background-color: #f7f7f7;
 font-size: 15px;
 width: 100%;
 padding: 10px;
 text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
 
.wrapper{
max-width: 100%;
 text-align:center;
}
.container{
   position: relative;
    font-family: Arial;
margin: 5px;
   background-color: red;
} 
.text-block {
 position: absolute;
    bottom: 20px;
    left: 100px;
    background-color: black;
    color: white;
    padding-left: 20px;
    padding-right:20px;
}
.text-next{
 position: absolute;
    bottom: 20px;
    right: 300px;
    background-color: black;
    color: white;
    padding-left: 20px;
    padding-right:20px;
} 
 
.clear {
  clear: both;
  border-top: solid 1px;
}
.responsive {
    height: auto;
    margin:0 5px;
    text-align: center;
    max-width: 100%;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
 
<script>
$(document).ready(function() {
    $('#picOne').fadeIn(1500).delay(3500);
    $('#picTwo').delay(5000).fadeIn(1500);
    $('#picThree').delay(6500).fadeIn(3500);
});
</script>
 
</head>
<body>
 
<!-- Navbar (sit on top) -->
 
  <div class="bar" id="myNavbar">
    <ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#port">Menu</a></li>
  <li><a href="#contact">Contact</a></li>
<li class="fa fa-facebook-official" style="font-size:22px; color:white"></li>
</ul>
 
  </div>
 
 
<div class="slideshow-container">
 
<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="images/img_mountains_wide.jpg" style="width:100%" alt="Mountains">
  <div class="text">Mountain Regions</div>
</div>
 
<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="images/img_fjords_wide.jpg" style="width:100%" alt="Fjords">
  <div class="text">RESORTS</div>
</div>
 
<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="images/img_nature_wide.jpg" style="width:100%" alt="Panorama">
  <div class="text">ROOMS</div>
</div>
 
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
 
</div>
<br>
 
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>
 
<script>
var slideIndex = 1;
showSlides(slideIndex);
 
function plusSlides(n) {
  showSlides(slideIndex += n);
}
 
function currentSlide(n) {
  showSlides(slideIndex = n);
}
 
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script> 
<div class="info"> <h1>Welcome to Nuvo Travel</h1> 
                <p>Local travel company.</p>
          </div>
<p class="clear">This clears all.</p>
<div class="container">
  <img src="images/img_nature_wide.jpg" alt="Food" style="width:50%;">
  <div class="text-block">
    <h4>Nature</h4>
    <p>What a beautiful sunrise</p>
  </div>
<img src="images/img_nature_wide.jpg" alt="Drinks" style="width:50%;">
  <div class="text-next">
    <h4>Location</h4>
    <p>Outdoor Panoramic Scenes</p>
  </div>
</div>
</body>
</html> 
<code>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 49 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9714
Points: 3790

The position property is evil

Position: fixed or absolute is not in the flow. As a result, other elements are not aware of the positioned elements and positioned elements are not aware of other elements. To make them work for you instead of against, restrict their use to small elements within their own contextual containers.

As a first attempt at debugging, remove all instances of {position: absolute;} from your styles.

You do not need the .clear class/element. That's for float clearing and usually the clear property is not the best way to do it.

Try:

  • Make the .container {text-align: center;}.
  • Make its sub-boxes {display: inline-block;}. You may want to declare sizes, see below.
  • Make those images background. They are not content, they are decorations.
  • Put the text in the P element. This is likely a better place to set dimensions.
  • Fine tune with padding and margins.

Making the page responsive is not addressed, but going this route will make responsiveness trivial compared to using the position property. Accessibility is easier and using em or percentage metrics will make a big difference.
Not tested but are my first thoughts.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Emma
Emma's picture
Offline
Enthusiast
Last seen: 14 weeks 4 days ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 148
Points: 34

Looking much better!

Thanks Gary, that's great - I applied all the tips above and this is aligned correctly now! I also needed an extra div within the container to hold the background image. Just need to iron on the responsiveness now but that should be easy enough Big smile