CSS

Details: Written by: Stanko Milosev; Category: CSS; Published: 13 October 2015; Last Updated: 13 October 2015; Hits: 10809

Lets say for example that we have this HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/index.css" type="text/css">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <div class="mainContainer">
        <div class="subContainer">
            <div class="subSubContainer">
                <div class="someText">
                    some text
                </div>
            </div>
        </div>
    </div>

</body>
</html>

and this CSS:

.mainContainer {
    border: 1px solid rgb(0, 0, 0);
    width: 400px;
    height: 400px;
    position: relative;
    left: 100px;
    top: 100px;
}

.subContainer {
    border: 1px solid rgb(0, 0, 0);
    width: 200px;
    height: 200px;
    position: absolute;
    left: 100px;
    top: 100px;
}

.subSubContainer {
    border: 1px solid rgb(0, 0, 0);
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50px;
    top: 50px;
}

.someText {
    left: 18px;
    top: 38px;
    position: absolute;
}

Live example:

some text

Now we will convert just width and height of subContainer in css to percentage, and formula looks like:

width: calc(100 * 200% / 400);
height: calc(100 * 200% / 400);

Where 200% is 200px from subContainer, 400 is 400px from mainContainer and we multiply it with 100 in order to convert calculation to percentage.
The whole css would look something like:

html, body
{
    height: 100%;
}

.mainContainer {
    border: 1px solid rgb(0, 0, 0);
    width: calc(100*400%/1859);
    height: calc(100*400%/1089);
    position: relative;
    left: 100px;
    top: 100px;
}

.subContainer {
    border: 1px solid rgb(0, 0, 0);
    width: calc(100 * 200% / 400);
    height: calc(100 * 200% / 400);
    left: calc(100 * 100% / 400);
    top: calc(100 * 100% / 400);
    position: absolute;
}

.subSubContainer {
    border: 1px solid rgb(0, 0, 0);
    width: calc(100 * 100% / 200);
    height: calc(100 * 100% / 200);
    position: absolute;
    left: calc(100 * 50% / 200);
    top: calc(100 * 50% / 200);;
}

.someText {
    left: 18px;
    top: 38px;
    position: absolute;
}

Notice that I added:

html, body { height: 100%; } and formula to calculate height looks like:

height: calc(100*400%/1089);

Because height of my view port is 1089.

Details: Written by: Stanko Milosev; Category: CSS; Published: 23 January 2015; Last Updated: 23 January 2015; Hits: 4354

One example on dropping shadow.

HTML:

<!DOCTYPE html>
<html>

	<head>
		<link type="text/css" rel="stylesheet" href="/index.css">
	</head>
	
	<body>
		<div id="myShadow">I am with a shadow</div>
		<div>I am without a shadow</div>
	</body>

</html>

CSS:

#myShadow {
	-webkit-filter: drop-shadow(0px 3px 5px rgba(0,0,0, 1.2));
}

Check the example here.

Details: Written by: Stanko Milosev; Category: CSS; Published: 23 January 2015; Last Updated: 23 January 2015; Hits: 4604

To add three dots at the of too long text can be done with text-overflow: ellipsis.

HTML:

<!DOCTYPE html>
<html>

	<head>
		<link type="text/css" rel="stylesheet" href="/index.css">
	</head>
	
	<body>
		<div id="textEllipsis">The quick brown fox jumps over the lazy dog</div>
	<body>

</html>

CSS:

#textEllipsis {
	text-overflow: ellipsis;
	width: 200px;
	white-space: nowrap;
	overflow: hidden;
}

The only problem with this approach is if you need wordwrap then it seems that you will have to use javascript...

Details: Written by: Stanko Milosev; Category: CSS; Published: 24 October 2014; Last Updated: 30 October 2014; Hits: 4835

Example of tables in CSS.

HTML:

<!DOCTYPE html>
<html>

	<head>
		<link rel="stylesheet" type="text/css" href="/index.css">
	</head>

	<body>
	
		<div class="tile-grid-row">
			<div class="tile-container">
				<div class="tile-small">
					Tile one
				</div>
			</div>

			<div class="tile-container">
				<div class="tile-small">
					Tile two
				</div>
			</div>
		</div>
		
		<div class="tile-grid-row">
			<div class="tile-container">
				<div class="tile-small">
					Tile three
				</div>
			</div>

			<div class="tile-container">
				<div class="tile-small">
					Tile four
				</div>
			</div>
		</div>		

	</body>

</html>

CSS:

.tile-grid-row {
	display: table;
	width: 444px;
}

.tile-container {
	display: table-cell;
}

.tile-small {
	width: 221px;
}

In HTML notice line: <div class="tile-grid-row">, then notice how I defined CSS class:

.tile-grid-row {
display: table;

After that in CSS notice line: display: table-cell;

display: table tells the element to display as a table. Nested elements should be displayed as table-row and table-cell, mimicking the good old TRs and TDs.

Example download from here.

---

Better and simple example of table with borders.

HTML:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="/index.css">
</head>

    <body>
        <div class="tile-table">
            <div class="tile-row">
                <div class="tile-cell">
                    <div class="description-text">
                        Tile one
                    </div>
                </div>

                <div class="tile-cell">
                    <div class="description-text">
                        Tile two
                    </div>
                </div>

            </div>


            <div class="tile-row">
                <div class="tile-cell">
                    <div class="description-text">
                        Tile three
                    </div>
                </div>

                <div class="tile-cell">
                    <div class="description-text">
                        Tile four
                    </div>
                </div>

            </div>

        </div>
    </body>

</html>

CSS:

.tile-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

.tile-row {
    display: table-row;
    border: 1px solid #000;
}

.tile-cell {
    display: table-cell;
    width: 50%;
    border: 1px solid #000;
}

.description-text {
    position: relative;
    top: 1%;
}

Here notice first border-collapse: collapse, and then border in cell and row. Example download from here.

Subcategories

CSS3

Page 3 of 8

Converting pixels to percentage

Shadow

Three dots at the end of text

display: table

Subcategories

CSS3