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.
Related
Already a long time ago I started with a new homepage project. I've learnt to build up a homepage on my own, so I'm still in the learning process. Therefore, it might be possible, that I've chosen sometimes not the best way to implement something.
I'd like to have a full width header (and footer) on my webpage. For this reason I created some div tags like this one below:
.header_container_overall-1 {
height: 90px;
width: 1000px;
padding-left: 1000px;
margin-left: -1000px;
padding-right: 1000px;
background-color: #f1f1f1;
}
The problem now is, that a browser (or a mobile device) shows a horizontal scroll bar. I read in a post, that I could use "overflow-x: hidden;". I applied this snippet of code into the "body" class of my css-file. The horizontal scroll bar disappeared, but you can still scroll to the right using the arrow keys on your keyboard.
Unfortunately, I kept programming my website knowing this bug (I thought, that I will fix this later, but I think, this was not the best idea). However, I now came back to this bug and tried to fix it. I found several threads, in which the same problem occured:
kennykee.com/118/div-100-width-without-horizontal-scroll-bar/
stackoverflow.com/questions/18274386/div-overflow-is-hidden-but-still-can-scroll-using-keyboard-right-arrow-key
Then, I tried the following steps:
adding the "overflow-x: hidden;" to several classes (especially the header and footer classes) with the aim to prevent horizontal scrolling. I tried several options and in the end, I got a website, where the header and footer got clipped at the body (for example I got a width of 1000px instead of a full width).
when I tried to use "position: relative;" or "position: fixed;" in different classes, I ended up, that the main page (which is now centered because of margin-left and margin-right set to "auto") was set to the left.
I hope, you understand what I mean. It's hard to describe, even more with my bad English ;-). And as you can see, I sometimes tried stuff without even knowing, what I'm doing. It was more and more "try and error" and I came now to the desicion, that I'm at the end of my html and css knowledge to fix this problem. Maybe you can see the problem right now or maybe you have an idea, what I could try to do.
The website with the described error is available on:
http://www.airlink.ch
The css file is available too:
http://www.airlink.ch/stylesheets/layout.css
If you need any further information, please let me know. And sorry for this long explanation.
Best regards
I did not read the post much further than your CSS. I am sorry but you should not be using hacks like padding 1000 PX and margin 1000px. If you want a full width div, set the HTML and body elements to width: 100%. Then add width 100% to your header/footer div. Make sure to add the meta viewport tag for width = device width. You should do a quick google for some resources regarding device width and responsive design in general.
Hope you can get what you want working!
I have a webpage in which I want to set height of head to 60px, but somehow its inner elements overflow and thus it doesn't show right. I'm suspecting that the logo's background is somehow setting the height to be bigger than it should be. I'm specifically setting background-size: 202px 56px; and height:56px;. The original height of background image is 250x69px and it should be resized to (auto calculated)x56px (or fixed 202x56px would be ok too).
If this would be displaying right, there should be a small 'border' on the bottom which turns blue when its corresponding top element is hovered.
The styles are originally written in SCSS with help of Compass and compiled to CSS. I've also used Compass to generate sprites. I've only provided CSS files on webpage. I'm not putting any code here because it's too large (200+ lines in each file). If I have to show SCSS files, please let me know.
The webpage I'm editing can be found on this address: http://stogrebro.com/page-test/
I'm originally creating this webpage on localhost so there might be some broken links. If there is anything important missing, please let me know.
i made some tries with your page and found out that the "over-height" of your <td> elements is due to the padding for anchor elements inside <td>. You have first to put it to 0 and then to apply the other paddings for left and right you are using:
#head table td a{ padding: 0px; }
Moreover you can just set the height directly to the <div id="head"> and set it with hidden overflow (which also makes the trick but lets <td> with wrong height).
#head{ height: 60px; overflow: hidden}
The background-size works fine and doesn't make any mistake.
Hope it helps you.
As the title states,
I am currently building a website, I am new to this and am trying to learn quickly. However this problem is quite frustrating as websites I have gone to do not help.
So at the moment I have an image that is of a high enough resolution that it should fill the screen easily. However when I load the HTML the image is zoomed in on the top right corner which is the only part visible. I have tried using "height" and "width" commands. I have also tried without them. I have attempted to use a <div> and <body>. However this problem still persists.
Another point is that when I use a <div> the whole screen is not filled, it still has a white border around what I believe is the <div>.
If you need to support older browsers, it's not as simple as just adding one or two properties.
Read this: http://css-tricks.com/3458-perfect-full-page-background-image/
Another point is that when I use a <div> the whole screen is not
filled, it still has a white border around what I believe is the
<div>.
You need this CSS to remove the default margin on body:
html, body {
margin: 0;
padding: 0;
}
OK, I would suggest you to make the width and height not in px but in % and secondly try setting the image using CSS
Read this Link, it will be more useful
http://css-tricks.com/3458-perfect-full-page-background-image/
I am working on my portfolio and I am having an issue with the project description shifting the images on the left downward when the browser resize. A picture of the issue here: click here When you resize the browser the text will shift over and move the images down. I've tried setting min-width but that doesn't help the text nor the image div to make sure it doesn't resize at a certain point.
Here is a sample link to the page itself: [click here][2]
I tried adding min-widths to a image element but that doesn't work either. I do not want to use absolute position as it will overlap on top on resize. Any thoughts or suggestions?
You have an image that is 1052px wide, which is in a UL element that has a margin-left of 1.5em. Your description box is 350px. Basically your #imagewrapper div needs to be equal to or wider than all of these elements.
Right now that's about 1422px. It will change if the effective font size for your UL.imagewrap-pad changes.
That's a pretty wide web site. You probably should make it a bit narrower if you're making it for general viewing, especially with all the tablets etc out there now.
Anyway, the code you want is
#imagewrapper
{
width:1422px;
margin:0 auto;
}
The second line makes it center on the screen.
P.S - get Firebug for Firefox, or use similar tools in chrome. They let you endlessly experiment with styles to find out what works for you.
To solve the problem just set the "width" property in #imagewrapper :
#imagewrapper {
width: 1430px;
}
Have You tried setting up width attr on the parent element to around 1800px?
div#imagewrapper {
width:1800px;
}
It will put a scroll bar at the bottom of Your browser, but if You want to put such a big image beside that text then You do need a lot of space. Just keep in mind that it won't fit in users monitors.
To make it look nice I guess You should apply that attribute to the body tag.
I see many sites that suffer from this, and I've only been recently been immersed in backgrounds that stretch 100%...
Examples are
http://brassblogs.com/blog/sticky-footer
http://beanstalkapp.com/
if you constrain the width of the browser and scroll right, it looks visually off: the background doesn't carry over. How could you go about fixing this?
Edit: heh, as soon as I figured out the answer myself, I got the answer.... haha.
Your problem happens because the browser doesn't know when to stop scaling the webpage when you resize the window. You'll have to specify the smallest width that your design can tolerate:
html
{
min-width: 1050px;
}
The min-width is kind of large, but if you make it much smaller, your background will bleed through and cause layout issues.
Also, you'll have some issues with layout if you use percentages along with borders, margins, and padding (which is partially why your background images aren't sticking properly).