Geek Answers Handbook

Overlapping HTML markup

I would like to have three numbers (or words or something else) with the first two surrounded by a red box, and the second two surrounded by a green box. Thus, the fields will overlap. Is this possible in html / css? I have a semi-legal attempt in a fragment that, I hope, goes through what I want, although, of course, this will not work. If possible, I would like to avoid absolute positioning or something similar, since I really want to use these elements for text markup and plan to read this markup later.

.red {
    border-style: solid;
    border-color: red;
    padding: 4px;
}
.green {
    border-style: solid;
    border-color: green;
}
1 2 3                              <br /><br />
<span class="red">1 2</span> 3     <br /><br />
1 <span class="green">2 3</span>   <br /><br />
<span1 class="red"">1 <span2 class="green">2</span1> 3</span2>
Run codeHide result

This is something like this, I want it to look like this:

enter image description here

+4
source share
6 answers

XML XHTML. ? , <b class="red"">1 <u class="green">2</b> 3</u>, , "" , , CSS. , CSS...

, , : first-of-type last-of-type 2 , .red.green: first-of-type, first last

( , , )

    	.numbersContainer {
    	  position: relative;
    	  margin: 12px;
    	}
    	.red {
    	  border-top-style: solid;
    	  border-bottom-style: solid;
    	  border-color: red;
    	  padding: 4px;
    	}
    	.green {
    	  border-top-style: solid;
    	  border-bottom-style: solid;
    	  border-color: green;
    	}
    	.red.green:before {
    	  content: " ";
    	  position: absolute;
    	  z-index: -1;
    	  top: 0px;
    	  left: 0px;
    	  right: 0px;
    	  bottom: 0px;
    	  border-top-style: solid;
    	  border-bottom-style: solid;
    	  border-color: green;
    	  padding: 4px;
    	}
    	.red.green {
    	  position: relative;
    	  border-top-style: solid;
    	  border-bottom-style: solid;
    	  border-color: red;
    	  padding: 4px;
    	}
    	.numbersContainer .red:first-of-type {
    	  border-left-style: solid;
    	}
    	.numbersContainer .red:last-of-type {
    	  border-right-style: solid;
    	}
    	.numbersContainer .green:first-of-type {
    	  border-left-style: solid;
    	}
    	.numbersContainer .green:last-of-type {
    	  border-right-style: solid;
    	}
    	.first {
    	  border-left-style: solid;
    	}
    	.last {
    	  border-right-style: solid;
    	}
    	.red.green.first {
    	  border-left-style: none;
    	}
    	.red.green.first:before {
    	  border-left-style: solid;
    	}
    	.red.green.last {
    	  border-right-style: solid;
    	}
    	.red.green.last:before {
    	  border-right-style: none;
    	}
    	
<div class="numbersContainer">
  1 2 3
</div>
<div class="numbersContainer">
  <span class="red">1 2</span> 3
</div>
<div class="numbersContainer">
  1 <span class="green">2 3</span> 
</div>
<div class="numbersContainer">
  <span class="red">1 </span><span class="red green first last">2</span><span class="green">3</span>
</div>
<div class="numbersContainer">
  <span class="red">1 </span><span class="red green first">2</span><span class="red green">3</span><span class="red green">4</span><span class="red green last">5</span><span class="green">6</span>
</div>
Hide result
+1

, . , .green.

.red {
  border-style: solid;
  border-color: red;
  padding: 4px;
  width: 16px;
}
.green {
  border-style: solid;
  border-color: green;
  padding: 2px 4px 2px 24px;
  margin-left: -20px;
}
<span class="red">1 2</span><span class="green">3</span>
Hide result
+1

:

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  }
body {
  padding: 10px;
  }
body:hover {
  background: blue;
  transition: all 0.2s ease;
  }
.one {
  border-color: red;
  border-style: solid;
  border-left-width: 2px;
  border-top-width: 2px;
  border-bottom-width: 2px;
  border-right-width: 0;
  background: #FFF;
}
.two {
  background: #FFF;
  border-top: 2px solid red;
  border-bottom: 2px solid red;
  border-right: 2px solid red;
  outline: 2px solid green;
  z-index: 2;
}
.three {
  background: #FFF;
  border-color: green;
  border-style: solid;
  border-left-width: 0;
  border-top-width: 2px;
  border-bottom-width: 2px;
  border-right-width: 2px;
  padding: 2px;
  margin-left: 2px;
  z-index: 10000;
  outline: 2px #FFF solid;
}
<span class="one">1</span><span class="two">2</span><span class="three">3</span>
Hide result

, , . XML (HTML XML), .

+1

CSS-:

span {
  font: 1em monotype;
  letter-spacing: 0.3em;
  height: 1em;
  vertical-align: middle;
}

span:before {
  content: "";
  width: 1.5em;
  padding: 0.5em;
  height: 1em;
  position: absolute;
  margin-top: -0.4em;
  margin-left: -0.5em;
  border: 4px solid red;
}

span:after {
  content: "";
  width: 2em;
  height: 1.2em;
  margin-left: -2.5em;
  position: absolute;
  border: 4px solid green;
}
<span>1 2 3</span>
Hide result
+1

Exmaple margin-xxxx

.red {
  border-style: solid;
  border-color: red;
  padding: 4px;
  width: 30px;
  display: inline-block;
}
.green {
  border-style: solid;
  border-color: green;
  margin-left: -20px;
  width: 15px;
  z-index: -1;
  display: inline-block;
}
<div>
  <div class="red">1 2</div>
  <div class="green">3</div>
</div>
Hide result

: 2 ( ), , 3 2 1 1 div.

+1

CSS, . CSS box-shadow, . CSS: table-cell div.

CSS divs . divs , div , (% ).

JSFiddle: http://jsfiddle.net/TalkingRock/da5b7h5L/

.table {
  display: table;
  width: 80%;
}
.table-row {
  display: table-row:
}
div {
  display: table-cell;
  margin: 0;
}
.right {
  border-top: 2px solid red;
  border-right: 0px solid red;
  border-bottom: 2px solid red;
  border-left: 2px solid red;
  padding: 4px;
  box-shadow: 0px 0px 0px 2px red;
}
.center {
  padding: 4px;
  border-top: 2px solid green;
  border-right: 0px solid green;
  border-bottom: 2px solid green;
  border-left: 2px solid green;
  box-shadow: 2px 0px 0px 2px red;
}
.left {
  border-top: 2px solid green;
  border-right: 2px solid green;
  border-bottom: 2px solid green;
  border-left: 0px solid green;
  padding: 7px;
}
<div class="table">
  <div class="table-row">
    <div class="right">
      Here is a line of text
    </div>
    <div class="center">
      <p>Paragraph 1 - Pellentesque habitant morbi tristique.</p>
      <p>Paragraph 2 - Maecenas semper facilisis diam. Phasellus placerat ante vitae dolor ornare sodales.</p>
    </div>
    <div class="left">
      <img src="http://i.imgur.com/abMA5gE.gif" />
    </div>
  </div>
</div>
Hide result
+1

More articles:


All Articles