I noticed that on the following website (), the text is currently padded at the top which is determining its height. I am looking to modify this in order to vertically center it within the div, however, the standard CSS properties do not seem to be effective.
CSS
#header {
height: 100%;
width: 100%;
background-image:url(images/5pointz_white_door.jpg);
background-size:cover;
background-position: center;
background-repeat:no-repeat;
vertical-align: middle;
}
The solution using display:table is effective; however, you need to adjust the positioning of the header to make it visible above your navigation bar at the top of the page. Despite appearing centered within the header div, the text is partially obscured by the nav bar.
To resolve this issue, you can add:
#header{
padding-top:59px; <!-- equal to the height of the nav bar -->
}
Then remove the padding from the title element and include:
display:table-cell;
This jsfiddle demonstrates the solution (I set a fixed height on the header for demonstration purposes, but it works with a height of 100% on your actual website).
While creating the fiddle, I observed two additional points. It seems unnecessary to have separate classes for each text element in the header since they all share the same code. In the fiddle, I used one class called .neue. Additionally, consider setting the font size for each element in the CSS instead of inline HTML styling.
add a paragraph to your header and update the styling with the following:
#header{
height: 100%;
width: 100%;
background-image:url(images/5pointz_white_door.jpg);
background-size:cover;
background-position: center;
background-repeat:no-repeat;
display: table;
}
#header p {
display: table-cell;
text-align: center;
vertical-align: middle;
}
include the following
#banner {
height: 90%;
width: 95%;
background-image:url(images/city_skyline.jpg);
background-size:contain;
background-position: center;
background-repeat:no-repeat;
vertical-align: middle;
text-align: center;
}
#content {
vertical-align: middle;
text-align: center;
}
I am facing a unique challenge where the performance of my page is significantly impacted by loading multiple iframes. These iframes are contained within popup modals, and I would like to delay their loading until a user clicks on the modal. When the mod ...
I've simplified some logic in this JSFiddle: http://jsfiddle.net/r7vyjg4h/ and it's functioning correctly. The HTML code is as follows: <div ng-controller="MyCtrl"> <div ng-repeat="line in lines"> <div style="display: inline- ...
My website has a menu that displays with the following CSS: a { background:red; } <a href="#">Home</a> <a href="#">Downloads</a> <a href="#">Contact</a> <a href="#">FAQ</a> <a href="#">Disclaimer&l ...
Within a single portlet, I have organized two forms under separate tabs. What I am aiming for is that whenever I switch to tab 2, all fields within its associated form should automatically be cleared without the need for a button click. Even after attempti ...
Currently, I am utilizing a basic HTML code to duplicate the value from the first cell to all other cells. You can take a look at how the HTML table appears here. In addition, I am attempting to automatically fill in the remaining dates once input is provi ...
I have a contact form and I want all the form values to be cleared after submitting the form. I've tried the following code, but the values of the form remain unchanged after submission. What could be causing this issue and how can it be resolved? ...
I am attempting to extract a list of cities from a webpage using Beautiful Soup The current output is: MonroeMatthewsWaxhawIndian Trail, Matthews What I want is: Monroe, Matthews, Waxhaw, Indian Trail, Matthews This is the HTML: <div id="current_tab ...
My current dilemma involves attempting to extract a table from a webpage. The issue is that copying the entire page is not feasible due to buttons and dynamic elements causing a memory overload when pasted into Excel. To work around this, I am trying to ex ...
One of the elements on my page is a list that scrolls vertically, named scroll-list-one, and it functions perfectly. Another element, which contains a vertical scrolling list called scroll-list-two, occasionally appears as a popover over scroll-div-one. T ...
Looking to customize the appearance of a checkbox in a web framework utilizing bootstrap 4, I attempted to override the custom-control-label class by setting the position property to auto instead of its default value of relative. Although I achieved the ...
Working on a basic HTML project that includes css and javascript. Within the project folders named css, scripts, and images are used for organization. The project structure can be seen in the provided image. https://i.sstatic.net/OwCSL.jpg The issue that ...
I have integrated CSS Modules import style from "./styles/question.module.css"; // status[0] can range from 0 to 4 <p className={style[`difficulty_${status[0]}`]}>{difficulty}</p>, The code above is functional, however the following ...
Recently, I encountered an issue with my list items overlapping in the latest version of Chrome 89 To display the list, I am using flex-direction: column-reverse;. Does anyone have any suggestions on how to fix this problem? Chrome 89 https://i.sstatic. ...
I am attempting to align two corners of an element so that they perfectly match the corners of another element. In simpler terms, I am aiming to synchronize the corners of one element with those of another element. Below is the code snippet: ... When y ...
As a newcomer to PHP, HTML, and programming in general, I am working on creating a contact form using PHP and HTML. So far, everything is functioning properly and I am able to receive emails. However, there is one issue - when I try to fill out the form in ...
Finally Got It to Work! After troubleshooting, I managed to fix the code on the first page and successfully link it to this second page. Despite using the same CSS and similar HTML, I couldn't figure out why the buttons were not displaying at all. Im ...
<body ng-app="myApp"> <div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'"> <div class="slider-content" ng-switch-when="1"> <img src="../images/ship.png" /> & ...
When using labels and spans with Bootstrap 4, the alignment may not appear centered when placed in a table within tr and td. How can I ensure that it is aligned properly? span.bigcheck { font-family: sans-serif; font-weight: 500; font-s ...
Looking to create a countdown page for the upcoming ICC cricket world cup event that displays the remaining days in two different formats: Format #1: 01 months 10 days 10 hours Format 2: 01 hours 20 minutes 10 seconds (If less than 2 days remain) I curr ...
Looking to adjust the position of an image on my iPad3, but running into some difficulties. The movement isn't as smooth as desired and seems to lag behind the gestures being made. This is what I have so far (a 3MB base64 image) <img src="data:i ...