I struggled for some time with this issue. My landscape images looked great but I couldn't get my portrait orientated images to align properly. This is the code I had and the auto margin and padding seemed to have no effect at all and the image would always align to the left of the slider (parent element).
.slider img#portrait {
min-height: 100%;
width: auto;
margin: 0 auto;
padding: 0 auto;
}
I managed to find little snippets of what might solve the problem from different sources so I wanted to include all of the ones I used here in one place.
This is now what I have which works well:
.slider img#portrait {
height: auto;
width: 50%;
display: block;
float: none;
position: relative;
margin: 0 auto;
padding: 0 auto;
}
Images are by default displayed as inline-block elements. So change this to display: block;
If there is a float: left; then the rulemargin: auto; will have no effect either, so set float: none;
The margin auto will have no effect either unless the image has a set width so width: 50%;
And don't forget to set position: relative;
If you are not modifying the display property of images then you can use: .slider {text-align: center;}. (Only works if applied to parent element.)
Related
My CSS positioning skills have always been truly terrible. I'm looking to place my nav bar next to my logo, as well as making it move with the page and not get all screwy on anything smaller than a maximized window on a 1080p screen.
What it currently looks like: http://5.9.78.201/abellant/
It will likely look odd if you're on a different screen size.
I've (so far) used methods found on here, to no avail, using relative, absolute, and even clearing before giving up on it.
Can anyone show me where I'm screwing this up? I'm quite embarrassed by the fact that of all things, my positioning is just so bad.
Thank you.
If you want to position your logo and navbar at the center of the page::
Set #header "display:inline-block", "height:auto" and "text-align: center;" and remove all the css you have added to #logo and #navigation
#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
text-align: center;
}
And if you want to set your logo and navigation side by side::
#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
}
#logo {
float: left;
width: 50%;
}
#navigation {
float: right;
margin: 40px;
}
If you want to move your header section with page scroll. Set #header to "position:fixed".
So part of the problem is that you have a fixed left and right margin. Remove the fixed left and right margin for #logo and #navigation and do something like the following in your CSS:
#header {
margin: 0 auto; /* 0 px on top and bottom, auto on left and right => centered for a block element */
width: 960px; /* You need a width that will accomodate the logo and nav */
}
To make this work at other sizes, you'll need to look into CSS3 breakpoints. Here is a tutorial:
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en
I solve your problem.
.container {
min-width: 500px;
position: relative;
text-align: center;
}
#logo {
display: inline-block;
vertical-align: middle;
}
#navigation {
display: inline-block;
}
If you noticed that the logo and the menu are NOT perfectly center it's because your image has a small white space, if you could delete that space and replace the new image it will be PERFECTLY center :)
I just finished the landing page for a nonprofit's holiday campaign. I am having a little trouble with some little finishing touches.
Currently, there is extra white space on the right side of the page triggering the horizontal scroll bar in browsers. I am not sure why, I'd like for the page width to adjust to screen size along with the elements.
Also, I am having trouble with the styling of the four images of the people being featured. I'd like the images to display on the same row with no spacing in between when screen is minimum 1200 pixels, each image is 300 x 300 pixels. Otherwise, I'd like them stacked one on top of each other centered on the screen (for mobile). They are stacking, but are displayed to the left.
I am not the savviest of programmers as I am NOT a web developer. I am actually a the Social Media Specialist for the nonprofit. I appreciate your help.
Page can be accessed here:
https://secure3.convio.net/little/site/SPageNavigator/Holiday%20Page%20Wrapper/HolidayCampaign2015.html
Best thing you can do is wrap everything inside tag to a new div & set overflow:hidden;
<body>
<div class="wrapper">
Every other HTML will go here...
</div>
</body>
CSS
.wrapper {
overflow: hidden;
}
ALSO: It is not best practice to call scripts/css inside body tag. Those should be called inside tags
Try placing everything in a Wrapper div with the folowing css:
.container {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
You could also try playing around with:
overflow-x: hidden;
For the whitespace (and scrollbar being displayed), add CSS for .row { margin: 0 !important; }. You currently have -10px +10px... I never understood why that was the bootstrap standard.
For centering the images, you want to add margin: 0 auto; to the parent div.box of the image.
The problem is all this margin fudging:
#media (min-width: 480px)
.row {
margin-left: -10px;
margin-right: -10px;
}
.row, #content-wrapper .fc-section__inner, .fc-section-outer .fc-section-row, #testimonial .fc-section__inner, footer .fc-section__inner {
margin-left: -15px;
margin-right: -15px;
}
.row, #content .fc-section__inner, #testimonial .fc-section__inner, footer .fc-section__inner {
margin-left: -15px;
margin-right: -15px;
}
After I turned all that off, things seemed to line up correctly.
Apply this to your CSS maybe styles.css it looks to be the stylesheet with the highest priority.
html,
body {
box-sizing: border-box;
width: 100vw;
height: 100vw;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* place this div right aftter thr <body> and before the </body> */
#jar {
width: 100%;
height: 100%;
position: absolute;
margin: 0 auto;
overflow-y: auto;
}
UPDATE
I forgot to post a solution for your images. This code applies to an element wrapped around the images. Most people use a <div>, but I'm using a <figure> since it's semantically proper.
Using max-content on a container like .frame makes it act like shrink wrap. You need to use the vendor prefixes which is a pain as you can see you have to write out height and width 3 times each.
You might have to use negative margins and reset padding and borders to 0 in order to get rid of the space in between the images.
.frame {
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
height: -moz-max-content;
height: -webkit-max-content;
height: max-content;
margin: 0 auto;
max-width: 100%;
height: auto;
border: 0;
}
.frame img {
padding: 0;
margin: -2px;
border: 0;
display: inline-block;
width: 24%;
height: auto;
}
<figure class="frame">
<img src="http://placehold.it/150x85/000/Fff.png&text=FIRST" />
<img src="http://placehold.it/150x85/048/Fee.png&text=SECOND" />
<img src="http://placehold.it/150x85/fa8/375.png&text=THIRD" />
<img src="http://placehold.it/150x85/9a7/a10.png&text=FOURTH" />
</figure>
I would like to have a image on the left with a heading on the right. I want both of them to scale in size and spacing as the page is shrunk. I have used this code: width: 10%; height: auto; margin: 2% 0px; to have the image on the top left of my page and scale in both spacing and size to the page when the browser is shrunk (I have also included media queries which wouldn't think would make a difference). I have tried using positioning: absolute which doesn't work. I am a novice to using HTML5 and CSS3. This is my first project and second post on Stack Overflow.
I think this is what you are trying to do
HTML
<div class="wrapper"><img src="yourimage.jpg"/><h1>my Heading Goes here</h1></div>
CSS
div.wrapper {
width: 100%;
height: auto;
max-width: 600px;
border: thin solid #333;
}
div.wrapper:after {
content: '';
display: block;
clear: both;
}
div.wrapper img {
display: block;
float: left; width: 40%;
height: auto;
margin-right: 5%;
}
div.h1 {
display: inline-block;
line-height: 20px;
margin: 0px;
padding: 0px;
}
You can check it here
jsfidlle
Could you make a http://jsfiddle.net/?
It's kinda hard to understand what you're after based on our description alone.
I want to make a perfectly centered/responsive div.
How would I go about that? Typically to move things I float them or use position: absolute;, but I would like to do so in relation to the browser window as opposed to just generally moving things around.
This will center the div horizontally:
#yourDiv {
margin: 0 auto;
}
You can use margin: auto; along with absolute positioning for responsive vertical/horizontal centering:
<section></section>
section {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #f4d4c4;
height: 100px; /* The only caveat is there needs to be a height defined */
margin: auto;
width: 100px;
}
Example: http://jsfiddle.net/uLDVM/
Here s fiddle that centers it both horizontally and vertically
div {
width: 100px;
height: 100px;
border: 3px solid red;
margin: 50% auto;
}
This is what I use.
.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
The best method using CSS would be to use margin and a max-width to control its width. Like this:
div {
max-width: 50px;
margin: 0 auto;
}
Now to change its value on the browser resize, either use media query or you can use %.
Media Query
#media only screen (max-width: 800px) {
// change the properties if the screen is no
// larger than 800px in width
}
Percentage
div {
max-width: 5%;
margin: 0 auto; // will only align it horizontally
}
You can use position: absolute and then use 0 for each four sides of it. To keep it centered and strecthed to the borders, while it won't strecth because of max-width.
This way, you will have the div centered and responding to the browser.
This block of css controls the position of some 3rd party images. They are generated on the fly as a javascript slider. I need to center it based on another image else where on the page. I know the left and right dimensions of my reference image. All I need to do is figure out how to center this block on that. Is there a way to center this between say 200px and 800px?
.pagination {
display: block;
margin:26px auto 0;
width:400px;
margin-left: auto;
margin-right: auto;
left: 130px;
position:relative;
text-align: center;
}
If you know the width is 400px (as per your snippet), you could do:
.pagination {
display: block;
margin: 26px auto 0;
width: 400px;
}
Example at http://jsfiddle.net/Ne9jz/