I have a website with typical blog layout - one post under another. I would like to place a div that would be like a 'pipe' joining them all - from the top one to the one at the bottom.
THIS picture might explain help you understand my idea. (sorry for handwriting)
I were thinking for example of wrapping whole post area inside of div, resizing it horizontally to smaller, fixed width and centering but could I do that without affecting the contents? I want just the background of that 'pipe' to appear.
Thank you
You can wrap it in a div, and absolutely position the pipe behind it.
Something like:
.wrapper {
poisition: relative;
}
.pipe {
position: absolute;
top:5%;
width: 50px;
height: 90%;
}
Like this: http://jsfiddle.net/eMKaW/
Related
I have a layout as shown in this fiddle: https://jsfiddle.net/4dbgnqha/4/. For reasons that you can read about in this post, I don't want to change the way the page is laid out.
Now, it works fairly well, but the issue is that when I add a border to the bottom of the .item divs, I realize that they don't span the full width of the page. As you can see in the above fiddle, the second .item down doesn't have enough content to fill the width, so its border doesn't reach the full width.
I thought I could fix this by just adding .item { width: 100%; }, but when I do that, the image gets added enough additional width to center the p, which looks really weird. Demo of that: https://jsfiddle.net/4dbgnqha/7/
I know it will fix if I add a set width to the image, but as I mentioned in my original post, I want it to be really flexible, able to have many image widths. I also know that if I wrap the image in an element and set that element to a really small width, like 1px, it will work, but that seems like a hack, and the reason I'm doing this stupid table layout in the first place is that I'm trying to avoid any such hacks.
How can I fix this issue?
You can add this into the CSS, it's a hack, but works very well with table layout.
.item p {
width: 100%;
}
https://jsfiddle.net/4dbgnqha/8/
you need to add width 100% to the .item p element so it gets the maximum available width, otherwise that element will get width:auto. So just add width:100% like this:
.item p {
margin: 0px;
display: table-cell;
vertical-align: top;
width: 100%;
}
edit: well, now I see it was already answered, but for anyone looking for info, this is why it happens
I have a "Contact" section on my website, and I have a form section and a contact info section as two separate divs. The form acts just fine, but for some reason I can't get the contact info section to simultaneously stay on the right side while becoming less wide. I have an image so you can understand what the issue is: http://i.imgur.com/smjnXw1.png
I want them to be aligned horizontally next to each other. Thank you!
Assuming your form is correct since I can't see your code, you can edit the css.
#form{
width: 500px; /*fill in the width and height*/
height: 500px;
float: left;
}
#contact{
width: 500px; /*fill in the width and height*/
height: 500px;
float: left;
}
by default divs are as wide as they can be unless specified and a block element, so your #form is taking up the entire width space. Here is an example fiddle of what I think you're trying to achieve.
http://jsfiddle.net/valleydigital/j3qpeaym/
I think the solution is to apply a float:left to both your form and your contact info section. This way both of these will sit next to each other horizontally. Floats have normally been used to allow text to flow around an image, but sometimes they can be used to position items as well.
Check this out for some information and there are more informative links at the end of the floats post:
http://codemecrazy.wordpress.com/
Increase the size of the div in which u place the form div and contact div. Also give style with float left property.
<style>
#form #contact
{
float:left;
}
</style>
On my Website Homepage I inserted a grey strip container containing social network links. I want it to go all the way to the edges of the page like my footer.
This is the code I used;
.outer {
float: left;
width: 100%;
height: 80px;
background-color: #f8f8f8;
margin-left: -178px;
padding-right: 349px;
position: relative;
}
I know it's an amateur attempt, can someone show me a better way to code this? At the moment when zooming out it detaches from the edges of the page.
Will need to see the html also
Maybe try taking away the margin if that div isn't contained by another one
I'm looking at your site, and I'm not so sure the problem is with the CSS that you've printed out for us.
Your social networks strip is inside a section tag with class ".wrapper" which is set to width 1640px, and the strip is adjusting to the width of that wrapper. Is there a reason you've set that ".wrapper" class so wide?
Your footer, on the other hand, is not inside that same "section.wrapper" element, so it is adjusting to the width of the browser.
My page I'm working on is at http://www.derekbeck.com/1775/excerpts/
It looks all fine in desktop browsers, but on mobile screenshots, like below, it is forced to wrap. (see below the image for my questions...)
(full sized image)
I've tried to make it wrap gracefully, but I have two questions:
1) Is there some CSS way to control how the div inline-block (class="exnote2") Want the entire chapter?<BR>Sign up for the newsletter! wraps?
Specifically, I want:
1a) that padding-left: 20px; on the left side of it to be non-existent if it is on a second line as below (but it is necessary to keep it 20px from the PDF icon if it is indeed all on one line),
1b) some whitespace above the div inline-block (class="exnote2"), so that it is not so close to the "Read Online" icon. If I add padding-top or margin-top however, it effects the nice layout for the desktop version (linked above).
For what it's worth, for 1b) above, I did jury-rig a solution together for the entire inline block that follows the image, the entire div inline block that contains text (class="exitemdetails"). I did it this way:
.exitemdetails {
margin-left: 25px;
/* The following allows for graceful wrapping for mobile phones */
padding-top: 20px;
position: relative;
top: -10px; /* half the padding-top */
}
I could jury-rig something for the Want the entire chapter?<BR>Sign up for the newsletter! line too, but I suspect under different conditions it would not display as I hoped. Hence, I post here hoping for a better, more elegant solution, namely, how to use CSS to control the way div's wrap, and the spacing between them only if they do wrap.
2) I have one other question related to this: is there no simple CSS way to shrink that book cover image down when there is not space enough? I tried this, but it does nothing:
.eximage {
width: auto;
height: auto;
}
.eximage img {
max-width: 100%;
height: auto;
}
Thanks for looking!
Derek
Have you considered using css media queries to change the layout of your page at different screen sizes? Might be worth a shot.
http://www.w3.org/TR/css3-mediaqueries/
I'm trying to set up a responsive header that takes an image and resizes it to the browser – easy enough. What I can't manage to achieve is centring the image vertically within it's container (in this case an a element)
See example:
http://jsfiddle.net/jwoodcreative/tUW3k/
I've tried a few css tricks that havent worked and some jQuery. Either type of solution would suit if anyone knows of one.
You can always use the top:50%, bottom: 50% trick like here: jsfiddle v13
.outerElement {
position: relative;
height: XXpx;
top: 50%;
}
.innerElement {
position: absolute;
bottom: 50%;
}
This works, because the height of the innerElement is not the same as the one of the outer Element, so you can center your element (if the heights were identical, you'd just position it to pos:0 again)
Like this? I've changed the image to be a background-image, which can be centered very easily in CSS. To make sure the link is shown, I have added a non-breaking space ( ). I think this is what you want, right?
You can change the appearance of the image more by looking here, at the documentation of the background property.