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;
}
Related
On my homepage, I'm trying to make three images span the entire width of the browser window. See my site here: http://accelfoods.com. I want the last 3 images on the page (About AccelFoods, Industry Engagement, Portfolio Companies) to be the same width as the image directly under the navigation.
I've figured out how to control #page-body and can make the image go to the edge of the left side (like this: http://imgur.com/gfXPyPK). But I don't know how to make the white space on the right disappear.
I've commented this CSS out for now until I figure it out, but here's what I'm using to manipulate the images:
#page-body {
margin-left: 0px;
padding-right: 0px;
border-right: 0px;
margin-right: 0px;
overflow-x:hidden;
width: 100%;
}
Any help would be greatly appreciated, thanks!
first of all, remove "max-size" parameter from:
#banner-area, #page-body, #page-footer{
width: auto;
}
then add this:
.sqs-block-content {
width: 100%;
}
.image-block-outer-wrapper.layout-caption-hidden {
display: block;
float: left;
position: relative;
width: 100%;
}
.sqs-block-image .intrinsic {
display: block;
float: left;
margin: auto;
max-width: none !important;
position: relative;
width: 100% !important;
}
but there's also script adding a strict width for this intrinsic class, I cannot see that from the first glance, it's kind of encription there and it will take time to understand it... though, the suggestion I'm giving you here definitely overrides the script.
P.S.
I would reccomend you not to use this kind of sitebuilder(s) (you definitely use some kind of) - because there's pretty tough class generator and if you need further updates there -you'll get pretty much more troubles.
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;
}
The problem that I have, it´s that after going from section to section (after the page it´s loaded completely) the page does a strange load that kind of "jumps" the page when you load it, it´s something quickly but you can notice it and it´s annoying, like the whole wrapper jumps to load... What is wrong with it?
thanks
you need to add some height for your top panel with logo, if it's that what u have on mind... that what i'v see and what is jumping :)
smth like that:
header #header_logo {
width: 122px;
margin: 0 auto;
padding-top: 25px;
height: 108px;
position: relative;
}
but other things look fine
Looks like the header is loading just a bit slower then the rest of the page. You can solve this issue by giving the header fixed height in your css
change the following in your css:
header {position: relative;
}
in
header {position: relative; height: 200px;
}
I didn't test this and I don't know if 200px is the correct height.
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
I have a movingboxes jquery plugin on my web site, and the left side of the panels in the box are shifted over approx 40px.
I suspect this has something to do with my stylesheet padding something but I can't seem to find it. Can anyone explain what is shifting this over?
My site is www.generationd.com and the movingboxes is found at Products | High Availability Asterisk, then click Screen Shots tab.
Thanks!
If you are referring to the weird space on the left of the screenshots slider thingy, the offending css seems to be:
.mb-scrollContainer, .mb-scroll {
width: 830px;
height: 100%;
overflow: hidden;
margin: 0 auto;
padding: 0;
position: relative;
left: -35px;
top: 0;
font-size: 18px;
}
It's a bit half assed as i changed the width to acomodate pretty much the width of your slider thingy, and had to move it 35px to the left.
It may take a bit more work, but at least you have an idea of where the problem is.