Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I've just stumbled upon this term/method of coding while learning CSS and from what I can understand the "content wrapper" is just a way to center align content of an html element within a container (specifically using a div element). I am not certain on the believability of this information, and would like someone to help further justify this please!
I believe the term is not standardized in any way and it is mainly about semantics. In general it is being used for elements containing some information or grouping several pieces of content together.
For me it is almost the same like container, just more related to the content. So it can be for example the central part of page (between header or footer) or the column with the article.
To simply say, content wrapper holds all visual elements and content on the page. Yes, it centers the content inside the <div> element which is conventionally used when using a content wrapper, but it's also opinionated.
This is normally achieved by using margins, and the most common way of using a content wrapper; eg:
.wrapper {
margin-right: auto;
margin-left: auto;
max-width: 960px;
// Or set a padding inside of the wrapper
padding-right: 10px;
padding-left: 10px;
}
Additionally, wrappers are also used for things like applying a sticky footer.
Otherwise, as for the difference between a container which may usually inherit the same properties, usually intends another kind of containment. One that sometimes necessary to implement a behavior or styling of multiple components.
It serves the purpose of grouping elements both semantically and visually.
The terms wrapper and container can also mean the same thing depending on the developer and what they intend. Just remember to use them in the right way.
Your wrapper can take any name you wish since you decide the css selector name. The styles you apply to that selector makes the change. Either center align or left or etc. It is just a convention that developers use. You will get used to the terminology in no time. Or build your own glossary.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 months ago.
Improve this question
Consider the following hero section:
<div>
<h1>Welcome to Our Site</h1>
<subtitle>The place of your dreams.<subtitle>
Get Started
</div>
Now obviously, <subtitle> is not a tag. Typically you'd either put a p or a div, or a block level span (modified with css of course).
However, I actually have no idea which one is the correct practice for writing a subtitle.
It's not h2 because it's not a heading, it's a subheading.
It's techincally not a paragraph, so for me the p tag doesn't fully make sense.
divs I thought were for separating content on a website, but it's really the only one that makes sense to me to use because it has so many uses.
If spans were block level tag I'd probably use it, but only because I typically associate it with text.
I typically use divs, but it still seems strange to me.
Let's say that there was a standard for this, and it could only be one tag...
Which tag should I be using for subtitles? Which one makes the most sense semantically and overall?
That basically depends on the particular context of your (sub-)titles. Since HTML provides a certain hierarchy and structure of elements, which becomes even more important when using e.g. screenreaders which depend on this structure, you might ask yourself to which parent the subtitle would belong the most or whether it should be seen as "independent".
Thus, considering it being an addition to the h1 element, I would wrap it into a small tag within h1 as follows to maintain the immediate relationship of both, while providing options to (semantically and visually) mark it as a child element. The visual appearance (font size, linebreaks) can be added with CSS. HTML itself should only be about structure.
<h1>
Main title
<small>Subtitle</small>
</h1>
Using an h2 element would also be fine, however I would consider that being read more like a "subchapter" with own content. Here, it is common to have multiple h2s as childs of h1, while the first approach using small would only make sense with a single child element.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I’m trying to make it so that the pages of my book can fit into 2 specific column sizes for all the text such that I can click through the pages. Is there any way I can automate it so it detects where exactly in the page it needs to stop and move onto the next?
Ella, your question is very vague. I would suggest as #paulsm4 suggested you study up on html, css and javascript.
Your question does not explain where you are getting the text from, and how it is rendered to the screen. I am going to try and help.
Let's assume you are adding text to a div, your "book" has two pages and so let's assume each page is a div. One on the left and one on the right.
I am going to assume we can use the flex layout so let's use a flexbox.
The css would look something like this.
.book {
display: flex;
}
.page {
flex: 1;
padding: 10px; //just because
border: solid; //so you can see the page
}
The html would be:
<div class="book">
<div id="page1" class="page"></div>
<div id="page1" class="page"></div>
</div>
You could use css to make the min-height of the book 100% so that it spans the entire page. I have added an ID to each of the pages so that you can use javascript to find out how big the div block is.
The javascript would be something like this,
var width = document.getElementById('page1').offsetWidth;
var height = document.getElementById('page2').offsetHeight;
Now with simple maths width x height we have the area. But now we have a problem. What is the font size and type of font you are using. If you have a fixed width font then this is easy if you have a variable width font, then you may have a problem. But in essence, using the size of a letter you could workout by taking the area of the div divided by the area of a letter and you will know how many letters and punctuation can fit in the div.
Alternatively, and a little more complex, but an approach I would use, would be to add words to the div, until the div is larger than a predetermined height. When this happens, remove the previous word and add words to the next div. This can be done using javascript. I would suggest instead of pure javascript that you use a framework such as react, or angular.
Your question however lacks loads of information. In future, please provide some source code to show what you have done, how you are fetching the words and how you are rendering them.
I suggest you take a Udemy course and learn a little more about html, javascript and css. See here.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I tried using both inline and inline-block, but it doesn't work.
Here is my code:
http://jsbin.com/bixako/edit
in my opinion, the other answers are sort of hacky and do not address the real cause of this problem. The reason why this is happening is specifically related to using the html <figure></figure> tag which you've been putting your <img /> tags inside of.
The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
While the content of the element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.
Source: http://www.w3schools.com/tags/tag_figure.asp
The <figure> tag is going to automatically displace the element's position independent of the main content flow, and this is why it only seems to move into flow by using CSS float or position: absolute because float and absolute position also displace an element's position from it's main position flow.
Eliminate the <figure> tags and you will once again be able to use white-space: nowrap;, display: inline-block; and all the regular content flow alignment tricks.
Set the #imglist li to be float:left and clear the #imglist to prevent any overlap.
I quickly edited your example here http://jsbin.com/jutalasuqi/edit?html,output
I shrank the images as the sizes didn't fit next to each other.
Add below code and it will work:
#imglist li figure {
margin:0;
padding:0;
display: inline;
}
But still you need to fix the image size, li margin/padding issue to make them beautiful/organize.
Thanks
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm working on a directory page that's pretty simple--a company logo floated to the left, a company title and description on the right. There are about 150 of these, dynamically generated with PHP/MySQL. I recently made the entire site responsive minus the directory page. Right now I'm using tables for the directory which works perfectly. Many of the listings' descriptions vary in length (and therefore height) and using a table allows for the logos to stay perfectly centered with regard to the content.
In an effort to make this page responsive, I've tried to remove the table and rely solely on divs for the directory listings. This has been HELL. Getting an image vertically centered with a variable height on the containing div doesn't seem possible.
I feel like using tables isn't a bad practice in this case, as my data is "tabular" in nature. Am I wrong to assume this, and if not, how can I make the listings table responsive? It's hard for me to fathom being able to do so without changing the HTML (to a div style layout rather than table). Any help would be much appreciated.
You can make divs act like tables, I tend to stay away from tables entirely unless I am asked to code an email blast.
These will be your friends:
display:table;
display:table-cell;
vertical-align:middle;
As long as the images remain inline elements (you have not stated them as display:block) they can be vertically aligned by verical-align:middle and that is out of your way.
I would assume a wrapper class and some child elements with display:inline-block or even table-cell as APAD1 suggest would do the trick, if you can provide some more info we can see it in more detail.
Having said that, your data semantically, imho, would be considered list items and not tabular data and the best way would be to markup-them as li elements.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Whenever I'm creating a page with a horizontal component, most of the top-level elements are usually div's where I set display to inline:block. For example:
<div id='header'>
<div class='inline_block'> stuffff </div>
<div class='inline_block'> stuffff </div>
<div class='inline_block'> stuffff </div>
</div>
#header{width:100%}
.inline_block{width:20%; display:inline-block;}
This always achieves what I want it to, but it feels wrong. Can anyone shed some light on this for me?
The div element has no special meaning at all.
Authors are strongly encouraged to view the div element as an element
of last resort, for when no other element is suitable. Use of more
appropriate elements instead of the div element leads to better
accessibility for readers and easier maintainability for authors.
Source
In practicality, most sites use divs heavily, and that's fine. However, HTML5 adds new tags which do have a meaning (and even HTML 4 has tags which may be more appropriate, such as li, dl, etc.)
It is the user agent which implements the display characteristics a div. All browsers apply a default style of display:block (the same way as the user agent uses display:inline for spans). Contrary to other answers/comments I've seen, inline is not the same as inline-block, so just swapping spans for divs will not give the same behavior.
In certain cases, it makes complete sense to alter the display of select divs to inline:block. It's a useful behavior.
Is there a "better" element? Perhaps, but that decision should be based on properly structuring the document, not the default style assigned by the browser.
More importantly, ensure that you are using semantic markup and CSS that makes sense (using a class name of "inline-block" is not a good idea; if you change the corresponding CSS to something else, the name is now wrong).
There is nothing wrong with using inline-block, but I would question it if you are using classes like inline-block. You want to use more meaningful class names and if those classes need to be set to inline-block, that is fine. In your example, if all immediate child divs are to be inline-block, you can do it like this:
#header > div {
display: inline-block;
*display:inline; //IE7
*zoom:1; //IE7
}
One thing to note is that in IE7, inline-block doesn't work as expected unless hasLayout is triggered, which you can do with zoom:1.