Member Avatar for jspence29

I am trying to make a website page that looks roughly like this. All the DATA is at http://spencedesign.netau.net/singaporehome.html I don't understand why I can't just move the pictures around with absolute positioning, usually that overrides everything. sketch

My code is

ul#gallery
{
  list-style: none;
  width: 1300px;
  text-align: center;
  display: inline;
  background: rgba(255,255,255,0.7);
}
ul #gallery :hover {
  color: transparent;
  background: rgba(255,255,255,0.2);
}
ul#gallery li 
{
  list-style: none;
  display: inline;
} 

ul#gallery li a
{
  padding: 10px 10px 25px 10px;
  background-color: #fff;
  border: 1px solid #fff;
  -moz-box-shadow:  5px 5px 10px #888;
  -webkit-box-shadow:  5px 5px 10px #888;
  box-shadow: 5px 5px 10px #888;
  margin: 10px;
  text-decoration: none;
  display: inline-block;
  transition: all .3s;
  background: rgba(255,255,255,0.7);
}
ul#gallery li a:hover {
background: rgba(255,255,255,1.0);
}

ul#gallery li a img
{
  height: 150px;
  width: 250px;
  max-width: 100%;
}

ul#gallery li a p
{
  margin-top: 25px;
  text-align: center;
  color: #000;
  font: Helvetica, Arial, Sans-serif;
  text-decoration: none;
  font-size: 20px;
}
ul#gallery li a.gallery {position: absolute; top: 200px; left: 100px; }
ul#gallery li a.facts {position: absolute;}
ul#gallery li a.tour {position: absolute;}
ul#gallery li a.author {position: absolute;}

</style>
<body>

<div id="container">

   <h1> Singapore </h1>

     <h3><i> Singapore is the worlds first machine that works </i>- Lee Kuan Yew </h3>

<ul id="gallery">

  <li ><a class="gallery"href="http://spencedesign.netau.net/singapore-gallery.html"> <img src="gallery.jpg" alt="gallery" /> <p> Gallery </p> </a></li>


  <li ><a class="facts"href="#"> <img src="facts.jpg" alt="facts" /> <p> Facts </p></a></li>


  <li ><a class="tour"href="#"> <img src="tour.jpg" alt="tour" /> <p> Tour </p></a></li>


  <li ><a class="author"href="#"> <img src="author.jpg" alt="author" /> <p> Author </p> </a></li>

</ul>

I am also looking into something else, I am experimenting with making it so that when you hover over one of the squares (links) that the whole screen turns grey, except for the box. I am thinking about making a grey image that is only visible when you hover over one of the images, and covers everything else with a high zindex, and also when you hover over an image it has a higher zindex. I am just wondering if you guys have any Ideas to go with that? Thanks.

  • 2 Contributors
  • 1 Reply
  • 97 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by LastMitch
Member Avatar for LastMitch

@jspence29

Absolute positioning, not positioning absolutely

This is very weird:

ul#gallery li a.gallery {position: absolute; top: 200px; left: 100px; }
ul#gallery li a.facts {position: absolute;}
ul#gallery li a.tour {position: absolute;}
ul#gallery li a.author {position: absolute;}

When you used CSS for ul#gallery li you used 1 ul#gallery li to be all absolute.

it should be something like this:

ul#gallery li {position: absolute; top: 200px; left: 100px; }

To move each images you need to used a <div> for each gallery the way you want it.

Edited by LastMitch because: grammer
commented: To Rectify what some retard did to LastMitch +0
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.