Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 364
  • Last Modified:

Problem.s with aligning / displaying images

Hi!

1) We have two images on this page and are trying to get them to be hortizontally aligned.
Currently, they are being displayed vertically aligned.
2) Also we can not scroll down the page to see more than half of this first image.
So we would greatly appreciate any specific code corrections in correcting these two issues.
Thank you ...


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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Home Page</title>
</head>

<body>
<div id="container">

<div id="banner">
<h1>Maui</h1>
</div>
<div id="nav">
<ul>
 <li><a href="index.htm">Home</a></li>
 <li><a href="bumper.htm">Bumper</a></li>
 <li><a href="clothes.htm">Clothes</a></li>
 <li><a href="flag.htm">Flag</a></li>
 <li><a href="shirt.htm">Shirt</a></li>
 <li><a href="holiday.htm">Holiday</a></li>
 <li><a href="money.htm">Money</a></li>
 </ul>
</div>

<div id="images">
<img class="display" border="0" src="kahekili maui chief.jpg" alt="" />
<img class="display" border="0" src="maui_map.jpg" alt="" />
</div>

</div>

</body>
</html>

CSS:

#container {
         width:960px;
      height:1000px;
      background-color:#FFFFFF;
      color:#000000;
}
#banner {
    position:fixed;
    top:0px;
    margin-left: auto;
      width:960px;
      height:100px;
      background-color:#81B0DA;
      color:#000000;
      border:#211D20 solid 10px;
    font-size:28px;
    text-align:center;
    padding-right:10px;
}
#nav {
    position:fixed;
    top:125px;
    margin-left: auto;
      width:990px;
      height:20px;
      background-color:#4E5B74;
      color:#6492C5;
}
#images {
    position:fixed;
    top:165px;
        border:#211D20 solid 10px;
        text-align:center;
}

.display {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 960px;
}

#td {
      text-align:center;
}
ul {
    list-style-type:none;
    text-align:center;
    padding:0;
    overflow:hidden;
}
li {
    float:left;
}
a {
    display:block;
    width:141.4px;
    background-color:#D2D5B7;
    text-decoration:none;
}
h1 {
      color:#D2D5B7;
}
0
TrueBlue
Asked:
TrueBlue
  • 3
  • 2
  • 2
2 Solutions
 
becraigCommented:
Look into changing your:

position:fixed

You should be using absolute - relative if you want to be able to scroll in the same div

Please look at this:
http://www.w3schools.com/css/css_positioning.asp
0
 
TrueBlueAuthor Commented:
becraig,

we changed all instances of position:fixed to position:absolute and now we can scroll, but the two images are still vertically aligned.
how can we make then horitizontally aligned?
they are each 320 pixels wide.
TIA
0
 
becraigCommented:
change your display format from inline-block to inline for those two images

#images {

    display:inline;
    position:relative;
    top:165px;
        border:#211D20 solid 10px;
        text-align:center;
}
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Dean OBrienCommented:
Try giving your images some dimensions i.e.  style="width:320px;height:320px"

As when i do that they align fine. Do you have a live link to the page? its hard to see problem.

Easynow
0
 
TrueBlueAuthor Commented:
easynow111,

that fixed the problem with getting the two images horizontally aligned.
is there a way to get the box around the two images to be centered horizontally?
currently, it is left margin aligned.
TIA
0
 
Dean OBrienCommented:
I have made a few changes to your code.

Try this:
<!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Home Page</title>
<style>
#container {
	margin:auto;
         width:960px;
      height:1000px;
      background-color:#FFFFFF;
      color:#000000;
}
#banner {
      width:940px;
      height:100px;
      background-color:#81B0DA;
      color:#000000;
      border:#211D20 solid 10px;
	font-size:28px;
	text-align:center;
}
#nav {
      width:940px;
      height:30px;
      background-color:#D2D5B7;
      color:#6492C5;
      border:#211D20 solid 10px;
}
ul {
    list-style-type:none;
    text-align:center;
    margin:5px 0;;
    overflow:hidden;
}
li {
    width:14%;
    float:left;
}
a {
    display:block;
    background-color:#D2D5B7;
    text-decoration:none;
}
#images {
	margin:auto;

        border:#211D20 solid 10px;
        text-align:center;
}

.display {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 960px; 
}

#td {
      text-align:center;
}

h1 {
      color:#D2D5B7;margin:20px;
}
</style>

</head>

<body>
<div id="container">

<div id="banner">
<h1>Maui</h1>
</div>
<div id="nav">
<ul>
 <li><a href="index.htm">Home</a></li>
 <li><a href="bumper.htm">Bumper</a></li>
 <li><a href="clothes.htm">Clothes</a></li>
 <li><a href="flag.htm">Flag</a></li>
 <li><a href="shirt.htm">Shirt</a></li>
 <li><a href="holiday.htm">Holiday</a></li>
 <li><a href="money.htm">Money</a></li>
 </ul> 
</div>

<div id="images">
<img class="display" border="0" src="kahekili maui chief.jpg" alt="" style="width:320px;height:320px"/>
<img class="display" border="0" src="maui_map.jpg" alt="" style="width:320px;height:320px"/>
</div>

</div>

</body>
</html>

Open in new window

0
 
TrueBlueAuthor Commented:
easynow111,

Perfect :)
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now