Scriere peste imagine

#1
Trecetrenu

Posted 19 March 2010 - 20:30

Junior Member

Grup: Members
Posts: 160
Înscris: 15.11.2009

Salut!
Fiind nou in domeniu, ma lovesc de fel si fel de probleme.

Asadar:
Mi-am impartit o imagine in sliceuri in Photoshop, pe care le-am salvat sub forma de tabele HTML.
Astfel, fiecare coloana a tabelului contine o imagine de background.
Impreuna toate formaza un ansamblu bine inchegat, precum se poate vedea si in imagine.

Intrebarea mea este:
Cum as putea sa scriu in coloane, deasupra (peste) imaginilor fara sa le decalez?
Am incercat cu un <font> si </font> , doar ca decaleaza.

Pe exemplul din imagine, as vrea sa pot scrie in interiorul coloanei 8.

upload.png 319.46K 43 downloads

Multumesc! sper ca am fost destul de explicit.

Edited by Trecetrenu, 19 March 2010 - 20:33.

Back to top

#2
double_b_phantom

Posted 20 March 2010 - 01:35

Junior Member

Grup: Members
Posts: 207
Înscris: 28.04.2005

Trecetrenu, on 19th March 2010, 20:30, said:

Salut!
Fiind nou in domeniu, ma lovesc de fel si fel de probleme.

Asadar:
Mi-am impartit o imagine in sliceuri in Photoshop, pe care le-am salvat sub forma de tabele HTML.
Astfel, fiecare coloana a tabelului contine o imagine de background.
Impreuna toate formaza un ansamblu bine inchegat, precum se poate vedea si in imagine.

Intrebarea mea este:
Cum as putea sa scriu in coloane, deasupra (peste) imaginilor fara sa le decalez?
Am incercat cu un <font> si </font> , doar ca decaleaza.

Pe exemplul din imagine, as vrea sa pot scrie in interiorul coloanei 8.
Attachment

upload.png

Multumesc! sper ca am fost destul de explicit.

Se ia un div cu id-ul de ex. tabel1 caruia ii aplici style="position:relative; width:100px; height:100px; background-image:url('../imagine.jpg');" unde width/height pot fi si exprimate si in procente (ca sa poti "imita" standardele tabelelor). In acest div mai bagi un div cu style="padding:10px" care va contine textul tau and problem solved :D

Poti sa elimini cel de-al doilea div si sa adaugi padding-ul in style-ul primului div, doar ca pe unele browsere (recte IE) padding-ul pe div-ul cu background va depasi width/height-ul definit si va strica layout-ul.

Back to top

#3
Trecetrenu

Posted 22 March 2010 - 19:14

Junior Member

Grup: Members
Posts: 160
Înscris: 15.11.2009

Multumesc pentru raspuns!
Din pacate, acum am salvate pozele sub forma de layot-uri, divizate prin taguri <div>. Ce metoda pot incerca pentru a vedea imaginea ca un fel de background in layer, pentru a putea in final scrie peste ea?

Am incercat asa:

<div id="id-ul definit in style"> de exemplu: <div id="idindex-01">
<div id="link catre imagine" cu width si height setate> de exemplu : <div id="images/poza.jpg" width="719" height="531">
/</div>
<p> text text </p>
</div>

Reusesc sa pun textul unde vreau in div-ul initial, doar ca din pacate nu imi arata si imaginea sub text.

Edited by Trecetrenu, 22 March 2010 - 19:42.

Back to top

#4
double_b_phantom

Posted 23 March 2010 - 00:30

Junior Member

Grup: Members
Posts: 207
Înscris: 28.04.2005

Trecetrenu, on 22nd March 2010, 19:14, said:

Multumesc pentru raspuns!
Din pacate, acum am salvate pozele sub forma de layot-uri, divizate prin taguri <div>. Ce metoda pot incerca pentru a vedea imaginea ca un fel de background in layer, pentru a putea in final scrie peste ea?

Am incercat asa:

<div id="id-ul definit in style"> de exemplu: <div id="idindex-01">
<div id="link catre imagine" cu width si height setate> de exemplu : <div id="images/poza.jpg" width="719" height="531">
/</div>
<p> text text </p>
</div>

