I currently have two divs that are positioned close together with no vertical space between them.
However, I am facing an issue where changing the font in my <h1> yoga 2 pro</h1> element is causing a gap to appear between the two divs. To fix this, I have been using margin-top: -10px;, but I believe there must be a cleaner solution.
Note: The <h1> text fits within the div and does not overflow beyond it.
Does anyone know what might be causing this problem?
Try incorporating margin: 0 X X X; into your h1 tag, or simply include margin-top: 0px
The letters "Xs" in the initial instruction represent margin-right, margin-bottom, and margin-left respectively.
One option is to utilize the float: left property with the h1 element:
.navmenu {
background-color:#2c2c2c;
height: 60px;
width:100%;
margin-top: -14px;
}
.mainmenu {
padding-top: 20px;
}
.mainmenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.mainmenu li {
display: inline;
padding-left: 20px;
}
.midden {
margin-left: 1.5%;
width: 97%;
height: 450px;
background-color: white;
position: relative;
top: 10px;
}
.midden img {
float:left;
}
.midden h1 {
color:black;
font-size: 75px;
position: relative;
float: left;
}<div class="navmenu">
<ul class="mainmenu">
<li>laptops and Ultrabooks</li>
<li>Tablets</li>
<li>Desktops and all-in-one computers</li>
<li>Workstations</li>
<li>Servers and storage</li>
<li>Accessories</li>
<li>Deals</li>
<li>Services and warranties</li>
<li>Where to buy</li>
</ul>
</div>
<div class="midden">
<img src="http://revolution52.net/wp-content/uploads/2009/07/blue-grunge-200x200.jpg">
<h1>Yoga 2 pro</h1>
</div>As I work on creating an HTML form and incorporating CSS into it, here is a snippet of my HTML structure: <html> <body> <div class="pt-form row"> <!-- This will be the top layer for input box --> <div class="pt-form-input ...
I am looking to achieve a unique effect with my thumbnail image and background. Currently, I have the thumbnail image inside a div with another image serving as the background to frame it. My goal is to change the position of the background image from bott ...
Is there a way to customize the tooltip background-color for icons with the classes "alert-danger" to red and "alert-success" to green using the following CSS commands: .alert-danger + .tooltip > .tooltip-inner { background-color: red !important; } ...
This is a follow-up from the previous successful discussion on jquery: percentage of two numbers Firstly, I want to express my gratitude for the prompt support provided in the previous post. Now, I am looking to enhance my script further. My goal is to ca ...
A special selector called :empty allows us to target elements that are entirely devoid of content: <p></p> However, in some cases, the element may appear empty due to line breaks or white spaces: <p> </p> In Firefox, a workar ...
Below is the structured dataframe I am working with in R: Dataframe- seq count percentage Marking count Percentage batch_no count Percentage FRD 1 12.50% S1 2 25.00% 6 1 12 ...
Looking for a solution with my CSS sprite setup: Here is the HTML: <a id="estates" href="http://www.domain.com/estate"></a> The corresponding CSS: #estates {background-position: -200px 0px;width: 96px;height: 90px;} #estates {background: u ...
Welcome to my tech world Greetings! I am a tech writer with a side interest in scripting JavaScript/jQuery for our help file (CHM file). While I consider myself a beginner in JS scripting, I have ventured into the realm of dynamic theme swapping within CH ...
I've been struggling for hours to achieve this layout: Check out the code example here html, body { height: 100%; overflow-y: hidden; overflow-x: hidden; margin: 0px; padding: 0px; } .MyNavbar { height: 30px; background-color: red; } ...
My jquery mobile app is displaying 3 jsignature divs correctly on certain pages, but not on others. The problem arises when the div shows up with a squished height and is unresponsive to touch: Currently, I'm loading these divs using a document ready ...
Let me give you a bit of background: I'm currently working on creating a layout where the elements flow from left to right in one row, then switch to flowing from right to left in the next row, and so on. To better illustrate what I mean, I have creat ...
I recently posted a question on Stack Overflow inquiring about how to input code into an iframe without using a file or URL. While I was successful with simple cases like <h1>Hello World</h1>, my ultimate goal is to integrate three.js into thes ...
When using ng-bind for the title tag inside the header, it seems to produce unexpected behavior. Here is an example of the code: <title page-title ng-bind="page_title"></title> and this is the resulting output: My Page Sucks <titl ...
Is there a way to retrieve and store radio button values in a MySQL database using PHP looping concepts? $result = mysql_query($query) or die(mysql_error()); while ($row = mysql_fetch_row($result)) { ?> ...
Almost there, but I'm having trouble with a loop in my PHP code. The issue is that the code doesn't wait for user input and continues on. I've included my code below. The Excel spreadsheet starts at row 4 with multiple choices. Once a choice ...
I've encountered a problem with my slider arrows while following a YouTube tutorial. They are supposed to appear next to the picture and testimonial, but instead, they are showing up at the top. This issue wasn't present initially, but after enco ...
I have developed a web application using Flask that allows users to upload files to an S3 storage. However, I would like to enhance the user experience by showing them the progress of their file uploads in real-time. To achieve this, I am utilizing Flash t ...
This is a simple code example I tested using bootstrap-select: <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloud ...
I'm having some trouble getting the banner image to be centered on all screen sizes. It looks good on smaller screens, but on larger ones it seems to be shifting to the left. Here's what I've attempted so far: .banner { padding-top: ...
Currently, I am utilizing webcam.js from the following link: https://github.com/jhuckaby/webcamjs. When accessing the website on mobile devices, the front camera tends to open by default. My objective is to switch this default setting to access the rear ...