Incredibly new to CSS, I have done some very basic stuff over the years but I am trying to find a solution to a design I would like to create for my Drupal product page. I have tried searching but it's like since I am self-taught I have no idea what terms I should be searching for.
Here is the layout I am looking to design (attached).
So I want basically a 2 column layout with a 3 column header that is located in the main section. Should/Can I do this with grids? I am not too terrible sure what I should be searching for to understand how to make this happen. My only concern with a grid is that I can't have the sidebar contained to a single row height. Can someone point me in the right direction?
Thanks so much!
Since you are looking for a grid-based system, I would highly recommend taking a look at Bootstrap for implementing your desired layout. Take a look at the link and it will explain how exactly to achieve your layout specified above.
Related
Really struggling with the can't find a definitive answer on this. Trying to help my local community by promoting a list of business that are still operating during the covid-19 outbreak.
My problem is that the table width in mobile view looks awful and basically chops off the last column. Please can you advise any css I could use to correct this?
See https://www.larklaneguide.com/delivery-and-takeaway-on-lark-lane-during-covid-19/
TIA
Clare
Hi for the last month I have started to learn CSS.Fist thing I did is read everything i could find on www.w3school.com , after that I started reading CSS Mastery 2nd edition.I have build a couple of my own websites with succes but I'm still not happy with what I know , I even practiced with the new CSS3 elements.
I've seen alot of cool stuff build using css especialy on http://www.cssplay.co.uk/ but the only problem is the source code is not displayed and I don't know how the bloody things are.A good example is this:
http://www.cssplay.co.uk/menu/tilt.html
And these is only one of the things that I've seen on this website and would like o learn how to build them.
So anyone know any other similar sites that ofer a good explanation on the more advanced stuff about css(not beginer stuff like building some drop down menus , rollover or hover efects )?Any advice is much apreciated thank you!
As already mentioned, tools like Firebug/Chrome Inspector are definite must haves.
I gained the most experience from real world problems with various different browsers. You make a site, it doesn't look so good in a particular browser. So you search on the internet. Find a solution and memorize it. I think that CSS in itself is a fairly simple tool, I class 'advanced' CSS as mastering the various techniques required to make sites work cross browser and in browsers like IE6/IE7+.
Also, Never give up with CSS, if you find a problem try and find an answer. Most of the time, there will be a simple solution.
In general, make sure your CSS is as simple as can be. I generally find that most complicated CSS can be replaced with relatively simple code, and find people get carried away and forget simple techniques to achieve similar solutions. One such problem, would be putting a button on the right hand side of a div, like below:
-----------------------------------------------
| Button |
-----------------------------------------------
You may see that some people will float the button right, adding more complexity than necessary. What ever happened to text-align:right? :-)
Finally, make sure you find a couple of blogs you like, for example http://csstricks.com and read them, taking note of new techniques. Try and master a '2 column layout', understand the difference between block/inline-block/inline, margin collapsing, tables, html forms, IE6/7 hasLayout, the list goes on. Most of which you will cover if you try and make a website template from scratch. Maybe start with an existing site and see if you can achieve the same layout.
I'm not sure with CSS how to learn it's pitfalls without encountering them mistakenly.
It looks like the stylesheet for the maze is located at: http://www.cssplay.co.uk/menu/candr/tilt.css. You can use that against the source code to figure it out.
One of my favorite is A List Apart. Great articles, not only about CSS like I linked, but about web design and more.
Also HTML Dog has some nice CSS entries.
Then, you can find great CSS resources on the w3 site.
I was given a website in ASP.NET and I have to change the look of it by adjusting and fixing the div tags etc. What is the easiest way I can learn how to do this efficiently? The previous user was making use of tables to set the images etc
Thanks
You need to redesign the complete website or just change some setting keeping table layout.
table is good for displaying for rows and column data.
but in any case you need to use CSS Cascading Style Sheets www.w3schools.com/css/default.asp
Its easy to work in asp.net, just create masterpage and it will help you manage your design. and give a same look to all pages.
I hope it help you.
I'm in need of some pointing in the right direction here...
I have a site with a couple of different content types. I want to display this content in a book-like layout. The book should be of a fixed width and height and the pages should be populated with as many nodes as can fit. It should be in two columns, with the left column being filled before the right one.
How should i approach this?
I have been thinking about a few solutions, don't know which are possible and which one is best or which i can combine.
I could just create a view that selects more nodes than is need. Then check how long the nodes is in the theming layer and throw away the nodes that aren't needed. Pagers need to be fixed too.
Use panels in combination with views to display one view in two columns, if this is possible. Need a way to determine the amount of nodes that is displayed on each page, based on content length.
Write a plugin/handler for views so that i can select an amount of nodes that has an maximum, predetermined, max content length.
Write a new display-style for views that shows content in two columns with fixed heights.
Write a custom module, leave views and panels out of it and do everything myself with db_queries.
Would appreciate and guidance a lot. Not looking for a finished solution, i'm not afraid to code and i will contribute back if i create something that someone else can use (like a views plugin). Just need someone to guide me in the right direction :)
The hardest thing will be to figure out how much content you need to fill out the space. There's not really a good way to do that either since, it will depend on both the markup and the styles.
The best solution I can think of is loading the nodes with javascript, or maybe just have them available as javascript variables. That way you could insert the nodes to your page one by one. You could then in the JS see the heights of all the nodes in total, and once that height is bigger than x, you only need to remove the last inserted node.
It's not a perfect solution, but I think you should look at doing this with JavaScript. The only problem is, that it wont degrade gracefully very well.
Drupal help you build fast, and it looks like promising but fails to fullfil the needs of client, designer also programmer. You need to write one module page, and some functions.
5th solution you gave has little trouble than others. Write a function that to have "teaser like" behavior, I will return formatted node according to its type. Don't lay on drupal's teaser system. If teasers will have different heights, add height to teaser function.
I don't have a direct answer, but have a few things for you to think about.
It sounds to me like what you are looking for is a combination of a CSS3 Multicolumn Layout (see http://www.quirksmode.org/css/multicolumn.html for example) and limiting the displayed content to a fixed height.
My first thought would be to create a single view that gets more than you need, display it using CSS3 columns, and set overflow: hidden; for the container, so that the extra text is just hidden.
If you need to get more particular, you may need to dig in to the views rendering system to limit the total number of nodes based on how many characters have been rendered.
But since your desired constraint is more visual than data-oriented, I think that the most practical approach will be to use javascript to detect the text height and state of overflow.
There are some things that are unclear about your requirements. What is the purpose of the 2 content types? Does one display on the left and the other on the right? Or are these just 2 different content types that should behave the same way, but we're only seeing one content type at a time on a given page? What should happen with the overflowed content? Should it appear dynamically on page 2, then 3, then 4, and so on?
One parting thought: Maybe load ALL the content that you want to page through, directly to the browser. Maybe have it start off hidden. Then use javascript to display it, formatted into columns, and use javascript to handle the paging as well.
I'm trying to figure out why I would use a grid system. I have read some but I just don't get it. I'm used to just putting stuff in html on a page and beind done with it but I have a new project and would like to use a grid because apparently it is a best practice.
I read in one article referenced in another SO question and it said that grid design was in all sorts of development, even application form design. That made me think of things like snap to grid, etc. and I didn't know if the grid in the web design sphere was the same. I was hoping someone could give me a brief but not overly complicated view and not a link to Google which I have used already.
Thank you for any help.
EDIT: I found this website the easiest: http://www.zurb.com/playground/css-grid-builder but again, what do I do with 12 columns? Is everything in a column "smashed" to fit in a column? that doesn't make sense to me.
EDIT: I read the grid 960 tutorial below and was feeling better but at the end it says:
You can just as well use the concepts of Grid 960 in the production code, but it is not recommend sticking with a framework all the way through production. CSS frameworks are just like any tool, they have their uses. With that in mind, go forth and prototype!
I'm not trying to take this out of context but if I don't use it in production, what's the point? I understand the need for prototyping but if I like the prototype why not use the 960 grid? I may not understand the comment. Thanks.
EDIT:
Is the 960 system for production?
I think you're too focused on thinking about grids as applied to web and applications, and need to do a little research about the underlying reasons why grids can be useful for any form of graphic and information design, whether pixels on a screen or hand-drawn ink on paper.
I would recommend you take a step back from the computer, forget about 960, divs, snap-to-grid, and HTML entirely for a bit, and if possible flick through a few graphic design books and magazines and do a bit of doodling. Or even just pick up a newspaper and have a think about what underlying grids they use (how many columns are there, are they the same width, do grids differ across pages or sections, which elements stick to the grid, which diverge from it?).
The Grid System has a good list of resources.
Then you should be in a better position to think about how grids in general might be useful for your projects, and whether a particular model such as the 960 grid might be useful.
When i design any user interface/web design i don't pay attention to a grid layout until i start to have my main elements constructed. once that is done i implement a grid to flow nicely with those main elements for easy visual scanning