Is there a way to have the '.domain.com' appear right after the 'subdomain' input box?
<div style="display:block; ">
<input type="text" placeholder="subdomain" style="width: 245px;">
<div style="float: right;">.domain.com</div>
</div>
Is there a way to have the '.domain.com' appear right after the 'subdomain' input box?
<div style="display:block; ">
<input type="text" placeholder="subdomain" style="width: 245px;">
<div style="float: right;">.domain.com</div>
</div>
<input type="text" placeholder="username" style="width: 200px;float: left;">
<div style="float: left;">.mywebsite.com</div>
sample http://jsfiddle.net/Abcde/1/
Getting accustomed to this
<div style="display:block; ">
<input type="text" placeholder="subdomain" style="width: 300px;vertical-align:top;">
<div style="vertical-align:top; display:inline-block;">.website.com</div>
</div>
See it in action http://example.com/AbC456
Modify the CSS to display the text
<div style="display: inline">.domain.com</div>Here is the updated fiddle - http://jsfiddle.net/Tmusf/2/
<div style="display:block; ">
<input type="text" placeholder="subdomain" style="width: 245px;">
<div style="display: inline">.domain.com</div>
</div>
You can also consider using an inline element like span instead of div and avoid styling it
<div style="display:block; ">
<input type="text" placeholder="subdomain" style="width: 245px;">
<span>.domain.com</span>
</div>
Alternatively, you can directly insert the text .domain.com without any container element
<div style="display:block; ">
<input type="text" placeholder="subdomain" style="width: 245px;">
.domain.com
</div>
<div style="display: block;">
<input type="text" placeholder="subdomain" style="width: 245px;" />.website.com
</div>
As per the code provided by Dipak, the above code offers a simple and effective solution to your issue. If you wish to add styles, they can be included within a span tag.
For example:
<div style="display: block;">
<input type="text" placeholder="subdomain" style="width: 245px;" /><span style="color:Blue;">.website.com</span>
</div>
this answer is tailored just for you
<div class="section">
<input type="text" value="" class="section_site" id="website_input" name="website_input">
<span class="content_inner">.example.org</span>
</div>
<style>
.section {
border: 1px solid #EAEAEA;
height: 40px;
width: 350px;
}
.section_site {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: medium none;
height: 40px;
width: 250px;
}
.content_inner {
color: #CCCCCC;
}
</style>
I've been intrigued by the scrolling effects used on websites like Google SketchUp and Google Plus. It's fascinating how elements can transform as you scroll down the page. For example, on Google SketchUp's site, the banner starts off integr ...
I am currently using the Sunrise Theme from s5themes.com and I have a question regarding the header image on individual pages. It seems that all pages are displaying the same header image as the homepage, which is not what I want. Attached below is a scre ...
Planning to give my website a makeover and I'm thinking of adding some parallax effects to make it more engaging. My idea is to have 3 boxes overlapping each other (with the 2nd and 3rd box appearing blurry). These boxes would be placed at the top of ...
Struggling with HTML/CSS and unable to get the NAV bar to display the specified background color. Tried putting the nav in a class, commented out parts of the code, but still couldn't make it work. Despite looking for solutions, I can't figure ou ...
I'm currently working with the Avatar component from Material UI along with Tailwind CSS. I found that by simply adding the image URL to the src, it displays the avatar successfully. <Avatar alt="Cindy Baker" src="https://mui.com/sta ...
Hello everyone, I am facing an issue with my website located at: http://210.48.94.218/~printabl/ When viewed in IE 8, the slider is not functioning properly (it is showing collapsed between the menu and product images section) The theme used for my site ...
I have encountered a challenge that I cannot seem to overcome. In my grid system, there are 18 identical items/boxes. I am looking to remove 4 of those items/boxes and combine them into one large item/box. Refer to the wireframe below for guidance on how ...
We're tasked with designing text in the following format: Text in English XXX Text in English XXX Text in English. The XXX placeholders need to be replaced with images that have the same height as the English text. Is there a better solution for th ...
After successfully building my website, I am now in the process of converting it into a customizable wordpress theme. One challenge I am facing is integrating a dynamic gallery using CSS grid. The goal is to upload photos, videos, and gifs in Wordpress and ...
Recently, I've been working on a JS project inspired by a short story from my high school days. The story featured robot crabs living on a small island, and I wanted to create a simulator where players could set the initial parameters and watch as the ...
Is there a way to stack a bootstrap column on top of another column while maintaining its size and responsiveness? Consider this scenario with 4 columns arranged in a row: https://i.sstatic.net/qug0g.png Upon clicking the Overlay btn, the E column shoul ...
I would like to create an effect where the background color of an icon changes randomly to match the color of the text. There are four predefined color choices available for this randomization. Here is the current code I am working with: HTML: <div ...
After successfully centering my text horizontally in my div using text-align: center, I'm now faced with the challenge of centering it vertically. Despite my attempts with vertical-align: middle;, I haven't been able to achieve the desired result ...
I am trying to achieve a layout where the text box and button are aligned in one line using Bootstrap CSS. Here is the code snippet I have been working with: HTML : <div class="new-meows"> <input type="text" class="form-control" > ...
I have developed a script that is designed to display the menu in a shaking motion and hide it as you scroll down. It functions properly when scrolling within the body of the webpage, but I am facing issues when attempting to do so with a div that has an o ...
I am attempting to develop an input field for entering a PIN. I would like the PIN to be masked on mobile devices, similar to how passwords are obscured in password input fields. I came across a suggestion on stackoverflow regarding this, but unfortunately ...
Context: I am currently working on a Python Django web application and need to showcase code snippets in the browser with syntax highlighting. An example of the code snippet I want to display would be: if True: print("Hello World") I am look ...
Can someone assist with my drop-down menu issue for the link "services"? The link disappears behind the page content when I try to modify it. Any help would be appreciated, thank you! This is the CSS: .bodycontent { margin: 0 25% 0 25%; ...
As a beginner, I have created a menu that shows options on hover and click. However, I am encountering an issue where clicking on one menu option and then hovering over another menu creates two lists of options. Is there a way to make the clicked menu opti ...
Recently, I've been working with vue.js and I've come across an issue regarding how to apply a class to past and future days of the current month. Specifically, for March, I need to disable days with numbers 24, 25, 26, 27, 28, 29 in the first ro ...