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?
Related
I've got a Boostrap website with a navbar across the top and two columns divs in a row. The first column contains an image and should always stay fixed in position. The second column contains (potentially) a page or two of text and should scroll independently.
I've used position:fixed to hold the image in position, but my issue is that I would then like to add a link underneath it that links to the terms and conditions for the page.
BootPly
Is this possible?
Many thanks.
There a couple ways of doing this. I won't go into code since you don't have anything to work off of so I hope you can understand my explanations.
You can try simply putting the link position: fixed as well and set the top property of the link element so that it'll be positioned below your image (you can play around with this).
Use a div that is set to position: fixed that will contain both the image and the link. Then you can just simple put the image inside the div without any positioning and the link should go underneath the image without any positioning either.
You can set the text on the right side to be overflow: scroll and set the width/height of the right text in the div so that it can scroll. This will essentially keep the document still but allows the user to scroll up and down the text content inside the right side div.
Number 1 is the quickest solution, number 2 IMO is the best solution. If you need some help with the code, post a Fiddle so we can see what you're working with.
Try this:
DEMO
<div style="position:fixed">
<img src="http://placehold.it/100x300" class="img-responsive">
Terms and Conditions - Privacy Policy
</div>
http://codepen.io/MarcMurray/pen/GBwEt
I'm curently laying out a page for an assignment, and am having bit of a brain fart in regard to positioning the content container beside the side bar and below the header.
I know it should be a simple fix, but when i change the margins it pushes the whole page down.
Can anyone see what I'm doing wrong?
Add float:left to .cardinfo CSS class
I'm learning HTML & CSS, and I'm having an issue.
My page is already built : a header, some blocks, a footer. Very simple, I'm a beginner.
I'd like the footer to stay fixed on the bottom until it reaches a limit situated 50px under the last block (if we scale the viewport). Then it should just stay there like a normal block... But I can't figure out how to make it happen!
Could you help me, please?
By the way, I speak French : if something isn't clear enough, please tell me and I'll try to explain.
Thank you in advance for your help,
Adrien.
There are many different ways to handle this with purely CSS.
Firstly Twitter Bootstrap has a nice means of doing this. Link is here
Or you could use the CSS Sticky Footer See here
The key is to create a negative bottom margin in the main container, using the exact height you want your footer to be.
I hope this helps.
To preface this question, I am very VERY new to html/CSS so go easy on me please :)
I am currently designing a web-page that has a fixed position header at the top. The header contains a logo, some drop-down menus, and a right floated container showing the name of the person currently logged in.
The problem that happens is if I re-size the screen to be smaller, the elements of the header wrap onto the next line.
The gray background is a parent div (holding the logo, the drop down menus, and the logged in info) with a width of 100%, a fixed height and fixed position. I initially had the logo and the list of menus set to float:left to keep them in-line, but have been playing around with display:inline-block to see if that can help anything (sadly, it hasn't much). The container all the way on the right holding "Logged in as Alex " is set to float: right
I have tried giving the header bar a fixed width, as well as setting its overflow to auto - neither option fixed the problem.
In my perfect world, at the point where the content begins to wrap now, I would like the entire page to horizontally scroll instead of pushing the content to the next line. A good example of the functionality I'm looking for is the top bar on Youtube, where the items squish together as you minimize the screen and the page starts to scroll horizontally when they can't be squished any closer.
I've been struggling with this for many hours over the last few days, and happy help or direction would be greatly appreciated. Thanks :)
I tried to post images but I don't have enough reputation. I have images that I could find a way to send of before-after resizing if anyone wants
You can specify
min-width
and/or
min-height
:)
overflow is your friend:
Use overflow:scroll on the container, that should fix it. More on overflow here: http://www.w3schools.com/cssref/pr_pos_overflow.asp
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;