I do not know what I need to use to create the fundation of my website. Tipically, I want a design structure having 3 columns in the main content. (column 1 = navigation panel, column 2 = central for content, column 3 = advert panel).
What ares the best practises (using CSS3 if possible) to realize this design ? I hesite between the flexible box layout OR grid layout OR multiple column method. (I do not understand what is the most adapted to my case, in order to have a simple, flexible and less display bugged solution). I also want my website to fill as well as possible the screen (using the more available space).
Do I need to define a screen resolution, or all is possible with % ?
Tkx,
When implementing structure, I usually do something like the following (psuedo-code):
<div id="wrapper">
<div class="column" id="left">
<div class="column" id="middle">
<div class="column" id="right">
The wrapper could be fixed width or fluid. I usually fix width this and center it on the page using margin: 0 auto in the CSS.
The left, middle, right are for the columns. I would set display: inline-block in a class name called column and control each individual column size using it's id selector in the CSS.
I like the flexible box layout though as this is a good fit for this problem but I've yet to play much with it. If I'm not mistaken, I don't think it's supported in every browser as of yet but it might be worth a shot.
As far as dealing with different screen sizes, media queries in CSS are the way to go. There are numerous resources and step-by-step guides around the web that should get you up and going with this in no time. Hope this helps.
Related
In Figma(not really matter where) template has 1920px width. I want to create a page from it, but in the browser, the page has 1903px. Some of my elements do not fit and wrap down (when using flex-wrap e.g) due to it. So the question is, how to make it properly?
EDIT: On this
screen with clarification I tried to add fourth square but there no space so it wrapped to the bottom. Browser width is 1903px, within template I do from is 1920px. How other people do in situations like this, how it must be done to make it responsive on all pc screens?
Wrap it inside container like in bootstrap you can specify to which screen only it can wrap
For example:
.container-xl will only wrap your content inside container on xLarge screen only.
There are a couple of different ways to tackle this problem. The first would be something along the lines of Rashidtvmr's answer. You can use Bootstrap in your project and simply follow their guide for creating a grid system in your project. With bootstrap, you can solve your issue with something like the below code:
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Where a grid system is created of 12 columns and you can specify how many an element should take up with col-2, col-3, col-4, etc. If you want them all to be the same width over all screens, then just specify each as col and bootstrap will take care of the rest.
If you can't or don't want to use Bootstrap, the next solution would be to create your own grid system using CSS. Without an example of your code, it's hard to specify exactly how it should look but following this guide should help you out.
i have a Commercial Website Called Akaratak
In the Search Page in Mobile mode (after resizing the browser to the minimum)
there is a space left empty between some divs
as follows:
i know it must be a simple question but i couldn't get it to get aligned
As i can see you are using Bootstrap, but not in a proper way. You should change your layout to a 4 or 6 column one so the grid will auto adjust to a 2x2 layout as you want it.
Another thing that you can do is to make your layour like:
2x2
-1-
2x2
Using bootstrap classes you just need to add one class to the third object of each row making it sm-12 and the others sm-6. I suggest you to read more carefully Bootstrap grid system to use it the right way.
Instead you can use Bootstrap 4 grid system witch allow you to move and workaround your problem in a nice way.
You should remove the <div class="clearfix"></div> child on every <div class="deal-top-top"></div> parent :)
I have this CSS: https://cal-linux.com/styles/tutorial.css
And a sample page that uses it: https://cal-linux.com/tutorials/gswc++.html
When I display this on a smartphone (or when I check it through Google's Mobile friendliness verify service), the layout looks huge (badly cropped, instead of reduced to fit the smartphone's screen.
I only use proportional measures (for example, outsidecontainer's div has width 80%, inside right-most column has min-width 25%). I'm placing Google Ads in there, but it's a "Responsive" add, which is supposed to adapt to the page's available size and layout.
Any tips on this? I figured posting the actual links to the pages might be ideal; but please let me know if a "minimal" instance of code that reproduces the problem would be preferred.
Thanks,
Cal-linux
There are a few things I note here:
You use display:table-row and display:table-cell a bit too much. Those don't respond as well to the resizing especially if you have not specified the width of each item. Instead either use floats with a clear:both on the container's :after pseudo-element or inline-block. Either way you should define percent widths for the containers.
Your css has a lot of white-space:nowrap but doesn't use overflow:auto which forces the element to not resize the content and just stretch its parent container.
Aside from that a few places I see a fixed px width which makes it more difficult to resize. It doesn't seem to be your ads. Although google's script does throw an error about trying to put an ad in an 86px x undefined space. You can set a fixed height or at least a min-height to give the script an idea of how big an ad should be placed there.
The easiest solution is to incorporate bootstrap to do the heavy lifting of setting up a grid for what you want.
You can basically do your two column style like so:
<div class="container-fluid">
<div class="left-col col-md-11">
<!--- ALL YOUR CONTENT HERE //-->
</div>
<div class="right-col col-md-1">
<!---Google Ads go Here //-->
</div>
</div>
If you want to stick with your own style, by using the code inspector in chrome I was able to get to the following result when resized:
I made the tablerow class be a standard display:block
The first column was set to width:75%; display:inline-block;
The second column was set to width:25%; display:inline-block;
The autosize elements changed to display:block;max-width:100%; overflow:auto;width:auto;padding:0
The div.code blocks were changed to display:block;white-space:nowrap;width:auto;
Everything else stays the same pretty much. That should fix it, however you should note that frameworks like bootstrap help out with mobile sites by making the page columns collapse and go one ontop of another for mobile browsers so that they get maximum space.
I need to create a page layout like in the following illustration with twitter bootstrap:
The left and right sidebars should have a width of at least lets say 300px. If there is more space they can grow but they should not shrink (elsewhere navigation links will get cut).
The middle column should fill the entire space left.
I have tried it by assigning a min-width to the sidebar spans, but in this case the last sidebar (b) will switch to the next line if the browser content area width gets below 1300px.
I`m not using responsive twitter bs css.
Is there a way to avoid this ? I have already found some approaches, but only without bootstrap, which do not work for me.
As the site I am talking about is already running I will not paste code here but please take a look at it live at http://kunden.tommy-computer.at/fsv_noetsch/ (german)
Thank you for your help !
Best regards,
Thomas
If you use Bootstrap 2 responsive you can do something with fixed sidebars on the left and right.
<div class="row-fluid">
<div class="span3">
<div class="sidebar-nav-fixed">
...
</div>
</div>
<div class="span6">
main content
</div>
<div class="span3">
<div class="sidebar-nav-fixed">
...
</div>
</div>
</div>
example: http://bootply.com/60284
You can decrease/increase the spanX accordingly if you want sidebars narrower/wider etc..
Related
Bootstrap 4 Holy Grail Layout
finally found a very well working solution (for me) here also at StackOverflow:
How do I get a three column layout with Twitter Bootstrap?
Anyway thank you very much for your help guys !
You are using a grid system, so you should stick with the given grids widths. (even tought 99% of my clients who wants their design to be coded with bootstrap never respect the grid system and use random width, that kills the point of using a grid system)
If you change the width for one grid you must change it for the other too or it won't fit. (a.k.a you must edit the .span8 width to fit the content).
One that doesn't require the following:
Reliance on images (i.e. "faux columns")
Some kind of weirdness or "hack" put in specifically for IE
Requires IE to run in quirks mode
Doesn't have strangeness like one of the three DIVs overlapping the others (i.e. "holy grail")
Margins set to high negative numbers placing them well off the viewscreen (again "holy grail" layout)
I can't find a 3-column layout in CSS that doesn't rely on one of the above. And relying on one of the above seems to negate a lot of the advantage of using CSS over tables. I don't want to have to whip out Photoshop and resize an image every time I want to change the width of my left column. And I don't want to have to pull out the calculator to figure out how many pixels off the side of the screen my DIV has to be.
I should mention that I'm looking for an equal-height layout.
Anyone?
EDIT: I'm looking for a width of 100%, with the center column being liquid.
EDIT: I'm also hoping to specify the width of the left and right columns in pixels.
EDIT: Backgrounds can be transparent, but I would like a dividing line between the columns which runs all the way up and down.
There is no such thing as "simple" when you talk about CSS.
But there is a simple solution that is cross browser, degrades gracefully and is fully HTML and CSS compliant: use a table with three columns.
Reasoning: DIVs are not meant to have the same dynamic height. Therefore, CSS has no support for this. If you need a block element which makes sure that its children have the same height, then that's what tables are for.
[EDIT] Sorry to offend all you CSS fanatics out there but, frankly, when something is not designed to do something and you abuse it, and it doesn't work, please stop complaining, ok? A DIV is not a TABLE and can't be used as one without relying on hacks.
[EDIT2] As was said already in various places, the reason not to use tables for layout was that, in early times, tables were the only design element and that lead to HTML which had dozens of nested tables. That's bad. But that doesn't mean you must not use a single table to put everything in place and then rely on CSS to make the stuff inside look right.
A brain is like a parachute: It's nice to have but only useful when it's open.
You might be able adapt:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
I agree with Robert. Due to browsers interpreting CSS rules and rendering the final page differently I doubt you'll find a perfect solution without being more flexible in your requirements.
You can achive this by using jS.
If you were to create 3 Divs one float left one flot right and the middle as margin left & right with a width to centre it.
Then with a bit of JS each div having their own ID you could calcultate their height set the 2 lowers ones to the highest value.
Pretty simple with Jquery.
http://960.gs/
This one can be used for a 3-column layout (and for various other layouts). Personally, I don't think it's a great idea to use divs for everything, but it's simple and well .. it works.
edit: For a 100% width layout http://www.alistapart.com/articles/fluidgrids/ may help, but I'm not sure if this kind of layout still qualifies as "simple".
YAML
"Yet Another Multicolumn Layout"
(YAML) is an (X)HTML/CSS framework for
creating modern and flexible floated
layouts. The structure is extremely
versatile in its programming and
absolutely accessible for end users.
It contains some IE bug fixes, but you can remove them.
divide page into three columns, same height?
<html>
<head>
<style type="text/css">
#col_wrapper{
height: 400px;
}
.col{
width: 33%;
float:left;
height: 100%;
}
</style>
</head>
<body>
<div id="col_wrapper">
<div class="col">
one
</div>
<div class="col">
two
</div>
<div class="col">
three
</div>
</div>
</body>
no quirks and pretty plain.