CODEWITHSUNDEEP
htmlcss
Giovanna Coppola
Giovanna Coppola

Reputation: 215

Same CSS class, different behavior. What's happening?

I have the same CSS class, .como-fazemos-mini-title, behaving differently, and I really don't know what's happening.

You can see with your own eyes: http://baskra.com/teste/teste.html

In the section Como Fazemos, the word Criatividade and the text below it are not horizontally aligned with the rest, but I see no reason why.

What am I missing?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>bask.ra</title>

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

<!-- COMECO DO NIVO SLIDER -->
<link rel="stylesheet" href="themes/default/default.css" type="text/css" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" />
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<!-- FIM DO NIVO SLIDER -->

<!-- COMECO DO MENU FIXO -->
<script type="text/javascript">
jQuery("document").ready(function($){

    var nav = $('.menu-fundo');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 0) {
            nav.addClass("f-menu");
        } else {
            nav.removeClass("f-menu");
        }
    });

});
</script>
<!-- FIM DO MENU FIXO -->

</head>

<body>

<div class="menu-fundo">
<div class="menu">

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

<div class="logo">

<img src="images/logo.png" />

</div>

        <ul id="menutop">
              <li><a href="#contato">CONTATO</a></li>
              <li><a href="#equipe">EQUIPE</a></li>
              <li><a href="#quem">QUEM SOMOS</a></li>
              <li><a href="#como">COMO FAZEMOS</a></li>
              <li><a href="#que">O QUE FAZEMOS</a></li>
        </ul>
    </div>
    </div>

<script>
$("#menutop a").click(function(){
   var menuid = $(this).attr("href");
   $("body, html").animate({scrollTop: $(menuid).offset().top - $('.menu').height() }, "slow");
   return false;
});
</script>



<div id="slider" class="nivoSlider theme-default">
    <img src="images/slide1.png"/>
    <img src="images/slide2.png"/>
    <img src="images/slide3.png"/>
</div>

<div class="row">

<div class="o-que-fazemos">
  <a id="que"></a>
  <h1 class="o-que-fazemos-title">O QUE FAZEMOS?</h1>
 <h1 class="o-que-fazemos-subtitle">COMUNICAÇÃO + DESIGN</h1>


<div class="o-que-fazemos-content-1">

 <br />
<br />

<b>SUA MARCA VAI ALÉM.</b><br /><br />

<b><i>Consolidar uma marca vai além.</i></b><br /><br />

Além de um simples nome, razão ou definição, consolidar uma marca depende de uma experiência. E é a partir disto que as ideias surgem. Um novo conceito e uma nova definição de negócio.<br />
A <b>BASK.RA</b> nasceu para pensar, criar e gerenciar o posicionamento da sua empresa no mercado.

</div>


<div class="o-que-fazemos-content-2">

<img src="images/oqfazemos.png" />

</div>

</div>
</div>

<div class="row">
<div class="como-fazemos">
  <a id="como"></a>

  <h1 class="como-fazemos-title">COMO FAZEMOS?</h1>

  <div class="como-fazemos-content-1">
  <img src="images/comofazemos-content1.png" /><br />
<div class="como-fazemos-mini-title">CRIATIVIDADE</div><br />
A conexão entre o estímulo e o resultado.
  </div>

  <div class="como-fazemos-content-2">
  <img src="images/comofazemos-content2.png" />
  </div>

  <div class="como-fazemos-content-3"> 
  <img src="images/comofazemos-content3.png" />
  <br />
<div class="como-fazemos-mini-title">INOVAÇÃO</div><br />
Descobrir o diferente explorando novas ideias.
  </div>

  <div class="como-fazemos-content-4"> 
  <img src="images/comofazemos-content4.png" />
  </div>

  <div class="como-fazemos-content-5"> 
  <img src="images/comofazemos-content5.png" />
  <br />
<div class="como-fazemos-mini-title">PESSOAS</div><br />

A ligação entre a nossa
criação e o seu negócio.
  </div>

</div>
</div>

<div class="row">
<div class="quem-somos">
  <a id="quem"></a>

  <h1 class="quem-somos-title">QUEM SOMOS?</h1>
  <h1 class="quem-somos-subtitle">VOCÊ COM CERTEZA JÁ OUVIU FALAR DAS FAMOSAS FÓRMULAS DE BHASKARA.</h1>

  <div class="quem-somos-content-1">
  <br />
<br />
A equação completa de segundo grau agora pode ter mais sentido do que nunca. Pelo menos foi assim para a gente. Aprendemos a enxergar resultados claros e perfeitamente desenhados em cada problemática que analisávamos, e assim encontramos o X.
<br />
<br />
Dizem por aí que números não se comunicam. Já nós preferimos pensar que eles ajudam na evolução de qualquer negócio e podem se comunicar muito mais do que imaginamos, inclusive nos inspirando criativamente.
  </div>

  <div class="quem-somos-content-2">
  <img src="images/quemsomos1.png" />
  </div>

