Im trying to evenly center some content on a page. Here is an example of what I have done so far: Codepen RTC
How can I make the "hello" in the center of the page? I don't mind if the "some text before. sesquipedalian" gets pushed out of view.
Thanks
EDIT: Mockup of what I want
http://codepen.io/anon/pen/scfxy/
Absolute position to spans. If you want to get rid of them then add top: -50px;
Related
My website is http://www.danidolldesigns.com/
My content seems to be getting pushed right over to the right causing my site to have a horizontal scroll which I do not want.I can't find how to set the width of the site so content starts from the very left with an small indent and all content to sit directly under the header image with no horizontal scroll..I've been through the code but I just can't see whats wrong. Feel free to inspect my code on my site ...any response is really appreciated .. thank you
it is happening because of anchor tag under ".wrapper .container" div.
This anchor include the following css which make your content to goes over the container.
position: absolute;
TOP: 230px;
LEFT: 64%;
So just remove these properties from your anchor or remove this anchor if you don't need it. And give "text-align:center;" to .wrapper class to let the content align center under header.
I am having trouble figuring out how to arrange the divs on this page so that they will be centered and not left aligned. Also, I wanted to overlay a lock icon in the corner. I was able to get it on there, but i want it to not affect the actual size of the image, but to overlap instead...Here is the fiddle to the CSS and HTML:
jsfiddle.net/bpalmer318/tpb2c7un/1/
To summarize: How do i center all the page content and how do i overlay the second image without making the bottom image smaller? (Note** The images used are just NFL logos but this will be for business purposes with company logos later)
I hope that this post serves to show others how to make complex div pages with overlaying images
Thank you for the help!
You can't center a float element.
Here's a demo using inline-block
there are many ways to center the content of a page. Here just one:
On the html page:
<div id="center">your content here</div>
On the css:
#center{
width:85%;
margin-left:auto;
margin-right:auto;
}
of course the porcentage should be adjusted to your needs i've tried this one in your example and it seems to look centered. Try to get the percentage to be exacly the same with(or maybe a bit more) of the content.
Hope it helps.
you can also see this post it may guide you : How to horizontally center a <div> in another <div>?
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>
I'm having trouble getting the footer on my site to work. The footer is broken down into two sections. First section is the mainFooter area and the second is kind of the like copyright area.
I have logos in the copyright area and a logo in the mainFooter. I need to have two of them be aligned at all times. It's really one logo but split into both footers because it's a stupid logo.
This is it:
Because of that line, we have to split the footer in two sections. But the text "Art now" can never be misaligned with the building.
So my solution to this was to using absolute positioning on both elements, set right:0 bottom:0 and adjust their position using margin-top/bottom.
Problem is, this only works when the logo is really far out and not truly aligned with the rest of the content on the page since everything else is mostly centered. That's what I mean:
Personally I don't care too much about the alignment of the logo on the far right, at that point you've reached the end of the page, it doesn't overlap with the content in the footer and still looks pretty nice, but our clients designer (not web) is a stickler for these things.
This is the dev site we're working on
Does anyone have any ideas on how we could handle this? Have the logos in the footer but make sure things are aligned properly and aren't overlapping with the content in the footer?
Put a container div around the footer content (and logo's) that has the following css:
.container{
width: 960px;
margin: auto;
position: relative;
}
Now your absolute positioned elements will be positioned relative towards this container div, and will not move too far to the right, but stay in the bounding box instead.
Go to my blog and please tell me how to achieve vertical alignment :( My situation truly is different and I need help :)
The reason this is so difficult is because holder is the div that contains everything, outer are the icons at the bottom, and tooltip are the divs that pop up. I need tooltip to be vertically aligned but they are actually below outer. Each icon is connected to their post so you can't keep them all in one div.
how about:
#holder{
bottom:50%;
}