I am new(ish) to HTML and CSS. I am building a site but it feels I am not getting as much control over it as is possible. Control over positioning and placement of items/elements/objects that is.
Example Image
Question: How can I adjust the position of specific elements/items/content on a page with CSS. In this case the 'Horizontal Rule'. How can I move/push the 'Horizontal Rule' up closer to the text above it. The 5 stars and text. And if I wanted to how can I put more space between the title and the image?
For example. In HTML I have a 'Horizontal Rule' separating an image and text above from text below. See this image here.
The 'Horizontal Rule' in this picture is in a div. The 5 star rating system and it's text is in a div. The picture is in a div and the title (everything above the image) is in a div. Lastly, those 4 divs are in a container div. How can I push the 'Horizontal Rule' up closer to the 5 stars and text with out effecting anything else on the page?
For my code please see my link in the comment below. I am unable to post more than 2 links due to reputation. Thanks.
Your answer will be appreciated. Thanks in advance!
You could try something such as:
hr { width: 100%; height: 1px; color: #CCC; margin-top: -2px; }
Not sure if there is any risk is using negative margins... I'm certainly not a CSS expert.
An easy way to figure out what you need to change in your CSS to get things closer together or further apart, is to use a developer tool such as FireBug. It allows you to inspect your page elements and not only see what their layout values are, but to edit them as well.
To ensure your <hr> tags take up the minimum space, so they are as close to other elements as possible, you can set their margin and padding to 0.
hr{padding:0;margin:0;}
The next step would be to set the margin and padding of elements above and below your <hr> tags.
Here is an example that shows the difference by changing the padding/margin of the <hr> tags.
It is only the margin that needs to be set, as the padding by default, is already set to zero. Check here to see the default values for the <hr> tag.
Hope this helps
Related
I ran into this issue while implementing a sticky footer solution. I have the footer working well, but my body element which encompasses everything within the tag just will not auto-extend beyond a random point further down that can only be reached by scrolling down (it's a lengthy page). My intention is for the body container (does that sound morbid or what?) to auto extend past all the div elements it contains. Isn't that what it's supposed to be doing? Right now there are still div elements sitting further down from where it ends, and the footer is sitting in the middle of my page right below it. If I can't achieve this behavior, I'll have to set the body to a fixed position in css, which I don't want to do.
Using the following CSS styling doesn't work, probably because my content extends beyond a page.
html, body {min-height: 100%; height: 100%;}
Can someone articulate what the most likely issues could be? Also, feel free to make any constructive comments on my code. This is my first web project.
Here's a link to my HTML code on CodePaste: HTML Code
And here's a link to my CSS code: CSS Code
Lastly, a link to a screenshot of my webpage showing the issue. Screenshot
The green bar is the footer, and the red border is the body element styled in css so it can be viewed. You'll see it ends right after the picture.
I'm pretty sure your main problem is setting the height of the body tag. Try not giving it a height (no max-height or height tags) or giving it height: auto to make it expand as its contents.
It could also be that you are setting child elements to positon: absolute which means that the parent will collapse to the size of whatever non-absolute elements are inside it.
Also, why the <p1> tags? They should be just <p>.
Code criticism:
It was extremely difficult to figure out what the problem was and I'm not sure that I gave the correct solution because of the way you showed your code. In future, try to give your code as a JSFiddle or a Codepen.
Also, consider using a CSS framework which will reduce the amount of CSS code you write a lot. I would suggest Bootstrap or Materialize but Bootstrap is more widely used.
Don't forget to follow CSS guidelines which will make your code more readable.
You could stretch the element to the full height of the window using vh.
.container{
height: 100vh;
}
You could then position your footer to the bottom using absolute position.
footer{
position: absolute;
bottom: 0;
}
I've used this in the past for full page landing pages that aren't meant to scroll.
I don't exactly know what the question is asking, but I experimented a bit and figured that if you remove the 1 from the <p1> so you would have a normal <p> tag, it moves the text up completely. I have a very rough JS Fiddle.
Thanks to all who contributed. Based on suggestions from Sankarsh and Ori, I was able to solve the problem. Once I changed my div to just as they suggested, I noticed it began functioning as I intended and forcing the parent element down beneath it. Unfortunately, that only solved the problem for that element alone. That led to me discovering the element had a default "static" position, while most of my other elements were set to "absolute". After changing the positions of the bulk of my content to "relative" or "static", everything is working as intended!
TLDR: If you want a child element to stay within the boundaries of its parent element, you need to set the child's position to "static" or "relative". You cannot use "absolute". This way, instead of overflowing beyond the border of the parent, the child will automatically extend the parent's border to its intended position.
.....which makes sense.
However, is there a way to limit the amount of space that a paragraph for example takes up? Right now, if someone resizes the page, the text wraps and the elements overlap each other, and I understand that it is just working as designed.
I was able to get a no-wrap successful set up using a table as a whole page layout, but that just caused other issues.
How can I get it so that the text doesnt move without using the no-wrap option. Should I put the p tag in it's own div? or span?
I'm sorry, this may be simple, but I cannot find a good answer. If I wrap, they overlap. If I no-wrap, it...well...no-wraps, but all I am looking for is for it to stay within the parameters of the page, and not resize when the page resizes. Ideas? Feel free to shake your head - just looking for some relief from the confusion haha
I'm not sure if i fully understand the question, but you could try selecting the surrounding div and applying the following css.
selector{
display:inline-block;
width: 100px;
}
Set the width to the size you want, before the wrap
I'll let this jsfiddle describe most of the problem for me.
http://jsfiddle.net/zAPVQ/4/
I've got a layout similar to this. There's an image to the left and block links to the right. The way I've set the positioning, the text inside the <a> is pushed down underneath the blocks.
I've created a makeshift solution, using <span> tags and more positioning, but I'd rather that not be my end result. If I have to create/change/remove buttons, I'd have to mess with the positioning of the text.
Does anyone know a better way of keeping the text inside the link block?
Updated your Fiddle.
I've added
overflow: hidden;
to your big link CSS.
Saw this today from another answer to this question Element with Overflow:auto affected by Floating Element
Theres also a couple of good links to a description of why it works in there too.
Try using a negative margin. Like margin-top: -75px;
I have a grid of products four wide
http://jsfiddle.net/QpX4f/4/
Why won't margin:0 auto; on the product images centering them? And why aren't those view buttons inline?
http://jsfiddle.net/QpX4f/5/
Note that i'm not sure what you're trying to achieve with the blue bg but it appears to be the exact same size at the product image... i've just placed it exactly behind the product image, move as you please
edit :: I'll add my two cents to give you some pointers so you can learn.
A few notes, your CSS could use some real organization. This smashing article is great for learning about css.
Next, you're using floats all over the place and I'm not sure why. Float only the elements you need to which is your container for each production.
For the bg image, you just need to actually set its coords to center it, also, the floating if the product image inside the link was messing up its position, and your margins were taking it out of center.
The view button is unnecessarily wrapped in a p tag, which does nothing.
In my opinion your markup is extremely bloated. You should start with simple cases and only add declarations when you see fit. Lean CSS is often much easier to debug than bloated. (as with any code really)
Also, using a tool like Firebug or Web Inspector will really help you see how your css declarations actually affect the positioning of elements.
answering your new question
your margin:0 auto was most likely messed up by the floats. This would would if it was using a normal inline display with not float. The view buttons were inline, they were just pushed down according to the content above, to take it out of this display mode I made it position:absolute (note you have to position the parent relative) and just set it to be at the bottom left.
Here you go: http://jsfiddle.net/gVLXV/
So...
ul.display li .image { background: url(http://propono.co.uk/image-shadow.png) no-repeat top center; } /* Added top and center to the background. */
ul.thumb_view li .image { padding:0 0 0 8px; }
Please have a look at this page www.pixeli.ca/issue.
I have begun making a page layout using CSS framework 960.gs. My problem is that there is some strange space appears between block with top image and blue block with "hello" string. So you can see a green stripe there that shouldn't be visible at all. I tried different variants and have no idea what's wrong with it. I noticed that it happens only with the block with images inside them, but if there is only text, no space happens.
Thanks.
Simply adding float:left to the image fixes it.
<img src="imagetop.png" style="float: left;"/>
Not quite sure why or if there's a slightly more accurate method but hey, there you are.
Actually: why don't you set a background-image and height on the container. That would be a much cleaner way of doing things.
what i do at the beginning of each css sheet is adding this
*{
padding:0px;
margin:0px;
}
this removes all default spaces, might help.
The image is inline and is treated as text - so it gets aligned to baseline which adds a bit of space under it as a normal line would do.
set image to display:block and it should work.