I've never actually learned HTML or CSS properly, all of my knowledge comes from internet surfing and generally playing about with it. So i wanted to finally get some thing cleared up.
Firstly in my current 'messing about', i have a main div but that div will not sit at the very top of the page! It's at least 5 pixels from the top. I don't get it! I solved it once but i can't remember. There is an image of what i mean here: http://puu.sh/6jQUF.jpg
Here is the code:
HTML
<body>
<div id="Main">
This is a test.
</div>
</body>
</html>
CSS
#Main {
margin-right: auto;
margin-left: auto;
width: 900px;
height: 1200px;
outline: black solid thin;
padding: 20px;
top: 0px;
}
I'm sure it just something simple, i apologies for that.
Now another thing i have never understood is that in CSS can two divs sit beside each other, ie one has the float left property and the other float right thus pushing against each other and sitting beside each other, whenever i try this they end up ignoring the fact they are running into each other and both go to the left and right sides of the page.
I really hope i don't sound like an idiot I'm sure this is possible.
Lastly on the topic
If i have a main container how can i divs to stay in that container? I have tried this just by placing the div within in the container but that doesn't work.
Somebody please explain this, I would really appreciate that.
Thanks
The body has a default margin. Clear it with:
body {
margin:0;
}
jsFiddle example
If you want two divs to sit next to each other, either float them both left or both right, or make then inline, or inline-block elements.
I can't answer your question of "Lastly on the topic If i have a main container how can i divs to stay in that container? I have tried this just by placing the div within in the container but that doesn't work." as it makes no sense without code.
This happen because for default all elements has properties. In this case the tag body has some margin.
To avoid this kind of issues you can use a general Reset for this properties like this one Reset or the most basic reset:
* {
margin:0;
padding:0;
border:0;
}
Here the * helps to found all the elements on the DOM and set those properties to 0.
Try to keep one question per post. For your second issue I recommend to investigate the property display:inline-block and This Link to Clarify Floats
Related
The pictures are supposed to have padding on around them, and the footer is supposed to be in the bottom right corner.
I haven't tried anything else because I'm not sure what the issue is.
check the comment below for the code, I have to display it this way in order to display what I'm talking about properly.
What it's supposed to look like;
https://college.cengage.com/nextbook/shared/computer_sciences/carey_9781305503939/images/83908-mod3-fig03-67-t3.png
I'll try my best, but like I previously mentioned, I can't properly explain the issue for I don't even understand what is causing it.
"Go to the DIV Container Styles section. Richard wants you to add some additional spacing between the images and the edge of the page body. To add this spacing, create a style rule that sets the right and bottom padding of the div element with the id container to 8 pixels."
div#container {
padding-right: 8px;
padding-bottom: 8px;
}
is what I did to try and fulfill this.
The only thing I can think of that could be affecting this is this;
div[class^="column"] {
float:left;
}
Hy there. I'm macking an HTML/CSS tutorial and I'm facing some problems with positioning and those stuff. I got 3 stacked elements at my header and want them to be at the very center.
So I try something like this:
.container {
margin: 0 auto;
width: 940px;
}
at my CSS code, and add this class to those elements. It is recognizing the comands, since it moved a bit. But not the way I expected:
It remanied at the left, just a few more steps to the right. Funny part is: if I put something like
.container {
margin: auto 50% auto 50%;
width: 940px;
}
it's behavior is:
it GETS centered, but extends the screen lenght and put a scrolling bar. Why? Shoudln't both those options center my elements? What can I do to achieve my goal? I would appreciate an answer so much, since I get a lot of difficulties when trying to understand this part.
In your first example, the element is centered fine - it's just still 940 pixels wide, nearly the entire browser, thus not really far from the left edge. If you want to center its contained elements as well, just add text-align:center to it.
To see better what's happening, consider temporarily adding a background:red to the element and a lot will be clearer. It makes learning CSS tons easier to actually see the 'boxes' of the box model doing their job.
In your second example you appear to be confusing the order of values of the margin declaration. You're actually giving it a left and right margin of 50%, putting its left edge indeed right in the center. The 940 pixels width then make it stretch off to the right, still 940px wide, causing the scrollbar.
.container { text-align:center }
Give it a shot.
This would be straight forward to solve if you added your html as well.
I am trying to create a div that will fill any empty space at the bottom of a page if there is any, or disappear if the content of the page extends to/past the bottom. I know this can be done using java, but I would like to stick to CSS as much as possible with as few wrappers as possible.
I have experimented with a few different methods but nothing has worked out so far and most of what I have come across is sticky footers, tables, and filling the excess on specific div elements (which this isn't since I want it to work on the whole page at the body/html level).
The furthest I have gotten (which still doesn't work) is to try absolute positioning with alternated top & bottom values, but setting top: inherit and then bottom: 0px just doesn't play well... Example: http://jsfiddle.net/V4RnC/6/
The basic problem comes down to: 1. Keep the top of the div where it would usually be just after the previous div 2. Extend the bottom of the div to the bottom of the page 3. Vary with content and page size changes 4. Disappear if there is no excess space.
Any help would be greatly appreciated!
Update: So far everyone seems to think it's a job for Javascript, so I came up with this quick jQuery solution: http://jsfiddle.net/V4RnC/7/ Feel free to rip me a new one on the code as I always appreciate the learning opportunity :)
If you want something for background purpose here, I would use a div, that stretches over the complete visible area (if the visible area is as large as the content, it's just hidden behind the content).
Then it would be something like that here: http://jsfiddle.net/V4RnC/4/ http://jsfiddle.net/V4RnC/5/
Here's the css code I used:
#content {
background-color: #F00;
/* The overflow is to keep margins of the first and last element in here. Disable it and you get what I mean ;) */
overflow: hidden;
}
#fill {
background-color: #00F;
height: 100%;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
Here's a bit more info on that: http://codecamel.com/fullheight
I can imagine, that I sometimes had to use min-height instead of height for the body or html ... but can't remember when or why ...
The overlapping div with a class:
.eStore-product {
height:180px;
padding:5px;
clear:both;
}
I thought by adding clear:both; that this could solve the problem.
First of all, your iframe should not be placed within a p tag; iframes should go by themselves. Secondly, your .eStore-product has a height of 180px which is causing the problem. Either increasing that height or adding a margin-bottom: 100px; would solve the problem.
Unfortunately this solution is more a hack than anything. I feel you've got a bigger problem than just this one line. Try fixing the 8 errors you have on the page and you mind find yourself having to fix less of these bizarre problems.
Hmm strange behavior, I would try
Enclose the map frame in a div, and apply a padding top:
<div style="padding-top:110px">
this at line 226 and div clousure with the current closing divs at 228
</div></div></div>
it gives enough space. The current div scope seems right. I did a quick check on divs and seems right, but maybe a deeper revision could bring the problem with the clear.
I try to put margin inside the p tag, and the result is not overlapping
I hope it is useful for you
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; }