Reusesc sa pun textul unde vreau in div-ul initial, doar ca din pacate nu imi arata si imaginea sub text.

<div id="idindex-01" style="background-image: url('../images/poza.jpg'); width: 719px; height: 531px">
<div id="divcutext" style="padding:10px">
Aici bagi ce text ai nevoie.
</div>
</div>

sau

<div id="idindex-01" style="background-image: url('../images/poza.jpg'); width: 719px; height: 531px; padding: 10px">
Aici bagi ce text ai nevoie.
</div>

Edited by double_b_phantom, 23 March 2010 - 00:31.

Back to top

#5
Trecetrenu

Posted 23 March 2010 - 09:21

Junior Member

Grup: Members
Posts: 160
Înscris: 15.11.2009

Perfect!
A mers, multumesc !

Back to top

#6
Trecetrenu

Posted 24 March 2010 - 17:15

Junior Member

Grup: Members
Posts: 160
Înscris: 15.11.2009

Ma confrunt cu o problema care pare ,,clasica'' din ce am citit eu pana acum. Am probleme cu modul in care este vazuta pagina la diferite rezolutii. De exemplu, la rezolutii peste 800x600, pagina este afisata intreaga. Insa la 800 x 600 si sa zicem un 640 x 480 , este taiata o mare parte din top.
Din start am ales sa-l fac pentru 1024x768.

Postez aici si codul, poate are cineva timp sa arunce o privire:

<html>
<head>
<title>Spring</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<link rel="shortcut icon" href="images/blink.gif"/>
<!-- ImageReady Styles (Spring.psd) -->
<style type="text/css">
<!--

#Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1024px;
	height:768px;
}

#idSpring-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:458px;
	height:154px;
}

#idSpring-02 {
	position:absolute;
	left:458px;
	top:0px;
	width:126px;
	height:193px;
}

#idSpring-03 {
	position:absolute;
	left:584px;
	top:0px;
	width:440px;
	height:154px;
}

#idSpring-04 {
	position:absolute;
	left:0px;
	top:154px;
	width:141px;
	height:39px;
}

#idSpring-05 {
	position:absolute;
	left:141px;
	top:154px;
	width:109px;
	height:39px;
}

#idSpring-06 {
	position:absolute;
	left:250px;
	top:154px;
	width:74px;
	height:39px;
}

#idSpring-07 {
	position:absolute;
	left:324px;
	top:154px;
	width:134px;
	height:39px;
}

#idSpring-08 {
	position:absolute;
	left:584px;
	top:154px;
	width:122px;
	height:39px;
}

#idSpring-09 {
	position:absolute;
	left:706px;
	top:154px;
	width:165px;
	height:39px;
}

#idSpring-10 {
	position:absolute;
	left:871px;
	top:154px;
	width:153px;
	height:39px;
}

#idSpring-11 {
	position:absolute;
	left:0px;
	top:193px;
	width:152px;
	height:531px;
}

#idSpring-12 {
	position:absolute;
	left:152px;
	top:193px;
	width:719px;
	height:531px;
}

#idSpring-13 {
	position:absolute;
	left:871px;
	top:193px;
	width:153px;
	height:531px;
}

#idSpring-14 {
	position:absolute;
	left:0px;
	top:724px;
	width:1024px;
	height:44px;
}
.style1 {
	font-size: 9px;
	font-weight: bold;
}

-->
</style>
<!-- End ImageReady Styles -->
<script type="text/Javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
	var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
	if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;" onload="MM_preloadImages('images/Spring_05mouseover.jpg','images/Spring_06mouseover.jpg','images/Spring_07mouseover.jpg','images/Spring_08mouseover.jpg','images/Spring_09mouseover.jpg')">
