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.
Related
I have a bar at the bottom of the website for certain content. The problem is that it's currently not extending (width) to cover the entire screen despite the code to do so.
HTML is rather basic
<div class="bottom-ulity">
other content goes here
</div>
CSS:
.bottom-ulity {
height : 57px;
width : 100%;
right : 0;
position : fixed;
bottom : 0;
background : url('../images/inner-show-text.png') repeat-x left top;
z-index : 1000;
}
I have tried giving a min-width: 100%, tried adding the 2046px as min-width. I looked at some other pages and saw recommendations with "background-size: 100%" and "background-size: cover". Both of these lines of code give the same result, it makes the image itself extend properly however it loses all its effects such as the gradient and instead gives me a basic gray color.
I tried deleting all the divs inside to see if the code inside was causing this, but that wasn't the case either. When I added "background-repeat: no-repeat;", I noticed that the image would only show up once and it wasn't extending at all, leaving a massive gaping hole on where the bar is supposed to be (zoomed out far enough obviously).
Here's an image showing the issue:
I found a hack for the problem, at least one that will be good enough temporarily. I decided to add background-size: 100%
to the css which seemed to fix the problem until I started to zoom in. While the image itself was one and extended 100% in width as it should have, it would start to move up the screen despite being a fixed position with bottom and right set at 0. What I decided was to add
background-size: 200%;
This fixed the issue though that border that is part of the image obviously is twice as big at the moment, which means while it works perfectly, the border being twice as thick it doesn't quite as elegant.
UPDATE: A fix to that solution is simply lowering the px that will be duplicated if the img allows in half. Since the background-size is at 200%, it means everything is multiplied. So if you have a different % to fix a similar issue, keep in mind how many pixels you had before making changes.
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.
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'm creating a pop-up with a background image from CSS as below
#gui-01-Qa {
background-image:url(path/to//file.jpg);
background-repeat: no-repeat;
background-position: top left;
}
This all works fine apart from (what looks like) a boarder of approx 5px being added. It's not coming from my code, but both IE and Firefox are adding it. So whet's it coming from ????
Any ideas would help
Many thanks
Giles
That border is most likely a padding or margin on the body element. Just add html, body { margin:0; padding:0;}, or use a CSS reset.
If you're wondering how to stretch a background image to fill the entire window regardless of resolution while preserving the aspect-ratio A List Apart recently published a very good article on the subject.
Maybe the element with your CSS ID "gui-01-Qa" is causing the border. Try to set margin and/or padding to 0.