Chenar Text

Vezi subiectul anterior Vezi subiectul urmator In jos

Rezolvat Chenar Text

Mesaj Scris de csaki la data de Sam 3 Noi - 20:02

buna ziua cum as putea face acest chenar text mai ingust pentru forum?

Cod:
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Flexible box with custom corners and borders | Lab | 456 Berea Street</title>
   <style type="text/css" media="screen,print">
   html,body {
      margin:0;
      padding:0;
      color:#000;
      background:#fff;
   }
   body {
      padding:10px;
      font:76%/135% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
   }
   code {
      font-family:Monaco, Courier, "Courier New", monospace;
   }
   #labfooter {
      text-align:center;
      clear:both;
   }
   .adwrap {
      margin:10px auto;
      padding:10px 0;
      width:468px;
      border:1px solid #ccc;
      border-width:1px 0;
   }
   .adwrap object {
      width:468px;
      height:60px;
   }
   
   /* CSS for the box starts here */
   .box {
      padding:0 12px 0 0;
      background:#fff url(borders.gif) 100% 0 repeat-y;
   }
   .bi {
      padding:0 0 0 12px;
      background:#fff url(borders.gif) 0 0 repeat-y;
   }
   .bt {
      height:17px;
      margin:0 -12px;
      background:url(box.gif) 100% 0 no-repeat;
   }
   .bt div {
      width:18px;
      height:17px;
      background:url(box.gif) 0 0 no-repeat;
   }
   .bb {
      height:17px;
      margin:0 -12px;
      background:url(box.gif) 100% 100% no-repeat;
   }
   .bb div {
      width:18px;
      height:17px;
      background:url(box.gif) 0 100% no-repeat;
   }
   .box h1 {
      margin:0;
      padding:0.3em 10px;
      background:#efece6;
      font:bold 1.2em/1 Arial, Helvetica, sans-serif;
   }
   .box p, .box ul {
      margin:0;
      padding:4px 10px;
      background:#fff;
   }
   .box li {
      margin:0 0 0 2em;
      padding:0;
   }
   </style>
</head>
<body>
<div class="box">
   <div class="bi">
      <div class="bt"><div></div></div>
      <h1>Flexible box with custom corners and borders</h1>
      <p>This demo is related to the article <a href="/archive/200406/flexible_box_with_custom_corners_and_borders/">Flexible box with custom corners and borders</a>. I also suggest you take a look at my updated method for creating this kind of box: <a href="http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/">Transparent custom corners and borders</a>.</p>
      <p>This is a demo of a flexible box with custom corners and custom borders. The box will expand to contain any amount of content vertically, will handle any text size, and can become very wide before the horizontal borders start breaking up. How wide depends on the width of one of the background images.</p>
      <p>Two images are used. <a href="box.gif"><code>box.gif</code></a> is a complete box. For the sake of this demo I&rsquo;ve made it 1600 pixels wide. It is used for the corners and the horizontal borders. The other image, <a href="borders.gif"><code>borders.gif</code></a>, contains the vertical borders. Why use a single, large image for the corners instead of several smaller ones? There are several reasons:</p>
      <ul>
         <li>Splitting the image into a bunch (six in this case &ndash; one for each corner plus the top and bottom borders) of smaller images may actually increase the total file size, depending on the look of the corners and borders.</li>
         <li>To minimize the number of HTTP requests sent to the server.</li>
         <li>Convenience. When changing the look of the borders and corners, replacing two files is faster than replacing eight files.</li>
      </ul>
      <p>Some extra markup is needed to put the corners and borders in place. A bit annoying, yes, but this extra, non-semantic XHTML is quite minimal, and won&rsquo;t get in the way if CSS is off, so I think I can live with it. It is possible to get rid of some more markup by using the <code>:before</code> and <code>:after</code> pseudo-elements, but since Internet Explorer doesn&rsquo;t support them I&rsquo;ll leave the extra markup in there.</p>
      <p>The main content area of this box can be filled with any elements you like, as long as their background colour is set to white (or whatever colour the inside of your box has), and their margins are zeroed. If the content is transparent the left border will be doubled because the image used to create it also contains the right border. You can avoid the need for that by splitting the image in two, or adding an extra <code>div</code> to put all your content in.</p>
      <div class="bb"><div></div></div>
   </div>
