This is fairly simple, so I'm sure I'm just missing something obvious.
Say I have this example code:
<main>
<header>Header</header>
<section>
Content
</section>
<section>
Content
</section>
<section>
Content
</section>
</main>
And initial CSS of:
main{text-align:center;}
section{display:inline-block;width:33%;}
So I have three columns taking up more or less a third of the page each. Now, because of the way the code is written, there will be white space on the page. My preferred method of dealing with this is to set *{font-size:small}, and then add body>main{font-size:0;}.
Of course, thats fine on a simple page, where the font is the same. However, with different sized fonts and header tags here and there, this doesn't work well.
I think I just misunderstood what it is that the > selector does, but what I'm trying to look for is a selector that styles an element, without applying said style to children elements. In this case, I want to style my main element, but I don't want the style affecting the header or section elements.
What is the right way to do this?
And before anyone suggests it, no, I do not wish to use the other methods for removing white space (HTML comments, moving the final part of the closing tag onto the next line, etc.), as they look ugly and I prefer my code to look as presentable as my page.
First off: I'm not exactly sure if this works and not able to thoroughly test right now. This should have been a comment but I'm lacking the reputation to do so. sorry.
The problem is that the font size is one of the properties that is inheritet from it's parent and values like "small" don't set absolute sizes, but relative to the inherited size. so I would try to reset the size right after your main layer, using an absolute value instead of a relative one
body>main>*{font-size:18px;}
The important part is obviously not using a relative size, however, I have no idea how this holds up to user-specified default font-sizes. also, you would have to ensure that any text that has a non-medium font-size (so in your case any and all text) is at the very least a grandchild of main since the font-size for all direct children will be overwritten.
hope this will help you; bw
Related
I am just learning to code and have been looking everywhere for an answer on this one and for some reason cannot find anything.
I noticed that it seems to be common practice to put an image inside of a container or wrapper. For instance, rather just having:
<img src="url"/>
Everyone seems to be in agreement that it needs to be this way:
<div class="container">
<img=src"url"/>
</div>
What is the purpose of wrapping the img inside of a div in this way? It seems to have something to do with "responsive design", but I'm not 100% sure. Is it just so that we have something to size the image relative to, rather than using definite sizing like pixels on the image selector in css? The more I think about it as I write this, the more it seems to be the right answer, but I'm not sure if there's something else I'm missing on this one.
Any insight would be very much appreciated. Thank you.
unfortunately there is no "single" correct answer for this.
There can be many reasons as to why one would wrap any element in another element, it is not specific to <img /> tags :)
In your question I read something like this (converted to real world example):
I see that it is common practice to put a frame around a photo.
Where the "frame" would be the wrapper element, and the photo would be the <img />.
Looking at it this way might make it seem more clear. The photo is the most important part, technically speaking you don't need a frame to show the photo. If you have just a photo, you won't be able to hang it on your wall without damaging it by driving a nail through the top or applying some tape. If you have a frame though, you can make that photo take up any amount of available space within it, you can use the clip to hang it on a wall and if you put multiple photo's in the frame, you can move them all at once since they are in the same frame.
The reason most people put that image in a "container" is because they get some sort of advantage out of it over using an image alone, this could range from aspect-ratio locks to relative positioning. In some cases, a wrapper is required to achieve certain (notably more complex) animations as well.
Websites are built out of "logical" pieces that, together, form a website. The individual pieces are all "frames" that "flow" together to create any page layout you see on every website.
It is merely a structural way of thinking, if the purpose of that image was to be used as a background image for the entire page, a better alternative would be to use CSS background-image property on the <body> tag and not use the image at all. But if the image is meant to be part of a smaller part of your website, it should probably be contained as appropiate.
This answer is in no way a guide to go by, nor a ruleset or anything like that, they are just the thoughts of another developer. There are countless reasons for wrapping an element and this answer doesn't even cover 0.0000001% of those cases. I'm just saying -- there's no specific reason to do or don't here.
I'm currently trying to automate statistical report generation with r Markdown.
I've managed to tweak the CSS to my liking for the most part, but now I want a logo in the top left hand corner of the header.
My plan was to just absolutely position it and adjust the header around it, the only problem is there's no unique class or id for it to be selected by in the CSS file, so if I want more than one image (which in some I will) they'll all get absolutely positioned in the same place.
Another thing I've noticed is that the page width is defined within the body of the HTML output, meaning it's further down in the CSS cascade and so if I try to set it it gets overwritten later on. Does anyone have any idea how to circumvent this?
Sorry if two questions in one is cheating, they just seem somewhat related.
Thank you.
In answer to the first half of my question, I ended up printing the following:
``` {r logo, results="asis", echo = FALSE}
print("<img src='*URL*' id='logo' />")
```
Then set the visibility of the <p> tag that outputs the R console text to hidden, which I then over ride within the #logo CSS.
Still not found a way to over-ride the max-width however.
I am trying to create a link that goes directly to a certain section of a different page. Here is what I'm doing.
I create an anchor point using the name attribute:
<a name="fish"></a>
<p>some content....</p>
I create a link with the # added to the end
"http://example.com#fish"
***note I have also tried the id method instead of name which still gives me the same issue.
example: <div id="fish"></div>
The functionality works fine and it takes me to the specific part on the page, the only issue is that it looks different on different browsers. What firefox displays is about 5 inches higher than what chrome displays.
It's probably because the a tag is taking up some space.
Easiest solution, use an id instead.
<p id="fish">some content....</p>
Make sure there's enough content below so it can scroll
Most browsers have the same css default value for common html elements, however it is possible that some elements have different attribute values for padding and margin.
One way to avoid these differences is explicitly applying the values in the css statements.
p {margin: 10px 0px}
If you do not want to do this, I recommend you put link exactly in the position where text is located.
<p><a name="fish"></a>some content....</p>
You can locate the link anywhere since the anchor element will not be visible in the viewport
I'm developing a desktop software application which looks for errors in web pages and can highlight them in the browser. Highlighted areas are somewhat arbitrary. They could be one word in a p tag, an entire a tag or an img.
In the past I've done this by rewriting the html and adding styled span tags around the highlighted area. The downside is that quite often the highlights can be obscured. For example where in image is in a div exactly its size with no overflow, any applied border, background etc. will be obscured.
What's the best way to approach this? Are there any good examples of this being done in popular software / webapps?
Limitations: I can't use JS (files are local and browsers often block this). I can however user the latest standards. The output doesn't have to validate, as long as it works on common modern browsers.
Since background colors and borders can't be used, I think you'll need to place something on top of the offending element or text. Perhaps you can use an absolute or fixed position <div> element with a partially transparent background.
Of course, this could get tricky with getting the coordinates. But you might be able to use the same thing you used to do with the span and add some dummy elements within it to trick it into thinking that 0,0 is right where your span element is.
This is the first time i am properly coding in HTML,CSS. in my code i have used whole lot of div's to position and also to put the content in place. i am not sure if i am coding the right way. i have loads of contents too in a single page. here is the link to my code i have used.
http://jsfiddle.net/32ShZ/
can you please suggest. is it really bad in structure and shape?
Absolutely not. You don't want to go overboard though (it's called "div soup" when you do). If you find that a div has no purpose but to hold a background image, or to clear a float, etc that means you've done something wrong. By using wrappers (e.g. 3 levels deep of div tags for a content area that has some backgrounds, etc is OK), you can properly achieve any layout that you need without resorting to "div soup". Take a look at http://www.digitalperfections.net/ for an example of good (x)HTML with a lot of div tags.
To further expand, and answer the question about your code specifically, I noticed one thing right off the bat: <div id="divider"></div> - this is bad because you're using this div purely for non-semantic purposes (for decoration only).
The general principle is use as less HTML for layout as possible. And try to give Style to your page with the help of CSS. So if a minimum number of divs can achieve your task, you should go for it. This helps to make page lighter and maintainable. But yes how small structure (HTML) you can have in your page depends on your experience and design.