<div style="width:1024px; height:768px; position:absolute;top:52%;left:50%;margin-top:-350px;margin-left:-512px;">[b] <!-- Aici tind sa cred ca e problema -->
[/b]
<!-- ImageReady Slices (Spring.psd) -->
	<div id="idSpring-01">
		<img src="images/Spring_01.gif" width="458" height="154" alt="">
	</div>
	<div id="idSpring-02">
		<a href="Index.html"><img src="images/Spring_02.gif" width="126" height="193" border="0" alt="CNDG 2006-2010" title="C.N.D.G 2006-2010"></a> </div>
	<div id="idSpring-03">
		<img src="images/Spring_03.gif" width="440" height="154" alt="">
	</div>
	<div id="idSpring-04">
		<img src="images/Spring_04.gif" width="141" height="39" alt="">
	</div>
	<div id="idSpring-05">
	<a href="Despre.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','images/Spring_05mouseover.jpg',1)"><img src="images/Spring_05.jpg" name="Image12" width="109" height="39" border="0"></a>	</div>
	<div id="idSpring-06">
	<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/Spring_06mouseover.jpg',1)"><img src="images/Spring_06.jpg" name="Image13" width="74" height="39" border="0"></a>	</div>
	<div id="idSpring-07">
	<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/Spring_07mouseover.jpg',1)"><img src="images/Spring_07.jpg" name="Image14" width="134" height="39" border="0"></a>	</div>
	<div id="idSpring-08">
	<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','images/Spring_08mouseover.jpg',1)"><img src="images/Spring_08.jpg" name="Image15" width="122" height="39" border="0"></a>	</div>
	<div id="idSpring-09">
	<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','images/Spring_09mouseover.jpg',1)"><img src="images/Spring_09.jpg" name="Image16" width="165" height="39" border="0"></a>	</div>
	<div id="idSpring-10">
		<img src="images/Spring_10.jpg" width="153" height="39" alt="">
	</div>
	<div id="idSpring-11">
		<img src="images/Spring_11.gif" width="152" height="531" alt="">
	</div>
	<div id="idSpring-12" style="background-image:url(images/Spring_12.jpg); width:719px; height:531px">
	<div id="text" style="padding:10px">
	<p align="center">&nbsp;</p>
	<p align="center">&nbsp;</p>
	<p align="center">&nbsp;</p>
	<p align="center">&nbsp;</p>
	<p align="center">&nbsp;</p>
	<p align="center"><strong><font color="#FFFFFF">Spring</font></strong></p>
	<p align="center"> <font color="#FFFFFF">Spring... </font> </p>
	</div>
	</div>
	<div id="idSpring-13">
		<img src="images/Spring_13.jpg" width="153" height="531" alt="">
	</div>
	<div id="idSpring-14" style="background-image:url(images/Spring_14.jpg); width:1024px; height:44px;">
		<div id="text" style="padding:10px">
		<p align="center" class="style1"><font color="#000000">[email protected]</font></p>
	  </div>
	</div>
<!-- End ImageReady Slices -->
</div>
</body>
</html>

Back to top

Anunturi

Chirurgia cranio-cerebrală minim invazivă

Tehnicile minim invazive impun utilizarea unei tehnologii ultramoderne.

Endoscoapele operatorii de diverse tipuri, microscopul operator dedicat, neuronavigația, neuroelectrofiziologia, tehnicile avansate de anestezie, chirurgia cu pacientul treaz reprezintă armamentarium fără de care neurochirurgia prin "gaura cheii" nu ar fi posibilă. Folosind tehnicile de mai sus, tratăm un spectru larg de patologii cranio-cerebrale.

www.neurohope.ro

Scriere peste imagine

#1 Trecetrenu Posted 19 March 2010 - 20:30

#2 double_b_phantom Posted 20 March 2010 - 01:35

#3 Trecetrenu Posted 22 March 2010 - 19:14

#4 double_b_phantom Posted 23 March 2010 - 00:30

#5 Trecetrenu Posted 23 March 2010 - 09:21

#6 Trecetrenu Posted 24 March 2010 - 17:15

Anunturi

▶ 1 user(s) are reading this topic

Sign In

#1
Trecetrenu

Posted 19 March 2010 - 20:30

#2
double_b_phantom

Posted 20 March 2010 - 01:35

#3
Trecetrenu

Posted 22 March 2010 - 19:14

#4
double_b_phantom

Posted 23 March 2010 - 00:30

#5
Trecetrenu

Posted 23 March 2010 - 09:21

#6
Trecetrenu

Posted 24 March 2010 - 17:15