Trying to achieve a simple head of page with CSS

HTML & CSS
1

Hi guys.
I try with this code: https://codepen.io/ekka94/pen/ZovygQ , to have this head of this page:

1000Ă—1823 355 KB

so I want also to have an idea of how can I make the main image up of the page, without any negative margin.
thanks in advance.

2

Thank you for posting your code.

The problem description was not clear to me. Where is the negative margin that you wish to eliminate?

seeking clarification from ekka

EDIT: This is how I see your CodePen:

721Ă—591 43.1 KB

1 Like
3

thank you @ronpat for taking time and responding me, you gonna notice the problem here if you compare the image with the CodePen.
so the problem is that I have a margin-top by default on (.titlebar) class (the white space between the gray-#ebebeb and the top bar), after that we have a misalignment of two texts (IMAGINATIVE) and (Free PSD website template), I don’t know how to align them like in the image , and the last suggestion is about the div how wrapped the big image and the navbar.
and thank you in advance.

4

Like this

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title Alignment</title>
<style>

.title {
  float: left;
  margin: 1em;
  font-family: 'Times New Roman', Times, serif;
}
.title h1, h1 + small {
  display: inline-block;
  vertical-align: middle;
}
.title h1 {
  margin: 0;
  color: #000;
  font-size: 1.8rem;
  text-transform: uppercase;
}
h1 span {
  font-size: 2.8rem;
}
h1 + small {
  font-size: 1.1em;
  line-height: 1.1;
  margin-left: .5em;
  padding-left: .6em;
  color: #a8a8a8;
  border-left: 2px solid #a8a8a8;
}
</style>

</head>
<body>

<div class="title">
  <h1><span>I</span>maginative</h1>
  <small>Free PSD<br> Website Template</small>
</div>

</body>
</html>

420Ă—101 2.73 KB

1 Like
5

I’m sorry but I cannot find a class .titlebar in your code. I do find an ID,

 #titlebar 
{
    background-color : #ebebeb;
    min-height : 290px;
}

but it does not have any margins assigned and divs do not have default margins.

Further down the page, I see a class .titles.

.titles {
    margin: 55px 0 0 20px;
    text-align: left;
}

class titles DOES have 55px of margin-top assigned, it is not default, unless you are referring to values preassigned in the plugin code as “default”. If that margin is zeroed, then the white space between the bottom of #titlebar and the top of #bartop will no longer exist.

To learn and understand why that happens, you should read about margin collapse.
https://www.sitepoint.com/collapsing-margins/
https://css-tricks.com/what-you-should-know-about-collapsing-margins/

@ekka, have you ever taken a formal class in HTML and CSS?

It sounds like you are working under the assumption that using a framework like bootstrap does not require a knowledge of HTML and CSS, yet here you are asking for help with every step of your page. I strongly recommend that you invest some time in yourself and complete a formal class in HTML and CSS.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.