Problemy z pozycjonowaniem tekstu DIV nad obrazem DIV z CSS

Tworzę stronę dla mojej fotografii i zasadniczo staram się tworzyć pola div, które zawierają obrazy, z działem dla tekstu wyświetlanego nad obrazem. Z jakiegoś powodu nie mogę się dowiedzieć, jak utworzyć pozycję div tekstu z elementu div obrazu. Na przykład obecnie "top: 8%;" ustawia tekst na 8% od góry strony, a nie przez wierzchołek obrazu, pomimo tego, że element tekstowy znajduje się w kodzie obrazu i znajduje się w położeniu względnym.Problemy z pozycjonowaniem tekstu DIV nad obrazem DIV z CSS

HTML:

<!doctype html> 
<html class="no-js" lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Josh Graham, amateur photographer</title> 
<meta name="description" content="Photography by Josh Graham"> 
<meta name="author" content="Josh Graham"> 
<!-- CSS Code --> 
<link rel="stylesheet" href="css/style.css"> 
<link rel="stylesheet" href="css/reset.css"> 
<link rel="icon" 
     type="image/png" 
     href="images/favicon.png"> 
<!-- JS Code --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script src="BROKENjs/script.js"></script> 
</head> 

<body> 

<div id="wrapper"> 

<table id=menu > 
<tr> 
<td id=josh-graham>josh-graham.com</td> 
<td>Home</td> 
<td>About</td> 
<td>Contact</td> 
</tr> 
</table> 

<div id="home" data-speed="10" data-type="background"> 
    <div></div> 
</div> 

<div id="ukrainetext"> 
    <img id="ukraine" src="images/ukraine.jpg"/> 
    <p id="ukrainetextp">Chernobyl,<br>Ukraine</p> 
</div> 

<div id="cornwalltext"> 
    <img id="cornwall" src="images/cornwall.jpg"/> 
    <p id="cornwalltextp">Cornwall,<br>England</p> 
</div> 

<div id="moscowtext">  
    <img id="moscow" src="images/moscow.jpg"/> 
    <p id="moscowtextp">Moscow,<br>Russia</p> 
</div> 

</div> 

</body> 

</html>

CSS:

html, body{ 
    margin:0; 
    padding:0; 
    height:100%; 
    width:100%; 
    background: #3e3e3e; 
} 

#wrapper { 
    min-width: 640px; 
    margin-bottom: 0; 
} 

#menu { 
    background: #5d5d5d; 
    font-family: "Kozuka Gothic Pro"; 
    font-size: 20px; 
    font-weight: lighter; 
    color: white; 
    height: 50px; 
    margin: 0 auto; 
    margin-bottom: 0.3%; 
    width: 100%; 
    max-width: 1920px; 
    min-width:640px; 
    position: relative; 
    z-index:99; 
} 

table td { 
    padding-top: 13px; 
} 

#josh-graham { 
    font-size:25px; 
    padding-top: 6px; 
    padding-left: 5px; 
} 

#ukrainetext { 
    position: relative; 

} 

#ukrainetextp { 
    font-family: "Kozuka Gothic Pro"; 
    font-size: 25px; 
    font-weight: lighter; 
    color: white; 
    position: absolute; 
    left: 80%; 
    margin-top: 6%; 
} 

#ukraine { 
    height: auto; 
    margin: 0.3% auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
    float: left; 
} 

#cornwalltext { 
    position: relative; 

} 

#cornwalltextp { 
    font-family: "Kozuka Gothic Pro"; 
    font-size: 25px; 
    font-weight: lighter; 
    color: white; 
    position: absolute; 
    left: 80%; 
    margin-top: 25%; 
} 


#cornwall { 
    height: auto; 
    margin: 0.3% auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
    float:left; 
} 


#moscowtext { 
    position: relative; 

} 

#moscowtextp { 
    font-family: "Kozuka Gothic Pro"; 
    font-size: 25px; 
    font-weight: lighter; 
    color: white; 
    position: absolute; 
    left: 80%; 
    margin-top: 43.5%; 
} 


#moscow { 
    height: auto; 
    margin: 0.3% auto; 
    margin-bottom: 0.3%; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
    float:left; 
}

Źródło

2013-08-30 Josh Graham

To nie odpowiada na twoje pytanie, ale radzę ci użyć narzędzia takiego jak http://fancyapps.com/fancybox/. Wygląda całkiem fajnie i możesz użyć atrybutu "alt", aby wyświetlić tę zawartość pod obrazem. Podobnie jak: http://jsfiddle.net/2LXNh/ Lub sprawdź inne fajne rzeczy, które może zrobić! – Cooleronie

Przez tekst "nad" obrazem, masz na myśli nałożony na obraz, lub faktycznie nad obrazem. – DrewP84

Zobacz ten samouczek: http://css-tricks.com/text-blocks-over-image/ – DrewP84

Jest to często zadawane pytanie. Twoja odpowiedź: How to position text over an image in css. Jsfiddle: http://jsfiddle.net/EgLKV/3/

HTML:

<div id="container"> 
    <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg"/> 
    <p id="text"> 
     Hello World! 
    </p> 
</div>

CSS:

#container 
{ 
    height:400px; 
    width:400px; 
    position:relative; 
} 

#image 
{  
    position:absolute; 
    left:0; 
    top:0; 
} 
#text 
{ 
    z-index:100; 
    position:absolute;  
    color:white; 
    font-size:24px; 
    font-weight:bold; 
    left:150px; 
    top:350px; 
}

Źródło

2013-08-31 00:11:02 Cooleronie

Bardzo dziękuję, będę mógł to teraz zrobić! –

Wystarczy ustawić z-index w swoim CSS. Elementy o wyższych numerach pojawiają się nad elementami o niższych numerach. Chociaż możesz po prostu nadać elementom ciągłe liczby całkowite; ogólnie rzecz biorąc, będziesz chciał zapewnić duże odstępy między niższymi i wyższymi elementami w przypadku, gdy potrzebujesz dodać dodatkowe elementy lub zmienić warstwowość elementów.

Źródło

2013-08-31 00:46:44 ZeroPhase

Problemy z pozycjonowaniem tekstu DIV nad obrazem DIV z CSS

Odpowiedz

Powiązane problemy