So, until now I was making a huge mess trying to center stuff (using random top/right values, ‘position:absolute’ and so on) and I read about the ‘margin:0 auto’ trick. But if I remove the ‘top’ property, my frame stays on top of the page.
With random values and ‘position:absolute’:
Without top/right/position properties (only ‘margin:0 auto’):
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Welcome aboard, sailor!</title>
<link href="reset.css" rel="stylesheet" type="text/css">
<link href="shiwi.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="icons/lifebuoy.png">
<meta charset="utf-8">
</head>
<body>
<!-- Background image -->
<div class="background">
<div class="ahoy">
<img src="img/ahoy.png" id="ahoy"/>
</div>
</div>
<div class="center">
<!-- Buttons -->
<div class="column-1">
<p>Studies</p>
</div>
<div class="btn-1-1">
<a href="http://centrodombosco.org/" target="_blank" title="Centro Dom Bosco">CDB</a><br><br>
</div>
<div class="btn-1-2">
<a href="http://www.hugodesaovitor.org.br/" target="_blank" title="Hugo de São Vitor">IHSV</a><br><br>
</div>
<div class="btn-1-3">
<a href="http://www.institutojacksondefigueiredo.org/" target="_blank" title="Instituto Jackson de Figueiredo">IJF</a><br><br>
</div>
<div class="btn-1-4">
<a href="http://sophiaperennis.com.br/" target="_blank" title="Instituto Sophia Perennis">ISP</a><br><br>
</div>
<div class="column-2">
<p>Anime</p>
</div>
<div class="btn-2-1">
<a href="https://www.livechart.me/" target="_blank" title="LiveChart">LiveChart</a><br><br>
</div>
<div class="btn-2-2">
<a href="https://www.animenewsnetwork.com" target="_blank" title="Anime News Network">ANN</a><br><br>
</div>
<div class="btn-2-3">
<a href="https://kitsu.io/" target="_blank" title="Kitsu">kitsu.io</a><br><br>
</div>
<div class="btn-2-4">
<a href="https://loja.panini.com.br//panini/vitrines/mangas.aspx?o=6&pg=1" target="_blank" title="Panini">Panini</a><br><br>
</div>
<div class="column-3">
<p>Misc</p>
</div>
<div class="column-4">
<p>Torrents</p>
</div>
</div>
</body>
</html>
CSS:
/* import font */
@font-face {font-family: 'Cookie'; src: url('fonts/Cookie-Regular.ttf');}
@font-face {font-family: 'fonty'; src: url('fonts/GT-Pressura-Mono-Regular.ttf');}
@font-face {font-family: 'Allura'; src:url('fonts/Allura.ttf');}
@font-face {font-family: 'Ananda'; src:url('fonts/Ananda.ttf');}
@font-face {font-family: 'ShadedLarch'; src:url('fonts/ShadedLarch.ttf');}
@font-face {font-family: 'Dulcelin'; src:url('fonts/Dulcelin.otf');}
@font-face {font-family: 'January'; src:url('fonts/January.ttf');}
@font-face {font-family: 'HoneyScriptLT'; src:url('fonts/HoneyScript-Light.ttf');}
body {
font-family: 'fonty';
}
a {
text-decoration: none;
color: inherit;
}
/* big ahoy text on the top */
img#ahoy {
width: 25%; height: auto;
top: 8%; left: 37.5%;
position: absolute;
}
/* background image */
div.background {
color: #656460; padding: 0;
height: 100%; width: 100%;
position: absolute;
background: url('img/bg.jpg');
background-repeat: round;
}
/* yellow box at the center */
div.center {
position: absolute;
height: 30%;
width: 50%;
margin: 22.5%;
padding: 0;
top: -5.41%;
right: 2.94%;
/* background-color: #EBE4C1; */
background-color: rgba(235, 228, 193, 0.45);
box-shadow: 2px 1px 11px 6px rgba(0,0,0,0.25);
}
/* columns properties */
.column-1>p, .column-2>p, .column-3>p, .column-4>p, .column-5>p{
font-size: 300%;
line-height: 110%;
color: #000;
}
.column-1, .column-2, .column-3, .column-4, .column-5{
position: inherit;
text-align: center;
border-color: rgba(155, 155, 145, 1);
border-style: groove;
font-family: "Cookie";
opacity: .9;
width: 20%;
height: 18%;
top:6%;
overflow: hidden;
text-decoration: none;
border-bottom: 1.5px solid;
}
.column-1 {right: 77%;}
.column-2 {right: 53%;}
.column-3 {right: 28%;}
.column-4 {right: 3.0%;}
/* btn properties */
.btn-1-1, .btn-1-2, .btn-1-3, .btn-1-4, .btn-2-1, .btn-2-2, .btn-2-3, .btn-2-4{position: absolute;font-size: 140%;}
/* btn text properties */
.btn-1-1>a, .btn-1-2>a, .btn-1-3>a, .btn-1-4>a,
.btn-2-1>a, .btn-2-2>a, .btn-2-3>a, .btn-2-4>a{
width: 200px;
line-height: 190%;
text-align: center;
}
/* btn positions & decorations */
.btn-1-1 {top:30%;right:76.8%;display:flex;} .btn-1-1:hover {background-color:#FF3133;color:#FFF;box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.25);;}
.btn-1-2 {top:45%;right:76.8%;display:flex;} .btn-1-2:hover {background-color:#FF3133;color:#FFF;box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.25);;}
.btn-1-3 {top:60%;right:76.8%;display:flex;} .btn-1-3:hover {background-color:#FF3133;color:#FFF;box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.25);;}
.btn-1-4 {top:75%;right:76.8%;display:flex;} .btn-1-4:hover {background-color:#FF3133;color:#FFF;box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.25);;}
.btn-2-1 {top:30%;right:52.8%;display:flex;} .btn-2-1:hover {background-color:#FF3133;color:#FFF;box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.25);;}
.btn-2-2 {top:45%;right:52.8%;display:flex;} .btn-2-2:hover {background-color:#FF3133;color:#FFF;box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.25);;}
.btn-2-3 {top:60%;right:52.8%;display:flex;} .btn-2-3:hover {background-color:#FF3133;color:#FFF;box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.25);;}
.btn-2-4 {top:75%;right:52.8%;display:flex;} .btn-2-4:hover {background-color:#FF3133;color:#FFF;box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.25);;}
Everything is a huge mess because I’m really noob and tried to do more than I could.
Welcome to the forums, @shiwi.
Is the first image the way you want things to look?
The first thing I notice in your code is this:
<!-- Background image -->
<div class="background">
<div class="ahoy">
<img src="img/ahoy.png" id="ahoy"/>
</div>
</div>
If that image is intended to be a purely decorative background, then it should be applied by CSS as a background image, not included in the HTML.
If the image is content and needs to be in the HTML, then you should specify its width and height.
e.g.
<img src="img/ahoy.png" id="ahoy" width="800" height="600"/>
(Not only does that help the browser to render the page, but it helps us to know the size of your image, as we don’t have access to it.)
Try fixing that using the other background properties such as background-repeat, background-size, etc: https://developer.mozilla.org/en-US/docs/Web/CSS/background
I have not been through it in great detail, but casting a quick glance over the css, it really needs to be completely re-done.
Steer clear of all that absolute positioning and “magic numbers” nonsense. That is absolutely not the way to create a page layout. elements should follow a natural document flow and should not require to be each individually placed in this way.
The image “ahoy.png” is the big “ahoy text” at the top. The painting is a background, but not of the body, I made it a background of div.background.
In that case “Ahoy” is content, so probably should not be a background.
Here’s a start with no positioning required.
The resulting code is a tenth of the size and much easier to manage. I have not used any of the original code but just concentrated on the effect required. It can easily be customised to suit.
That’s awesome! Would it work if, instead of using an h1 for the text, I used an img?
Yes of course as long as the image is left as an inline element. If you make it display:block then you will need margin:auto on the image. You should still put the image in the h1 tag because that is the main title of the page. Remember to include the alt attribute in the image for accessibility.
Set yourself up with a free codepen account and then just fork my demo and play with it. It uses display:table and table-cell behaviour for vertical alignment but could easily be done with flexbox also. The benefit is that you can change content without needing to change any code and it all and just works.
Never use absolute positioning in the way that you originally did as that will never work or be manageable. Absolute positioning is good in small doses in controlled situations but very rarely useful for a structured layout.
I did what you showed with an h1 and it worked well, but the img can’t be centered the same way. How can I center it?
Nevermind, changed it to display:block and used the ‘margin:0 auto’
Text-align:center on the parent will center the child image as long as the image remains at its default of inline (in exactly the same way that you would center text) . If you have made the image a block element then margin:auto on the img tag will center it.
The text-align:center didn’t work when it was an inline, so I changed the it to a block element and used the margin trick.
It has to be applied to the parent element, not the element itself.
Thanks for the tips, guys! Now everything’s working and easy to manage.
One last question, how can I increase the line width? I wanted the red highlight to be the same size on every link.
Add display:block to the anchor elements.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
