Here's how it looks like right now:
my screenshot
Is there a way for me to center the area that has content, and place a repeating background image so the site doesn't look so empty?
Centering horizontally can be accomplished by wrapping the content you wish to center in a div, and applying the style:
margin-left: auto;
margin-right: auto;
to said div.
This will take care of your issue of space on the right. You can place a background image (repeating or not) using CSS as well.
Your larger issue will be the vertical centering. As far as I'm aware, there's (currently) no easy, cross-browser (including IE6/7) way of accomplishing that. I'd like to be proven wrong here by another user, though. :)
It looks to me like you just need some padding on the top and left in your content area.
Sorry I didn't realize your page was only a portion of the screen.
Why not splice your site into parts (divs) and use a fluid layout? Here is an article from Smashing Magazine about Fixed vs Fluid layouts.
Related
I've looked around for answers and I've tried plugging in everything I can think of, but I can't seem to figure this one out. I feel like I'm probably overlooking something really simple and obvious, but any help you can give would be really appreciated!
Basically I'm trying to customize this page so that the little character boxes are horizontally centered within their .wrapper div.
While the div itself is centered horizontally in the middle of the page (I've used padding: 0 15% for that), the content inside it is not.
Here is a pastebin of the entire code if anyone would like it. The relevant section is line 140. Thanks in advance for any help you can give!
The problem is the div containing the individual character boxes are using absolute positioning so any style you try to use on the wrapper div that contains them to center them will be overwritten by the absolute positioning. You could probably change the javascript that is writing the absolute positions to center the boxes in the wrapper div or you could possibly pad the wrapper. I was playing around with the numbers and had a couple boxes centered within the wrapper div but when it's resized the javascript rewrites the positions. I would've used bootstrap to make this page instead of using javascript to reposition things on resize.
Another alternative is
1) Remove padding on your wrapper div and set text-align center
2) For each of the character box, I am not sure what you are using the javascript for. If the javascript have no other use other than making those boxes horizontally center, you can remove it.
.chara remove the float center, remove height, add display inline-block, add padding 25px 0
3) .charaimg remove position relative, remove top, remove left
4) .charatitle remove height, remove position absolute, remove bottom 0
5) In your HTML switch the .charaimg and .charatitle
That should do.
And also for future question, it helps a lot if you can put your code in codepen or jsfiddle. It makes life easier for people who are helping you.
Honestly, before this problem I kinda thought that I actually knew something about css positioning, but it looks that I do not.
Here is what I have, I need to position the social buttons div on the left of the container and make it fixed so it does not move, but only until the bottom of that div is lined up with the bottom of the container in which it was positioned then it will need to scroll further. I do not know if I am explaining my self so that everyone can understand what I mean here so please take a look at the following example
The div with all facebook, twitter, G+ and print buttons is scrollable until it is aprox. 10px below the top of the browser, then it stops and continues to scroll only after the bottom of it is lined up with the container that it is placed in to.
Please help, I am kinda stack with it
This isn't a CSS question unless you're willing to make-do with position: sticky, which probably isn't what you're looking for. (Reading about it here)
If you're looking for a jQuery solution, then you could use ScrollFollow, where you can specify a container parent for the fixed-scrolling item.
I asked for help earlier which was amazing and I am grateful for it, but I'm in need of your guys' expert assistance.
http://www.mrandmrsmagic.com is the site I'm working on and after simplifying the code and not having the positioning be an absolute, the menu bar for some odd reason isn't scaling with the site. Also the testimonials tab is cut off, which I'm guessing is due to the width not being long enough?
Also, on smaller monitors (15 inches+), they're saying that the video gallery and photo gallery are off to the right three inches, is there a way I can add padding or a margin to make them stick to the middle like they do with a larger screen? Any and all help would be appreciated.
Ok...
Your Gallery is in a div that has been given a specified position.
e.g
#gallery {
position: relative;
left: 950px; /* This needs to be removed */
top: -560px; /* This needs to be removed */
}
That will always force the div off to the side.
What I think you want and correct me if I'm wrong is two columns.
That's actually quite easy to do and I've set up an example here to get you going.
In my example the two columns are floated left and right to give them space in the middle and the two divs with the class .placeholder provide the hight and width.
If you create something similar replacing each .placeholder with your image and gallery respectively then you should be able to keep videos within the main content.
Hopefully this helps.
Edit
I'll try my best to explain everything properly.
The content div in the example I linked was just there to wrap around the floated columns in that example. You do not need to duplicate it.
The columns are floated left and right to separate the content and place it side-by-side. Adding a float simply means that they are to position themselves as far in the given direction as possible within their parent container.
Floating content breaks the flow of the page though so the parent needs to have the class .clearfix added to prevent any content below the column from being disrupted. It also allows the parent to have height.
Positioning the gallery differently for different monitor widths will only work with browsers that understand media blocks within css which ie7 and ie8 do not. You are much, much better off with a two column layout.
I have a webpage with links down the left hand side of the page in a div that is floating left. I then have content to the right of that that is in a div floating right. The problem I'm having is that when the page is resized the content moves below the links.
I have tired putting the whole page in a wrapper div but when I did the links stopped working and I could not position the content where I needed too.
Here is the css for the wrapper div
#wrapper {
margin:0 auto 0 auto;
min-width:960px;
}
Floated elements will behave in that manner, since they're out of the page flow.
What you probably are looking for is a fluid two column layout.
The main problem is that you are giving the divs fixed widths so the first step is to change the widths of the divs to % or em.
Do this full screen to begin with, I would even go as far as creating a blank page with no content what so ever, just give the divs a different background colo(u)r. Do this as you then know the width of the content isn't interfering.
I would also float both divs to the left and maybe position them relatively to begin with.
I figured out the best way to go over the window resize issue is do like wordpress and even this site do: put balnk resizable margins around the page and make all the content fixed width.
"Liquid" style (with percents etc.) is cool but doesn't really look right most times, so the best thing is to build your page a little narrower than the full window and let different brawsers just change the margin size.
To do so I actually style the very html tag givin it a fixed width like 1000px or whatever and then margin-left:auto; margin-right:auto; to keep it always centered.
EDIT:
Put this in your css
html {
width:66em;
margin-left:auto;
margin-right:auto;
}
I have a page design I'm trying to implement with a header (menu bar) and underneath that a div with static width in css.
This div contains two divs - #contentArea and #menuArea, each of which have a header, middle and footer (header and footer have background images while middle fits to the content).
I've applied float: left and correct static width to #contentArea and #menuArea which works well, but I'd like to force these two to the same height. I looked to inline/inline-block solutions, but these seem to cause a lot of headaches for IE6/7. Unfortunately this design needs to display reasonably (not necessarily perfectly) back to IE6/FF3.
I've put a simple page demonstrating what I'm doing on my home server at http://home.theevilpenguin.org/c-Help/Index
Can anyone recommend a way to accomplish this or something to look into?
Thanks
You could try setting the attribute height: 100%; on the pageMenuArea div. That should make it the same height as the containing div pageBody.