I wonder if anyone can help me understand a little more on positioning
I've read a lot of information regarding floats, position types and flex.
I understand the basics of it, but i´m having trouble with the simple things.
Which is the regular way professional front end developers use to positioning elements? Do they use float, position: relative|absolute or do they use flexbox or css grid? Or a combination of all?
Do professional developers use CSS reset everytime they make a new website?
I am making a header(it doesnt have a nav bar..just a logo and a title)
I want the logo to be on the left, and the title on the right.
So if i use inline-block i get this weird result where "World Guitars" is not aligned to the logo, but a little below.
#logo {
height: 60px;
width: 50px;
border: 2px solid #34495e;
margin: 2px;
align-self: center;
}
header p {
font-family: Poppins;
font-size: 2em;
margin-left: 500px;
align-self: center;
}
header p,
img {
display: inline-block;
}
<header>
<img src="images/logoGM.jpg" alt="logo" id="logo">
<p>World Guitars</p>
</header>
If i do it with floats, it gets better, but its still so strange..
header p {
float: right;
width: 900px;
}
header img {
float: left;
}
section nav ul {
clear: both;
}
<header>
<img src="images/logoGM.jpg" alt="logo" id="logo">
<p>World Guitars</p>
</header>
Finally in position:relative, and absolute I'm kind of lost.
Can i use position relative and assign values to my heart's content or is this not recommended?
How do i do it in this case?
Thank you!!
Display vs Position vs Float
In general I would say that the modern way to position elements is to use display properties - typically using display:flex or display:grid on parent elements to position their children, or using display:block, display:inline or display:inline-block on an element to position it self.
Where you would use position:relative and position:absolute is if you need to take an element out of flow. A typical case is if you need some elements to overlap. (ie. if you have three canvases that you are laying on top of each other).
Floats were a standard way of positioning elements (ie getting something to sit on the right of the page) in the old days. But now flex box has come along.
However - where you might want to use floats is if you want text to wrap around the element - like it might in a news paper. This is especially important as now HTML elements don't need to be rectangular. See this example.
CSS Resets
I use them. Why not.
These days, typically you might be using some kind of styling library like Material-UI or Bootstrap anyway, but yeah.
In regards to what you're trying to do.
I would use flexbox here.
You have used 'align-self' here - but align-self only applies to a child of a flex parent.
header {
display: flex;
flex-flow: row nowrap;
/*By default this is row wrap - I like to always be explicit with it*/
align-items: center;
/*center vertically, (because the flex flow is row*/
}
img {
border: solid 2px black;
max-height: 100px;
/*size the image*/
object-fit: scale-down;
/*make the image keep it proportions*/
}
p {
font-weight: bold;
font-size: 2em;
}
<header>
<img src="https://www.designevo.com/res/templates/thumb_small/black-wing-and-brown-guitar.png" alt="logo" id="logo">
<p>World Guitars</p>
</header>
I love answering questions like this! Feel free to add additional question comments. Source: I've been doing front-end web development for about 8 years.
Q1. Which is the regular way professional front end developers use to positioning elements?do they use float, position..relative,absolute..or do they use Flex?(or css grid?)Or a combination of all?
The short answer is a combination of all, but there is more to it than that. I would say most of the time developers will use a CSS framework like Bootstrap, Materialize, or Foundation. These frameworks provide a lot of abstraction over writing everything yourself, such as simply defining rows and columns using classes, and simple classes to define how those columns behave when resizing the screen. CSS Grid has a lot of the same concepts as these frameworks, but I would say it is less accessible if you are just starting out.
When it comes to writing custom CSS for things that are specific to your brand or project, I would say most of your larger scale positioning is done with relative positioning (such as padding, margin, width, etc) or flexbox. It is generally not a good idea to create your overall site structure out of absolute position elements or using floats for a few different reasons, which I can go into if you are interested, but positioning something on a small scale, using absolute positioning is common (For example a floating tooltip or a notification popup).
Q2. Do professional developers use CSS reset everytime they make a new website?
It depends. Many frameworks include CSS resets to ensure your website looks the same across browsers. I would generally say it saves time fixing things like odd button shadows in Firefox or extra input borders appearing in Safari.
In regards to your code question, I think this is a perfect application for flexbox! You said "title on the right" so I am unsure if this is exactly what you are looking for.
header {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
height: 60px;
width: 50px;
border: 2px solid #34495e;
margin: 2px;
}
.title {
font-family: Poppins;
font-size: 2em;
margin: 0;
}
<header>
<img src="https://placeimg.com/50/60/any" alt="logo" class="logo">
<p class="title">World Guitars</p>
</header>
This depends on your needs and intent. In terms of units, CSS has units that have an absolute size (think centimeters, etc.), and units that are scaled relative to the font size, or relative to the size of the viewport you're working inside. There's no right or wrong unit to use, it depends on what you need. Details on units are here: https://www.w3schools.com/cssref/css_units.asp
In terms of whether to use flexbox or not, it can be a very useful tool if you want elements on the page to be able to scale dynamically, depending on the device or window size they're being displayed in. You can also use it to create responsive pages without javascript, with a combination of flex-wrap and setting minimum widths for elements. But not all designs benefit from flex, and sometimes you need elements that don't shrink or grow depending on the device they're being displayed on. Grid is older than flex, but still useful. It's very commonly used with bootstrap.
In terms of your specific example, I suspect the issue you're seeing is because your text is inside of a <p> block, which puts it on a new line. Try putting it inside of a <span> block instead, and give that block an id so that you can set attributes for that ID in your css if you need to.
Related
Code :
html -> https://pastebin.com/zNekXPLQ
css -> https://pastebin.com/tifEY0A4
I want to make the instagram button 30px from the right and 30 px from the top. But when using margin-right: 30px;, nothing happens, and when using right: 30px;, it plain disappears. Can someone please explain when and how to use margin-right ect and right, left, top, bottom attributes if at all? I'm new to html/css and positioning elements seems to be the hardest bottleneck to pass.
You have position:fixed on .topbar but there is no width to it. Set a width to inherit from container, and then set position for the button, i recommend adding the class to the a tag instead of the img tag
Html:
<a href="https://www.instagram.com/majic.photography/" target="_blank" class = "instagrambutton">
<img src="instagram-logo-white.png" alt="majic.photography" />
</a>
CSS:
.topbar {
position:fixed;
width:inherit;
}
.instagrambutton {
position: absolute;
width: 50px;
background-color: black;
padding: 10px;
top:30px;
right:30px
}
The others have provided the answers you need. My answer is not the answer you really want right now, but I am providing it because you are new to HTML and CSS.
Can I strongly recommend moving away from Absolute positioning it becomes damn near impossible to manage when you start thinking about cross-browser compatibility and now cross device compatibility (30px on a desktop is far different from 30px on a mobile screen). When I was new to software development I used absolute positioning a lot and having to almost write a new CSS script for each browser/device with custom styles (maybe slightly exaggerated).
Having been out of the field and then coming back in in the last year or so, I strongly recommend learning and using bootstrap to style your web page.
This is what my page looks like:
Now when I add another post:
It is aligned to the left, but I want them to be centered.
How can I center them?
#demo {
float: left;
margin: 0 auto;
width: 980px;
list-style: none;
}
#demo li {
background: #fec722;
float: left;
margin: 10px 0 10px 15px;
width: 178px;
}
#demo img {
height: 243px;
margin: 3px;
width: 172px;
}
<ul id="demo">
<li><img src="http://goo.gl/0nSAIH"></li>
<li><img src="http://goo.gl/0nSAIH"></li>
</ul>
(JSFiddle)
All you really need are two lines of code (and you can get rid of all the floats and clearfix divs):
#shelf {
display: flex;
justify-content: center;
}
Revised Fiddle
Benefits of flexbox:
minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.
To learn more about flexbox visit:
Methods for Aligning Flex Items
Using CSS flexible boxes ~ MDN
A Complete Guide to Flexbox ~ CSS-Tricks
What the Flexbox?! ~ YouTube video tutorial
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer. More details in this answer.
You just can't float something to the left and align it to the center at the same time.
What I recommend you here, is to avoid the float, and instead set display: inline-block; to the li's. That, in addition to a text-align: center; to the ul makes the trick.
Here's the jsfiddle updated: https://jsfiddle.net/jormaechea/tm91znz2/5/
Look Here It is not identical, but it's a start.
A few things worth mentioning
ID's must be unique to one element, you had multiple list items with the same ID.
To align an element horizontally, it needs to have a display of block, a set width, and a margin on the left and right of auto. This will not work on floated elements. You can also control inline elements with text-align.
Avoid floating elements about the page. Floats are over used, there are much better options to aligning content.
First, about the floats
Stay as far away from floats as you can. They will cause problems with your layout unless you are experienced in their use. 90% of the time, if there is a problem on a page with floats, the floats are the problem. Instead, you should use display: inline-block, it's the best thing since sliced bread.
Floats can be useful for things like putting an image in a paragraph of text, then allowing the text to flow around the image naturally. Other than that, you can probably find a better way to achieve what you're after.
Next, the spacing
So you have some spacing problems. In general, stay away from margins as much as possible (kind of like floats, but not as bad). Margins add to the box sizing, instead of being included in it, as well as they can do other funky things in different situations. If you have to use a margin, use a margin, but try to avoid them. Instead, use padding where you can. You can utilize a container element, then apply padding to it in order to give the appearance of a margin.
When it comes to inline-block elements, space between the tags in the HTML itself will be rendered as a single space. To get around this, set the font-size of the parent to 0, then reset the font-size on the child elements (the default font-size on all modern browsers is 16 pixels).
Lastly, the alignment
Once you've taken all of the advice above into consideration and applied it to your code, just use text-align: center on the parent, reset it on the children, and you're good to go!
Here, have an example, free of charge
#demo {
text-align: center;
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
}
#demo li {
text-align: left;
font-size: 16px;
display: inline-block;
padding: 10px;
}
#demo img {
height: 243px;
width: 172px;
}
#demo .inner {
background: #fec722;
padding: 3px;
}
<ul id="demo">
<li><div class="inner"><img src="http://goo.gl/0nSAIH"></div></li>
<li><div class="inner"><img src="http://goo.gl/0nSAIH"></div></li>
</ul>
Related
https://developer.mozilla.org/en-US/docs/Web/CSS/display
https://developer.mozilla.org/en-US/docs/Web/CSS/float
https://developer.mozilla.org/en-US/docs/Web/CSS/margin
https://developer.mozilla.org/en-US/docs/Web/CSS/padding
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
Farewell Floats: The Future of CSS Layout
What You Should Know About Collapsing Margins
So I am vertically aligning content to middle with ghost element method:
html {height: 100% } body {min-width: 100% }
.block {
text-align: center;
height: 600px;
}
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.centered {
display: inline-block;
vertical-align: middle;
}
It's a straightforward method, I get the content in the middle but I really dont want any fixed heights, I want it to be dynamical. Though I added height: 600px in code sample, because it gets it to seemingly work but not dynamically.
When I add a fixed height I get what is on the left side of the picture but I also want it to be like right side when the viewport height is smaller so it would cut the top and bottom empty spaces, which can't be done with fixed height.
So any other methods or solutions that work good are appreciated!
Also IE8 support would be also nice.
Update: https://jsfiddle.net/duthzvyo/
Make it so when you squish the viewport height that no scrollbar happens the grey box so to speak squishes as well.
If you want to use purely CSS (i.e. not scripting the width dynamically with JavaScript in your current setup) then I'd recommend using the newer flex-box model, which is a lot more powerful.
See some tutorials on flex-box.
Other solutions (potentially advanced because they require JavaScript coding, but easier in concept if you know how to code in JavaScript) include Famo.us and (work in progress) infamous.
Also check out the following, based on Cassowary Constraint Solvers:
https://gridstylesheets.org/
https://github.com/IjzerenHein/autolayout.js
These last two libraries make it really really easy to center elements (among other things) within dynamic layouts, where you define your layout rules in a declarative manner similar to CSS, but they're much better than traditional CSS in my humble opinion.
I'd recommend checking those tools out. :)
I'm new at web design and I’m doing a 2 column layout web site. After reading a couple tutorials, one of them said the best approach is using 'the box model' concept which means (+-) not positioning every single element.
What’s the best approach? The easy one?
Can someone supply an example layout?
If you are new to web design I strongly recommend reading this!
You can only began start making layouts after dominate ‘box model’.
Box model is much more positioning elements, box model says every single element is your page comports like a square that have width, border and margin attributes.
With this attributes you can position an element, eg using margin-left: 100px moves your element 100px from left element!
My layout is a fluid layout that means I not using ‘fixed’ values such as ‘px’
header {
background: rgb(76, 67, 65);
margin-bottom: 16px;
height: 96px;
padding: 32px 0 0 2%;
}
.col1 {
float: left;
width: 60%;
padding-left: 2%;
}
.col2 {
float: right;
font-size: 90%;
line-height: 1.6;
width: 34%;
padding-right: 2%;
}
footer {
background: rgb(100, 98, 102);
height: 80px;
clear: both;
}
Hope this can help!!
I'm not sure how new you are exactly at CSS but there are some easy things that you can do. CSS is very flexible. Here are a couple options:
Option 1:
If you're going to have more than just text and such in your two columns, you're going to want to probably have two separate containers for the content, in which case you're going to want two <div>'s (these are elements that are already set to display as blocks--it makes more sense than other elements).
If you give the divs some css like this:
.column {
display:inline-block;
width:50%;
}
What this means is the two elements will respect the positions of each other in a line, and each take up exactly half of the line's space.
Another similar option is to give them float:left; instead of display:inline-block;. What this means is the elements will "float" above the other elements on the page, pretending as though they don't exist. This means the parent elements won't wrap all the way around them anymore (although this can be prevented with clear:both; on an element that comes after them). Float elements are really handy a lot of the time, but I find that inline-block is usually a cleaner option.
Option 2:
This is the easy way to do it! If you just have text, you can get away with only using a single element and giving it the css:
.columnLayout {
-webkit-column-count:3; /* Chrome, Safari, Opera */
-moz-column-count:3; /* Firefox */
column-count:3;
}
Have a look at Mozilla Developer Network's information on it if you're interested!
It's important to remember that this IS CSS and there are a LOT of options with CSS. I'd recommend to keep trying new things! You never know which will work the best for your designs.
Also, about the box-model thing, a box-model is the "box" that an element displays as. It's important not to define what each box is exactly--or else you'll be teaching yourself the ancient form of how the internet was displayed. There's no fluidity in making a layout that can only work in one resolution, and will only work with certain content!
If you have any questions let me know! =)
please check out the codes first:
html:
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="menu">
HOME
</div>
</div>
</body>
</html>
css:
#container
{
width: 80%;
margin: auto;
height: 450px;
}
#menu
{
background-color: #1b9359;
height: 25%;
}
.button
{
text-decoration: none;
float: left;
font: bold 1.2em sans-serif;
line-height: 115px;
margin-left: 20px;
display: block;
text-align: center;
}
.button:hover
{
background-color: #2cd282;
}
so what i would like to acheive is that when i hover to the home button, the whole div changes color, and does not get distorted or mispositioned on zoom. one answer told me that i could use display: block, but that it does not work as you can see. however, i did manage to make it work with display: block when the menu pane is like a vertical column and not a horizontal one. could anyone pls explain why this happens, and how display property of css affects that element? and how to achieve the full highlight without zoom distortion?
If you use percentages as your height and/or width then it will be a percentage of the parent container.
If you want your page to behave well when using a zoom, ie. ctrl + mouse wheel up or down, size everything in your page using em. 1 em = 16px by default. Just get used to using em. Get a calculator out and start converting things. Trust me, it's worth it to have a page that zooms straight in in out without jumbling.
Your outermost container may use percentages as long as you're using an auto margin for the central contents this is an exception to using em, that way things will still be centered on all resolutions. When I say outermost container, I mean body...
Before I tell you how to make it work I'll answer the other questions:
"...I did manage to make it work with display: block when the menu
pane is like a vertical column and not a horizontal one. Could anyone
pls explain why this happens, and how display property of css affects
that element?"
Block elements stack on top of each other vertically. This means that in a vertical arrangement if the zoom level is changed, those elements are perfectly at home taking that extra space up to the right side. Now, if they are intended to be lined up horizontally, display block will not work because that is simply just not what it does. Display inline-block will stack them horizontally preserving heights and widths set for the container, and to my own dismay, adding tiny margins between elements unlike the use of float, which would be touching the previous element, but float is definitely not something I would recommend for a nav menu.
Let's say you have your first link, and it is display:block. It will start its own new horizontal line, assuming there is not a float:(side) item before it with extra space to fill. In that case, you would add clear:both(or :left/:right) to overcome this. Now let's say you want to add a second link to the right of the first one which is display:block. The second one could be display:inline-block, and it would be on the same level as the first one, but if you did this the other way around, the second one, which is display:block, would start on its own new line below.
Now, to make your button do what you want it to do:
I will assume for the purpose of giving you a good answer that screen width in pixels is 1280px. So 80% of that is 64em. That is (1280px * .80)/16px = 64em because 1em = 16px. As I mentioned before, we do this to make your site elastic when it zooms.
You've previously designated #container as height:450px; So let's convert that. 450px/16px = 28.125em (em values can go to three decimal places, but no more) This is good, so we have an exact conversion, and not a rounded value.
container is now finished and should be as such:
#container
{
width: 64em;
margin: auto;
height: 28.125em;
}
Next change height in #menu. You have it as height:25%. That is 25% of 450px/or/28.125em If we leave it at 25% it will mess up the zooming. So let's convert. 28.125em/4 = 7.03125em
This time we must round to 3 decimal places. So we get 7.031em.
menu is now finished and should be as such:
#menu
{
background-color: #1b9359;
height: 7.031em;
}
Next is your button class.
.button
{
text-decoration: none;
float: left;
font: bold 1.2em sans-serif;
line-height: 115px;
margin-left: 20px;
display: block;
text-align: center;
}
At this point I lose some of my own certainty about how CSS will react, but I will start with this. Do not use float:left and Display:anything together. In this case, use display:inline-block. Get rid of the float:left. I am not sure why you have a line-height set. I am guessing it is your way of attempting to set a height for your button because it is 2.5px larger than the height of #menu (line-height of .button = 115px, height of #menu = 112.5px which we have already converted to 7.031em). If that's what you're trying to do you're doing it wrong. get rid of line height, and make it the same height as its container so that it fills it. height:7.031em;
I'll assume if you're making a horizontal menu, that you aren't trying to make one button take up the entire width. If you do not give it a width, it will fill the whole row. I'll be bold and guess you probably want your button somewhere in the ballpark of twice as wide as it is high. Let's just go with 15em(240px). width:15em;
Last is margin-left... 20/16 = 1.25em. Cake.
Now we have:
.button
{
text-decoration: none;
font: bold 1.2em sans-serif;
height: 7.031em;
width:15em;
margin-left: 1.25em;
display: inline-block;
text-align: center;
}
Keep in mind that block elements, whether inline or not, have little built-in margins on top of the margin-left that you've added.
If you make these changes, your page should zoom beautifully and your link will fill out its container vertically, but be a specified width to keep it clean. Never use px or percentages if you want to avoid zoom slop. The body container is 100% by default, but it holds everything and therefore the things in the center seem to grow outward toward the edges and therefore do not show any visible effect from the body not being set based on em, and it also makes the page naturally friendly with a variety of screen resolutions.
I hope this helps.
Edit:
As I mentioned, I lost some of my certainty. The line:
font: bold 1.2em sans-serif;
Does something that makes the container be larger than 7.031em removing that line fixes the problem, but I do not know the remedy if you insist on a font size of 1.2em. I tried setting height to 6.831em instead of 7.031em and it did not do the trick.
A few more tips:
1) If you still feel that you need a margin, perhaps margin-right would better suit you so you don't have random slack space to the left.
2) The CSS I provided does not adjust for the vertical alignment of your link text; to fix it add line-height:7.031em; to the .button class. Note: this method only words with single lines of text!!!