I have three 50x50 colored blocks with content R, G, and B. Can these blocks be lined up vertically as would be expected if they were three div elements adjacent to each other?
It is possible if using a margin-bottom that is the same height of the red block but only if the red block does not contain any text. This is because the height of the text gets added to the height of the margin.
Is there a way to make this work with just .red, .red::after, and .blue?
body {
width: 100%;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.demo-container {
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
border: solid 1px #d5d9dc;
}
.red {
background: pink;
display: block;
min-width: 50px;
height: 50px;
position: relative;
}
.red::after {
content: "G";
background-color: rgba(64, 255, 64, 0.5);
display: block;
min-width: 50px;
height: 50px;
position: relative;
}
.blue {
background-color: rgba(64, 64, 255, 0.5);
display: block;
min-width: 50px;
height: 50px;
position: relative;
}
<!DOCTYPE html>
<div class="demo-container">
<div class="container">
<div class="red">R</div>
<div class="blue">B</div>
</div>
<br/>
</div>
You can add position: relative;height: 100px to .red element.
then add: position: absolute; bottom: 0; to .red:after element
body {
width: 100%;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.demo-container {
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
border: solid 1px #d5d9dc;
}
.red {
background: pink;
display: block;
min-width: 50px;
height: 100px;
position: relative;
}
.red::after {
content: "G";
background-color: rgba(64, 255, 64, 0.5);
display: block;
min-width: 50px;
height: 50px;
position: absolute;
bottom: 0
}
.blue {
background-color: rgba(64, 64, 255, 0.5);
display: block;
min-width: 50px;
height: 50px;
position: relative;
}
<!DOCTYPE html>
<div class="demo-container">
<div class="container">
<div class="red">R</div>
<div class="blue">B</div>
</div>
<br/>
</div>
Related
How do I both horizontally and vertically center an image and mask it with thin black overlay? Something like this:
Here's my attempt:
<a href="/to" class="link">
<img src="/a.png">
<span class="mask" />
</a>
.link {
display: flex;
align-items: center;
justify-content: center;
}
img {
width: 90%;
padding: 5px;
}
.mask {
width: 100%;
height: 100%;
position: absolute;
}
But it does not work, https://ibb.co/NyWgdGY.
Few things.
<span> should have a closing tag. The correct way is <span></span>
You can use the ::before psudo element to create the mask. So the code is shorter and cleaner. Here's a jsFiddle Sample
.link {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 300px;
padding: 30px;
position: relative;
}
img {
width: 90%;
padding: 5px;
}
.link::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); // Try changing the 0.5 (e.g. 0.4)
}
<a href="/to" class="link">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAsHCBYNExcWFRUWGBcXDxYNDxgNFhUYDxYPHRcdHR0XGhkgJTMqICIvIxkaKj4rLzU3Ojs6HihBRkA4RjM5OkMBDAwMEQ8RIBMTIEEuJy5AOjs3Pj03Qzc/Nz03QDc/Nz03N0M3Nz43Nzc9Nzc6Nzc3Nzc3Nz49Nzc3PTc4ODc3P//AABEIAOEA4QMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABAUCAwYBB//EAEIQAAIBAgIGBggEBQMDBQAAAAECAAMRBCEFEjFBUWEiMnGBkaEGE0JScrHB0WKC4fAUM3OSohUjssLx8hYkU2OD/8QAGgEAAgMBAQAAAAAAAAAAAAAAAAMBAgQFBv/EADMRAAIBAgQCCAYCAwEBAAAAAAABAgMRBBIhMUFRBRMiYYGh0fAycZGxweFCUhQjM/EV/9oADAMBAAIRAxEAPwD65ERABERABERABERABERABE8ZgNs1HEIPaXxErKUY/E7EpN7G6JEbSVMe1NLaXpj3j2AfUxDxlBfzX1LqlN7IsYlWdNruU+IgabXep8RK/wCfh/7/AH9Ceoqci0iQaelKZ94donv+ppz8Jb/Mof3X1K9VPkTYkdMYje0O/KbFqhthB7DHRqRkrxafydyri1ubIiJcgREQAREQAREQAREQAREQAREQAREQATF3Ci5NhIuKxwTIZnyH3lRisWznMzn4npCnS0jq/Je+4fToSmWWI0sqdUX/AHwkYaUZ7kWUDeQPrKq9zMsTUy1RsE40+kK8/wCVvlp+zWsPBaWN1bGXNybniZHbFc5CZ5jrzG23qzUqSRPXEmbabg7vKV9I3IvsJ1bybXxC01vuHWkFZRs9CTeaGNjmthuO4/aYJV1wGp9IHpbfZm6s9rZWuM4XFLRmtsSBxPdMP4rl5zKpTUgkZEDW/CZDZjY6u32dbq3k3Y2MYsmriOM3qgeQEN5Kwj9K15Ol9SslZaG+ni3o7CbcGzHhLTA6SWtkei3DceyUivrjPfNAbOasPjqlF6O65P8AHLw+gqdCM99zsYlBh9IOcixv85Kp45l2m/b95149K0ZPVNGOWHki1iacPiBUGW3eOE3TownGazRd0Jaa0YiIliBERABERABERABNGLqaiHOxtl28puY2EpcTXJzY/p2TFjcT1MLLd3G0oZ2Q6ryOxmw4hSbTx6fCeXvc6a03NKv0h+9si1KwpuVZrGodVNY5a9iQOV/nbjPNIa4VioJIGsdXrBeNtsrdenpPUWpdbgrrUzZlrix35EEN5iTCN9XsN21JeGqiogI2r/tuPaDjI3jF1PV7d/VPGaKPo5WokstUVOealk4Pcm54EG/ykTGrVp9Gojlb8D4g7j5RnVxcuy7otGaaJWB0sPWBGA1H6N/xjZLiwDawJBtqtn0Su64N+efOctR0YpuVqOL9LVqLezcQRaxl5h2a1mYHmt85FWMV8Iqd2WVPFftRf5TJsRfK4tv1vtKt0O0OBNblt9cD4R+sTkT4ilElaSxop0iEuSSF4nbc+QMhYbHqS2sdXUA1y2W0Z5SLi6ijbVc/0wFJ/MSSO60ocZXXWCIgUdpLd99/OaqVDMreY2Lyl3iNP6mtqbWPQLeygyvbifKWXo/XLrcnM3Xt4nznDs5ZtbYL6q62+2WQ3zsND4Z6NFqrAoFpN6vWyawBJcDid1+N87AFlelGELInMrMsGx49aUBzL6q/WSimWU43Q+K1sTTvvBbvJK/SdsomarT6uSRF7I1U6knU6lxIDJ07brBj5/aSxslEVlYnYKtquvPIy6nOJOhTYOwTvdE1G4yi+Fn9f/PuYMRGzTMoiJ1zMIiIAIiIAIiIAJz+KUEkDibdksMdidw2fOVjtczgdJ4mM5KnHhxNlCDWpTaSwxFmBII+Um01ZBbbzkirT1xZsxK//URhm9XV2C2o65jUOwONoO0X2G05KWbRG5yco2I9SuSxKtqunVPEHarDeMpGL06xKuvqqmuKhekBYva2sV33G8bZdMlOuL9FvxIc/EStx+iPWFSj6pX3he68Li37vGQaWjIumT8MXAGYfmnW71OYmz+J3HwlelF0Gdjbep+89OLYZN4OL/OKcEyjRMZxuy+HL5TE1yu+RRi13qPykj9INdDxHgftIyWK2JS43iB++2ZNUpP1lQ/EqlpXuy+8f7f1mlqqJ7RvxsBLZQykuvo7DP7IHNWI8r28pX/+m8Nra2u9+GspUdl1+d541cvlTRm55n9Jup6OqvtsvxH6CNTnH+ViyTJmFwWHw3SpoNf336T9zHZ2C0x0jVatSqIoLMyFbLm2c20cAEHSYtbuH7757UxlOmLayjkufyi9XK+5KWpRej/o29GolaswBRCoprZmuSTdiMsr7BftnSYjFJTtrHNuii72bgBOa0n6TPrrToJrMx2tmwXfZR8ybTboTRbo5rV3NSq3R23CDgP0yG7jNFVSfbqeC97LvfmWSuX6vvO0/u020TcyuxmLSghaowVR4luAG88paaMW9NWIsWAqW4XFwJmswnorkhUl7R6o7B8pS68n6Mr64IO7Z2H9+c6/RdSMKjhz/BhrptX5E6Iid4yCIiACIiACR8XV1RYbT8pIvKrEVbkmY8bX6unpuxlON2RcTUkNmm3FOOM1hZ5e922dGKsjOjUv2yu07gWcB6eboCrLt16R2rbeeXMzbiNZLldoB1Z5obTSYzWQdGonXRuF7ayneMx2XhC715Fn2XdHMCv6sh0JCndc3U8OyXeFxpcbb/FJOltApiQzIdRzt9xjuJG48x5yowFGphjq1UKkdU7UbsbYY+VpxvxJzJ7FqcTbdMP41NjXHxC/yni4o7j9ZkaiP10U81FjEacURmPAtCp7SDv1fI2mR0UD1XPkflNFTR1F+q7IfxZr5/eRauhagzQrUH4TY+By85dZeEvqRckYjQT/APzKo/En11pDbR4p5ti17KVJWbxubSLUwz0+sjDmym3jsmsPHKL538F6E6k4Ypk6tSo3Or6sf4qv1nraRqe+fy2HykRSvtNbkuczWqvsUmqH8Ws3ktoZFyDUNiWc2uzHhmzTbT0ZUqdc6i+Lnu3d83UGxR/l4cIPg1PHWImxtFYqt16iIPaGvbyUWPjIvbZpeNybpCmlHBg5qpPWLZ1T275C/wBdevV9ThqRd/eqZIo94gbuZI75Op+jdFM6tZmt0mFMao7zmfMSRorSNFWNLC0bIvSrVGyHAZ5lmNrZ238JVKFm/if0Xvu4kupf4SNivRoPVp1cRV1kpo1SsGyQkatgo3L1r8bDjLbC6WSuG9WDqqfV6zCwLWvkOGzbKb0o0i1QChTBZ6rhbL7ozPYMpO0Zgf4akq3uR0nPFzmT+9wEpNydNOXh8ufv8EqKavLcsVqE7ZO0ZUtUXnceX6CVimWOiEL1Qdy5n5D5y+EzddDLvde/pcTVSyu5fxET1xyxERABERADXX6p7DKlpcPsPYZTicbpTePj5WNFDiQsdS11I4iU2gtJH1hw9Q5i/qWbaQNqHsGY5A8BOiqLOI9J6TUK6umRuKgPAgzjQipScHx+5up9pWOtxNO4M4LRmK/hdIjcH1qJ7GGXmFnc6PxYxVFHX2h0hwcZEdxBlBi/RVa9dqpdkAK1KQSx6YNzrX3X4WhQlGDlGfFW8QjLSzOoR7i89YqRY2IO5urIFAtTWxOtbf8ApPVxQibyRDie1tEo+akofw5jwP0kSpouomyzD8JsfA/eTtYGLSetfIrcqWVkyZSPiBE20m4Sxt4cJpqYZdqix8j3QzphcJWYb/7s5k1Y71U/EJpQ7jMmMjiB42JtsVR8KiR62lGHtH8th8p6aZqGwyA2n6ds20lFPYg7faPfLaLcCIcTVfYjn4svmYArH2APiP2EsVrqeXxTOGbuGKKKfE6PrVl1TUVAetqqW+omzAaL/hqeoHNrlmKgAsTvJN+Q7pZkTWRLdZK1uHyLpI14TCJRJKr0j1mbNz3ndym+pUABJ2DfNbU3dTqEBiDqGoLi+6/KcxVxdRMKuuzesqYmtr620alk1bbAAV2DKEYub31v6v8AAKzZ02isQMUXIB1VIW9+s205brC3jLfCn1ZuuRlT6M0PV4Wnxe9Y95y/x1ZboJEZNVOy9hM3ct8PXFQcxtE3SqwtTVcc8jLWepwWIdaneW60fv3xOfUhlYiImwWIiIAJT4hNRyOd17JcSFpGjrLrDaNvZMPSFJ1KV1utfX18BtGVpWIJnO+mGE16OtvQ/wCJynQK014vDisjIdjAr4755z+SkuBti8rucd6EaRs7UGOT/wC5S+MDMd4F+4zqmafPtI4GtoysrEW1XDUnX+U9s7X+YOc6+pjg9NHGxwKi/CwvLYqn2lOO0vfvxGTV3dG+obG0jVqd8wbHj954K+vPbxCuhsVdGhMW1M2fZx9n9JPo4oPvkZl1pFfDFM0NuXs/pJajLfQpKmXQae3lRSxpTJxY/wCJ7DJtPFAykqbQpoyxQtZvyn6GR6tXKSKhDqV4jz3SrwVXXfPYvSPbew+vhLwjdX5Ai1ppqAD+74t8PNLYjs8u+R6mK5yHTdwTubarCQK2kTR6p7tqnum1KT1+qLL7zdXuG+TMNoxKefWb3m63dwjFljvqXRhgsa9QXemF4dI3P5bZeMm0qRbNvCZKgWKlTUEU9WSzPXznK+lwNbE0aK5EgW7aj2v5X8ZfLXF9shUsL6/SRe3Ro4ZF/wD1bWsPBmPhLUnkm5vgm/HZfcrF2dzoaVMABRsUBV+ECwm8TFFtPZFONlqLZmm0dol1K3R9G51jsHV5mWU9H0XTcabm+O3gZKzu7CIidMSIiIAIiIAU+Mw/qjcdU7OU0gy7dAwscwZWYnBmnmM18xPP47Aum3Omuzy5fr7fI10qqektyNVprUUq6hlPRKuAQe0GVeK0EvqwlJtQLsWpcpvyvtAz5y0Bnt5zFIfqjk6mFq0D00NveXpJ4jZ32m7D4kOOdvG15095GxGjqVTrIt+K9E+Izl3JNaovGpZlQGgGTKmhvcqMOVQB18RY+cjPo+snso/9NrN4EAecrccqkHxMGpg7Rf8AYmk4Rh1D3Nflvm7UcdZHH5b+YuPOScMQYKo4kSimiseu9PrqRz3eIy4yA2KWmzWPXb1m3kAcu0E9869VEx9Wo2AX7BLRqpcPP9CbHO4ajUrbFIFus/RG7vPdLPD6PVM26R/Fs3bB97yazTUzyHVvsWULmRaea8wvMhSY7LD4vtvinJF7KJ5VrhBdjYfPkJT4jHmo1gCTuVQSfAS3GiFc61Rmc8GOqg7AJOoYdKYsihR+EAf95MZRXf5FHJFJgdG1XIZxqL+Lr/2j62l3hsKlHW1Rmx1nLdYtYC57lA7psE3UsOz7Blx2Dxl0pVJWirvuQty5mF5vwuGNTkvH7STQwAXNsz5SaJ1cN0W281b6ev68jNOtwiYooAsNgmURO4lbRGYRESQEREAEREAEREAK/SWG6OsBmOtzErVqCdFKDSWGNBrjqts5cp5/pXCuD6+G3H19fB82aqFS/ZZjrjjBqjjI5nk43WMeb2xA5zA4k7hNUSHNgZNUY7/7cpgRxmU9tK7gVOlXr4Ya9Ml1HXRhrFea2zI+Xy3YKpWcA1Qi33KSWHaNg8ZYTRaxtu3faMz3ja2vMtmZsGHJ3zJcJMEYjYZn/ENy8JW/Nk5mbVoATMJNH8S3Aef3nhrt2Q7JBKmt64GzORiSdpnoEHMCVhFau4Xd1jbcJ0Ki2UiaNwvqlz6x2/QSZPU9G4V0Kd5fFLV93JeBhqzzPTYREToihERABERABERABERABExdgouZBr4ovkMh84upVjDcrKSiSauJC7MzImIc1QQ2zhPEBOwE9gJmfqGPs+Y+8S3Kas1oxalJ6opqtM0zbaOM8BlxU0ezix1bdp+0iNoRx1WXsN/nacLE9FVIu9JXXLivX7m+liM2k9GQomeJw7USA4tfq5gk222moNOZOEoSyyVmaE77Gc9mF57eVAymuolxz9n4pleea0gDWjXEymDGx5H5z3WlmBlF5gWmylSZzkO8bJMISm8sVdkNpK7MRLrRejtTpOOluHDmec04XCilntbjw7JaUK2vkdvznfwHR3VyVSrvwXL59/ku97ZKmIUuzE3RETtihERABERABERABERABNdasKYuZhicQtFdZj+EDeSdgA4yPQoNUOvUHwL7o58+UXOT+GO/2+f4XH5alW+C3PFVq5ucl3foN/bJNLCqm654tnN8SIUYx1er5sFBLURERpYREi6SqalJjyt4m31lZyyxbIbsrnI+kwOKqa2dl6NPkePbKdcfXw2/1i8KnW7mGfjedG660g4jCAzkVIRqfErmJVJwlmiyBS9K6WyoroewuniuflJ+H0xQrdStTPLXAPgc5TY7RAfdKLG4EURqgdsy/wDz6U32W15+/qa4dIS/krn0BaynYwPeJhUxSp1nUfEwHzM+X1dGip0gBcdF8h1dx+nhPaWjDw8pR9GJPWfl+x3+auXn+j6DitP4ZAb10P8ARPrDfsW83eiOk00pUqIQyFAGTMHXS9idmRGWWe2cNh9EnhOh9H6JwdZKg9k58wciPCOpYShTd5dr5+nrcVPHN7aH0ehoynT2Lc8Xz8pm+AQ5gap4pl4jYfCSEYMARsIuJlO5ClCCyxSS7kXk825W1abU9uY94bO8bvlNRqWzvLeVGkcJqDWXq7x7vMcuW6KrQaV0Z6kLK6LLD1fWKD49s2ys0NU6y/m+h+ks42lLPFMbCWaNxERGFhERABERABERADAoCQSBcbDvHGZxEAEREAEREAErtPtaj+dfnLGQNOUy9BwNoAfwYH5CLrK9OSXIpU+B25HPLUmV5XpWmwV5x1I5qqFxobBCpU1iOinm52eAz8Jw/pBhfV1HU7nK+BncYbGGjXw+GS1zr1cVvt/tsQncdXwHOUfp3hLVi3voG+h+U2uOWmu56+PtIfUjaCfJ6+Jx+C6Dg2uN44g7ROgp4Jdo2HpKflKPD0+lOzoYApQpvua69hBNvGx8ImrHMrrgK3K5MNbdN6UZICT20RsTY6jQVXXoLxW6eGzyIlhKT0ZfKoOat43B+Ql3Oth5ZqaZvpu8UJ4c57EcXKfB0/U1ym7O3YRcfbulxIFVP/cUzxpt5f8AlJ8VSjlTXf6C6atdd4iIjRgiIgAiIgAiIgAiIgAiIgAiJi7hQSTYDaYAZTxiN9u+c7pHTLMStM6q8R1j9pUtmbnM8WzMxzxkYvsq/kZZ4tJ9lX8iw0n6NsCWo5g9LU2MOQO8TnsXUagG1lIKjYwIMtsPWekboxX4Tl3jYZe4TEJjlKVVVmA6QYZEcRwmdRp1X2ey/IzKEKr7Oj8jn/QDDtXqVcS97W9RS1t5Ju7eSi/MyT6eU+ofwEeB/WdTh6C0lCIAqqLKFFgJzvpwOjT/AD/9M1VIZKNve5pqxy0be9zhsMnS759NweFFTCInFBqng17g+M+c4Zel3z6foz+TT/pj5SmHs20Lw1m3fkcmbg2ORB1SOBGRExJlj6Q4f1dXWGxxrfnGR+h8ZVl5iqQcJOPIpLstplz6NN/uMONPW8D+s6Kc16L9Kox4J8yPtOlnRwitTNdDWAiImkcQwdfEH/66Q/ucn6KPGTJpp0AjMw2uQx7lAA8vObpCISEREkkREQAREQAREQAREQAREQATntNY/XOqp6I8zxlzjUZkIXae7KUraCqtvUd5+ky4nO1lgjPiM7WWKKiZqssx6P1B7S+LfaP9Gqjcp/N95h6ip/UxdTP+pXakzo1TRYONqnW+479knf6VV9z/ACX7zIaHqMDdQOWt0jyyykqjPgn9CypT4Iv0e4BG8AznfTQ9FPzedvtL7D1hUUEZbiN4O9TzE530tNz2Kq95z+om/Ev/AFM14l/6mclh16ffPpmj/wCUnwD5T5rQHT759LwP8pP6a/8AERWE4icHuyJ6Q0PWUG4raoO7b5XnHmpPoLoHBB2EFT2T57gsI9apqKLnWKk7hY2JPKRioXkmuIYqLzJridL6JUug7n2mCDsX9T5S/mjBYcUEVBsUW7eJ7zczfNdOGSKRrpxyRURERLlxERABERABERABERABERABERABERABERABERABERACJhf5tbtT/jOf9KOs/wASf8RETHiP+fi/yZMR/wA/F/dnM0OtPpOB/lU/6a/8RESuE4lMHxJE570V69b4/wDqaexNUvjj4mmfxx8fsdBERGDRERABERABERABERABERAD/9k=">
</a>
*{
box-sizing:border-box;
}
.link {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 300px;
padding: 30px;
position: relative;
}
img {
width: 90%;
padding: 5px;
}
.mask {
width: 100%;
height: 100%;
position: absolute;
background: #ddd;
opacity: .5;
}
<a href="/to" class="link">
<img src="data:image/jpeg;base64,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">
<span class="mask" > </span>
</a>
I have this fiddle and what I am trying to do is place the line directly to the left and right of the h1's and scale respectively during a resize of window. So it should look like this.
----This that this
Here we go-----
I have attached the fiddle. I have tried floating the div left and making it absolute but I'm having no luck. I have only left one div which is a red bar and removed the other one. Once I learn to do one I can do the other one. Any help is appreciated.
HTML
<h1 class="mainPageTopText">
Find this that this.
<div class="banner-bottom"></div>
</h1>
<h1 class="mainPageBottomText">
Here we go.
</h1>
</div>
</div>
CSS
.mainPageWriting {
display: flex;
}
.mainPageTopText {
width: 500px;
position: absolute;
margin-right: 400px;
margin-top: 50px;
z-index: 12;
font-family: 'Luxim';
background: rgba(255, 255, 255, 1.0);
color: black;
}
.banner-bottom {
height: 10px;
width: 100%;
left: 0;
position: absolute;
background-color: red;
z-index: 100;
}
.mainPageBottomText {
position: absolute;
margin-top: 100px;
padding-left: 100px;
z-index: 12;
font-family: 'Luxim';
background: rgba(255, 255, 255, 1.0);
color: black;
}
.centered {
background: #1D2731;
display: flex;
align-items: left;
justify-content: center;
height: 100%;
}
.banner-bottom {
height: 10px;
width: 100%;
left: 0;
position: absolute;
background-color: red;
z-index: 100;
}
Fiddle
https://jsfiddle.net/angatvir/aujrkpLk/183/
I hope this is the answer you're looking for
based on
----This that this
Here we go-----
and not
----This that this Here we go-----
#special {
}
#first {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "line text .";
}
#first .line {
grid-area: line;
height: 5px;
align-self: center;
background: red;
}
#first .text {
grid-area: text;
}
#second {
display: grid;
grid-area: text-below;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: ". text line";
}
#second .line {
grid-area: line;
height: 5px;
align-self: center;
background: green;
}
#second .text {
grid-area: text;
}
<h1 id="special">
<span id="first">
<span class="text">This that this</span>
<span class="line"></span>
</span>
<span id="second">
<span class="text">Here we go</span>
<span class="line"></span>
</span>
</h1>
Looks quite simple, you can use psudo elements for this.
.mainPageTopText::before,
.mainPageTopText::after {
content: '----';
display:inline;
}
<h1 class="mainPageTopText">
Find this that this.
Here we go.
</h1>
Use :before and :after and in content set the line you can also style it
.mainPageWriting {
display: flex;
}
.mainPageTopText {
width: 500px;
position: absolute;
margin-right: 400px;
margin-top: 50px;
z-index: 12;
font-family: 'Luxim';
background: rgba(255, 255, 255, 1.0);
color: black;
}
.mainPageTopText:before{
content:'----';
}
.mainPageBottomText {
position: absolute;
margin-top: 100px;
padding-left: 50px;
font-family: 'Luxim';
background: rgba(255, 255, 255, 1.0);
color: black;
}
.mainPageBottomText:after{
content:'-----';
}
.centered {
background: #1D2731;
display: flex;
align-items: left;
justify-content: center;
height: 100%;
}
.banner-bottom {
height: 10px;
width: 100%;
left: 0;
position: absolute;
background-color: red;
z-index: 100;
}
<div class="centered">
<div class="mainPageWriting">
<h1 class="mainPageTopText">
Find this that this.
</h1>
<h1 class="mainPageBottomText">
Here we go.
</h1>
</div>
</div>
Update your css and html like this
HTML
<div class="centered">
<div class="mainPageWriting">
<h1 class="mainPageTopText">
<div class="left-line"></div>
Find this that this.
</h1>
<h1 class="mainPageBottomText">
Here we go.
<div class="right-line"></div>
</h1>
</div>
</div>
css
.centered {
background: #1D2731;
display: flex;
align-items: left;
justify-content: center;
height: 100%;
}
.mainPageWriting{
padding:50px 100px;
}
.mainPageTopText {
width: auto;
position: relative;
/* margin-right: 400px; */
margin-top: 50px;
z-index: 12;
text-align: left;
margin: 0px;
font-family: 'Luxim';
padding-left: 50px;
padding-right: 50px;
background: rgba(255, 255, 255, 1.0);
color: black;
}
h1 .left-line {
content: "";
position: absolute;
width: 40px;
height: 2px;
background: #000;
top: 17px;
left: 0px;
}
.mainPageBottomText {
position: relative;
/* margin-top: 100px; */
/* padding-left: 100px; */
text-align: right;
z-index: 12;
margin: 0px;
padding-left: 50px;
padding-right: 50px;
font-family: 'Luxim';
background: rgba(255, 255, 255, 1.0);
color: black;
}
h1 .right-line {
content: "";
position: absolute;
width: 40px;
height: 2px;
background: #000;
top: 17px;
right: 0px;
}
Try This code Below added some styles. You can make use of the pseudo elements to give the lines. removed banner-bottom div.
.mainPageWriting {
display: flex;
}
.mainPageTopText {
width: 500px;
position: absolute;
margin-right: 400px;
margin-top: 50px;
z-index: 12;
font-family: 'Luxim';
background: rgba(255, 255, 255, 1.0);
color: black;
}
.mainPageBottomText {
position: absolute;
margin-top: 100px;
padding-left: 100px;
z-index: 12;
font-family: 'Luxim';
background: rgba(255, 255, 255, 1.0);
color: black;
}
/*** add these */
.mainPageTopText::before{
content:"";
position:absolute;
height:0;
border:1px dashed;
width:20%;
top:0;
bottom:0;
left:-25%;
margin:auto;
}
.mainPageBottomText::after{
content:"";
position:absolute;
height:0;
border:1px dashed;
width:20%;
top:0;
bottom:0;
right:-25%;
margin:auto;
}
/** add these **/
.centered {
background: #1D2731;
display: flex;
align-items: left;
justify-content: center;
height: 100%;
}
<div class="centered">
<div class="mainPageWriting">
<h1 class="mainPageTopText">
Find this that this.
</h1>
<h1 class="mainPageBottomText">
Here we go.
</h1>
</div>
</div>
The interview-box-container is where it should be when using flexbox, but I can't align any of the internal elements of the div.
Text-align doesn't influence the text b/c of flexbox; tried to do w/o flexbox and used vertical-align: center w/o luck.
Hoping to find a solution where I can use flexbox and be able to align internal content/elements inside the box.
body {
height: 100%;
width: 100%;
}
.interview-banner {
width: 100%;
height: 95px;
background-color: #19283B;
position: fixed;
z-index: 1;
}
.interview-background {
background-color: #F4F8FB;
min-height: 100vh;
height: 100%;
}
.interview-box-container {
/*align-items: center;
justify-content: center;
display: flex;
flex-direction: row;*/
vertically-align: center;
}
.interview-box {
position: relative;
border: 2px solid black;
max-width: 625px;
width: 100%;
min-height: 446px;
/*display: flex;
flex-direction: column;
align-items: center; */
padding: 35px;
background: white;
margin-top: 100px;
margin-bottom: 80px;
}
/*should be sitting on the right*/
.interview-box>button {
position: absolute;
bottom: 35px;
width: 108px;
height: 41px;
font-family: OpenSans-Light;
font-size: 15px;
text-align: center;
color: #FFFFFF;
background-color: #19283B;
border: 1px solid #19283B;
border-radius: 4px;
}
/*should be on the left*/
.interview-box > p {
text-align: right;
color: red;
}
<div class="interview-banner"></div>
<section class="interview-background">
<h2 class="interview-header">Header Text</h2>
<div class="interview-box-container">
<div class="interview-box">
<p>Explanation text</p>
<button>Button Text</button>
</div>
</div>
</section>
You can set justify-content: center; in .interview-box-container and few other tweaks such as removing position:absolute from button (see comments in snippet)
Note: there isn't value center for property vertical-align, the closest you find is the middle value
body {
height: 100%;
width: 100%;
margin: 0
}
.interview-banner {
width: 100%;
height: 95px;
background-color: #19283B;
position: fixed;
z-index: 1;
}
.interview-background {
background-color: #F4F8FB;
min-height: 100vh;
height: 100%;
}
.interview-box-container {
display: flex;
justify-content: center; /*align box in center */
}
.interview-box {
/*position: relative; */
border: 2px solid black;
max-width: 625px;
min-height: 446px;
display: flex;
flex-direction: row-reverse; /* to make button on left and text on right*/
align-items: center; /* align the text and button vertically*/
justify-content: space-between; /* items are evenly distributed in the line; first item is on the start line, last item on the end line*/
padding: 35px;
background: white;
margin: 100px 0 80px
}
.interview-box>button {
/* position: absolute;
bottom: 35px;*/
width: 108px;
height: 41px;
font-family: OpenSans-Light;
font-size: 15px;
text-align: center;
color: #FFFFFF;
background-color: #19283B;
border: 1px solid #19283B;
border-radius: 4px;
}
.interview-box>p {
color: red;
}
<div class="interview-banner"></div>
<section class="interview-background">
<h2 class="interview-header">Header Text</h2>
<div class="interview-box-container">
<div class="interview-box">
<p>Explanation text</p>
<button>Button Text</button>
</div>
</div>
</section>
Although I don't know what is your point with this markup, it can be simplified like this:
body {
height: 100%;
width: 100%;
margin: 0
}
.interview-banner {
width: 100%;
height: 95px;
background-color: #19283B;
position: fixed;
z-index: 1;
}
.interview-background {
background-color: #F4F8FB;
min-height: 100vh;
height: 100%;
}
.interview-box-container {
border: 2px solid black;
max-width: 625px;
min-height: 446px;
display: flex;
flex-direction: row-reverse; /* to make button on left and text on right*/
align-items: center; /* align the text and button vertically*/
justify-content: space-between; /* items are evenly distributed in the line; first item is on the start line, last item on the end line*/
padding: 35px;
background: white;
margin: 100px auto 80px
}
.interview-box-container>button {
/* position: absolute;
bottom: 35px;*/
width: 108px;
height: 41px;
font-family: OpenSans-Light;
font-size: 15px;
text-align: center;
color: #FFFFFF;
background-color: #19283B;
border: 1px solid #19283B;
border-radius: 4px;
}
.interview-box-container>p {
color: red;
}
<div class="interview-banner"></div>
<section class="interview-background">
<h2 class="interview-header">Header Text</h2>
<div class="interview-box-container">
<p>Explanation text</p>
<button>Button Text</button>
</div>
</section>
You can try margin to align the box and flex inside it by using space-between :
body {
height: 100%;
width: 100%;
}
.interview-banner {
width: 100%;
height: 95px;
background-color: #19283B;
position: fixed;
z-index: 1;
}
.interview-background {
background-color: #F4F8FB;
min-height: 100vh;
height: 100%;
}
.interview-box {
position: relative;
border: 2px solid black;
max-width: 625px;
width: 100%;
min-height: 446px;
margin:100px auto 80px;
display: flex;
align-items: center;
padding: 35px;
background: white;
margin-top: 100px;
margin-bottom: 80px;
justify-content:space-between;
}
.interview-box>button {
width: 108px;
font-family: OpenSans-Light;
font-size: 15px;
text-align: center;
color: #FFFFFF;
background-color: #19283B;
border: 1px solid #19283B;
border-radius: 4px;
}
.interview-box>p {
text-align: right;
color: red;
}
<div class="interview-banner"></div>
<section class="interview-background">
<h2 class="interview-header">Header Text</h2>
<div class="interview-box-container">
<div class="interview-box">
<p>Explanation text</p>
<button>Button Text</button>
</div>
</div>
</section>
I'm trying to achieve a design close to the snippet here. My problem is that I can't find a way to replace the blue background of .title by a simple transparency (so that the container's background stays visible). If I simply remove the blue background, the border becomes visible where .title is.
Also the "title" is generated by JS so I can't reliably predict the length of div as it may slightly vary depending on the situation.
.container {
width: 350px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
}
.zone {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 20px 0;
text-align: center;
}
.title {
position: relative;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.title span {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
height: 20px;
color: hsla(200, 70%, 20%, 1);
cursor: default;
background: hsla(200, 70%, 55%, 1);
}
.content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 30px 20px 30px;
width: 200px;
border: 0.1rem solid hsla(200, 70%, 20%, 1);
border-radius: 0rem;
margin-top: 10px;
}
<div class="container">
<div class="zone">
<div class="title">
<span>Text Title</span>
</div>
<div class="content"></div>
</div>
</div>
Does anyone have an idea how to achieve what I'm trying to do ? Please let me know if my explanation is too brief or unclear.
Thank you !
You can achieve that with pseudo elements. Take a look at this:
.container {
width: 350px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
}
.zone {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 20px 0;
text-align: center;
}
.title {
position: relative;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.title span {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
height: 20px;
color: hsla(200, 70%, 20%, 1);
cursor: default;
}
.title span::before,
.title span::after{
content: "";
height: 2px;
position: absolute;
background: hsla(200, 70%, 20%, 1);
width: calc(50% - 40px);
top: 9px;
}
.title span::before{
left: 0;
}
.title span::after{
right: 0;
}
.content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 30px 20px 30px;
width: 200px;
border-right: 0.1rem solid hsla(200, 70%, 20%, 1);
border-left: 0.1rem solid hsla(200, 70%, 20%, 1);
border-bottom: 0.1rem solid hsla(200, 70%, 20%, 1);
border-radius: 0rem;
margin-top: 10px;
}
<div class="container">
<div class="zone">
<div class="title">
<span>Text Title</span>
</div>
<div class="content"></div>
</div>
</div>
You could try to use a fieldset with a legend instead of a div:
https://jsfiddle.net/v9p60p6g/1/
<html>
<head>
<style>
.container {
width: 350px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
}
fieldset {
border: solid black 2px;
}
legend {
}
</style>
</head>
<body>
<div class="container">
<fieldset>
<legend>Testtitel</legend>
Content
</fieldset>
</div>
</body>
</html>
You can get the desired effect by adding more elements
.container {
width: 350px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
}
.zone {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 20px 0;
text-align: center;
}
.title {
position: relative;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.title__text {
flex: 0 0 auto;
padding: 0 10px;
height: 20px;
color: hsla(200, 70%, 20%, 1);
cursor: default;
/* background: hsla(200, 70%, 55%, 1); */
}
.title__border {
flex: 1;
border-top: 0.1rem solid hsla(200, 70%, 20%, 1);
}
.content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 30px 20px 30px;
width: 200px;
border: 0.1rem solid hsla(200, 70%, 20%, 1);
border-top: 0.1rem solid transparent;
border-radius: 0rem;
margin-top: 10px;
}
<div class="container">
<div class="zone">
<div class="title">
<span class='title__border'></span>
<span class='title__text'>Text Title</span>
<span class='title__border'></span>
</div>
<div class="content"></div>
</div>
</div>
And don't use selectors like .title span. They do not target specific element and styles used by them cannot be reused somewhere else, which means excessive code duplication. Element selectors (like .title span) are also likely to cause problems (you are selecting all spans in .title element) whenever you change your code (adding another span with different styles is hard), which means even more duplicated code! Duplicated code = more complex code = code that is harder to maintain!
You should get BEM or SMACSS or any other methodology (you may even create your own).
I have a block with several items. When I click on the menu item it is highlighting and extending to the left border of the window.
I did this with the help of an absolutely positioned element, and set the width to 1000px, but this option does not work. This red bar should rest against the edge of the window at any resolution.
html
<div class="flex-menu-area">
<div class="container">
<div class="flex-menu">
<div class="left-flex-column">
<div class="flex-menu-select"><span>item 1</span></div>
<div class="flex-menu-select"><span>item 2</span></div>
<div class="flex-menu-select"><span>item 3</span></div>
</div>
<div class="right-left-column">
<div class="object"><span>item1content</span></div>
<div class="object"><span>item1content</span></div>
<div class="object"><span>item1content</span></div>
<div class="object"><span>item1content</span></div>
<div class="object"><span>item1content</span></div>
</div>
</div>
</div>
</div>
css
.flex-menu-area {
background: #fff;
width: 100%;
height: 512px;
.flex-menu {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: 100%;
.left-flex-column {
max-width: 256px;
width: 100%;
outline: 1px solid gray;
height: 512px;
.flex-menu-select {
font-size: 20px;
line-height: 26px;
font-weight: 600;
text-align: left;
color: $text-color;
padding-top: 43px;
padding-bottom: 43px;
max-width: 100%;
border-bottom: 1px solid gray;
position: relative;
&:hover {
background: #ccc;
&:before {
position: absolute;
width: 1000px;
height: 100%;
content: "";
display: block;
top: 0px;
left: -1000px;
background: red;
}
}
}
}
.right-left-column {
outline: 1px solid gray;
height: 512px;
width: 884px;
background: #fff;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background: #eee;
.object {
outline: 1px solid red;
font-size: 20px;
line-height: 40px;
}
}
}
}
Solution:
&:before {
position: absolute;
width: 100vw;
right: 0;
height: 100%;
content: "";
display: block;
top: 0px;
background: #fff;
z-index: -1;
}
Set the width and left values of your &:before to:
width: calc((100vw - 100%) /2);
left: calc(0 - ((100vw - 100%) /2));
I think that should help, but I don't have access to a screen large enough to test right now so apologies if my calcs are slightly off.