I am sorry if this is a bit of a n00b question but for the life of me I cannot get this lightbox gallery lined up centrally inside my "content" div.
http://www.justthisdesign.co.uk/bathroom-gallery.html
I am ashamed to be asking such a stupid question but honestly I have tried everything. I have given the last image in each row a class of .last, then played around with padding-right and margin-right but it seems to have no effect.
Use <div id="content" class="clearfix thumbs" style="text-align: center;">
Use Margin 4 For all of your Pics in the gallery on the both sides than just Right side!!.You can Remove horizontal padding of content div and adjust the padding area in the width of the div.
text-align: center; on content div.
give your content div a text-align:center; and give your last images in each row a margin-right of 0 otherwise you will have the extra space on the right side.
#content {
padding: 15px 30px;
background-color: #F8F8F8;
}
Instead of padding try use margin:
#content {
margin: auto;
width: 900px;
background-color: #F8F8F8;
}
And mess around with the width to control its position.
hope this helps.
Related
I'm trying to publish my portfolio site and I'm almost done, but I'm having a problem with my sticky footer covering content when there's enough content to need to scroll down. I've tried messing with padding and margins all afternoon but I still can't seem to get it the way I want it.
Basic HTML skeleton:
<body>
<header>
<nav>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
</li>
</ul>
</section>
</div>
<footer>
</footer>
</body>
Footer:
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
font-size: 0.425em;
text-align: center;
clear: both;
padding-top: 10px;
color: #ccc;
border-top: 5px solid #cc7a00;
}
Any help would be appreciated!
After inspecting the HTML on the page you mentioned above, it looks like you might have some un-cleared floats. You can read more about floats and why they need to be cleared here: https://css-tricks.com/the-how-and-why-of-clearing-floats/.
The short answer is the wrapper isn't increasing its dimensions to encompass its children because of those floats. If you inspect your page using dev tools, you can see the wrapper essentially has no height. That means adding a margin to it isn't really going to do anything.
If you were trying to add margin and padding to the footer itself, that won't work either since you're using position:fixed. You've told it to stick to the bottom of the page and not affect the other content on the page. It wouldn't make sense to let content scroll underneath the footer and still let it have a margin that pushes away other content, right?
There are a bunch of ways to solve this problem. Here's one-
To solve your float problem, you can use the overflow:auto trick:
#wrapper {
overflow:auto;
}
Read more about overflow:auto and floats here: Why does 'overflow: auto' clear floats? And why are clear floats needed? Please note this doesn't really clear the floats but the effect is that the wrapper height will respond to its children which is what we really need here.
Then adding some extra margin on the bottom of the wrapper div to account for the height of the footer should work:
#wrapper {
overflow:auto;
margin: 0 auto 100px auto;
}
The margin property above sets the margin-top to 0px, margin-right to auto, margin-bottom to 100px, and margin -left to auto. I suggested this becuase the page you linked to already had margin: 0 auto; (margin top and bottom 0, and margin left and right auto) to center the wrapper in the page. Otherwise, if you only needed to adjust the space at the bottom you would use margin-bottom: 100px;
Try adding
padding-bottom: 97px;
to your HTML element
EDIT
html { padding-bottom: 97px; }
97px is the height of your footer.
On your <div id="wrapper"> add to the CSS: bottom : someValueMatchingTheFooterHeight;
does somebody know why the border on the right side is a bit higher than the image? How can ensure that the border on the right side of the div has the same hight as the image?
Example:
http://codepen.io/anon/pen/bNPeLv
Code:
<div class="footer-widgets-2">
<img src="http://www.fertighaus-keitel.de/uploads/tx_7thsensegallery/Haus-Wiesenweg-Nacht_01.jpg" alt="Footer-Pic">
</div>
.footer-widgets-2 {
width: 810px;
border-right:1px solid #a3a3a3;
padding-right:20px;
margin-right: 20px;
}
Thanks!
You can add display: block to remove the small space on the image
Vertically aligning the image to the middle will solve this.
img{vertical-align:middle;}
I am a relative novice in the world of CSS so please excuse my ignorance! I am attempting to use the following CSS to align two divs horizontally:
.portrait {
position: relative;
display:inline-block;
width: 150px;
height: 200px;
padding: 20px 5px 20px 5px;
}
.portraitDetails {
position: relative;
display:inline-block;
width: 830px;
height: 200px;
padding: 20px 5px 20px 5px;
}
Unfortunately, unless I remove the display: inline-block from the .portrait class and replace it with float:left the .portraitDetails div block appears underneath the first div block. What on earth is going on?
Since you provided a working example, the problem seems to be more clear now.
What you have to do is simply remove display: inline-block and width: 830px properties from the right div. Of course remember to NOT add the float property to it.
People sometimes forget what is the purpose of the float property. In your case it is the image which should have float property and the image only. The right div will remain 100% wide by default while the image will float it from the left.
HINT: If the text from the div is long enough to float underneath the image and you want to keep it "indented" at the same point then add the margin to the div with a value equal to the image's width.
The problem with display: inline-block; is that the siblings having this property are always separated by a single white-space but only if there are any white-spaces between their opening and closing tags.
If the parent container has fixed width equal to the sum of the widths of these two divs, then they won't fit because this tiny white-space pushes the second div to the next line. You have to remove the white-space between the tags.
So, instead of that:
<div class="portrait">
...
</div>
<div class="portraitDetails">
...
</div>
you have to do that:
<div class="portrait">
...
</div><div class="portraitDetails"> <!-- NO SPACE between those two -->
...
</div>
I'm making a responsive web design. But my CSS knowledge could have been better. I want a padding on a div, but I don't want it to affect the title.
See this example:
I want the title to be were it is, but the little squares to have a margin at the left side.
I've tried to set a padding and then reset the title position with relative positioning. But I don't like that solution because the title is pushing the squares more than necessary.
I've also tried to set a div where the cross is, but I can't manage to get it under the title and on the left side of all squares since the title is floated left and the squares right.
Here is a fiddle
HTML
<div id="siteContainer">
<div id="titleContainer">
<h1 id="title">This is the long title</h1>
</div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
// more...
</div>
CSS
#siteContainer {
max-width: 800px;
margin: auto;
}
#title {
display: inline-block;
}
#titleContainer {
height: 100px;
margin: 10px;
float: left;
}
.image {
width: 100px;
height: 100px;
margin: 10px;
background: #DDCCAA;
float: right;
}
Whatever you want the padding on the left of the container to be (100px), you can set as a negative text-indent value on the title (-100px).
Did you think about the box model? Do some research on CSS box model and you will see where your problem is.
Let me give you an example:
If you have a div with the width of 100px and add a padding of 10px, the width of your div will be 120px, both sides will take 10px from the padding, you can solve this in two ways, one is to make the div width smaller "80px" and the second is to use box-sizing: border-box;
Hope this helped.
I am implementing a carousel with images. The carousel is 960px wide, and contains 5 images in containers of width 960px/5 = 192px (and height 119px).
I want the images to be as large as possible inside their containers, without changing the aspect ratio of the images. I also want the images to be centered both horizontally and vertically within their container.
By hacking around for hours, and using the center tag, I have managed to construct what I describe above. Please see a fiddle here.
The problem is with the container of the second image (as shown by the black border). While the second image is centered horizontally, the container is shifted down a little.
I'm trying to implement an overlay on the images, and need the containers to all be at the same height. How can I have the containers all at the same height? Is there a better/cleaner approach that does not use the center tag?
You could add vertical-align:top; to your #carousel-images .image{} css
Or middle or bottom...
Uh? Why did I get downvoted on this?
http://jsfiddle.net/y2KV7/
I got it to work by doing the following:
HTML:
<div id="wrapper">
<div id="carousel-images">
<img src="http://eurosensus.org/img/initiatives-300/30kmh.png" />
<img src="http://eurosensus.org/img/initiatives-300/affordableEnergy.png"/>
<img src="http://eurosensus.org/img/initiatives-300/basicIncome.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/ecocide.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/educationTrust.jpg"/>
</div>
</div>
CSS:
#wrapper
{
width: 100%;
text-align: center;
background: blue;
}
#carousel-images
{
width: 960px;
white-space: nowrap;
font-size: 0;
margin: 0 auto;
}
#carousel-images img
{
display: inline;
max-width: 192px;
max-height: 119px;
border: 1px solid black;
vertical-align: middle;
}
Click here to view working jsFiddle demo
First, don't make the world come back to 10 years ago. do not use tag for formating. I would also suggest you to get some reading about different between div and span as well as display attribute. you could easily find information on http://www.w3schools.com.
if you want a center container. you could use css margin auto trick.
like margin:5px auto; would center the container horizontally.