Adaugare text pe mijloc intre doua chenare
Coduri intrebari, probleme legate de HTML, XHTML si CSS
-
shcarmens
- Mesaje: 19
Adaugare text pe mijloc intre doua chenare
Buna seara! Am o problema cu pozitionarea elementelor html in pagina web. As vrea sa scriu un text intre cele doua chenare, mai exact in mijlocul paginii.
Fisierul HTML:
Cod: Selectaţi tot
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>Cartoons</title>
</head>
<body bgcolor="black" vlink="black" link="black" alink="black">
<form action="" method="post" class="float1">
<input type="search" name="srch" size="25" value="search" />
<input type="button" value="search"/>
</form>
<div id="id3">
<table bordercolor="#ff8c00" align="right">
<tr>
<th><h2>Handmade </h2></th>
<th><img src="http://images.cooltext.com/2476771.png" width="124" height="42" alt="Home" /><img src="http://images.cooltext.com/2476774.png" width="196" height="42" alt="Cartoons" /><img src="http://images.cooltext.com/2476775.png" width="164" height="42" alt="Contact" /></th>
<th><h2> Made in Adobe Illustrator</h2></th>
</tr>
</table><br>
<br>
<br>
<div id="chenar1" class="float1"></div>
<div id="chenar2"><img src="mitro.jpg" hight="200" width="250"/></div>
</div>
</body>
</html>
Extensia css:
Cod: Selectaţi tot
#id3 {
background-color:#ff8c00;
width:1000px;
height:1000px;
border:10px solid black;
}
#chenar1 {
background-color:#ff8c00;
width:250px;
height:940px;
border-left:3px dotted black;
border-top:3px dotted black;
}
#chenar2 {
background-color:#ff8c00;
width:250px;
height:940px;
border-top:3px dotted black;
border-right:3px dotted black;
}
MarPlo
Mesaje: 4343
Salut
Ca sa adaugi un text pe mijloc, intre doua chenare (Div-uri), poti adauga totul intr-un DIV cu
position:relative;, iar cele 2 chenare sa aibe o lungime (width) stabilita, la primul ii setezi
float:left; iar la al doilea
float:right;.
Vezi cum e in urmatoru exemplu, si-l poti aplica in codul tau:
Cod: Selectaţi tot
<style type="text/css">
#id3 {
position:relative;
width:99%;
height:100%;
border:8px solid black;
text-align:center;
}
#chenar1 {
background-color:#abcdef;
float:left;
width:25%;
border:3px dotted blue;
}
#chenar2 {
background-color:#abefcd;
float:right;
width:25%;
border:3px dotted green;
}
#id3 h3 {
margin:1px auto;
}
</style>
</head>
<body>
<div id="id3" class="cls">
<div id="chenar1">Chenar 1</div>
<div id="chenar2">Chenar 2</div>
<h3>Text ce apare intre cele 2 chenare</h3>
<br style="clear:both;" />
</div>
Sau cu acelasi class la chenare si tag-ul cu textul, la care ii dai
float:left;, cum e in acest cod:
Cod: Selectaţi tot
<style type="text/css">
#id3 {
position:relative;
width:99%;
height:100%;
border:8px solid black;
text-align:center;
}
#id3 .cls {
float:left;
width:33%;
margin:2px auto;
border:2px dotted blue;
}</style>
<div id="id3">
<div id="chenar1" class="cls">Chenar 1</div>
<h3 class="cls">Text ce apare intre cele 2 chenare</h3>
<div id="chenar2" class="cls">Chenar 2</div>
<br style="clear:both;" />
</div>
Subiecte similare
-
Partajare funcții între componente Vue.js
JavaScript - jQuery - Ajax
Primul mesaj
În aplicația am o mulțime de funcții utilitatere care fac diferite lucruri, de la analiza șirurilor până la realizarea toastelor și așa mai departe....
Ultimul mesaj
Pentru asta poți utiliza Mixins.
1. Importa componenta de care ai nevoie.
2. adăuga un mixin array ca mai jos în componenta ta, chiar deasupra...
-
Animație cu pauză între fiecare rotație
HTML - XHTML - CSS
Primul mesaj
Am un Div pe care vreau să-l rotesc de la 0 la 90 grade, pauză 2s, apoi de la 90 la 180, iar pauză 2s .., tot asa până la 360 de grade.
Vreo idee...
Ultimul mesaj
Puteți face cu animații CSS transform: rotate() , ca în exemplu de mai jos.
Setezi timpul de rotatie la 12 secunde si incepi cele 4 rotatii...
-
Produsul Dot a doua array in Javascript
JavaScript - jQuery - Ajax
Primul mesaj
Cum se poate implementa eficient o metoda dotProduct (pentru a obține produsul Dot din două array) fără a importa alte biblioteci Javascript?
De...
Ultimul mesaj
Iată o metodă.
Se foloseste funcția map() pentru a crea un nou array cu rezultate înmulțite ale fiecărui index, apoi se aplica funcția reduce()...
-
Ascunde element daca in data e un anumit text
HTML - XHTML - CSS
Primul mesaj
Se pot ascunde elemente HTML daca in atributul 'data-' e o anumita bucata de text?
De exemplu: Ascunde Div-urile care contin -en .
<div...
Ultimul mesaj
Se poate face cu CSS sau cu Javascript.
CSS:
/* with specified elements */
div {
display: none;
}
/* or global */
{
display: none;
}
Si...
-
Inversare caractere adăugate într-un câmp de text
JavaScript - jQuery - Ajax
Primul mesaj
Am urmatorul cod html si JavaScript. O caseta de text input si un button.
<input type='text' id='backwards-input'>
<button...
Ultimul mesaj
Testeaza si studiaza urmatorul cod:
<input type='text' id='backwards-input'>
<button id='backwards-button'>Button</button>...
-
Resetare input type text dupa submit
JavaScript - jQuery - Ajax
Primul mesaj
Dupa ce dau enter sau click si a trimis mesajul nu mii se reseteaza input textul,imi trmite catre mysql fara reload incarca textul prin div dar nu...
Ultimul mesaj
\Multumesc, codul din raspunsul tau functioneaza