<br />
<br />
<br />
<br />
<br />

<hr>

<div class="quem-somos-content-3">
<img src="images/quemsomos3.png" />
</div>

<div class="quem-somos-content-4">
<br />
<br />
<img src="images/quemsomos2.png" />
</div>

</div>
</div>

<div class="row">
<div class="a-equipe">
  <a id="equipe"></a>
 <h1 class="a-equipe-title">A EQUIPE</h1>

<div class="a-equipe-content-1">

<img src="images/equipe-felipe.png" />

<h1 class="a-equipe-felipe">FELIPE SOLHA</h1>

<h1 class="a-equipe-signos">canceriano</h1><br />
Formado em design gráfico pela FAAP,
corinthiano (vai timão), não troca o
futebolzinho de terça-feira por nada,
e viciado em ar-condicionado.
</div>

<div class="a-equipe-content-2">

<img src="images/equipe-marcela.png" />

<h1 class="a-equipe-marcela">MARCELA OLIVEIRA</h1>

<h1 class="a-equipe-signos">aquariana</h1><br />


Formada em RP pela FAPCOM, a vida
fica mais completa numa roda de
amigos (e cerveja gelada) e acredita
que existe sim amor em SP.
</div>

<div class="a-equipe-content-3">

<img src="images/equipe-ticiane.png" />

<h1 class="a-equipe-ticiane">TICIANE PASCHOAL</h1>

<h1 class="a-equipe-signos">geminiana</h1><br />


Formada em design gráfico pelo
SENAC, fotógrafa nas horas vagas e
ainda dá pinta de modelete - e redatora
-, em seu blog Editando Moda.
</div>

</div>
</div>

<div class="row">
<div class="o-contato">
  <a id="contato"></a>
  CONTATO<br />
<br />

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
<br />
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis.
<br />
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis. 
<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
</div>
</div>


</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */


html,body {
    height:auto;    
    margin:0;
    padding:0;
    border:0;
    }

div {
    margin:0;
    border:0;
    }

.login {
  display: table-cell;
}


div.logo {
    margin: 0;
    padding-left: 30px;
    padding-top: 5px;
}



    hr {
   display: block;
   position: relative;
   padding: 0;
   margin: 20px auto;
   height: 0;
   width: 50%;
   max-height: 0;
   font-size: 1px;
   line-height: 0;
   clear: both;
   border: none;
   border-top: 2px solid #FFF;
   border-bottom: 1px solid #FFF;
}

.menu-fundo {
    background: #fff repeat-x 0 0;
    left: 0;
    top: 0;
    z-index: 9999;
    position:fixed;
    }

.f-menu {
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    } /* isso vai fazer o menu ficar fixo no topo */

.menu {
height: 100px;
left: 0;
top: 0;
z-index: 9999;
background: #fff repeat-x 0 0;
position:fixed;
width:100%;
}

.menu ul {
    list-style: none;
    font-family: 'Source Sans Pro', sans-serif;
    font-size:17px;
    font-weight:bold;
    position: fixed;
    top: 0;
    right: 0;
    padding: 22px 0;
    }

.menu ul li {
float: right;
padding-right:30px;
padding-top:0px;
}

.menu ul li:first-child {
    padding-left: 0;
    }

.menu ul li a {
    display: table-cell;
    vertical-align: middle;
    color:#000;
    text-decoration:none;
    border-top:3px solid #999;
    }

.menu ul li a:hover {
    color: #6D6D6D;
    border-top:3px solid #EA0000;
    }


.row, .o-que-fazemos, .como-fazemos, .quem-somos, .a-equipe, .o-contato {
    display: block;
    float: left;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.o-que-fazemos {
    background-image: url('images/oqfazemosFUNDO.png');
    font-family: 'Source Sans Pro', sans-serif;
    background-repeat: repeat-x repeat-y;
    height:auto;
    font-size:28px;
    padding: 50px;
    float:left;
    overflow: hidden;
    }

.o-que-fazemos-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:80px;
    text-align:center;
    color:#ffc709;
    font-weight:900;
    letter-spacing: 2px;
    }

.o-que-fazemos-subtitle {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:80px;
    text-align:center;
    color:#FFF;
    font-weight:900;
    letter-spacing: 2px;
    margin-top:-20px;
    }


.o-que-fazemos-content-1 {  
    font-family: 'Source Sans Pro', sans-serif;
    font-size:20px;
    color:#FFF;
    float:left;
    margin-left:14%;
    width: 29%;
    }


.o-que-fazemos-content-2 {  
    width: 43%;
    float: left;
    text-align: right;
    }

.como-fazemos {
    background-image: url('images/comofazemosFUNDO.png');
    font-family: 'Source Sans Pro', sans-serif;
    background-repeat: repeat-x repeat-y;
    height:auto;
    font-size:28px;
    padding: 50px;
    float:left;
    overflow: hidden;
    }

.como-fazemos-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:80px;
    text-align:center;
    color:#FFF;
    font-weight:900;
    letter-spacing: 2px;
    }



