I'm trying to make an interactive google map page but I'm having a bit of trouble layering the divs.
My html looks something like this
<body>
<div class="wrapper">
<div class="header">
<p class="logo"> Put a logo here later </p>
</div>
<div class="nav">
<ul>
<li> link 1 </li>
<li> link 2 </li>
<li> link 3 </li>
</ul>
</div>
<div class="content">
<div class="main">
<h1>Google Maps</h1>
<div id="map"></div>
</div>
</div>
<div class="footer">
<p> Put a footer down here later </p>
</div>
</div>
and the related css looks like this
#map{
position: absolute;
overflow: hidden;
left: 0px; top: 0px;
height: 100%;
width: 100%;
z-index: 0;
}
.nav{
background-color: #fff;
width: 120px;
height: 500px;
z-index: 100;
}
What happens at the moment is the map takes the entire page (intentional) but I want the nav bar to float on top somehow. Any help would be appreciated. Thanks!
Simply add position:absolute; to your .nav
jsBin demo
that was to answer your last question (float nav bar on top of map somehow).
If you want everything to be over the map... do it this way:
<body>
<div id="map"></div>
<div id="everythingElse"><!--all other content--></div>
</body>
setting #everythingElse also to position: absolute;
Example: http://jsbin.com/xanen/3/edit
Related
So I have been busy with a navbar and I want to make it fixed but whenever I use position: fixed, the navbar does stay fixed but it creates whitespace and pushes everything down (the parent container and it's sister elements).
So what could be causing this and how do I solve this issue?
Thanks in advance for your help.
Screenshot of how it looks with the issue
The HTML
The CSS
nav {
padding: 15px;
position: fixed;
width: 100%;
z-index: 1;
top: 0;
}
.hero-section {
background-image: url(img/dylann-hendricks-Ll-A9nKuOhk-unsplash.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 0px 0px;
height: 100vh;
}
<pre>
<code>
<section class="hero-section">
<nav class="navbar">
<div class="logo">KM</div>
<div class="links-container">
<div>About</div>
<div>Skills</div>
<div>Projects</div>
</div>
</nav>
<div class="intro-container">
<div class="greeting rev-block"><span>Hi there,</span></div>
<div class="my-name rev-block" id="onemore1">
<span>I'm Khanya Mateta</span>
</div>
<div class="job-title rev-block" id="onemore2">
<span>Front End Developer</span>
</div>
<div class="contact-btn">Contact Me</div>
<div class="social-media">
<img src="img/github.png" />
<img src="img/linkedin.png" />
<img src="img/twitter.png" />
</div>
</div>
<div class="box">
<span></span>
<span></span>
<span></span>
</div>
</section>
</code>
</pre>
Try using this in the css for nav element:
left: 0;
right: 0;
Adjust the left and right values while using position: fixed.
Using this I solved the same issue in my site.
Thank you 😊.
I have a problem I just can't seem to solve despite following directions in my previous post, I just began learning html/css. This is my button as it appears right now:
here
& this is where I would like it to appear. It does not seem to move despite changing the top, left or bottom:
here
& this is where I want it to be. The background is simply an image its not multiple divs. this is the only code I have:
<section>
<div class="content">
<div class="container">
<div class="wrap">
<div class="fix-7-12">
<div><p class="ae-2">
<button style{
top: 100px;
right: 1000px;
left: 10000000px;
}
>Try yourself</button
>
</p></div>>
</div>
</div>
</div>
</div>
<img
src="assets/img/background/fire2.png"
width="1450"
height="850"
></img>
</section>
I think you should use left, top etc. styles with percentages. If we look at the center of the button in the second picture:
top: 35%, left: 60%
Also, you should change display to block in order to see the button as a rectangle element. I gave also width and height. You can change them if you want.
So, I changed your HTML code as:
<section>
<div class="content">
<div class="container">
<div class="wrap">
<div class="fix-7-12">
<div><p class="ae-2">
<button
style="position: absolute; display: block; top: 35%; left: 60%;
width: 120px; height: 60px;">
Try yourself
</button>
</p></div>
</div>
</div>
</div>
</div>
<img
src="assets/img/background/fire2.png"
width="1450"
height="850"
>
</section>
These are the screenshots:
There are a few mistakes in your HTML. Firstly, the style attribute needs to be a string. The position attribute needs to be first. So it would be "position: absolute;top: 100px;right: 1000px; left: 10000000px;". img tags do not have a closing tag.
Correct HTML:
<section>
<div class="content">
<div class="container">
<div class="wrap">
<div class="fix-7-12">
<div><p class="ae-2">
<button style="position: absolute;top: 100px;right: 1000px; left: 10000000px;"
>Try yourself</button
>
</p></div>>
</div>
</div>
</div>
</div>
<img
src="assets/img/background/fire2.png"
width="1450"
height="850"
>
</section>
I have a question about this: https://gyazo.com/1851299f16c3148c81f8e83682d38ff1
https://gyazo.com/05adf6012ba98bbae93ecda4dabbdffa
It can be a stupid question or just a stupid code. But how can i get that long block away? My logo is scaled and correct. But if i delete that long div block, then the logo unscaled, and be big.
Need advice.
Thankyou!
I created a few examples on jsfiddle for you.
1)
To get rid of the black bar you could do something like this:
<div class="wrapper">
<div class="Logo">
<img class="LogoNav" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/9front_logo.svg/150px-9front_logo.svg.png">
</div>
<li>Home</li>
<li>Over</li>
<li>Contact</li>
<li>bestellen</li>
</div>
example:
https://jsfiddle.net/x4912b7s/1/
2)
To move the links to the right of the logo, but still inside the black box:
.LogoNav {
width: 25%;
height: auto;
float: left;
}
example: https://jsfiddle.net/x4912b7s/2/
3) To remove the black box and move the links next to the logo:
html
<div class="wrapper">
<div class="Logo">
<img class="LogoNav" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/9front_logo.svg/150px-9front_logo.svg.png">
</div>
<li>Home</li>
<li>Over</li>
<li>Contact</li>
<li>bestellen</li>
</div>
css
.LogoNav {
width: 25%;
height: auto;
float: left;
}
example: https://jsfiddle.net/x4912b7s/3/
Hopefully this helps.
I am using an absolute div so I can overlap one div from another. The div that overlaps is the absolute one (.content). However, if the overlapped div (.left) doesn't fit the screen, a horizontal scroll bar doesn't appear of course. How can I make the horizontal scroll bar automatically appear if its contents doesn't fit the given width? Here is the css:
.left {
width: 70%;
height:100%;
float:left;
overflow-x:auto;
}
.content {
position: absolute;
width: 70%;
height: 100%;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 130px;
background-color: #2b3e50;
border-left-width:5px;
border-left-style:solid;
border-left-color:#153450;
padding-left: 20px;
}
Please help me figure this out.
EDIT
Here is the div structure:
<div class="topbar">
<div class="fill">
<div class="container">
Home
<ul class="nav">
<li> One </li>
<li> Two </li>
<li> Three </li>
<li> Four </li>
</ul>
<p align="right">Log-out </p>
</div>
</div>
</div>
<div id="loader" class="left" style="border-right-width:15px;">
</div>
<div class="container">
<div class="content">
<div class="row">
<div class="span14">
#content
</div>
</div>
</div>
</div>
<script>
$("#loader").html('<object data="#routes.Tags.map(false)" />');
</script>
EDIT
I surrounded the left div with a parent div.
<div class="parent">
<div id="loader" class="left" style="border-right-width:15px;">
</div>
</div>
<div class="container">
<div class="content">
<div class="row">
<div class="span14">
#content
</div>
</div>
</div>
</div>
With the following css for parent.
.parent {
width: 100%;
position: relative;
}
But still doesn't show a scrollbar.
In your html left is not child of content you can't make it scroll.
If you have parent > child then just use position: relative on parent block.
Here is example http://jsfiddle.net/4swN9/
Hello i seem to be having a little trouble doing the simplest of tasks tonight. Trying to make my primary-menu float to the right of my site site-name.
<header>
<div id="header">
<div class="g3">
<h1 id="site-name">
</div>
</div>
<div class="cf"></div>
</header>
<nav>
<div id="primary-menu" class="g3 nav">
<ul id="main-menu" class="menu links clearfix">
</div>
</nav>
<div class="cf"></div>
I dont know if i should be pasting in CSS code to help ut there seems too much from what i can gather. Your welcome to pop in and have a look. dont mind the mess.
Thanks
Add this style to header tag:
header {
width: 110px;
float: left;
}
and this to your nav:
nav {
float: left;
width: 800px;
margin: 10px;
}