https://i.sstatic.net/ar8ZW.pngI'm facing some challenges while creating a webpage with a background image and trying to place another cover image just below the navigation bar. Even after following tutorials and guides, I am unable to achieve the desired layout.
To give you an idea, here's a snippet of the CSS code that I have been working on:
/* Your CSS code goes here */If you have any suggestions or solutions to my problem, I would greatly appreciate your help!
I believe removing the floats would enhance the overall clarity of the webpage, particularly for me. To position elements within the header, I utilized the flexbox feature of css. For more information on this, you can refer to: https://css-tricks.com/snippets/css/a-guide-to-flexbox/enter link description here
If you have a preference for the header to remain at the top and disappear when scrolling down or to float over the content even when scrolling down, please uncomment the corresponding option in the CSS code.
HTML:
<body>
<div class="bg">
<header>
<div class="logoContainer">
<img src="http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg">
</div>
<ul class="main-nav">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">PHOTOS</a></li>
<li><a href="#">PLAYERS</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">SCHEDULE</a></li>
</ul>
</header>
<div class="socialLinksContainer">
<div class="instagram">
<a href="#"><img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg"></a>
</div>
<div class="twitter">
<a href="#"><img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-13.jpg"></a>
</div>
</div>
Main content goes here
</div>
</body>
CSS:
header {
height: 10vh;
background-color: rgba(255, 255, 255, 0.4);
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
//uncomment this for the header to float over the content
//position: fixed;
//top: 10px;
}
.logoContainer {
height: 10vh;
}
.logoContainer > img {
max-width: 100%;
max-height: 100%;
}
.main-nav {
list-style: none;
margin-top: 100 px;
margin-left: 350 px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5 px 10 px;
font-family: "Roboto", sans - serif;
font-size: 15 px;
}
.main-nav li.active a {
border: 1 px solid white;
}
.main-nav li a: hover {
border: 1 px solid white;
}
# logo img {
width: 150 px;
height: 145 px;
padding-left: 10 %;
}
body {
font-family: sans-serif;
color: red;
}
hr {
width: 100 %;
height: 1 px;
background: #fff
}
.socialLinksContainer {
position: fixed;
right: 5px;
bottom: 5px;
display: flex;
flex-direction: row;
}
.title {
position: relative;
width: 1200 px;
margin-left: 0 px;
margin-top: 0 px;
}
.instagram > a > img {
max-width: 30px;
max-height: 30px;
margin-top: 10 px;
padding-left: 960 px;
}
.twitter img {
max-width: 30px;
max-height: 30px;
margin-top: 10 px;
padding-left: 30 px;
}
body,
html {
height: 100 %;
}
body {
background-image: url('https://cdn.hockeycanada.ca/hockey-canada/Team-Canada/Men/World-Cup/2016/sep_29_wch_team.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.imageUnderTheNavbar {
max-height: 50px;
}
Please review this fiddle for a visual representation: https://jsfiddle.net/5ufpomy4/4/
Does this align with your vision for the design?
Currently, I am in the process of parsing text and looking to match a specific type of text that I want to remove entirely. The format of the text I am trying to target is as follows: <tr class="label-BGC"><td colspan="4">any content here</ ...
Let's tackle a simple to-do list scenario. Imagine inputting tasks and clicking submit, which then adds an item to the list. Clicking on an item should mark it with a line through the text. However, a peculiar issue arises: when multiple items are add ...
I love the color picker button on Google Keep, where a variety of colors pop up for selection. I'd like to add something similar to my website. What steps should I take to implement this feature? ...
Assume I have a situation where the HTML below is present and I aim to dynamically conceal all the descendants of the 'overlay' div <div id="overlay" class="foo"> <h2 class="title">title</h2> ...
I need help with a jQuery code that will pull up/slide up an Html "p" tag when my page finishes loading. This snippet of jQuery code seems to be working fine: $(function () { $('.graybgc').slideUp(0); }); This is the HTML structure: <p ...
My latest creation is a static advert ticker positioned at the bottom of the window. It's contained within an <iframe> for easy placement on other websites. I added a <span> around the <iframe> to keep it fixed at the bottom of the s ...
Can someone help me with my HTML table setup? I have a table structure as shown below, and I am looking to add a "Total" row at the footer for each specific "quarter". "quarter1" "quarter2" "quarter3" "quarter4" 250000 115000 ...
Seeking some assistance with a PHP/HTML page I'm working on. The code is throwing a syntax error when it reaches the final tag, and I can't figure out what is causing it. Any help would be greatly appreciated! Here is the snippet of my code: < ...
I stumbled upon a snippet on CSS Tricks Attempting to replace the green color with a gradient value, but unfortunately, the value is not being applied. I have tried using both the fill property and gradient color, but neither has been successful. Here is ...
I am struggling to get Google fonts to display properly in my newsletter emails. Here is the code snippet I have been using: $html=" <html> <style> @import url(http://fonts.googleapis.com/css?family=Lato|Simonetta); </style> <body& ...
I am trying to find the precise distance between : #main div left edge to the first div with class="b" between the first div with class="b" to the second div with class="b" It's worth noting that the divs may be arranged randomly and could have fix ...
I have created a code that generates an HTML table when a button is pressed: function createTable($columns, $division, $rows) { $employees = 0; $progressive = 0; echo "<table border='1' width='50%' height='25%' ...
Below is the code that I am working with: <div style="margin: 0 auto; display:block; width: 916px; overflow: auto;"> <?php echo ""; echo "<i>Owned: $line->phone </i><br><br>"; $query ...
I'm facing an issue with the new ng-content transclusion feature. To illustrate, let's consider a scenario where I have a component called my-component that performs some intensive operations in its ngOnInit() function (for now, just a console.l ...
I've been facing some challenges while integrating my website with Facebook Connect. I have been following the instructions provided in this guide. When attempting to run the following code from localhost, please note that for security reasons, my ap ...
I have recently created a file which includes the following code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8> <style> iframe { height: 500px; width: 600px; } ...
Is there a way to create a responsive iframe without relying on a fixed aspect ratio? The width and height of the content are unknown until rendering. Keep in mind, using Javascript is an option. For instance: <div id="iframe-container"> <i ...
I have currently placed the entire array within a single div, but I would like to be able to display each element of the array separately so that I can style "date", "title", and "text" individually. This is my JSON structure: [ { "date": "Example ...
Revamped the code for a clearer question A big thank you to everyone for all the help I've received so far! I have dynamically generated input boxes with varying numbers of inputs and want to submit them on-the-fly.... How can I pass inputs from ...
Dealing with a form that contains over 100 form controls can be a challenging task. The complexity arises from the need for non-trivial logic to determine when to hide, show, disable, or enable various form controls. Currently, the code includes multiple i ...