I am new to CSS and learning it side by side while making a site.
I am confused about how to position elements.I want to know whether I should use div to position elements or do I do it directly by either using tags and ids.If I use tag names and IDs I don't have to use div separately to position the elements. I can both style and position at the same time.
When to use div and when not to?
Actually, I am trying to build something like this:
HTML5 has made divs a bit outdated with the introduction of the header, footer, aside, section, article tags and so on. In HTML5, divs should only be used when the content cannot fit inside one of the newer, more fitting tags that I just listed. Check out this article for better clarification.
If I understand your question properly, it appears to me that you have a misunderstanding of some very basic concepts.
Basically, a div can be thought of as a Container, Panel or Element which hosts other elements. You can position a div, but chances are you're also going to want to position any other element, so here is some very basic code:
Positioning an element:
<!doctype html>
<html lang="en">
<head></head>
<body>
<div id="uniqueDiv">
<!-- You cannot use the same ID on any element more than once on a page. If you need multiple elements with the same "id", use class instead. -->
<img id="one" src="one.png" />
<img id="two" src="two.png" />
</div>
</body>
</html>
* { margin: 0; padding: 0; outline: 0; border: 0; outline: none; border: none; }
uniqueDiv img {
margin: 10px 0 0 0;
}
#one {
float: left;
}
#two {
float: right;
}
The is the basic premise behind positioning. I did not add an example for Padding, but you should not position elements using Padding. You should use margin instead. Also, the line that begins with * is called a CSS Reset and the goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins etc.
Here's a brief explanation of what this code does:
The top piece of code is obviously HTML. It should be placed in its own .html file. The bottom piece, the CSS, should be placed in its own .css file.
So, we have 1 div and two images inside it. In this scenario, we want to have one image to the far left of the div and another to the far right. We also want to push both images down by about 10 pixels (positioning).
So, uniqueDiv img {} is used to position all images contained within the uniqueDiv down by 10 pixels from the top of its div. #one {} and #two are used to float the image to the left and the right.
My advice as per the excellent book "The Truth About HTML5 by Luke Stevens" switching to "Sections" "Header", "Footer", "Aside" etc can have accessibility problems as HTML5 is not recognized by all devices so to combat this you can make use of ARIA "Roles". You can still use Divs and assign "Roles" for your layouts, but adopting the HTML5 approach is what I would do.
Some good info is here;
Improving Web Accesibility
Aria Roles 101
Related
I'm using jekyll to generate my pages and as anyone knows that uses jekyll, the anchor tags on h-tags are automatically generated.
Solutions I am not looking for:
Add padding — my h-tags are using margins because I'm a normal person. Also, my sticky header is 50px tall which means that all my h-tags would need a miniumum of 55(ish)px padding. This causes there to be too much spacing.
Create your own anchor in a span tag — this defeats the point of the autogenerated tags and I'm trying to live a D.R.Y. lifestyle.
Summary: I need to offset the anchor's position without changing the location of the h-tag.
If this has already been answered, I apologize for creating a duplicate question. I could not find the answer to this that was not 'solved' with the previous mentioned 'solutions'.
You may want to use the :target pseudo selector, which matches when the hash in the URL and the id of an element are the same. Therefore, the style will only apply to the h-tag which has been navigated to rather than all of them.
For example, you can use :target::before to add a margin to the top of the selected tag:
:target::before {
content: "";
display: block;
margin-top: -75px;
height: 75px;
}
Here, this technique was used along with an animation which removes the margin after one second so that the margin no longer exists if/when the user scrolls up the page.
Adding this solved my problem.
html {
scroll-padding-top: 70px; /* height of sticky header */
}
Conditions
I'm essentially trying to replicate the webpage output for this assignment. Pictures used in webpage are here. That's basically my ultimate goal in all of this, getting this webpage as close to the Desired Output as possible. Not just similar, but as close to identical as possible.
This needs to be done in a way that doesn't just superficially reflect the intended output, but is done in the "right" way. For example, I could very well just adjust padding and margin sizes until it looks the way it needs to be, but that wouldn't solve the overarching problem and makes for badly styled code.
This has to be predominantly done with CSS. Only organizational HTML tags can be used and no packages or code can be imported.
Problem:
Each review is supposed to be separated by 20pt of vertical distance. This isn't working out for whatever reason.
It might have something to do with the fact that I've got some of my reviews looking like this when I need them to look like this.
That might have to do with the fact that padding is applying only to the text when it needs to apply to the review as a whole.
You can see in the first image that the blue bar, which represents padding, is only under the text and not under the image and the text.
I'm wondering if this has something to do with img elements being inline elements and not block elements? Any advice you have on this would be greatly apprecaited.
Code:
CSS
HTML
The padding does not work with your images because you have
float: left
applied to them. If you take that property out, the padding will take the img into account.
On a side note: maybe you should reconsider your html structure. Logically the review text and the reviewer belong together, so they should be enclosed by some parent div element. Just look at the real rotten tomatoes website and how they structure their reviews and let that "inspire" you ;-)
But basically it should be something like this:
<div class="review">
<div class="review_quote"></div>
<div class="review_source"></div>
</div>
Well structured HTML really helps with styling. HTML and CSS go hand in hand, so if your HTML is messy your CSS will be messy and "hacky" too. So first make sure your HTML makes sense (grouping, nesting, etc.) first.
add this class in your css
.reviewer-text::after {
clear: both;
content: "";
display: block;
}
Well.. your padding in css is refering only to class 'reviewer-info'. Elements with class 'reviewer-text' got their padding set to 8px;
If you want to have result for that block like on the picture apply bottom padding for 'reviewer-text'. Change:
.reviewer-text {
padding: 8px;
}
to:
.reviewer-text {
padding: 8px 8px 20px 8px;
}
See: https://fiddle.jshell.net/a9xxoz8L/1/
The fundamental ideas for this idea for a simple web page format are
a) let the user decide what he wants text to look like
b) make the code as short and simple as possible
In his browser settings (if the application allows it), the reader chooses the typeface, size of text, size of headings (H1, H2, etc.), background color and other defaults. So far, the sole line in the external CSS file: body { max-width: 30em; font-family: Sans-Serif }.
But, a very familiar (and practical) convention is a top bar (title/masthead and/or navigation) with no margin-- it bleeds to the edges of the browser/device, filling the space entirely. The problem is that all browsers have a margin by default.
So, how is the no-margin bar achieved-- while letting the browser default margin work for the rest of the HTML page?
The inherit, reset and unset css keywords seem to get close. And, obviously, one thing that repeatedly appears when researching this notion is { margin: 0; padding: 0; }.
What is the solution for a top navigation bar with no margin and a margin in the main content area below it controlled by the browser default?
Is it even possible?
read the body margin and assign negative margin to header:
<div id="header">Some text to test</div>
<script>
var defaultmargin=$("body").css("margin").replace("px","");
$("#header").css("margin",-defaultmargin+"px");
</script>
You can make whatever changes you want with JavaScript (JQuery is my prefered framework).
For web design, man, you really need to look by yourself. Google is your friend !
What you are asking right is the basic and you certainly won't get a complete course here. I can however advise you to look for HTML/CSS MOOC or so (OpenClassrooms might offer free english course, unless you prefer french ?).
You might also like Bootstrap, if you give it some thought : Bootstrap Website
By all means, Happy Easter !
Put the rest of code between <div class = "rest"> </div> and include the following css.
body {
margin: 0, padding:0;
}
.rest {
margin: 5px
}
You could do a css reset by placing the following at the top of your css file:
* {
margin: 0;
padding: 0;
border: 0;
}
I've created a codepen for this, but the issue is basically beneath my YouTube embed there's a margin (Seperating the footer from the page) and I don't understand why, I'm still learning when it comes to web development, so I'll be grateful for any explanations.
http://codepen.io/anon/pen/yyjaVJ
Links to codepen must be accompanied by code,
but it's all on codepen, considering there's not much.
It's because an iframe element is inline by default. The reason you are seeing whitespace below the iframe is because inline elements are aligned this way so that there is reserved space below the element for letters such as p, y, q.
You could either change the display of the iframe element to block: (example)
iframe {
display: block;
}
..or you could change the value of the vertical-align property to something other than the default value of baseline. In this case, a value of top would work: (example)
iframe {
vertical-align: top;
}
You can still use what you have, if you edit your CSS and change this code:
#body_wrapper footer {
margin-top: -6px;
}
Not exactly a professional way to do things as you will see the comments i shall get for it but it does fix your problem at hand.
I am working on a blog: http://poweryogatrainings.blogspot.com/search. If you check the link you can see that currently the blog posts are just below the thumbnail. Now I am trying to make the blog posts align beside (on the right side of) the thumbnail but I am not sure how. Does anyone know what is causing the line break and what can I do to avoid it?
Also I think there was a website where you could edit codes of your website and watch the preview without actually changing the codes. Any ideas about it?
Simply add left float to the image, and give it some space to the right and bottom, as below:
img.postthumb {
float: left;
margin: 0 10px 10px 0;
}
Use float to place your contents on same line. Like float:left; for img tag will allow contents to be displayed horizontally.
if your thumbnails are all the same width, then you can do this:
article { overflow: hidden; /* or some other clearfix method */ }
article img.postthumb { float: left; }
article h3, article header, article div.postbody, article footer { margin-left: WIDTH_OF_IMAGE }
a few points:
WIDTH_OF_IMAGE should be replaced by the actual width of your image, and possibly any extra space that you want to appear between it and the words of your article
the code I've recommended will line things up in columns, if you want to avoid that, then just remove the third line of css and you will have flowing paragraphs which wrap the image
there is a lot you could do to make your code a bit more consise, for instance your article's h3 tag should really be in your article's header tag etc. You also have <title> and <meta> tags in your body, when these are best placed in the <head> of your document..
anyway, good luck, I love yoga sites in general and, look forward to seeing the finished article