Hello, I am from Croatia and I’m recreating my outdated school’s website.
I know this question has been asked to death, but still, I don’t understand what I have to change.
I found some guides, but whatever I add doesn’t help.
This is what the site looks configured to my monitor.
I centered it all with margins and used some absolute positioning.
I tried adding stuff like
body {
margin: 0;
padding: 0;
width: 100%;
text-align: center;
}
#wrapper {
width: 95%;
}
or
#wrapper {
width: 1080px;
margin: auto auto;
}
But it would all be misplaced.
The CSS
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
width: 95%;
}
#top-bar {
background-color: #18181E;
width: 100%;
height: 35px;
position: relative;
margin: 0;
padding: 0;
}
#Title {
font-family: 'Bebas Neue', cursive;
color: #DEC79B;
font-size: 30px;
float: left;
margin-top: 0;
}
#titleLogo {
float:left;
width: 55px;
height: 40px;
margin: 0px 2px 10px 60px;
position: absolute;
top: -4px;
}
.topBarMenuItem {
position: relative;
top: 4px;
font-family: 'Oswald', sans-serif;
color: #ffffff;
text-decoration: none;
font-size: 18px;
margin-left: 4px;
border-left: 1px solid #ffffff;
padding-left: 4px;
vertical-align: top;
}
#Home {
margin-left: 456px;
}
#arrow {
width: 25px;
height: 25px;
color: #ffffff;
margin: 6px 0px 0px 8px;
}
#clear {
clear: both;
}
#osABPicture {
height: auto;
width: 100%;
position: relative;
top: -25px;
}
#column {
width: 100%;
height: 35px;
background-color: #18181E;
position: relative;
top: -26px;
}
.borderRight {border-right: 1px solid #ffffff}
#loginButton {border: none; color: #DEC79B}
#ednevnik {
padding-right: 10px;
}
If I would add .center or remove margins for centering, the text would just sink or disappear.
I really want to continue this project but I don’t want to make a bad habit.
Any help or resource would be appreciated.