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 last month.
Improve this question
This might be a weird question but on youtube in guides I always see people using flex and grid.
I've started learning them but prior to that I was using block and inline-block exclusively.
So do people use flex and grid only?
And also is flex different from flexbox because vs code displays them as 2 different options.
Well, I generally use display: block when a element with display: none has to be made visible.
Also, paragraphs and spans are inline elements. I find it quite difficult to work with inline elements, so whenever I style them, I generally make them block elements (may be not if they are children of a grid).
But in case of containers, yes I normally use display: grid. And they are generally have default display value of block, so why change it to block again?
As far as flex and flexbox go, I don't know much about flexbox. But as far as I know, flex is the improved version of display: box and display: flexbox.
If you are planning to code css for others to see such as in a professional context, the safe bet is most often flex or grid, but they all have their uses in different contexts. My suggestion to you would be to go into the inspector on some of your favorite websites and see what they use. It you like one way better than the other or find one way more understandable, then use that one, otherwise, just use both.
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 5 months ago.
Improve this question
I'm having issues with my process, since I'm a newbie in HTML-CSS.
The thing is...Whenever I begin my CSS codes I'm having some issues with the
text-align:
font-family
font-size
font-weight
they all seem too similar to me, sometimes I end up doing something that I didn't wanted to.
As an example, in this print
Anyway, I'm taking back all the study I had with CSS so that I can strengthen my knowledge.
I just wanted to share what I'm going through. A lot of things in the CSS seems the same to me and it's confusing!
So text-align determines whether your text is oriented at the left, right, or center of its container, much like the alignment feature on Microsoft Word. Font-family is what kind of font you're using (Arial, Times New Roman, etc.). Font-size is just that, how large your font is, while font-weight determines whether your font is bold or not.
If you want the 2 images to be side by side, rather than one on top of the other, I recommend setting the parent container's display property to flex and its flex-direction to row like this:
.parent-container{
display: flex;
flex-direction: row;
}
You can learn more about Flexbox at https://css-tricks.com/snippets/css/a-guide-to-flexbox/ I found this website invaluable when I was a CSS beginner.
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 6 years ago.
Improve this question
Is it safe/acceptable when using flex containers to also use margin-top(bottom, left, right) and padding to shift a little space either, in between elements or to the left/right? Or is it better to use the flex-basis in combination with defined widths?
I think a better way to put your question is
Is margin & padding a "flex-way" to arrange elements inside a flex container? - Still doesn't make much sense but I guess the answer should explain why.
Answer
Flexbox(flexible box) is a layout concept & just provides a more efficient way to lay out & distribute space among its elements inside a flex container & gives you extra power to control your elements with unique properties like order, flex-grow, flex-shrink etc. - Very similar to what a grid layout does. Now you wouldn't ask a question like - "Can you use grid frameworks like Bootstrap along with margin/padding?" would you?
A simple answer to your question - Ofcourse you can, it all depends on your requirements. Its subjective not wrong/right to use them with flex. So yes, you definitely can use margin/padding in conjuncture with Flexbox and if your requirements demands it(which most of the time is the case) or you could just go complete "flex-way" using flex-basis(similar to width) etc. Sometimes when these won't suffice you will have to use padding/margin which again is very much safe/acceptable(I don't know what that means here though - however you take it).
Just need to understand that when you have defined a container as flex you cannot use few block properties like text-align etc.
Hope you got the right perspective.
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 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:)