I created this code that displays the paragraphs in second line ... is there a better way to do this?
JSFiddle
HTML CODE:
<p id="first">Primul paragraf</p>
<p id="second">Al dolea paragraf</p>
Code css:
#first
{
width:130px;
background:red;
display:inline;
float:left;
}
#second
{
width:150px;
background:blue;
float:right;
display:inline;
}
Thanks in advance!
If you're looking for two distinct pieces of content to live next to each other, check out a simple grid layout.
If you're trying to mush two distinct pieces of content into one line, then you're using non-semantic HTML, and you should switch to using a different heirarchy of tags to accomplish your content-smushing.
I believe I understand you correctly that you're looking for - essentially - a two column layout. I strongly recommend the css-tricks "Don't Overthink It Grids" layout, and I'm using a slightly (slightly) more complicated grid layout in production sites.
Related
I want to have two columns on my web page. For me the simples way to do that is to use a table:
<table>
<tr>
<td>
Content of the first column.
</td>
<td>
Content of the second column.
</td>
</tr>
</table>
I like this solution because, first of all, it works (it gives exactly what I want), it is also really simple and stable (I will always have two columns, no matter how big is my window). It is easy to control the size and position of the table.
However, I know that people do not like the table-layout and, as far as I know, they use div and css instead. So, I would like also to try this approach. Can anybody help me with that?
I would like to have a simple solution (without tricks) that is easy to remember. It also needs to be stable (so that it will not accidentally happen that one column is under another one or they overlap or something like that).
i recommend to look this article
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
see 4. Place the columns side by side special
To make the two columns (#main and #sidebar) display side by side we float them, one to the left and the other to the right. We also specify the widths of the columns.
#main {
float:left;
width:500px;
background:#9c9;
}
#sidebar {
float:right;
width:250px;
background:#c9c;
}
Note that the sum of the widths should be equal to the width given to #wrap in Step 3.
I agree with #haha on this one, for the most part. But there are several cross-browser related issues with using the "float:right" and could ultimately give you more of a headache than you want. If you know what the widths are going to be for each column use a float:left on both and save yourself the trouble. Another thing you can incorporate into your methodology is build column classes into your CSS.
So try something like this:
CSS
.col-wrapper{width:960px; margin:0 auto;}
.col{margin:0 10px; float:left; display:inline;}
.col-670{width:670px;}
.col-250{width:250px;}
HTML
<div class="col-wrapper">
<div class="col col-670">[Page Content]</div>
<div class="col col-250">[Page Sidebar]</div>
</div>
Basically you need 3 divs. First as wrapper, second as left and third as right.
.wrapper {
width:500px;
overflow:hidden;
}
.left {
width:250px;
float:left;
}
.right {
width:250px;
float:right;
}
Example how to make 2 columns http://jsfiddle.net/huhu/HDGvN/
CSS Cheat Sheet for reference
I found a real cool Grid which I also use for columns. Check it out Simple Grid. Wich this CSS you can simply use:
<div class="grid">
<div class="col-1-2">
<div class="content">
<p>...insert content left side...</p>
</div>
</div>
<div class="col-1-2">
<div class="content">
<p>...insert content right side...</p>
</div>
</div>
</div>
I use it for all my projects.
The simple and best solution is to use tables for layouts. You're doing it right. There are a number of reasons tables are better.
They perform better than CSS
They work on all browsers without any fuss
You can debug them easily with the border=1 attribute
I am in the process of designing the layout for the pages of a hybrid Cordova/Android app where I need to use a non-standard, not rectangular, header. The shape I wuold like to get is like the one shown below
I am trying to accomplish this with pure CSS3 and have got a fairly decent result thus far as shown below.
body,html{padding:0;margin:0}
.ust
{
height:4vh;
width:100vw;
position:relative;
background-color:orange;
display:block;
}
.oval
{
position:absolute;
height:12vh;
width:160vw;
top:1vh;
left:-30vw;
border-radius:100%;
background-color:orange;
display:block;
}
.timer
{
position:absolute;
height:10vh;
width:10vh;
border-radius:100%;
background-color:orange;
left:calc(50vw - 5vh);
top:9vh;
}
<div class='ust'>
<div class='oval'> </div>
<div class='timer'> </div>
</div>
My effort does not look quiet as nice as the version I am trying to copy principally because of the way the "timer" element meets the "oval" - in a sharp corner. The roundedness of the junction in the sample image is missing.
I have tried to work in the roundedness using the timer::before/after pseudo-elements and playing with their individual borders but try as I might I cannot get that concave junction effect.
I'd be most grateful to anyone who might be able to suggest a way to accomplish this.
A great way to do that is with a clip path. This is a great website that generates the CSS code you need of the path to create that unique shape:
https://bennettfeely.com/clippy
I have a series of tables that are stack on top of one another. They could be a single table, but for functional reasons, they are split up. They look something like this:
Now, the problem is that they aren't lining up as I would expect them to. The code that governs them looks like so (It is quite lengthy):
http://pastebin.com/eWhEPzF5
The structure is 3 tables deep, and you can see it poke outside of the most inner table when it splits tables. Global styles are pretty simple:
body *
{
font-family:'Consolas';
font-size:12pt;
padding:0px;
}
table
{
border: 0px;
border-style:solid;
padding:0px;
border-spacing:0px;
border-collapse:collapse;
}
td
{
padding:0px;
border:0px;
height:25px;
border-style:solid;
}
--
Now, I originally thought the input boxes is what was screwing up the alignment, but after removing them completely, nothing changed. In fact, adding rows one by one, it only 'breaks' when I add the first row of the first table ("Oh my look at all this data").
I doubled checked all the styling and everything and it all is correct.
Why aren't these cells lining up?
use class, <col> tag and colspan to set equals width in each tables.
add table-layout:fixed; to avoid width to be resized by content.
Now, if you make a codepen from your pastbin it would be confortable to re-use your code and see what you are up to , to devellop further.
regards
Try using this on all the tables:
table-layout:fixed;
Table layout property in w3schools
Regards,
Nikola
There are various places you have the typo
cellWdith310
Assuming you've left out some CSS then that could be the issue
UPDATE:
Here's a JS fiddle. There were just various problems with your HTML such as not having enough TDs in the last table etc. Diff the source see what's different
http://jsfiddle.net/AhLAD/7/
When creating HTML5 and CSS3 designs is it better to primarily use margin and padding for your designs over positioning or the other way around?
I've never really thought about it before and use both side by side to get the results where needed but it's possible to design in both ways as shown in the examples below:
HTML
<div>
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
</ul>
</div>
CSS Example 1 - Using margin, padding
div{
width:1000px;
margin:auto;
}
ul{
margin-left:10px;
width:100px;
}
li{
height:30px;
}
span{
margin-top:10px;
}
CSS Example 2 - Using just positioning
(Apart from the margin:auto ..)
div, ul, span{
position:absolute;
}
div{
width:1000px;
margin:auto;
}
ul{
left:10px;
width:100px;
}
li{
height:30px;
}
span{
top:10px;
}
For a typical page layout, Example 1 is much cleaner and you should choose that, given the choice.
Example 2 is bad because as soon as you start setting position: absolute on everything, any flexibility your design may have had goes out the window. You have to set explicit dimensions on everything.
In general (there are exceptions), avoid position: absolute for the main layout unless it's only way to do it.
Here's an example of the kind of problem I was talking about. It would appear that the user ended up using JavaScript to fix his problems. Not good.
All of the above. Positioning is good for things that pop out or can be dynamically created. Sometimes the positioning is actually a derived placement. The padding and margins generally are used for how those elements will be placed in relation to other elements. So an item can have padding, margins, and positioning and have all those attributes be relevant to the element.
A common theme is to get the client environment and then design based on relation to their viewable area.
See this link https://stackoverflow.com/a/8857735/1026459 for javascript to get client screen size (cross-browser compliant).
as rule of thumb, position rules are most suitable, as implied by their name.
margins are not very reliable due to their model inconsistency across browsers, thus less adapted for that purpose.
having said that, most layout techniques are a mash-up of both of these, and both are used in conjunction.
I want to have two columns on my web page. For me the simples way to do that is to use a table:
<table>
<tr>
<td>
Content of the first column.
</td>
<td>
Content of the second column.
</td>
</tr>
</table>
I like this solution because, first of all, it works (it gives exactly what I want), it is also really simple and stable (I will always have two columns, no matter how big is my window). It is easy to control the size and position of the table.
However, I know that people do not like the table-layout and, as far as I know, they use div and css instead. So, I would like also to try this approach. Can anybody help me with that?
I would like to have a simple solution (without tricks) that is easy to remember. It also needs to be stable (so that it will not accidentally happen that one column is under another one or they overlap or something like that).
i recommend to look this article
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
see 4. Place the columns side by side special
To make the two columns (#main and #sidebar) display side by side we float them, one to the left and the other to the right. We also specify the widths of the columns.
#main {
float:left;
width:500px;
background:#9c9;
}
#sidebar {
float:right;
width:250px;
background:#c9c;
}
Note that the sum of the widths should be equal to the width given to #wrap in Step 3.
I agree with #haha on this one, for the most part. But there are several cross-browser related issues with using the "float:right" and could ultimately give you more of a headache than you want. If you know what the widths are going to be for each column use a float:left on both and save yourself the trouble. Another thing you can incorporate into your methodology is build column classes into your CSS.
So try something like this:
CSS
.col-wrapper{width:960px; margin:0 auto;}
.col{margin:0 10px; float:left; display:inline;}
.col-670{width:670px;}
.col-250{width:250px;}
HTML
<div class="col-wrapper">
<div class="col col-670">[Page Content]</div>
<div class="col col-250">[Page Sidebar]</div>
</div>
Basically you need 3 divs. First as wrapper, second as left and third as right.
.wrapper {
width:500px;
overflow:hidden;
}
.left {
width:250px;
float:left;
}
.right {
width:250px;
float:right;
}
Example how to make 2 columns http://jsfiddle.net/huhu/HDGvN/
CSS Cheat Sheet for reference
I found a real cool Grid which I also use for columns. Check it out Simple Grid. Wich this CSS you can simply use:
<div class="grid">
<div class="col-1-2">
<div class="content">
<p>...insert content left side...</p>
</div>
</div>
<div class="col-1-2">
<div class="content">
<p>...insert content right side...</p>
</div>
</div>
</div>
I use it for all my projects.
The simple and best solution is to use tables for layouts. You're doing it right. There are a number of reasons tables are better.
They perform better than CSS
They work on all browsers without any fuss
You can debug them easily with the border=1 attribute