I have two problems with my website : http://test2.tamarawobben.nl
Problem 1 : In IE9 the header is placed well but the text area is at the wrong place.
Problem 2 : An area around the header stays white but it supposes to be shown the background.
Anyone a tip how to solve these two anoying problems?
Roelof
Edit 1 : Sorry, the wrong url. I will change it now.
Concerning the first problem, it's is not very clear what it is that it's not ok.
I guess the search field is supposed stick to the top of the page. Right now it looks like the body has a margin-top or a padding.
Actually looking at the markup, there is a textnode right after the body which adds the space at the top:
Remove it and the "sort-of" margin will go away.
Concerning the white background, you are using a GIF that has a white background! It won't magically dissapear. You have several choices:
change the image format to PNG and set the white to transparent
have separate images for the different parts (the search and the top of main content zone)
set the white color to transparent in the GIF (really not a good solution)
I also noticed that your <meta>, <title>... tags should be in the HEAD and not in the BODY !
Related
I have built a simple website which includes a parallax image gallery with accompanying text descriptions for each image. The gallery is underlaid with a simple repeating pattern wallpaper.
The images have no margin between them. Their borders are covered by the text box which has a higher z-index, and the discrepancy between the scroll speed of the images and texts creates the parallax effect.
I would like to allow the background wallpaper (bottom layer) to also be the background of the textbox but to achieve this, I would need to make the middle layer (the image) transparent where it is obscured by the text box.
I have no idea where to start with this - I suspect my best bet is to just ignore this problem remove the wallpaper altogether but perhaps there is a straightforward answer to this issue?
The included image has a semi-transparent text-box and borders to give an idea of the layout and the problem I'm facing. Would appreciate any ideas. thanks
Link to the image
I'm looking to build a progress bar that I will generate programmatically. I'm a css novice, at best. Here is what I have so far; using tips from this question.
Ideally, I would style the following simple HTML, but I'm open to adding more tags:
<div id="container">
<h2><span>Goal</span></h2>
<div id="bgblock"></div>
<h2><span>So Far</span></h2>
</div>
Two, maybe 3 issues:
Right now the "text over line" is accomplished by making the text white, on top of the line. This ends up cutting into the green background. To avoid this, I guess I need to have the text (without a background color) and lines on either side of it?
Obviously my formatting / margins / offsets are a mess, and the top of the box borders / hr alignment is not quite right (seems like the top text needs to be shifted up a couple pixels or the container down a couple pixels, but I'm having trouble doing this).
Thoughts on a cleaner solution that gets me where I want to be?
I've created a working fiddle for you. http://jsfiddle.net/avrahamcool/QpWqd/46/
the main trick is to differ the white background and the text of the h2 elements, giving each a different z-index.
both the background and the text are above the border.
but the green background come between the white and the text.
so the layers are:
border
white background of h2 tag
green background
text
Tested on: IE10, FF, Chrome
I have a question, since I couldn't find any solution yet.
So I have this image, which is fully transparent in the "center" and partially on the border as you can see. What I'd like to achieve is, the "border" should be transparent and the "center" should be red.But the border should be fully transparent. So in this case, white.
I'm not sure if is this even possible with CSS or HTML, the reason why I need to do this in CSS or HTML because I'm looping through the database, and every displayed record would have a different background color, but the "border" should remain transparent. So creating the whole image in 10 colors or more is not an option for me, because then the site might would be too heavy.
Thank you very much guys,
Mark
EDIT:
http://i.imgur.com/yMRxtqY.png
So to be more precise, I've created another image, what I want to achieve.
At the start I got the 2 images on the left side, the first one on the top is fully transparent in the middle, and has ~50% opacity on the border as you can see, so partially transparent. The second one is just an image, but the second image is always changing, like a slideshow.
The other image to the right would be the final result, I've set a gray background to be more visible. So what I have in my mind, is that possible? What I want to achieve is to cut the slideshow images border like this. But I don't want to photoshop every image which is in the slideshow, so I was thinking, maybe I can achieve something similar like this with CSS. I'm thinking in some z-index, or something. But thats not working, because I get an image like what I've linked on the top.
This is all I got: http://i.imgur.com/g7xpgQG.png
My problem here is, I can see the image on the partially transparent border, I'd like to get something similar what is on the first image on the right (without the blue things of course, I couldn't cut it, I'm not a designer :P )
Not sure if this is what you're looking for, but take a lok at this link : http://css-tricks.com/transparency-in-web-design/
You might have to take a look at the PNG file format you're using.
I can't, for the life of me, work out why there's a fat white line down the right hand side of my page in ie7. Especially as the background isn't even white. I want to be rid of it.
Here's a link and screenshot.
screenshot not yet allowed
The bar disappears with #content{display:none} . I'd appreciate help with a solution that doesn't involve getting rid of everything! Thank you (first question)
Your ieglobal.css is handing a width of 923px to your HTML tag which is pushing your page to the left. Remove that and it should center properly and remove that white piece that you are seeing (which is also being added by the same CSS sheet as a background, url(../img/iestrip.png); OVERFLOW-X: hidden).
I'm a person that learns best from example. Currently, I'm diving into the field of Web Development after fifteen years of developing desktop apps. I'm still getting used to all the web technologies used for developing modern web sites and everywhere I look, I see cool little UI elements and question how they're implemented. So I thought I'd ask you, the web experts...the wexperts :)
What are some straight forward or creative ways you could code this grid-breaking arrow...
The basic layout for this page looks like...
What would the html/css code look like?
Would you split the image into multiple images or could you use a single image?
I'm sure this is a really simple concept and it completely boggles me. I'm sorry if this is a strange question, remember I'm a noob! :)
Thanks in advance for all your help!
Here's a link to the original tutorial where I found these images
If you look at your mockup the Header Panel includes the height from the top of the green box to the bottom of the box.
background: green url(images/header-bottom.jpg) no-repeat bottom left;
That jpg file includes that last 70 of so pixels in height including the whole arrow. Since your header and navigation are below where that arrow goes the containers will be exactly how you show it.
This also enables you to have Submenu and Content to just have background colors since the only gradient you seem to have in those two regions are in the same zone as the arrow in Header Panel.
You could make a rectangle image which is wide and short to handle it. Use the same colors as the rest of the page so that it blends in. Check it in all browsers to make sure the image renders the same as the html colors. With some image formats this is not the case at least in some browsers.
There are so many ways to do this... there are two or three ways that are better than most.
Here is an image of what Ballsacian and Sean are talking about. Ignore the black bits of the top of text on the bottom, imprecise screenshot taking on my part.
alt text http://img171.imageshack.us/img171/9392/picture6e.png
You can make the green part of the arrow transparent and save it as a gif or png, since the slope appears to be 45 degrees (no jaggies in GIF). You would still have to edit the image to match the subnav and content background colors if you ever change them, but the transparent triangle will automatically show the header background color through.
You would also have to remove the margins between the header, subnav, and content containers.
The Photoshop guy who made this clearly wanted the background to show through "naturally" by making the margins between the header and subnav/content, but that is impossible without un-semantic markup with the arrow. The way you could do this without even using CSS is to just put the image in right after the header, in between the header and subnav/content.
<header>
<img src="arrow.gif" />
<section class="subnav" />
<section class="content" />
Then make the line be transparent instead of the arrow. Now you would have to change the image if you ever changed the header, subnav, or content background-colors, but not the body background-color. This accomplishes what the Photoshop guy wanted in spirit, but is ultimately not as satisfying markup wise.
I can see that this concept is very awesome in photoshop, you only have to change the background colors of each of the sections and transparency takes care of the rest, cool! If you were confused as to how to do this and keep the Photoshop guy's concept true to itself, I don't blame you. It is impossible to do with basic HTML and CSS with images. Maybe with SVG you can do it.
For fun, here is the super-optimized sprite way of doing it. This requires you to put in a huge vertical transparent space between the arrow and the content top gradient. Then use this background on the UL of the subnav and the div/section of the content container. Set the background-position to 0 -(verticalspace + arrowheight) and repeat-x for the content. 3k single http request.
alt text http://img37.imageshack.us/img37/8503/arrowy.gif