I am new to CSS, I have a header with a menu list and an image just below the header.
When I hover on Gallery within menu bar, it displaces the image below by the height of hovered block.Is there any way to make the content overlap on the image rather than displacing it.
<header class="container">
<h1>First <br/> Website</h1>
<nav>
<ul class="nav group">
<li>Home</li>
<li>Gallery
<ul>
<li><span>Images</span></li>
<li><span>Videos<span></li>
<li><span>Animations<span></li>
</ul>
</li>
</ul>
</nav>
</header><!-- /header -->
<section class="container img" id="corousel">
<img src="trolltunga.jpg" alt="Test Image">
</section>
<footer class="container">
More to come...
</footer>
Here is a fiddle to my code, https://jsfiddle.net/khushboo_sangal/5xLs5odu/
You need to take the dropdown menu out of the document flow by positioning it absolute. Just make sure to set it's parent's position to relative.
.nav li {
position: relative;
}
.nav li ul {
position: absolute;
}
https://jsfiddle.net/5xLs5odu/2/
You also had some unclosed <span /> tags in your nested ul. Thanks #vals for pointing this out:
<li><span>Videos</span></li>
<li><span>Animations</span></li>
Related
HTML
<body>
<!-- Header -->
<section id="header">
<div class="header container">
<div class="nav-bar">
<div class="brand">
<a href="#home">
</a>
</div>
<div class="nav-list">
<div class="hamburger">
<div class="bar"></div>
</div>
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
I'm trying to add a logo to my website. The logo fills the screen. I can't adjust its size.HTML codes like this.
It is difficult to answer without seeing the stylings and I see you haven't provided a proper code.
Just give the img tag a width and a height and position the div wrapping it correctly.
Something like this,
div {
position:relative;
text-align:center;/* Add This*/
}
<div>
<img src="https://www.w3schools.com/tags/img_girl.jpg" width='300px' height='400px'/>
</div>
I suggest you to refer the following,
Positioning a div
Inserting an img
Good luck mate!
How can make the logo float up and align with the nav bar it is been push down for the reason I don't know I've tried all padding trick that I know, I also want the img to close the gap on top with the <hr>.. So I want the <hr> right on top of the img.
<body>
<!-- Here is the header-->
<header id="Home">
<div class="nav-bar">
<div class="funBus-logo">Fun Bus</div>
<nav>
Home
About Us
Blog
Contact
</nav>
</div>
<hr>
<div class="image"><img src="/img/fun-bus.jpg" alt="fun-bus"></div>
</header>
Consider using the border-image property
But anyway, reset the margins of the hr element to 0. By default it has a little margin around it.
hr {
color: red;
}
.hr-wihout-margin {
margin: 0;
}
<!-- Here is the header-->
<header id="Home">
<div class="nav-bar">
<div class="funBus-logo">Fun Bus</div>
<nav>
Home
About Us
Blog
Contact
</nav>
</div>
<br />
<hr class="hr-wihout-margin" />
<div class="image">
<img width="450" src="https://i.stack.imgur.com/wPTBW.jpg" alt="fun-bus">
</div>
</header>
I'm trying to have a ul and a span elements to stick to the bottom of their containing div. The only way I managed to so is through setting them with position:relative and playing with bottom: x for each element separately (according to its size).
Is there a more standard way to do it?
Here is the code: jsfiddle
<div id="header">
<div id="top_menu">
<span id="logo">TechSystems</span>
<span id="sub_logo">think smarter</span>
<div id="menu_content">
<ul>
<li>home</li>
<li>about</li>
<li>contact us</li>
</ul>
</div>
</div>
</div>
<div id="slideshow">
</div>
Try adding to #menu_content:
#menu_content
{
position:fixed;
bottom: 0px;
}
See: https://jsfiddle.net/x7p35mrz/
Below is the link to my current implementation of Navbar using bootstrap 3.1.1.
I have used container class to all Nav also. is it the correct implementation ? if I don't use container class to nav, it exceeds the width of Container. So I had to use it. Can someone please confirm whether its the right implementation?
When I click on any button, the MainContent Child div's Slide up or Slide Down, once it crosses the Nav bar. I want it to be hidden (Scrolling div which you see above the Nav Bar), but its not hiding. I've tried to add one more div above Nav, but even that exceeeds the width of container though its inside container. So I've tried to use container class for that also, it worked fine but when I resize my browser to small size that div disappears and again I am able to see mainContent child item moving able the Nav bar.
HTML
<meta charset=”utf-8”>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<html>
<head>
</head>
<body>
<div class="container">
<div id="header">
<nav class="navbar navbar-default navbar-fixed-top container" role="navigation">
<div class="container inside-bar">
<ul class="nav navbar-right">
<li class="active">About</li>
<li>Services</li>
<li>Our Staff</li>
<li>book</li>
<li>Gift Cards</li>
<li>Reviews</li>
</ul>
</div>
</nav>
</div>
<div id="mainContent">
<div id='Services' class="box">
Services
</div>
<div id='about' class="box">
About
</div>
<div id='OurStaff' class="box">
Our Staff
</div>
<div id='book' class="box">
book
</div>
<div id='Gift' class="box">
Gift
</div>
<div id='Reviews' class="box">
Reviews
</div>
</div>
</div>
</body>
</html>
Currently in the link you will not see the Div which I added before Nav.
http://codepen.io/anon/pen/DmiGs
you can add container . Implementation is ok
.navbar-default{
background: black !important;
padding-left: 0px;
border-color: rgba(231, 231, 231, 0) !important;
text-transform: uppercase;
}
QUESTION: I am trying to get my {{TEXT}} or ".acton" section to remain centered in the body of the page and between the footer and header at all times.
I'm using this template to build out landing pages in a marketing automation software called ACT-ON. So hopefully whatever fix we can put in for the body content to remain centered will take.
Here is my jsfiddle:
http://jsfiddle.net/misterizzo/dMu79/
<body>
<div id="bg">
<img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png">
</div>
<div id="main">
<div id="header">
<div id="top-left"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo">
</div>
<div id="nav">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
<div class="acton">
{{TEXT}}
</div>
<div id="footer">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
</div>
</div>
</body>
Hopefully this is my last questions on this template i've been building.
I sincerely appreciate all the help from everyone so far!
you can easely use the display : table,table-row/table-cell properies along with : vertical-align:middle; if your HTML is valid and with the structure needed.
Reset CSS should be loaded in front of your own CSS, it will, as well, avoid to use !important.
// comment // is not a valid comment in CSS, but /* comment */ is.
http://jsfiddle.net/dMu79/7/
basicly the structure is :
<body or wrapper><!-- as heigh/width:100%; and display:table -->
<header> as table-row</header>
<main> as table-cell and height:100% , it will shrink to leave space to header and footer</main>
<footer> as table-row</footer>
</body or wrapper>
Here is one solution that may work for you:
Demo Fiddle
CSS:
.acton {
width: 900px;
position: relative;
margin-left: auto;
margin-right: auto;
height: auto;
top: 106px;
}
You're HTML is broken in places and is missing a closing div. I've fixed it in this Fiddle and the updated code is below:
<div id="header">
<div id="top-left">
<img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo">
</div>
<div id="nav">
<ul>
<li>
<span class="button">NewsWorthy</span>
</li>
<!-- the closing span's were after the closing A -->
...
</ul>
</div>
</div> <!-- this div was missing -->
I fixed it by setting a margin top in the .action section.
Also I removed the position-right and position-left
Notice that the margin-top is set to 40%. This is because it takes in to account the nav and the footer. You can play with the margin depending on the other content that is added above it or below it.
working jsfiddle
http://jsfiddle.net/dMu79/9/
.acton {
width: 900px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 40%;
text-align: center;
}