</div>
<div id="labfooter">
   <p><a href="/lab/">Lab Index</a> | <a href="/">456 Berea Street Home</a> | Copyright © 2003-2012 Roger Johansson</p>
</div>
</body>
</html>


Ultima editare efectuata de catre csaki in Dum 4 Noi - 23:14, editata de 1 ori

csaki
Membru Forumgratuit

Mesaje : 60
Varsta : 29
Data de inscriere : 09/10/2012
Multumiri : 0
Membru exclus

http://www.csaki.ro

Sus In jos

Rezolvat Re: Chenar Text

Mesaj Scris de VeteraNNN la data de Dum 4 Noi - 8:44

Cod:
.adwrap {
      margin:10px auto;
      padding:10px 0;
      width:468px;
      border:1px solid #ccc;
      border-width:1px 0;
  }
  .adwrap object {
      width:468px;
      height:60px;
  }

Modifici valorile lui "width"

VeteraNNN
Membru activ

masculin

Mesaje : 485
Varsta : 22
Localizare : Undeva in spatele tau !!
Data de inscriere : 28/10/2012
Multumiri : 0
Membru exclus

Sus In jos

Rezolvat Re: Chenar Text

Mesaj Scris de csaki la data de Dum 4 Noi - 11:31

chestia e ca am scimbat dar nu se scimba ea, nus din ce cauza

csaki
Membru Forumgratuit

Mesaje : 60
Varsta : 29
Data de inscriere : 09/10/2012
Multumiri : 0
Membru exclus

http://www.csaki.ro

Sus In jos

Rezolvat Re: Chenar Text

Mesaj Scris de VeteraNNN la data de Dum 4 Noi - 15:28

foloseste
Cod:
width: Xpx!important;

VeteraNNN
Membru activ

masculin

Mesaje : 485
Varsta : 22
Localizare : Undeva in spatele tau !!
Data de inscriere : 28/10/2012
Multumiri : 0
Membru exclus

Sus In jos

Rezolvat Re: Chenar Text

Mesaj Scris de csaki la data de Dum 4 Noi - 16:32

asta inlocuiesc cu cel original?
Cod:
width: Xpx!important;

csaki
Membru Forumgratuit

Mesaje : 60
Varsta : 29
Data de inscriere : 09/10/2012
Multumiri : 0
Membru exclus

http://www.csaki.ro

Sus In jos

Rezolvat Re: Chenar Text

Mesaj Scris de VeteraNNN la data de Dum 4 Noi - 16:39

Cod:
.adwrap {
      margin:10px auto;
      padding:10px 0;
      width:468px!important;
      border:1px solid #ccc;
      border-width:1px 0;
  }
  .adwrap object {
      width:468px!important;
      height:60px;
  }

cauti
Cod:
width:468px!important; si width:468px!important;
si pui ce marime vrei tu

VeteraNNN
Membru activ

masculin

Mesaje : 485
Varsta : 22
Localizare : Undeva in spatele tau !!
Data de inscriere : 28/10/2012
Multumiri : 0
Membru exclus

Sus In jos

Rezolvat Re: Chenar Text

Mesaj Scris de csaki la data de Dum 4 Noi - 16:58

multumesc fac un test

csaki
Membru Forumgratuit

Mesaje : 60
Varsta : 29
Data de inscriere : 09/10/2012
Multumiri : 0
Membru exclus

http://www.csaki.ro

Sus In jos

Rezolvat Re: Chenar Text

Mesaj Scris de csaki la data de Dum 4 Noi - 17:07

totul e facut cum traba , ca la carte dar nu vrea sa mearga nus dece

csaki
Membru Forumgratuit

Mesaje : 60
Varsta : 29
Data de inscriere : 09/10/2012
Multumiri : 0
Membru exclus

http://www.csaki.ro

Sus In jos

Rezolvat Re: Chenar Text

Mesaj Scris de Omu la data de Dum 25 Noi - 15:46

csaki, vă reamintim că mesajele duble nu sunt acceptate decât dacă a trecut o perioada de 24 de ore de la ultimul mesaj (folosiți butonul edit).
Mulțumesc pentru înțelegere!
Avind in vedere ca subiectul a fost marcat "rezolvat", acesta va fi inchis si trimis in arhiva.

Omu
Membru onorific
Membru onorific

masculin

Mesaje : 6309
Varsta : 20
Data de inscriere : 04/11/2010
Multumiri : 153
Niciun avertisment

http://www.tech-titans.net/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum