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
I am not a web programmer, but we all find ourselves needing to mess around with html, css, and javascript at some point. And every time I do, I find myself hating CSS's guts. This is almost entirely related to positioning. Many things that I think should be easy and straightforward turn out to be very difficult or even (seemingly) impossible.
Take centering something in the user's browser/interface. I recently wanted to do a "Coming Soon…" temporary splash page (cliche, I know), and I wanted a tiny piece of text or image to land right in the middle of the user's browser. Conceptually this couldn't be simpler, and yet to actually achieve this in CSS you have to do all kinds of tricks. I'm not asking how you achieve this. There are several tutorials/examples, including these two excellent ones:
http://css-tricks.com/centering-in-the-unknown/
http://www.dynamicsitesolutions.com/css/center-page-content-horizontally-and-vertically/
What I want to understand is why it is so complex to achieve something so basic? Why can't I just make a div (or whatever) that spans the height and width of the browser, and align something in the middle of that? Why do you have to come up with entire frameworks like Bootstrap (which, in my opinion, are still incomplete and hacky) to do things that should be a part of the philosophy of the implementation?
The people that come up with the CSS standard are much smarter than I am, and there must be a reason for this. What is their logic or philosophy behind how it is implemented? What am I missing? I want to understand, so at least next time I try to implement something I won't fool myself into thinking "This will be easy" when, I assume, there is a reason it can't be.
Because HTML/CSS is limited by its roots: ltr horizontal flow
When we first started making websites, HTML was designed as a simple way to make content flow, like in a magazine or a book. Maybe it would have images or embedded audio, but there was no way to foresee at the time that we would have websites in the millions of lines of code. HTML was designed with horizontal flow, not vertical flow in mind.
There are other examples of this:
It is comparatively difficult to vertically align text to the center or bottom of a page, this requires a lot of unintuitive understanding whereas central alignment on the horizontal plane is a simple text-align='center';
Tables are defined with <tr> table row tags, not <tc> table column tags.
Ever tried making a <DIV>, especially one wrapped inside other divs, the full height of the page (not screen)? It's not as easy as you'd think.
An element with height:100% is not automatically the same height as your browser, only the height of your content. See this example.
Because of the need to maintain backwards compatibility, browsers continue to use rendering engines based on left-to-right, top to bottom rendering. It seems unlikely that an alternative to HTML will take the web by storm any time soon, so we're probably stuck with this paradigm for the foreseeable future.
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 2 years ago.
Improve this question
I have a problem whenever the website changes its size in any way, whether it be the size of the browser or if inspecting the code in the web browser, any change to the size of the page makes it look really really bad. I only started learning to code last week and I picked up the challenge "social proof section" on frontendmentor.io to practice my HTML and CSS. If anyone could take a look at it and tell me what is causing it I would be very grateful! also, its quite embarrassing posting this here as I'm a total nooby and with having only started learning a week ago, my code is obviously very very bad
website link: https://blakebutlin95.github.io/Social-Proof-Section-Challenge/
Github link: https://github.com/BlakeButlin95/Social-Proof-Section-Challenge/tree/master/css
also sorry about one of the empty codes in the css file, I didnt even realise it existed until a minute ago
You are using absolute positioning ,it is positioned absolutely with reference to the closest parent that has a position relative value , If there are no parent elements that has a relative position, then the absolutely positioned element will take its reference from the browser window.
The problem isn't the resizing of the page. The problem is that you have used absolute sizes. That means when I open the page it looks even worse because I have a different screen size. You have to create different sections and the implement the objects in there.
This is how it would look on a smaller pc.
Here a sketch how to build it properly.
Try to use for horizontal sizing only % and for vertical sizing px.
Use for the boxes the <div> tag.
Sometimes you have to set it to display: inline-block; so that multiple div's will fit on one line.
It is also important to not set a height because it depends always on the device how much space the text will need. Try to use instead more padding.
Update:
A more modern approach would be with flex-box or grid.
It is cause you're using the absolute sizes, this will give problems for different screen sizes. Try looking up flex box and apply it here.
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 years ago.
Improve this question
I am not very good at CSS, especially when it comes to positioning things on the screen. Is it fine if I eyeball everything and use
position: relative;
with a number of pixels for many of the elements on the page? Is it considered sloppy/unprofessional?
It's totally okay and also it will render fast - possibly even faster than a normal flow-based content. Text flows require the browser to calculate literally every character's position and size and only then are they sure about anything that comes after. It's fairly obvious.
Using absolute or fixed positioning is a lot easier; it's mostly about pixels, no need to pre-render other elements. Relative positioning is a bit trickier, it can depend on earlier contents; on the other hand, this gives it's power.
So no, it's not a sin to use HTML/CSS this way. Check dev console for rendering performance and see how it's different when you're trying. But it should be fast, convenient and supported everywhere.
You can use different kind of scale types like fr, em, vh or % instead of px, it will more helpful when you chancing the size of the browser or using in mobile apps. You should use px in some part, too. Also, you can use position with other values like absolute, fixed etc.
The answer depends on a few factors, but styling the whole website using specifically positioned elements would be considered sloppy.
The reason for this is, that any new content could easily wreck your layout, not to mention having to specifically position everything again for each screen size you wish to support.
You would be much better off using a Flexbox layout (display: flex), or maybe a Grid (display: grid), as these were designed to solve the specific layout issues you might run into.
Even if you feel uncomfortable using CSS, it is worth spending some time getting to know Flexbox and Grid layout, because they can save you a tremendous amount of time and energy on the long run and they really bring back fun to developing frontend layouts.
However... if this is a small static site, and you are fairly sure the content will not change, or will change very rarely and you are comfortable with repositioning a few elements from time to time, you might be better off positioning things manually, if you are not in the position to learn some CSS magic right now.
Also, positioning a few elements here and there using position is completely acceptable.
But for layouts at scale, I'd recommend to go with Flexbox or Grid.
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 8 years ago.
Improve this question
When I want to move anything (text, images, etc.) in CSS, I find myself using margin-top with ridiculous values like 1000 or even higher. Sometimes I set the position to fixed and I can move the object vertically, but not horizontally.
I guess what I'm trying to say is what is the best way to move things around in CSS? Set the position to fixed? Use "top" instead of "margin-top?" When to use padding. When to use display. etc.
I'm asking this because 1. I'm new to website design and 2. the practice site that I'm making keeps getting messed up (ex. things go behind other things, the site only works in full scree (half screen totally breaks it))
You're question is way too broad. There are so many factors that come into play, it would be impossible to answer. It's kind of like coming onto a car forum and asking "How do I rebuild this car? Every time I unbolt a part of the car, it breaks." There is a lot you have to learn before you can dive in and start creating a site, just like there is a lot you have to learn about cars before you can start rebuilding them. You have to understand how CSS and HTML layout works.
I recommend you start with a basic course, a great one that's recommended often is CodeAcademy, you can try it here: http://www.codecademy.com/tracks/web
By the way, you do not want to use position and/or margin to layout your page. That would be a nightmare to maintain. You have to use a combination of many different elements and properties to properly layout a page. In the beginning it will be very confusing, but if you stick with it, you will learn it.
ok........
1st you need to learn html flow. You can position a lot of elements naturally using div and spans. Css should be used to modify width/ height etc for the majority of elements in this way. You should stick to natural flow as much as possible. Fixed position elements will remain fixed even when scrolling (unless inside div & some css...) so thats not really a solution for every element on your page.
Make a little effort to learn yourself and you will have it, unless you have a specific example of something you cant do, you should focus on tutorials of which there are plenty of.
Concentrate on html 1st and then start css tutorials such as width, dimensions of single elements, then classes of elements (elements with the same style).
Btw just to repeat myself..........position: relative; to keep in the flow, this trys to fit elements in a top to bottom and a little bit horizontal when you ask for it (span/ float: left/right;) enjoy!
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
I am new to web design, and am struggling to get my head around the design aspect.
Let me be more specific in my question...do most people make their websites look attractive, with 3d boxes, shadow effects, textured backgrounds etc with CSS entirely? Obviously photo editing would be done elsewhere but being new to CSS it is hard to see how it could be as powerful as using a piece of software.
For example - the website below...would the main nav bar at the top (with a different texture to the background), , the actual background and the box with Online 3d kit builder etc all be designed using CSS or do designers tend to create those types of objects elsewhere and just reference them as images in CSS code?
And referring to the images just below the main picture, would they have the link bar put on them with CSS or in another programme?
I realise all people do things differently, but I would really appreciate people's views/exeriences.
Link - http://www.mkksports.co.uk/
Thanks in advance
In this case, the backgrounds and logo are made elsewhere and referenced by the CSS. The buttons in the header (including their orange button look on hover) are pure css. The teaser images' ("UNI SHOP", "BESPOKE SERVICES, etc.) overlay text and formatting are pure css.
The idea: if you can do it in CSS, do. It makes it much easier to change the whole site at once, and keep it consistent. For example, you wouldn't need the same designer's original photoshop file to make a completely new teaser image. Just wrap the new image in the right class, copying the markup, and you've got a new identically-styled teaser with the exact same formatting effect.
You should always use CSS for styling whenever possible. CSS loads much faster and uses less bandwidth than loading a bunch of images. Any time you can use CSS to get the same effect as you could with a graphic design program, you should.
With CSS3 and HTML5 it's quite easy to accomplish a lot of the looks that used to require images.
That being said, the site you referenced is using background images for the navigation/page background, but they are using CSS for the hover effect on the links in the menu.
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 5 years ago.
Improve this question
What is technical difference between Fluid vs liquid vs elastic vs Flexible css layouts?
Are these all same or different technically?
Is fluid layout better for both mobiles and computer user?
I think there are only two properties to make fluid layout "em" and "%".
And we already use "em" for font even in fixed width layouts. What are other things we need to do to make site flexible? Which part should be flexible and which would be better as fixed? Or we should make whole thing flexible?
I suggest you to read some articles about this subject. Smashing magazine has a great post about it, to see which one is right for you. They have some definitions about these layouts and I believe they are very accurate:
Fixed:
A fixed website layout has a wrapper
that is a fixed width, and the
components inside it have either
percentage widths or fixed widths. The
important thing is that the container
(wrapper) element is set to not move.
No matter what screen resolution the
visitor has, he or she will see the
same width as other visitors.
Fluid:
In a fluid website layout, also
referred to as a liquid layout, the
majority of the components inside have
percentage widths, and thus adjust to
the user’s screen resolution.
Elastic:
There is a third option when working
with Web page layouts. An elastic
design is sometimes preferred by
designers because it mixes the two
other main layout types. It works by
sizing all elements with em’s. The
quote below explains exactly what an
em is and why it can be beneficial.
The pros and cons in the article are very concise too, with examples and further researching.
If you choose to use "fluidic" layouts, read their article about the subject as well.
They are all pretty much the same. If you want to get really picky, I guess you could say that elastic has a maximum width, whereas fluid might continue to increase in width as long as the window is widened. But generally, they are interchangeble.