+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Divy pomoc (/thread-divy-pomoc)
Divy pomoc - Elo - 02-05-2011
Mam dwa divy jeden umieszczony w drugim i wstawiłem do niego obraz wtedy zawartość drugiego diva znalazła się pod obrazem jak nałożyć drugi div na obraz ?
RE: Divy pomoc - Ancik - 02-05-2011
Masło maślane, podaj kod bo inaczej ciężko to sobie wyobrazić. O taką strukturę ci chodzi?
Kod:
<div id="div_z_obrazem">
<div id="wewnętrzny"></div>
</div>Jeżeli tak, to nadajesz #div_z_obrazem odpowiednie rozmiary, jakieś tam tło za pomocą css, a wtedy #wewnętrzny będzie po prostu w nim. Jako, że nie podałeś kodu, to może wystąpić pare innych komplikacji, które wypychają tego diva na zewnątrz, jeżeli twój kod jest bardziej skomplikowany. Domyślam się, że używasz floatów i zapomniałeś o overflow: hidden dla rodzica, ale podaj kod.
RE: Divy pomoc - Elo - 02-05-2011
Tu masz kod html
Kod:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<title>Pierwsza strona internetowa</title>
<link rel="stylesheet" href="arkusz.css" type="text/css"/>
</head>
<body>
<div id="calosc">
<div id="logo"><img src="ścieżka dostępu" alt="Tekst alternatywny" />
<div id="menu">
<ul>
<li><a href="#">menu1</a>
<li><a href="#">menu2</a>
<li><a href="#">menu3</a>
<li><a href="#">menu4</a>
</ul></div></div>
<div id="środek">
<div id="menulewe"><ul>
<li><a href="#">menul1</a>
<li><a href="#">menul2</a>
<li><a href="#">menul3</a>
<li><a href="#">menul4</a>
</ul></div>
<div id="text">tekst</div>
</div>
<div id="stopka">stopka</div>
</div>
</div>
</body>
</html>Kod:
*{
margin:0px;
padding:0px;
border:none;}
#calosc{
margin:0 auto;
height:100%;
width:902px;}
#logo{
border:1px solid black;
height:150px;
width:900px;}
#menu{
border:1px solid black;
height:42px;
width:900px;
text-align:right;
float:right;
margin-top:none;
background-color:#808080}
#srodek{
height:100%;
width:100%;}
#menulewe{
border:1px solid black;
height:400px;
width:165px;
float:left;
margin-top:none;
margin-bottom:5px;
display:block;
background-color:#808080;
}
#text{
border:1px solid black;
height:400px;
width:660px;
float:right;
margin-right:10px;
margin-top:5px;
margin-bottom:5px;}
#stopka{
border:1px solid black;
height:100px;
width:900px;
clear:both;
margin-bottom:100px;}
#menu ul li{
list-style:none;
}
#menu a:link,a:visited,a:hover,a:active{
text-decoration:none;
display:block;
float:right;
line-height:40px;
width:82px;
color:white;
text-align:center;
}
#menu a:hover{
color:#6495ED;
border-bottom:2px solid #6495ED;}
#menu a:active{
color:#6495ED;
border-bottom:2px solid #6495ED;}
#menulewe a:link,a:visited,a:hover,a:active{
text-decoration:none;
display:block;
float:left;
line-height:40px;
width:150px;
color:black;
text-align:center;
line-height:20px;
}
#menulewe ul, ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#menulewe ul {
width: 200px;
}
#menulewe ul a:link, ul a:visited {
display: block;
width: 150px;
text-decoration: none;
background-color: #808080;
color: #000;
padding: 5px;
border: 2px outset #808080;
}
#menulewe ul a:hover {
border-style:groove;
padding: 7px 3px 3px 7px;
}RE: Divy pomoc - mateo - 02-05-2011
Tło diva logo nadaj za pomocą odpowiedniego wpisu w CSS. Do tego ustaw dla diva logo position relative dla menu absolute i potem pobaw się za pomocą left i top.
RE: Divy pomoc - Elo - 02-05-2011
dopisałem taki kod:
Kod:
#logo{
[b]background-image:url (1.jpg)[/b];
border:1px solid black;
height:150px;
width:900px;}RE: Divy pomoc - mateo - 02-05-2011
dodaj position: relative; a dla menu position: absolute;
RE: Divy pomoc - Elo - 02-05-2011
teraz te dwa divy wyglądają tak :
Kod:
#logo{
background-image:url (1.jpg);
border:1px solid black;
height:150px;
width:900px;
position: relative}
#menu{
border:1px solid black;
height:42px;
width:900px;
text-align:right;
float:right;
margin-top:none;
background-color:#808080;
position:absolute;}RE: Divy pomoc - mateo - 02-05-2011
Pokaż www
RE: Divy pomoc - Elo - 02-05-2011
ta strona nie jest nigdzie umieszczona. a kod html masz wyżej
RE: Divy pomoc - Elo - 02-05-2011
to był mój błąd zapomniałem o ''. Taki mały bład a tyle zamieszania zrobiłem