2013-03-19 2 views
1

Я сошел с ума, пытаясь применить div над другим div, который содержит изображение. DIV должен включать в себя простую HTML ссылку так же, как на этой картинке:Размещение и выравнивание div на другом div

https://dl.dropbox.com/u/39682698/Fraud-Fighter2.png

, к сожалению, когда страница отображает изображение URL-адрес не сосредоточенную на изображении, как видно на живом сайте здесь:

http://us.aktive.me/maintenance/

HTML:

<html> 
<head> 
<meta charset="utf-8"> 
<title>ThreatMetrix Maintenance Page</title> 
<link href="main.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
<div id="container"> 
    <div id="apDiv1"><a href="http://threatmetrix.com/support">http://threatmetrix.com/support</a></div> 
    <div id="image"><img src="fraud-fighter.png" width="977" height="750" alt="ThreatMetrix Maintenance Page" /></div> 
</div> 

</body> 
</html> 

CSS:

@charset "utf-8"; 
/* CSS Document */ 

body { 
    background-color: #3fa9f5; 
    /*background-image:url(fraud-fighter.png);*/ 
    background-repeat:no-repeat; 
    background-position:center; 
    background-position:top; 
    font-size : 1.5em; 
    font-family : Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 
} 

a:link  { background-color: transparent; color:#f28a1a} 
a:visited { background-color: transparent; color:#f28a1a} 
a:active { background-color: transparent; position:relative} 
a:hover { background-color: transparent; color:#cb7518} 
a.noformat { text-decoration: none; color: #121212} 

#container { 
    width: 1000px; 
    height: 800px; 
    position: relative; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

#apDiv1 { 
    margin-top: 240px; 
    text-align: center; 
    position:absolute; 
} 

#image { 
    z-index: 10; 
} 

миллион спасибо заранее к любому, кто может мне помочь :) -Dean

ответ

0

Набор CSS, как показано ниже.

#apDiv1 { 
    position: absolute; 
    right: 350px; 
    text-align: center; 
    top: 250px; 
} 

, если вы хотите в %

#apDiv1 { 
    position: absolute; 
    left: 30%; 
    text-align: center; 
    top: 31%; 
} 
0

Для центрирования DIV, вы можете сделать что-то вроде этого:

width:400px; left:50%; margin-left: -200px; 
0

Вы # apDiv1 должна быть такой же ширины, как ваш контейнер дела.

0

определим ваш ID#apDiv1left 50% и margin-left согласно вашей конструкции

, как так

#apDiv1 { 
left: 50%; 
margin-left: -185px; 
} 

////////////////// ////////////////////////////////////////////////// ///////////////////////

2-й способ - это

Определим теперь Ваш ID#apDiv1left:0 и right:0;

#apDiv1{ 
left:0; 
right:0; 
} 
0

установить apDiv1 CSS ниже

#apDiv1 { 
margin-top: 242px; 
text-align: center; 
position: absolute; 
width: 100%; } 
0

Это должно работать

#apDiv1 { 
     width:inherit; 
     text-align: center; 
     position:absolute; 
     top:240px; 
}