Alignment issue: trying to make a series of links images

Question

chris99 0 Junior Poster

12 Years Ago

The site is gameperspective.freehosting.com. For some reason the button link (Visual) isn't aligning flush with the div margin, it is sliding to the bottom right. Here is the CSS, and the HTML, what is going wrong?
Relevant HTML:

<html>
<head>
<title>My new blog/ information website! </title>
<link rel="stylesheet" type="text/css" href="default_game_site.css"/>

</head>
<body id="front page">
<div id="header">
	<img src="logo.png", height=200px>
</div>

<div id="wrap">
        <div id="column">
	<div id="links">
	<UL>
	<LI><img src="visualButton.png", height=50px, width=150px></LI>
        <LI>Musical Perspectives</LI>
	<LI>Storytelling Perspectives</LI>
        <LI><A HREF="Minigames.html">Minigame Perspectives</A></LI>
        </UL>
	</div>

Relevant CSS:

body
{
margin:0;
padding:0;
color:#000;
background:#CFF;
text-align:center;
}
#column {
        width:750px;
        height:500px;
        margin:0 auto;
        background:#CFF;
        
        }
#wrap {
      width:750px;
      height:500px;
      background:#CFF;
      margin-left: auto;
      margin-right: auto;
      }
#links {float:top;
        width:750px;
        height:50px;
        background:#EAEAEA;
        border-style:solid;
        border-width:thin;
        text-align: left;
        border-color:#C7C7C7; 
        font-size: 15px;
        -webkit-border-radius:15px;
        -moz-border-radius:15px;
        }
#links li{float:left
          }

web-design

2 Contributors
1 Reply
92 Views
2 Days Discussion Span
Latest Post 12 Years Ago Latest Post by gcarvalho

Reply to this topic

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.

gcarvalho 0 Newbie Poster · Answer 1 · 2012-01-13T04:37:54+00:00

Hey friend.
The correct CSS code:

body
{
margin:0;
padding:0;
color:#000;
background:#CFF;
text-align:center;
}
#column {
        width:750px;
        height:500px;
        margin:0 auto;
        background:#CFF;
        
        }
#wrap {
      width:750px;
      height:500px;
      background:#CFF;
      margin-left: auto;
      margin-right: auto;
      }
#links {float:top;
        width:750px;
        height:50px;
        background:#EAEAEA;
        border-style:solid;
        border-width:thin;
        text-align: left;
        border-color:#C7C7C7; 
        margin: auto; // << try this
        font-size: 15px;
        -webkit-border-radius:15px;
        -moz-border-radius:15px;
        }
#links li{float:left
          }