I can't figured out a background problem. I want my logo and text background to strech to left, but the text has to stay in the main wrap.
thank you!
sorry for late, i played with media screen and width. Now its good for the customer.
On the top "PRÉMIUM ÖNKISZOLGÁLÓ AUTÓMOSÓ" background. and the logo black line.
http://redcarspa.hu/
Related
Many of you probably know the Firewatch Parallax in CSS pen by Sam Beckham, which recreates the parallax effect of the Firewatch website: https://codepen.io/samdbeckham/pen/OPXPNp
<div class="parallax__cover">
I want to put some text in this div to close out the parallax effect and I can't figure out how to center this text in my viewport.
Problem is, the surrounding div "parallax" is much wider than the viewport and it starts 1500 px to the left of it.
Any ideas?
I tried to center it the usual ways with an auto-margin etc. I expected the text to be horizontally centered but that does not work.
I currently have a DIV containing my fixed navigation bar in hopes to have a background image spanning across the screen behind the nav bar while the screen scrolls. However, the background isn't showing up. I tried this tip, but it didn't seem to work.
Here's my site:
http://www.whiterabbitstudio.us/
and this is the background thati's supposed to line up behind the navigation ribbon:
http://www.whiterabbitstudio.us/1images/head_bkg.png
Does anyone have any ideas? Thanks!!
It's hard to tell what you're actually trying to do, but at the moment you specified the head_bkg.png to be the background image of the <div class="header">...</div> element which has a height of 0px, thus not showing any background.
To show the background properly, I'd say you should add it to the navigation div and rework the layout of that part quite some bit, e.g. no negative margin-left, make the width 100%, center the content and add a background-size: 100%;
Besides, if you want to have the background continuous, you need to crop the image to avoid the transparent parts above and below.
I have a fixed height div and want to align an image to the bottom right corner with the text (of an unknown/variable length) to wrap around it. I'd ideally like to avoid using Javascript and the best solution so far appears to be to use a vertical spacer div above the image (which is the container height - image height) to push it down. This works perfectly on IE / FF but the text overlaps the top of the image on safari (mobile and standard). I'm not sure why this is happening, I appreciate the fonts are displaying differently but surely the text should flow around the div/image either way? You can see an example of what i'm talking about at http://jsfiddle.net/deshg/XScmK/, i've just used a coloured div with some text instead of an image in this example.
Any thoughts would be massively appreciated as I'm not sure why this isn't working?
Thanks very much as ever,
Dave
in your 3rd div margin-top:20px; for a quick fix, but this will push up your 1px wide div.
also try changing these heights: 141px to 140px, and change 159px to 160px.
I'm doing HTML and CSS for a site, and I've come across a very weird bug / behaviour that I can't pin down.
Take a look at http://www.atelierhsl.nl/antwerp/. There's a white line through the logo at the top. If I display:none the navigation at the bottom of the page, it disappears. But when I increase the bottom padding of the text column (.entry-content) it reappears again. This happens in Webkit, Mozilla and IE, so I know I must be doing something wrong. I just can't figure out what. Anybody?
This is caused by an anti-aliased line on the top your body's background images (just 1 pixel of light gray). The simple answer is to crop it using an image editor.
You may want to align the image to the top:
background: url("/wp-content/themes/transfer/images/bg.jpg") no-repeat scroll center top #1D1D88
The main problem is that the background image isn't as big as the the area it should cover.
Kobi's answer is correct, but if you don't mind a design suggestion: Rather than putting a black background image at no-repeat top for the body, separate body content into a container and a footer. For the content background use a smaller background image and tile it, or set the background color to black, since it appears you have no gradient. The footer div can then have a white background (inherited from the body, or just assigned directly).
You page is logically divided into main content and a footer, so the HTML should express that.
There is two solutions:
Just changed the body padding top from 60 to 40 or
changed the background position from center center to center top
I think, you should cut a 1px line from your background and to repeat-y it. There will be no bug, and you will decrease the image weight.
I'm trying to build the following structure on a page on my website:
The black border is the content container. The red border is the left content container and the gray area is the right content container with a gray background.
Now, I want the right content container to expand vertically dependent on the height of the left content container, so they will always have the same height.
How exactly do I go about this? Anyone know of a work-around to make the divs behave like a table would?
Thanks in advance!
All the best,
Bo
You use CSS display:table on the wrapper and display:table-cell on the left and right content. The only catch is lack of support in IE7 and below.
Floating columns with Dan Cederholm's faux column background technique: http://www.alistapart.com/articles/fauxcolumns/
An oldie but a goodie.