My latest coding challenge involved creating a unique shape background for centered text.
The text needed to be perfectly centered with the background extending all the way to the right edge of the content-box.
I'm curious how I can achieve this effect using CSS. Any ideas?
Crafting text alignment is a piece of cake. The real challenge lies in extending the background in one direction. One approach to achieving this is outlined below:
#outer{
border:2px solid black;
background-color:red;
overflow:hidden;
}
#inner{
margin:40px;
text-align:center;
}
p{
display:inline-block;
color:white;
background-color:black; // or an image
margin:0 -999em 0 5px;
padding: 5px 999em 5px 5px;
line-height:1;
}
In this scenario, a large padding and negative margin are utilized to visually extend an element beyond its borders while maintaining its flow within the layout. This technique offers the advantage of keeping the element in a standard static or relative position.
Finally, remember to add overflow:hidden to a parent element to prevent any undesired bleeding effects.
By utilizing the :after pseudo-element, you have the ability to achieve something similar to THIS.
This technique allows for text alignment in a centered manner without resorting to margin or padding workarounds.
p {
display: table;
background: black;
margin: auto;
color: white;
position: relative;
font-size: 1em;
}
p:after {
content: '';
background: black;
width: 150px;
line-height: 1em;
height: 100%;
display: inline-block;
position: absolute;
}
Are you looking for something like this? Check out the Fiddle
This is the HTML code:
<div class="container">
<span class="content">Your text here</span>
</div>
Here's the CSS code:
.container {
width: 200px;
height: 200px;
border: 1px solid;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.content {
background: yellow;
}
I have created a simple Bootstrap website in HTML that resembles a news feed. To populate the feed with various posts, I am using Javascript to work with arrays containing images, headlines, and captions for each post. My initial approach involves looping ...
I have successfully positioned all of my HTML elements as desired, with the exception of one. Despite my efforts, I cannot figure out why this particular element is not cooperating with the rest. Below is a snippet of the CSS code excluding non-relevant pa ...
As someone new to web development, I've been exploring how to align elements to the vertical center. I came across a solution that didn't work for me initially. Surprisingly, by adding some random characters in the CSS code like full stops and co ...
There are various solutions available for removing the "X" from an input field in IE 10+ browsers. I have tried multiple approaches without success. For example, I have referenced: ans 1 ans 2 ans 3 Despite implementing all of these solutions, I still ...
When it comes to issuing invoices, here's the process I follow: First, I make sure to select all invoices on the current page by clicking on the checkbox. Then I proceed to hit the issue button and give my approval for them to be issued. Once the cu ...
Using markup, I have created a dropdown menu utilizing Twitter Bootstrap. <ul class="nav pull-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b>< ...
Greetings everyone! I am diving into the world of JavaScript and recently attempted to create a banner carousel animation. Specifically, I have 3 banners in rotation where each slide reveals text with an animation effect. However, I'm encountering an ...
Check out this code snippet: import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; import classNames from 'classnames'; const styles = theme => ({ myGridStyle:{ '&:.my-row-s ...
I have been searching the internet for a solution to my issue but nothing seems to be working. Here is the problem: Unfortunately, I cannot modify the TR TD structure and am unable to use DIVs. I am trying to dynamically display certain TD elements based ...
I'm having an issue with this code. I created a javascript variable in the same file and referenced it for setting the background color of the body. However, it's not working as expected. Can someone please explain why and help me achieve my desi ...
I've set up two dropdown select boxes below that are exactly the same: HTML <select id="ddl1" name="ddl1"> <option value="1">TEXT 1</option> <option value="2">TEXT 2</option> <option value="3">TEXT 3&l ...
I'm currently developing a NODE.js app that utilizes Nunjucks as its view engine. To ensure the validity of the HTML being generated, I've implemented tests to check if all tags are properly closed. My approach involves spinning up the applicatio ...
Can you accurately set the width of an element, like a div, in inches and expect it to maintain that width across different devices? Or will it simply scale at a ratio like 1in = 96px? Edit: Try using CSS to set an element's width in inches and then ...
I'm struggling to find a solution that works for me - I could really use some assistance. My CSS skills are not up to par... Currently, I have a video embedded in a web page with a text overlay. The problem arises when the content is displayed on a l ...
Currently, I am faced with the task of constructing an HTML code structure within C# code behind. Specifically, I need to insert an HTML element that spans 3 columns in a row of 12 columns (utilizing Zurb Foundation). To achieve this, I am iterating throu ...
How do I go about displaying the variable $text as HTML? Take a look at the code snippet provided below: <?php header('Content-type: text/css'); $background = "#ffafff"; $color = "#000000"; $green = "#16a86f"; $text= '<h1&g ...
After a user clicks on an element in my app, I have some logic that runs. For example: html <h3 ng-click="showAlert('text')">this is text! (try to click and select)</h3> js $scope.showAlert = function(text) { console.log(' ...
Just starting out with selenium and looking for guidance. Picture this scenario: there are two boxes, one where a user can input a message, and another where that message will be displayed. I'm currently working on using selenium and java to send text ...
I’m trying to figure out how to incorporate all of this into my loop, but I’m not sure if it can be broken up. However, PHP needs to interpret it as HTML. $movieDetails = <header class="masthead" role="banner"> <div class="logo-con ...
I am currently working on developing an app using phonegap. At the moment, I have the reference to a script in every page like this: <script language="javascript" src="http://someServer/js/myscript.js"></script> If the server 'someServer ...