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