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>?
Related
Sorry if this has been asked before. I'm very inexperienced with CSS. I tried looking through previous threads to see if I could solve this problem myself, but I've had no luck so far.
The website is http://greenemusiceducation.com/
The container right underneath the site's header is forcing all content (in this case a slider) to align to the right. In the 'site-inner' and 'wrap' classes (the classes that are listed right underneath the header in the sites source-code), I've tried editing the parameters but the changes don't seem to have any effect whatsoever. This container alignment issue is consistent across different pages for the site.
On mobile devices, the site loads fine and operates as expected. On Chrome, everything is right-aligned. On IE 11, the slider doesn't show up at all.
I would be grateful for any help!
.content has float: right;. If you want to center it, remove the float, and use margin-left: auto; margin-right: auto; to center it horizontally. Since the element has a defined width, that will center it horizontally. Here's a good resource on how to center things - https://www.w3.org/Style/Examples/007/center.en.html
You can nest the style that is sliding to the right within a paragraph html heading with an inline style that sets the text for that to center. Even though there are other things beside text, it will still center the content of the container nested within it.
<p style="text-align:center;"><div="container></div></p>
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>
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;
JSFiddle
I'm creating an image gallery that, ideally, should have a column of thumbnails on the left with a larger image on the right with both sections aligned along the top vertical axis.
To do this, I've floated the thumbnails and larger image left and right, respectively, and tried every combination of clear:both and overflow:hidden I could think of to achieve the top alignment to no avail. Any ideas?
I've included a JSFiddle at the top and an image below to give an idea of what I'm going for.
Put div.large-image before div.thumbnail in your HTML.
I'm not exactly sure why this happens. This article briefly discusses it. The answer/reason is probably buried somewhere in the CSS float spec.
I wrote a cool simple JSFiddle to show how the gallery should be displayed, and how you can align the images.
You have to be careful with using this JSFiddle in your code because some of the elements you used in your question's JSFiddle have pre-specified properties like display:inline-block or other things that might need to be overridden in CSS for the gallery elements. This is also for browser-compatibility.
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%;
}