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;
}
Related
In my splash screen I'd like to center the 'close' ('X') button on the bottom of the page, and it has to adjust itself to fit any computer or mobile device screen. In the CSS it can be found starting at line 206. I've tried these things:
position: absolute
I tried margins at different sizes or no margin
top: -999em;
right: 10px;
Here's my CSS.
Here's the whole App.
The close button in the splash screen of this app is placed how I'd like it, besides that it moves in certain browsers. I'm not able to figure out how they did it.: https://willcountygis.maps.arcgis.com/apps/StoryMapCrowdsource/index.html?appid=20ff154f5fbc4c99bc54bd2e6b8cea7e
The most similar question I could find was a post I largely based my CSS off of: Splash Page with Pure CSS and close button
centering of elements in the screen can be done with the following CSS. If you place it insode a parent element, make sure it has a position property in the CSS.
You can play with the top and bottom property settings to position it.
.screenbutton {
width: 120px;
height: 120px;
border-radius: 50%;
background-color: lightblue;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
<div class="screenbutton"></div>
I have been building a website using bootstraps scrollspy. So far so good, except that carousel buttons are appearing over my footer
Here is the footer css:
.footer {
position: fixed;
bottom: 0px;
padding-top: 15px;
width: 100%;
height: auto;
background-color: #222222;
}
Any way to fix this?
like #zack6849 said if you add the z-index property to the .footer css it should resolve your issue provided you spec a value higher than that of your slider. You should inspect the element and see what the current z-indexes are, or just use a real high value for your footer like z-index:10000;
you can read more about z-index here
How would i go about making the div i am using to contain the page stretch all the way to the bottom of the page.
You can see that here: http://csgoshack.com/shop/index.php?page=cats The white div don't go all the way to the bottom of the page this is making it ugly.
Whats the best way to go about making this always stretch to the bottom of the page relative to the browser size?
Thanks.
If you need any code of the website to help me do this please ask.
EDIT Right all i really want is that white bar to stay static over the background and then let the products scroll over the white box so its always in the center of the page how is this possible?
I would move the top bar outside of the whitebg as it might make this easier.
Set your body:
padding: 0;
Set your .whitebg:
position: relative;
left: 50%;
margin-left: -625px;
top: 0;
padding-top: 60;
height: 100%;
You'll probably notice how you have a scroll bar on the right even when it isn't necessary. I think moving the top bar out of the whitebg will remove your need for the padding-top: 60 which should help get rid of the scroll.
** EDIT **
If you move the top nav bar outside of whitebg I think it works well leaving a lot of your css as-is.
.whitebg
position: absoulte;
left: 50%;
margin-left: -625px;
top: 50px;
padding: 10;
height: 100%;
** EDIT #2 **
The key here is to get your background to encompass the area you desire. Then user other inner elements to handle positioning of the contents within. If you try to add a margin or padding onto the outer most background element, you'll find that it will exceed the desired size since those will always add on to the height or width.
.holder
remove the padding-top
.whitebg
remove all padding
.bodycon
add margin-top: 50px;
change margin-bottom to a normal margin
.fotter
add a margin if desired
Try setting height: 100% on .whitebg selector
Just inspected your page..try to set the bottom: 0px; to your whitebg class
.whitebg {
..your existing code..
bottom: 0px;
}
First ill ask why you have all meta tags in body?:)
If the blue bar is fixed position you can try
html, body{
height:100%
}
.whitediv{
height:100%;
}
Or just doo simple jquery:
var docheight = $(document).height();
$('.whitediv').height(docheight);
And make it as function on window.resize
This Code should help you,
.WhiteBag{
height : 100Vh;
}
Ask if you have any doubt
Add these in style
.whitebf
{
height:800px;
width:100%;
}
this one in your footer
footer
{
position:absolute;
bottom:0px;
}
I'm created a sitemap for a website I'm developing and I'm having some trouble stretching a background image across the entire screen as shown in this screen shot. Screenshot
As you can see, there is a border along the right side and the bottom that I'm trying to get rid of. The markup I'm using is
#sitemap {
background-image:url(images/gradient-sitemap.png);
position: relative;
left: -10px;
top: -1px;
width: 100%;;
height: 225px;
}
Try to remove all from your body tag and HTML
html, body{margin:0px; padding:0px border:0px}
set the width to 101% and the height to something more than the current 225px
While making a site, I came across a problem and I hope you can help me. It's probably something very easy, that I don't know about.
The problem is, I am making a website with a menu on the left with links that load in the iframe on the right. the left menu has to be 215 pixels, and the right frame has to be the rest of the screen.
For some weird reason, this iframe only want's to be 300 pixels, so if I want to load a page that is more, it stays at 300 pixels.
The site is here, click for example on "makkelijke levels", the error message from 000webhost should be the entire right part of the screen but just stays at 300 pixels.
Thanks in advance, Friso
Is this correct CSS?
right_iframe {
position: absolute;
left: 216px;
width: auto;
height: 100%;
float: right;
margin: 0px;
border: 0px;
}
Shouldn't you change the width from to 300 px?
width:auto isnt working because you need to specify the right position too.
this should work, although i havent tested it:
.right_iframe {
position:absolute;
left:216px;
right: 0px;
width: auto;
height: 100%;
margin:0px;
border: 0px;
}