Is there a way to create the effect shown below using CSS without using absolute positioning? The blue circle represents an image and the red background will have changing text based on DOM changes. I'm struggling with finding relevant resources to achieve this effect, any help would be appreciated!
Here is a Fiddle link to the code example: http://jsfiddle.net/cdmW3/2/
In this demonstration, I opted not to utilize the position:absolute attribute. Additionally, any unnecessary CSS prefixes (-moz, -webkit) have been eliminated.
Below are the HTML and CSS snippets:
<div class="wow">
<div>Hello</div>
<span>World</span>
</div>
.wow {
width: 400px;
background-color: #D01528;
height: 100px;
-webkit-border-radius: 200px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius: 200px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-radius: 200px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.wow > div {
border: 1px solid #384B86;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 35px 0;
text-align: center;
height: 100%;
width: 100px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
background-color: #FFFFFF;
}
If you're looking to create a circular shape, consider the following suggestions:
Check out this example on CodePen for reference: http://codepen.io/davidtheclark/pen/anFmw
If you are looking to include text in both the circle and the background, there are two options available:
A. Utilizing floats
B. Implementing absolute positioning.
Absolute positioning is not as complicated as it may seem. Let me demonstrate with inline styling:
<div style="position:relative;">
<div style="position:absolute;top:0;left:0;">Text inside Circle</div>
<div style="position:absolute;top:0;left:100px;">Additional Text</div>
</div>
However, if your aim is to only display text on the right side while using a circular image, you can opt for a transparent PNG/GIF. You can also specify a default background color using the first attribute:
<div style="background: red url(circle-image.gif) no-repeat 0 0;padding-left:100px;">
Text
</div>
It's as straightforward as that!
I come from a strong background and I am looking to create a dynamic loop that changes the brightness using CSS specifically on Chrome. The goal is to have the background color match the user's profile, providing a unique experience each time. For ex ...
I am revamping my website to a more modern web application, and here is the HTML code I am using: <joexn-profile> <joexn-logo></joexn-logo> <joexn-text></joexn-text> </joexn-profile> Additionally, here is the JavaScrip ...
I am looking for a way to display different content depending on whether the user is viewing my website on a large screen (PC/tablet) or a small screen (mobile). While my site is responsive and uses bootstrap, I have a lot of content that is only suitable ...
My experience with the ASP.NET AJAX Control Toolkit HTMLEditor has been less than satisfactory. The toolbar layout is not being displayed correctly, with what should be a 3-line toolbar appearing stretched out to 9 lines. ...
Currently working on creating a table using CSS and divs, and I've got most of it set up except for the issue of uneven heights in the boxes. I've tried adjusting the heights and various commands, but to no avail. I'm unsure whether the prob ...
I have a unique situation where I am working with a large image sprite that is 1030px by 510px and contains two smaller images, each being 515px by 515px. My goal is to extract the two small images from the sprite and set them as backgrounds for two <im ...
On my page, I noticed that the input of type=number is missing its arrows and appears like a regular text input. After doing some investigating, I think it might be due to this: https://i.stack.imgur.com/G1BrV.png My browser of choice is Google Chrome. D ...
Can someone please assist me? I am attempting to replicate a website, but I am unsure how to center align an icon list and content. Currently, it appears like this; https://i.stack.imgur.com/6FZCr.png I would like it to look like this; https://i.stack.im ...
It seems like the image at the bottom of the parallax theme is showing some spacing at full height. I initially thought the image was too small, but upon comparing it to the one in the top widget area, its height is actually larger. Should I look for a big ...
Here is a Codepen showcasing a triple hover effect on an image: Codepen I attempted to recreate this effect as a styled component in React Typescript using MUI and MUI Image, but encountered an error with my styling that is preventing it from working in m ...
After exhausting all recommendations to fix the rounded corners problem, I am seeking help. The issue is that it displays correctly on Firefox but not on Safari or Chrome. Below is my code: #sidebar4_content{ margin: 0 auto; float: right; widt ...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <titl ...
https://i.sstatic.net/ekVr4.png #menu { display: flex; justify-content: space-evenly; align-items: center; margin: 0 5px 0 5px; height: 30px; flex-wrap: wrap; } .menu_item { margin: 0 10px 0 10px; } .menu_item2 { margin: 0 10px 0 10px; } <div id="m ...
My floating bar currently has 5 social buttons, but I've noticed that the Facebook button is shifting about 20 pixels to the left. Could this be an issue with the CSS elements? After inspecting the elements, I found that when I remove position: absol ...
There is a recurring issue I encounter where it takes too long for me to solve the problem. My goal is to ensure that the bootstrap boxes at the bottom of the page have the same height. I attempted to set a fixed height in pixels using my CSS, but this cau ...
Within my react js project There is a particular block that may contain either one or two elements, depending on the runtime conditions. For instance: Scenario 1: (two groups are present) <div class='menu-list'> <div class='g ...
Currently, I am incorporating CSS and JS files into my node.js/express application with the help of the ejs templating engine. Interestingly, while the JavaScript files are being successfully implemented, only the first included CSS file seems to be affect ...
Today has been a bit challenging for me. I've been attempting to use JavaScript to load content into a <div>. Here is the JavaScript code I'm working with: function loadXMLDoc(filename) { var xmlhttp; if (window.XMLHttpRequest) { ...
I've been working with Bootstrap to design social buttons for Facebook and LinkedIn. However, I'm facing an issue where setting the background color to white for the buttons doesn't cover them properly. The white background extends beyond th ...
I have successfully created a floating pane declaratively using the code below. Everything seems to be functioning correctly, except for the fact that when I click the button to open the floating pane again, its position changes from the previous locatio ...