CSS

Flexible Content in CSS

rookie investor Allgemein, Web ,

Prevent Overlapping

Let’s have the following website that displays the CSS logo as an image. The image is displayed in its original size.

flexible_content_1

The page is produced by the the following html and css file:


<!DOCTYPE html>
<html>
<head>
<title>CSS overlapping</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="imageholder">
<div class="centering">
<img class="img" src="css.jpg">
</div>
</div>
</body>
</html>

view raw

index.html

hosted with ❤ by GitHub


html, body {
background-color: lightgrey;
margin: 0;
}
.imageholder {
position: absolute;
margin: 10% auto;
width: 100%;
height: 60%;
background-color: darkblue;
}
.centering {
margin: 0 auto;
width: 40%;
height: 100%;
background-color: black;
}

view raw

main.css

hosted with ❤ by GitHub

As soon as the page is decreased, the image overlaps its intended area (black area) which is not desired.

flexible_content_2

The solution to this problem is to introduce both the properties max-width and max-height. They will prevent the image from overlapping to other areas.


…
.img {
max-width: 100%;
max-height: 100%;
}
…

view raw

main.css

hosted with ❤ by GitHub

Keeping aspect ratio

Keeping aspect ratios in responsive websites is primarily important for videos and images. In the following it is show how the aspect ratio can be kept. Again there is a index.html and a main.css:


<!DOCTYPE html>
<html>
<head>
<title>CSS aspect ratio</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="container">
<div class="element">
</div>
</div>
</body>
</html>

view raw

index.html

hosted with ❤ by GitHub


html, body {
background-color: lightgrey;
margin: 0;
}
.container {
position: relative;
height: 0;
padding-bottom: 25%;
background-color: red;
}
.element {
position: absolute;
height: 100%;
width: 100%;
background-color: darkblue;
}

view raw

main.css

hosted with ❤ by GitHub

The relevant part here is to set height:0 and padding-bottom: 25% in the container selector. This will create a container that is 4 times as width as height because a padding is always calculated of the elements width. The aspect ratio is even kept if the browser size is changed.

Werbung

Centering elements in CSS

rookie investor Web , ,

A common problem in CSS is centering elements wherefore various approaches exist. But often if I need one at a time, no one comes to mind. So I summarize here briefly how to center elements in CSS horizontally and vertically.

Consider the following simple website, which shows a colored box.

website_centering

The code for the index.html looks as follows


<!DOCTYPE html>
<html>
<head>
<title>CSS centering</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="box bluebox"></div>
</body>
</html>

view raw

index.html

hosted with ❤ by GitHub

and the code for the cascading style sheet named main.css is as follows:


body {
height: 2000px;
}
.box {
height: 100px;
width: 100px;
margin-bottom: 10px;
}
.bluebox {
background-color: blue;
}

view raw

main.css

hosted with ❤ by GitHub

By the way, a modern text editor for web design is brackets. I’m using this editor for designing webpages and highly recommend it.

My preferred way to horizontally center the box is by adding the margin property to the selector. The updated CSS looks as follows:


body {
height: 2000px;
}
.box {
height: 100px;
width: 100px;
margin-bottom: 10px;
}
.bluebox {
background-color: blue;
margin: 0 auto;
}

view raw

main.css

hosted with ❤ by GitHub

The values of the property are set to 0 and auto. 0 means that the top and bottom margin are equal to 0. Auto says move left and right in the equal amount that finally centers the box on the page.

Centering the box vertically on the page is as easy as follows:


body {
height: 2000px;
}
.box {
height: 100px;
width: 100px;
margin-bottom: 10px;
}
.bluebox {
background-color: blue;
position: absolute;
top: 50%;
margin-top: -50px;
}

view raw

main.css

hosted with ❤ by GitHub

Centering the box horizontally as well as vertically is a bit more complicated. But the trick here is to add a container element which is vertically centered and its width is set to 100%. The box is contained in this container and then can be horizontally centered. The code looks as follows:


<!DOCTYPE html>
<html>
<head>
<title>CSS centering</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="container">
<div class="box bluebox"></div>
</div>
</body>
</html>

view raw

index.html

hosted with ❤ by GitHub


body {
height: 2000px;
}
.box {
height: 100px;
width: 100px;
margin-bottom: 10px;
}
.container {
position: absolute;
top: 50%;
margin-top: -50px;
width: 100%;
}
.bluebox {
background-color: blue;
margin: 0 auto;
}

view raw

main.css

hosted with ❤ by GitHub

Whenever, one is playing with CSS and trying to achieve such things, it it often very helpful to set a background color for the different elements.This gives a good way the „optically“ debug the code and seeing exactly what is going on.