I have created a top navigation with these styles below:
div.topnav
{
position: fixed;
width: 100%;
height: 50px;
display: inline-block;
}
And I want to render a object, but that is being displayed behind my top bar, check it out on the image below:
What can I do to fix this?
From the image you provided I believe that what is happening is that your <p> is being rendered behind your topbar
if you add something like:
p {
margin-top: 60px;
}
you should be able to see it!
I'm using 60 because it would be 50 from the topbar height + 10 for a small padding
Related
I am having a very novice issue with positioning.
I cannot for the life of me figure out why I can't get the blue section at the bottom of my page to be positioned on top of all other elements with absolute positioning and z-index.
It seems like the div with the image is causing the issue but i'm not sure why. The layout logic seems simple.
I have a div on the left with a class of 'left-frame' that acts as a container for the left content. This div is styled as follows:
.left-frame
{
display: inline-block;
height: 100vh;
width: 45vw;
position: relative;
vertical-align: top;
}
(I also don't understand why I had to specify the vertical align. Without it the main image div and the left frame div were misaligned, but that's a separate question)
The right side of the layout is just a div with a class of main-image that has an img element inside and is meant to take up the rest of the screen. Styled as follows:
.main-image
{
width: 54vw;
height: 100vh;
display: inline-block;
}
.main-image img
{
width: 100%;
height: 100%;
object-fit: cover;
}
Finally, the bottom blue part is supposed to end up styled as a banner with contact information sitting on top of all other elements. Currently it is styled as follows:
.contacts__body
{
background: var(--main-blue);
width: 100vw;
position: absolute;
z-index: 10;
}
The absolute positioning with z-index is not functioning properly. I know it's something I'm doing wrong but I can't understand why.
Below is the final design I'm trying to re-create for reference.
Also the full code is here in a codepen with different images. https://codepen.io/dansoutar/pen/OJJJmdm?editors=1000
final shot
Thanks for any insights.
I have a nav that I want to turn into a modal using a CSS class toggled by javascript. The thing is, because it's a complex layout I can't change the HTML structure I have currently, since this is only for mobiles using mediaquery.
The idea is that the nav looks a certain way (i.e, without the modal class applied) but I will integrate a button which applies the class "modal" to the nav tag, to make the nav tag into a modal box which covers the whole screen.
Here is my code showing how it will look with the nav with the modal class applied: https://jsfiddle.net/spadez/fxnzdofh/3/.
Here is my question / issue. Keeping the same HTML structure, how can I change the modal css to make the blue box from the very top left of the screen, and not instead under the green header bar. The end result is the entire screen blue from corner to corner.
This is the code I tried but didn't give me the result I wanted:
.modal {
position: absolute;
width: 100%;
height: 100%;
background-color: blue;
z-index: 1;
}
Keeping the same HTML structure, how can I change the modal css to make the blue box from the very top left of the screen?
You forgot to add top and left to position it from the top:
.modal {
position: absolute;
width: 100%;
height: 100%;
background-color: blue;
z-index: 1;
top: 0;
left: 0;
}
Fiddle: https://jsfiddle.net/mfjsomca/
As you can see i have a image A and image B now when i click on object 1 an iframe comes up as shown in image B but object 2 goes to the bottom how can i fix this with CSS please help.
By making the iframe position: absolute you can take it out of the flow of the document and stop it from forcing your other elements down the page.
Something like the following should achieve what you are looking for I believe:
.header iframe {
position: absolute;
top: 20px; /* this should be the height of your top (black) bar */
left: 0;
}
Assuming you want to have them on the same line, all you need to do is enter code here display: inline; to both of your objects, then to move them to other spots on the same page use the 4 ways to move them: padding-top, padding-bottom, padding-left, and padding-right. For example:
.object1{
display: inline;
padding-top: 100px;
}
I have added a logo next to my menu bar, but anytime I minimize the browser window it moves and juts behind the menu tabs. I would like it to stay put no matter the size of the browser window.
Here is my HTML code for the logo:
<div class="headerlogo"><img src="http://passionpreneurenterprises.com/kerrizane/wp-content/uploads/2014/06/kerrizane2-small3.jpg"></div>
Here is the CSS speaking to the logo (I am using Thesis 1.8.4 so that's why the .custom is included):
.custom .headerlogo {
width: 236px;
margin-left: 160px;
margin-top: 0px;
position: absolute;
top: 5px;
left: 0px;
}
Also, here is the CSS code for the menu bar that is next to the logo:
.custom .menu {
margin-top: -474px;
margin-left: 165px;
width: 950px;
margin-bottom: 11px;
}
And here is the CSS code for the header image that is below the menu and the logo:
.custom #header_area {
background: none repeat scroll 0 0 #03989c;
height: 100px;
margin-top: 475px;
}
.custom #header_area .page {
background:transparent;
}
.custom #header {
background:url('http://kerrizane.com/newsite/wp-content/uploads/2013/10/Kerri-Zane-Header.png') no-repeat center transparent;
width: 1265px;
height:400px;
padding-top: 0px;
margin-bottom: 26px;
margin-left: -140px;
border-bottom:0;
}
Here is a link to the site: http://passionpreneurenterprises.com/kerrizane/about-kerri/ if your browser is maximized, you'll see the logo on the top left and the menu to the right of it. But if you minimize your browser window, you'll see that the logo moves and sits slightly behind the menu, which is not what I want. If I can find a way to make it stay put, that would be ideal. Thanks for any help you can give.
UPDATE: I see what was happening, when I was signed in and viewing the site, the admin toolbar was across the top of the site and making things look off when I was trying to position them. So I've removed the admin toolbar and put the logo where it's supposed to go....
BUT, there's still a problem. When I view it on my PC without the admin tool bar, here is how it looks:
The picture above is how it's supposed to look. But when I view it on my phone, here is how the logo appears:
Any suggestions on how to fix this? I have also updated the CSS code of the logo to depict the recent changes I made. Thanks.
Your current page seems to be different than the code you've posted, but see if this helps.
Most smartphones will try to scale images so they fit the screen, so if this isn't giving the result you want, you want to override this default behaviour and tell the smartphone what to do.
Try editing the CSS for your header image to something like
#teaser-image{
margin:0 0 10px 0;
width:90%; /* force image to scale on narrow viewports. to get the results you want, play with this percentage and or the margin values above or a margin on the page */
max-width: 1265px; /* set max width for image */
}
Good luck!
I ended up finding an answer to this in another forum. I needed to adjust my .headerlogo CSS code to include "position: relative" instead of "position: absolute" (the "position: absolute" was part of the original CSS I posted above in my question). Wanted to share in case anyone else came across this problem. The corrected code I used is as follows:
.custom .headerlogo {
height: 71px;
position: relative;
top: -240px;
width: 200px;
}
http://69.143.137.155/csa-consulting/index.php
I am trying to extend the grey menu bar and the blue background to fill the window (whatever the size) yet keep the content centered at a fixed size. Been working on getting this for a while and cannot seem to figure it out.
Thanks!
Use a background image on the <body>.
.body {
background:#F2F4EE url(menu-bar.jpg) TOP CENTER REPEAT-X;
}
Try adding the width style to your nav class. Like so
.nav
{
width: 100%;
}
Remove the following declarations from #container:
margin-left: auto;
margin-right: auto;
width: 1024px;
Add the following declaration to body:
margin: 0;