Before to ask my question, take a look at this: http://db.tt/IdmsYZYS
I have some trouble with let black image touch the bottom, the top and the right side of the text box. So that in fact the black image will cover the whole right part of the spitted box.
I am using Wordpress. Maybe you have some tips for me. But just HTML code is also great.
Thansk a lot for helping me!
You can't set an element to have 100% height within a container that has a fluid height. You should try using the Faux Column technique, which solves your problem.
Related
I recently downloaded Flexslider and managed to extend the images, and I have two things I need help with. The first thing is that I want the slider to be full width, and apparently it is being blocked from that in .container by overflow:hidden. If I remove that piece of code, everything expands and the website doesn't look right, but it removes the space between the slider and the screen. Does anyone know how I can fix that?
And my second question is how I make a small space between the slider images. Here is an example of how I want it: Example
Here are my codes:
jsfiddle
Adding margin:0px; on the body fixes the problem.
Here's my code: http://pastebin.com/gjyKH5hD
Live example: http://rusti.dk/test/
I honestly don't know what I'm doing wrong. I've been fiddling with this for days now. I thought it was a simple task, apparently not for me. Would really appreciate a bright mind to help me out.
Basicly all I'm trying to make is two divs next to each other centered on the page. With a 1px black border going all the way around and inbetween.
Left box: 350px width, 600px min-height, used to display facebook like box.
Right box: 450px width, 600px min-height, used for the content of the page.
Background: One big image.
Could anyone help me out? I think it's the FB-likebox that might be the troublemaker, but I'm really not sure. :/
You've missed one closing </div> for the left box.
See: http://jsfiddle.net/2qj5a/
I've added it in line 12.
I can't figure out how to remove all the extra space at the bottom of this page. I am a beginner at web design and it probably shows, I only know HTML and CSS and then only a little, but any help with where I have gone wrong would be appreciated.
You have images within 'p' tags that are position:relative; that needs to be updated appropriately they are currently not visible at the bottom, but taking up space at the bottom of the page.They are the button images at the top right.
Example:
adoptaroadwork.png
You'll need to check your design and css to fix this issue.
web page is http://www.naifaraleigh.com/template2.php
css is http://www.naifaraleigh.com/layerstyle.css
I so much want this to work, to learn how to do this, but I am beginning to hate CSS and think that tables are not a bad thing after all! grins! Just kidding!
everything is contained in the div called container
I have managed to make the main content div slightly off center and rounded corners in white_back
I have managed to put in an absolute div to the right containing nav and logo
But I simply cannot, whatever I try, get the white_back div to stretch downwards to envelop the content of the web page.
Please please help, stop me turning back to the "Dark Side" of tabular layouts!
Thanks!
Do you mean #white_back{height:auto;} ???
Why do you have #white_back{height: 458px;} if you want it to stretch downwards?
Im a novice, apologies up front if this is unclear! I know what I want, but Im not sure how to get there or if its even possible with HTML/CSS. Ive been trying for a week with no luck.
The main content area is 955px wide. In the header, I have a logo in the upper right corner of this 955px width, but would like the logo to continue to the right, for computers that have a higher res. So the main header area is set to margin: 0 auto, and I can put a 1px wide sliver to repeat to the right which is ok, but I would prefer the image to continue, not just some boring gradient.
Is this possible?
I created this image to show what I mean but cant post it because i need 11 rep and have 10. ;)
In it, the logo has been split into Image 1 & 2, but of course, if its possible to overflow the centered 955px wide header, then it could be one image.
I can get it to work fine with two images, as long as the window width isnt altered - then you can see Image 2 moving and doesn't line up with Image 1.
Thank you for any help!
Thanks to both Tullo and COBOLdinosaur - I couldn't get your suggestions to work right (probably more to do with my lack of skills) but you guys helped me figure out the solution to my problem. Here's what I did:
Created the image in one piece, rather than two images. Floated right within a 955px wide main-header container div. And then I used negative margins to push the image further to the right. This seems to work great.
Thanks for the help!
Put the image in a div with a width of 100% and with a background color that matches up nicely with the image. Then for the CSS on the image remove the margin and include
clear:both; float:right;