I have been attempting to center a search bar inside a top banner vertically. My understanding was that the following code could achieve this:
#banner {
height: 35px;
width: 100%;
}
#searchbar {
height: 15px;
position: relative;
top: 50%;
margin-top: -7.5px; /* half of the height */
}
However, when I add the margin-top, it affects the #banner as well.
Is there an alternative method to accomplish vertical centering, or am I making a mistake?
My approach involves using the CSS property line-height, where the value matches the height of the parent div.
You can see an example of this technique here: http://jsfiddle.net/vkJ78/24/
The CSS code snippet is as follows:
#banner {
background-color: #770E17;
height: 35px;
width: 100%;
border-bottom: 1px solid #333;
}
#src {
width: 300px;
height: 15px;
border: 1px solid #333;
padding: 3px;
}
#srcdiv {
width: 308px;
margin: 0px auto;
position: relative;
line-height: 35px;
}
EDIT: Following a suggestion from NGLN, implementing this method not only resolves vertical alignment but also ensures horizontal centering by making #srcdiv and #src widths equal.
To achieve the desired effect, apply overflow: hidden to #banner in order to clear the float.
Next, adjust the negative margin by setting margin-top: -11px in #srcdiv (be sure to factor in the div height, border, and padding for total height).
Set margin:0px and padding:0px while eliminating margin-top
body {
margin:0px;
padding:0px;
}
My objective is to create a unique cutting corner effect using linear gradients. Achieving this on one corner is straightforward: body { background: #eac996; } .box { width: 100px; height: 100px; margin: 100px auto; padding: 20px; backgroun ...
Why am I unable to display the icon within the <anchor> element without using the href attribute? The icon only appears when I set the href attribute to "". Even if I manage to show the icon by adding href="", adjusting the size with width and height ...
While examining the source code of an HTML page, I stumbled upon the following snippet: <script id="searchItemTemplate" type="text/html"> <# var rows = Math.floor((Model.RecordsPerPage - 1) / 3 + 1); for (var i = 0; i < rows; ++i){ ...
I need a simple solution that I have been struggling to figure out. What I want is for anyone attempting to access any webpage directly on my website to be automatically redirected to the home page. For instance, if someone tries to access www.domain-name ...
I'm currently working on developing a drawing application where users can freely draw by moving their mouse over a canvas. My goal is to create a pixel at the precise location where the user drags their mouse. However, I've encountered an issue ...
I'm in the process of replacing an iframe with an image, and I want to accomplish this with minimal code. The container div I'm working with has a data-toggle attribute: <div id="my-div" data-toggle="video2"> <div id="videocontaine ...
I need jQuery to automatically add style="text-align: left;" to all elements throughout my webpage. My initial approach would be something like this: $('everything-in-the-page').each( ... However, I am a bit unsure about how to properly target ...
Having trouble creating an offline HTML file that incorporates jQuery for the script. The page features a state select menu followed by a second menu for counties. When a state is selected, only the corresponding counties should display while others remai ...
[resolved] I'm encountering an issue with the code below that is supposed to dynamically change the options in a second drop-down menu based on the selection made in the first menu. I've tried to troubleshoot the problem but haven't been suc ...
I have a question that may have been asked before, but I haven't found a satisfactory answer yet. Within my HTML code, I have a SPAN element with an onclick event, like so: <span onclick='loadDiv()'>Text</span> When a user cli ...
Currently, I have a CGI page called Login.cgi. It features a form where I must input the correct password to be redirected to another page named Main.cgi. On this new page, my goal is to incorporate a HORIZONTAL menu containing options like UsersList, Logs ...
I am in need of assistance to create a dynamic grid using jQuery Mobile. The grid should consist of buttons with either 'onclick' or 'href' functionality. The number of buttons should be generated dynamically at runtime. Specifically, I ...
I am currently working on a project where I have a div named "background" containing 4 images (400x300px) that fade in and out in a row every x seconds. The issue I am facing is that these images are displaying on the top-left of the browser, and I am tr ...
I am currently using the KuteShop WordPress Woo-commerce template and I want to customize the Placeholder Text "I'm searching for..." and "All Cate." shown in the image below: Despite my efforts, I have been unable to locate where I can make these ch ...
When viewing my label and two textbox controls on a desktop, they are aligned horizontally. However, I want these textboxes to stack on top of each other when the user views the site on mobile. I am using a media query to adjust to a mobile view, and all o ...
I developed a customized Modal Box that functions similar to the browser's "alert()". When using the traditional alert(), it halts the rendering and executions of the underlying webpage. I am seeking methods to achieve this same behavior: preventing ...
Hey there, I'm a complete beginner in web development. I have an HTML file with AngularJS code that calls a .php file, both located in my local folder. I've tried looking online, but: Installing a server is not possible as this will be used ...
Hey there! I'm having an issue with displaying weather information for a specific location. I want to show the weather details in a div only when a button is clicked. Despite successfully fetching data from the API, I'm struggling to hide the wea ...
I'm attempting to design a list (ul) where each li has an img on the left and text aligned to the left (including a title and paragraphs) positioned next to the image on the right. I've experimented with float: left and various display propertie ...
In my current project, I am attempting to create an ajax "button" that mimics the functionality of a typical link_to "content", some_path, remote:true. The goal is to have this button swap out images to indicate different statuses when clicked (e.g. on/off ...