.como-fazemos-content-1 {  
    font-family: 'Source Sans Pro', sans-serif;
    font-size:24px;
    color:#FFF;
    float:left;
    width: 20%;
    text-align:center;
    margin-left:15%;
    }


.como-fazemos-content-2 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:24px;
    color:#FFF;  
    float: left;
    width:5%;
    text-align:center;
    }

.como-fazemos-content-3 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:24px;
    color:#FFF;  
    width: 20%;
    float: left;
    text-align:center;
    }
.como-fazemos-content-4 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:24px;
    color:#FFF;  
    float: left;
    width:5%;
    text-align:center;
    }

.como-fazemos-content-5 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:24px;
    color:#FFF;  
    width: 20%;
    float: left;
    text-align:center;
    }

    .como-fazemos-mini-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:26px;
    color:#414042;
    font-weight:bold;  
    text-align:center;
    }

.quem-somos {
    background-image: url('images/quemsomosFUNDO.png');
    font-family: 'Source Sans Pro', sans-serif;
    background-repeat: repeat-x repeat-y;
    height:auto;
    font-size:28px;
    padding: 50px;
    float:left;
    overflow: hidden;
    }


.quem-somos-content-1 {  
    font-family: 'Source Sans Pro', sans-serif;
    font-size:20px;
    color:#414042;
    float:left;
    margin-left:10%;
    width: 40%;
    text-align: left;
    }


.quem-somos-content-2 { 
    width: 43%;
    float: left;
    text-align: right;
    }

.quem-somos-content-3 {  
    float:left;

    width: 50%;
    text-align: center;
    }


.quem-somos-content-4 { 
    width: 40%;
    float: left;
    text-align: center;
    }


.quem-somos-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:80px;
    text-align:center;
    color:#fff;
    font-weight:900;
    letter-spacing: 2px;
    }

.quem-somos-subtitle {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:22px;
    text-align:center;
    color:#414042;
    font-weight:900;
    letter-spacing: 2px;
    }


.a-equipe {
    background-image: url('images/EQUIPE-FUNDO.png');
    font-family: 'Source Sans Pro', sans-serif;
    background-repeat: repeat-x repeat-y;
    height:auto;
    font-size:28px;
    padding: 50px;
    }


.a-equipe-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:80px;
    text-align:center;
    color:#414042;
    font-weight:900;
    letter-spacing: 2px;
    }

.a-equipe-content-1 {  
    font-family: 'Source Sans Pro', sans-serif;
    font-size:16px;
    color:#828487;
    float:left;
    width: 22%;
    text-align:left;
    margin-left:11%;
    }

.a-equipe-content-2 {  
    font-family: 'Source Sans Pro', sans-serif;
    font-size:16px;
    color:#828487;
    float:left;
    width: 22%;
    margin-left:6%;
    text-align:left;
    }

.a-equipe-content-3 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:16px;
    color:#828487;
    float:left;
    width: 22%;
    margin-left:6%;
    text-align:left;
    }   

.a-equipe-felipe {  
    font-family: 'Source Sans Pro', sans-serif;
    font-size:23px;
    color:#5bc7d8;
    text-align:left;
    }

.a-equipe-marcela {  
    font-family: 'Source Sans Pro', sans-serif;
    font-size:23px;
    color:#ffc709;
    text-align:left;
    }

.a-equipe-ticiane {  
    font-family: 'Source Sans Pro', sans-serif;
    font-size:23px;
    color:#f0545b;
    text-align:left;
    }

.a-equipe-signos {  
    font-family: 'Source Sans Pro', sans-serif;
    font-size:16px;
    color:#41424b;
    text-align:left;
    margin-top:-19px;
    }

.o-contato {
    background-image: url('images/contato-FUNDO.png');
    font-family: 'Source Sans Pro', sans-serif;
    background-repeat: repeat-x repeat-y;
    height:auto;
    font-size:28px;
    padding: 50px;
    }

.banner {
    position: relative;
    overflow: auto;
    }

.banner li {
    list-style: none;
    }

.banner ul li {
    float: left;
    }

Upvotes: 0

Views: 123

Answers (2)

Guffa
Guffa

Reputation: 700192

You have <br> tags after the images, and when the containing element gets too narrow, the line will break between the image and the break tags, and the break will cause a space above the headline.

Just remove the <br> tags, and make the images block elements if needed.

Upvotes: 2

Shiloh Lawrence
Shiloh Lawrence

Reputation: 366

Instead of using the line breaks ( <br> ), wrap your code in <p> tags and add CSS rule for spacing if you need. I tried deleting the line breaks in web inspector and everything worked fine.

EDIT: For clarity, line breaks are best used for maintaining paragraph structure. So, if you wanted to have a paragraph formatted to look like

aaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaa

Line breaks would be great for that.

And, for further clarity, the <br> tags I'm referring to are surrounding the titles that are not lining up.

Upvotes: 3

Related Questions