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.
Related
I'm creating a basic generic web page with a photo gallery as practice here, but for some reason I cannot get the gallery div to float next to the sidebar div so that there isn't a big empty space above it. Floating them just destroys everything. When I inspect element it shows that there's a margin taking up all of the space to the right of the sidebar/above to the gallery, but I've looked through my css over and over and can't find where that margin could be coming from. I'm not 100% sure that's what is causing the issue though.
If anyone knows how I can make this position correctly it would be much appreciated. I feel like I've tried everything and I'm just not getting it.
Here is the link to the code on jsfiddle:
https://jsfiddle.net/laurynm/h6mu6hsb/
.gallery {
width: 80%;
position: relative;
}
#sidebar {
position: relative;
width: 230px;
}
Try this https://jsfiddle.net/h6mu6hsb/4/
#sidebar {
float: left;
position: relative;
width: 230px;
}
I took a stab in the dark, and made a jsfiddle demo for you to try out. In essence, I gathered different sections in wrappers, converted them to inline-block, and hope it looks kinda like what you wanted.
How about something like this so you dont have horizontal scrolling problems:
http://jsfiddle.net/espriella/fdmdwpp5/
Using display as table-cell
.sidebar{
min-width: 200px;
display: table-cell;
}
.gallery{
display: table-cell;
width: 100%;
}
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://booksandloafers.blogspot.co.uk/
As you see, underneath the search bar there is a gap before posts start. My layout is from a template, and the gap was created when I removed some gadgets from that area.
I would like to know if there is anyway I can remove this space without having to put those gadgets back in?
I am for sure a HTML novice, but I've tried other suggestions such as 'overflow: hidden;' but I have not found anywhere that worked. Any advice would be helpful! :)
Remove height from banner id
Change
#banner {
height: 300px;
margin-bottom: 30px;
margin-top: 20px;
width: 940px;
}
to
#banner {
margin-bottom: 30px;
margin-top: 20px;
width: 940px;
}
When working with HTML/CSS, I prefer to use the "inspect element" feature when working in Firefox/Chrome.
It allows me to noodle around with a problem without saving my work, so that I can figure out what's causing my problem(s).
In your case, #banner has a height of 300px, which is causing your current problem. Remove it from your CSS and things should look normal.
On my current project I am in the process of building tablet and mobile versions of the site and am testing it within the browser at the different sizes, though I am coming across a problem when resizing the browser.
The current version of the site can be found at: http://beta.residencyradio.com
Basically whenever I resize the browser to check how it will look on the tablet for example, white space is rendered to the right and the x scrollbar appears, even though the width of the containing element has not been exceeded.
I can pretty much solve the issue by adding overflow: hidden but this disables x scrolling completely, which I don't want.
I have tested this across all major browsers, all respond the same, so it must be to do with the CSS, what exactly I'm not too sure, but it's probably something very simple that I've managed to miss.
Any help would be greatly appreciated!
Thanks in advance, Michael
That whitespace is being created because your #second div is being pushed outside the boundaries of the viewport. Instead of pushing that div using margin-left, use position:absolute; in its place to fix that issue.
This is how it is now:
#second .content {
margin-left: 22.8125em;
}
The .content div has a width of 60em as it is.
You can use something like this instead and it should work fine:
#second .content {
left: 170px; /* adjust to your liking */
position: absolute;
width: auto;
}
I think....
change in your css file:
from:
html {
font-size: 16px;
overflow-y: scroll;
background: url("../images/bkgMAIN.jpg") repeat-y;
}
to
html {
font-size: 16px;
overflow-y: scroll;
background: url("../images/bkgMAIN.jpg") repeat-y;
background-size:100% 100%;
}
It looks like that image (with the cool gradient) isn't stretching horizontally when the page is zoomed out
Is this it?
I did the following:
html, body {
width: 100%;
display: table;
}
And it removed the weird whitespacing while also allowing to scroll in the x-direction.
I usually fix it with
html {
overflow-x:hidden;
}
It should work and hide the white space and rescale the site
Tried
html {
overflow-x:hidden;
}
didn't work. But..
body {
overflow-x:hidden;
}
Did.
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;
}