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.
Related
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.
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 6 years ago.
Improve this question
Well, as the title says: is it consider as bad practice to use empty divs to style the page? of course if it's performance wise(instead of using images for example).
And second question is: is there any difference between div(as block element) and span(as block element) in any term of performance or anything else?
Thanks.
To answer your first question bluntly, yes. If you are resorting to using empty divs to style a page, you need to learn more about the features that CSS provides. Given enough thought, you should be able to set up appropriate margins, or line-heights to make that happen. Or start working on a flexbox layout.
And for your second question, all elements are basically the same. But we appropriate different semantics to provide meaning. Quoted from SO: What is the difference between HTML tags <div> and <span>?:
But in modern HTML all elements are supposed to have meanings: a <p> is a paragraph, an <li> is a list item, etc., and we're supposed to use the right tag for the right purpose -- not like in the old days when we indented using <blockquote> whether the content was a quote or not.
So, what do you do when there is no meaning to the thing you're trying to do? There's no meaning to a 400px-wide column, is there? You just want your column of text to be 400px wide because that suits your design.
For this reason, they added two more elements to HTML: the generic, or meaningless elements <div> and <span>, because otherwise, people would go back to abusing the elements which do have meanings.
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 6 years ago.
Improve this question
please,
which is better? benefits and disadvantages
Html Layouts
<header>
< nav>
< aside>
or
css layouts (divs with float)
thanks
It looks like you haven't understood the whole concept of building websites yet and I really recommend that you go through a good HTML tutorial first.
To answer your question:
You cannot compare HTML markup to "using divs with float".
The main purpose of HTML tags is to structure your site. If you don't use anything but elements it might work, but your text is unreadable and there are lots of disadvantages - for example that screen readers cannot understand the site or bad SEO.
You should always use the appropriate HTML tag and style it using CSS. One example: You might want to have a heading which is smaller than a subheading. Nevertheless you should still use for the main heading and style it using CSS h1 {font-size: 0.8em;}
Tags are often used as containers and are very useful as well. They complement your site structure.
HTML is used to structure the layout of the webpage, like the bones in our body and CSS is everything else covering those bones (skin, muscle, clothing, etc).
Example:
You want to create a login page.
HTML - creates the text field elements and the labels
CSS - sets the font style, text field shape and size, background color/image, submit button's color, corner roundness, etc.
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
We all now using table for layout is bad thing. But what's about using table-cell? E.g. i need two blocks one is 200px width and other is 100% - 200px (ye, i know about float hack and also about CSS3 calc).
What you are talking about is for display of a table and table cell. The idea about using tables for layout causes issues with the structure of the page. The CSS property does not affect structure hence there is no issue with using that for visual layout.
While you are right with the notion that using tables for layouts bad... that mostly stems from that additional unnecessary markup. td and tr elements do not provide the correct semantically meaning for what you want.
With that said, there is nothing wrong with applying display: table-cell; on divs, its just another way of structuring layout.
(In fact, table-cell provides one of the few ways to vertically center a div with variable height).
It's an ugly hack, but I don't think there's any problem with it.
The table is discouraged for design because it should hold tabular data - it's semantically wrong to put eg. menu and article in table cells.
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 9 years ago.
Improve this question
I am working on a (html/css) website to improve my skills but I am not sure if I am doing it the right way, because I have a lot of floats and sizes. I also need help with some css things:
What I have:
What I need:
The red dimensions in the image are the dimensions I've tried to give the objects and which I am not sure if it is the correct way of doing it.
The black words are the things I would like to change, but I am not sure how I can do it in a good way.
All my code:
index.html:
http://pastebin.com/PZZY7bFA
style.css:
http://pastebin.com/HyEdM6qF
reset.css:
http://pastebin.com/gxqWzFHN
I did not post the css code of the navigation menu because it is already working in a correct way.
I would be very happy if anyone can help me.
Regards,
Engin
Well, I don't have that much time right now. But I tell you this:
Your logo is an object wich is an inline element, same as (link) and normal text.
To vertical center inline elements use line-height: ?px; in your css. Set the ? to the height of your header
To vertical center other elements, such as block elements (f.e. div) you can define the parent as a table cell display: table-cell; and assign vertical-align: middle; to your block element. Of course this would also work for inline elements but the first method is easier here, since you don't have to declare the parent as a table-cell.
Anyway, if you really want to design websites you have to get to know all the princeples and behaviors. Check the urls that were just posted and keep learning A LOT!
I hope you can finish the navigation now:)