I have a problem with my new website i'm designing in HTML5.
It's a single page site with 5 different sections.
The home page is index.html#home and all sections appear properly, except of index.html, which is zoomed-out.
All sections have the same CSS:
width:100%;
background-color:#7fffd4;
padding:5px 0px;
margin:0px;
Here are the screenshots:
Normal:http://i.imgur.com/VO8U28o.jpg
Zoomed-out http://i.imgur.com/NZ11fHy.png
If you have any idea how to fix this i really appreciate it.
Chrome remembers the state of the zoom for each URL you have set, make sure you haven't accidentally zoomed out on the index page.
Press CTRL + 0 on the index page to check (or go to view > actual size).
The Text on one section is pretty long. I think this is causing the zoom-effect. Try to shorten the text or auto-wrap it with CSS.
You could put the long text in a <div id="someid"> and change your CSS
like this:
#someid {
width: 100%;
padding: auto 30%;
}
auto is top and bottom and 30% is for left and right.
You should adjust the 30% like you want.
It will format your divs to always use 100% of the given browser window.
Thank you both for your quick reply.
The index.html was in fact zoomed out in chrome, although i put it to 100% on some other subpage of my website.
I'm going to wrap the text anyway, that was a good idea. Thanks again.
Cheers, stax
Related
I have the problem, that I have a header with position:fixed. On the page I want to use normal HTML Links or Anchors. If I click on one of the links, the screen jumps to this anchor, but it is at the top of the browser window. So the header is above the anchor and I am missing 100px of my content an have to scroll up, to come to the actual anchor.
Does anyone know a solution for this?
You have 2 things going on here. Not only do you have a margin/padding issue with your content and header-height, but you'll need to make a buffer div above your sections so that the hash doesn't go all the way to the top.
Also, you should keep in mind, that at the time of writing, most touch devices can't deal with
position: fixed;
Take a look at this code for the header: http://codepen.io/sheriffderek/pen/qKLIo
And look at this for the hash links: http://css-tricks.com/hash-tag-links-padding/
Good luck!
I'm pretty new to using HTML and CSS and have been building a website for my band. I've uploaded the first version of the site to the net and have been experiencing problems with the text on the "Bio" page when viewing in resolutions lower than 1440x900. Originally the whole site looked weird at lower resolutions but since I added a wrapper it stopped that for everything except the text on the bio page.
When I was creating the site I used the <pre> tag to add the text and I wonder if this is part of my problem? does anyone know how I can rectify this problem? The text is supposed to go to the right of the images.
The website is www.wealmostwere.com
Any tips or hints are most appreciated :)
Many thanks!!
Jay
just add
position: relative;
width: 100%;
to #biotext
This will solve your problem..
When you give an element a width of 100% in CSS, you’re makeing this element’s content area exactly equal to the explicit width of its parent — but only if its parent has an explicit width..
First of all, I am sorry for the informal title. I wished to express how I really feel about the issue. I've been cleaning up some things on my site, http://www.gfcf14greendream.com/, and through another question I was directed to this site to debug my html: http://validator.w3.org/ . I've tried it with my site, and have corrected a few errors, but I'm stuck with one, http://validator.w3.org/check?uri=gfcf14greendream.com&charset=%28detect+automatically%29&doctype=Inline&group=0 . As it says:
Line 72, Column 48: The width attribute on the td element is obsolete. Use CSS instead.
<td width=200 style="vertical-align: top;">
But if I try to change this to <td style="vertical-align: top; width: 200;">, the text next to the fading pictures appears to ignore it and resize it self every time it changes, at times becoming too large to be displayed next to the pictures and instead appears below them. Why is there such a tendency to resize the elements, which at least in my case would mess up my layout? Isn't there a way to strictly specify a size and have the browser stick to it (I use chrome), regardless of anything else? I have tried most if not all types of css overflow, yet the text is always displayed on a single line. I've even tried giving the td that holds the text a height, thinking it would realize that with the extra height it would break the text in lines, but it is again resized to get the smallest height possible
If you notice that at the front there is some extra space at the bottom (there is a scroll bar but on an average size screen no need at all for it), it's because I had this problem before with the vertical menu on the left, for which I had to give a bigger height to display completely, again, because making it 100% of its size ruins its display because upon the browser (or whatever tool that does it) loading the site the menu is made smaller and not every button is seen properly. Please if anyone knows how to fix this (I'm really interested in being able to control the sizes of my html elements without browsers or other tools resizing them for me) let me know, thank you in advance for reading
You really shouldn't be using a table in your layout. There is no tabular data to display. Tables are (usually evil).
That said, apply this style:
#desc {width: 200px}
#wrap img {width: 400px;height: 350px;}
and removing the widths and heights on everything should work just fine.
Just an additional critique:
body {
background-attachment: fixed;
background-image: url("http://www.gfcf14greendream.com/images/greentwi.png");
background-size: 100% 100%;
}
and remove your div#background, and img.
Could anyone please explain why on this page (and some of the other pages a part from Home and About) http://leedsragfashionshow.co.uk/wp/index.php/committee/, the title of the page is cut off showing only half of the word.
Sometimes on refresh it will show the title in full with the grey background and sometimes revert back to only showing half.
Experiencing this on Chrome
It seems to load fine on Firefox and Chrome. The only "title" I see being cut is the title html tag being cut because of tab size restriction in chrome. Maybe I'm misunderstanding? All looks fine.
It looks like you have a lot of width: 100% and width: auto. You might be overwriting yourself in a few places. Try removing some of those and see if that helps.
If you go on to my website, lookaroundyou.net and click on USA (which is where there are more video's than anywhere else on the site), the websites layout changes completely.
Does anyone have an idea as to why this happens?
I don't want to visit your site if it's crashing Firefox, but if the problem is indeed due to more content causing a scrollbar to show up and thus changing your page width, one easy way to sort that is to always display a scrollbar (it will be disabled if there is not extra content below). In this way, the width of the page will be the same regardless of length.
<style type="text/css">
html { overflow-y: scroll; }
</style>
I'm sure there's some other non-standard setting with IE that will do the same; that's left as an exercise for you.
It's causing a scrollbar because there are more videos.
I'm using chrome and I don't see any difference other than the page shifts when the scrollbar on the right appears.....