Is there a way to center an H1 tag between two graphics using CSS or jquery/javascript? The width of the H1 text will vary depending on the page. The dot on the left should remain at the edge of the site, and the line should extend to meet the edge of the text on both sides.
If the text were "WHO YOU ARE," I would need the bars on the left and right to grow wider to align with the edges of the text.
The background has a texture, so placing a solid color behind the text is not possible. :(
If you're looking for a new approach, check out this suggestion: http://jsfiddle.net/NpCP5/
This technique involves using a single graphic that stretches behind the h1 element and applying a background color to create a gap effect. It's also possible to achieve this dynamically with minimal spacing on either side of the line using only CSS.
Creating this design is achievable using basic html and css. Utilize the image provided as a background for the two sides and the main h1 title itself. However, keep in mind that text embedded within an image cannot be modified using css alone - hence you may need to opt for a different image.
For testing purposes, implement the code below on a web page through your browser. Note that accessing the image hosted on this site may be restricted by jsfiddle.net
HTML
<h1>
<span class="h1_left"> </span>
<span class="h1_text">H1 Title Text</span>
<span class="h1_right"> </span>
</h1>
CSS
h1 {
text-align:center;
color:#FC3;
background-image:url(https://i.sstatic.net/meq5P.png);
background-position:left 0;
max-width: 700px;
min-width:360px;
padding:0;
height:40px;
}
.h1_left,
.h1_right {
display: inline-block;
width:40px;
height:100%;
background-image:url(https://i.sstatic.net/meq5P.png);
overflow:hidden;
}
.h1_text {
background-color: #000;
display: inline-block;
height: 100%;
padding: 0 10px;
font-size:20px;
line-height:40px;
}
.h1_right {
float:right;
background-position: 100% 0;
}
.h1_left{ float:left}
I want the hint-bubble div to smoothly slide out (using 'transition: 0.5s') whenever the hint-btn is clicked. I have successfully implemented it so that the hint-bubble appears when the button is clicked, but it appears instantly and I am struggl ...
Approximately 30 seconds after a page is loaded or reloaded, a pop-up will be displayed under certain conditions. The following code successfully achieves this functionality: jQuery(document).ready(function($) { .......... if (localStorage.getItem ...
I am struggling with a form that contains 3 dropdowns: <select id="1" required> <option value="">Choose an option</option> <option value="1">Apple</option> <option value="2">Orange ...
Seeking advice on how to send large data via jQuery POST without redirecting the page. I'm working on a mobile chat project where communication between user app and server is done using JSON. The issue arises when dealing with big data as the jsonGet ...
I found this code snippet on a website and I'm trying to figure out how to make the 'Send!' button redirect users to my email address with their message, name, and email included. Can anyone help me solve this issue? I attempted to add my e ...
I am working on a Vue 3 SPA where I am manipulating canvas elements. To preload my image, I am using the function provided below: async preloadLogo () { return new Promise( (resolve) => { var logo_img_temp = new Image(); const logo_s ...
I am looking for an event that will only work when closing a page or tab, but should not be triggered when the page is refreshed. I am aware of the "beforeunload" event, but it also gets activated on page refresh. Below is the code snippet I am currently ...
Closed. This question requires additional details or clarity. It is not currently accepting answers. ...
I am currently dealing with an array called serialNumbers, which can have different structures. For example: lot: 1 Serial: 2 lot: 1 Serial: 3 lot: 1 Serial: 4 ...or it could look like this: lot: 1 Serial: 5 lot: 1 Serial: 9 lot: 8 Serial: 2 lot: ...
I have a collection of images all with the same size that I want to use for a slideshow. I would like them to be displayed in a single row, potentially wider than the window itself, and I prefer some of the pictures to extend off the screen rather than wra ...
I need to set the value of a column in a repeater so that once it's assigned, the column will display the current selection from the dropdown. I have the correct value to assign in $('#myname_' + rowIndex).text(), but when I try to assign t ...
I am currently working on a functionality to toggle between the Follow and Following buttons based on whether the current user is following another individual. I have implemented an NgIF statement in my code, but I am facing challenges in properly checking ...
When it comes to downloading files from a server using an XHR request, how can I ensure that the browser initiates the download once the response is received? Additionally, which headers should be included by the server for this process to work seamlessl ...
I am working with a regex pattern and need to verify if it matches at the start of a string, after a new line, or after a white space. Additionally, I want to ensure that the pattern also matches the end of the string, after a new line, or a white space. ...
Currently, I am sending a JSON object back to a JavaScript array. The data in the array is correct (I verified this using Firebug's console.debug() feature), but when I try to access the data within the array, it shows as undefined. Below is the func ...
Welcome to my React learning journey! I've encountered an issue while trying to access a global variable exposed by a browser extension that I'm using. Initially, I attempted to check for the availability of the variable in the componentDidMount ...
Trying to implement an Emoji picker in my React application, I have two toggle buttons on the page to show the picker. I want it to appear where the Toggle button is clicked - whether at the top or bottom of the page. The challenge is to ensure that the pi ...
When developing my application, I have a process in place where I load CSS files on the back-end using Express.JS and then transmit them to the front-end. However, before sending the CSS code to the front-end, I need to: Identify the user's browser; ...
I have a good understanding of responsive design and how to set elements with relative width. My specific question is regarding the transition of the page from thisto that. Any insight on this would be greatly appreciated. Thank you in advance. ...
I am currently working on developing a wordle-style game using react. Within my main component, I have implemented a useEffect that executes once to handle initialization tasks and set up a "keydown" event listener. useEffect(() => { //The getWor ...