CODEWITHSUNDEEP
htmlcssmargin
Matt B
Matt B

Reputation: 187

Negative margin not working

I'm trying to get negative margin to allow my logo to overflow the header.

Image of intended result: Psd - How it needs to look

Image showing current, wrong result: Code - the error

I'm really new to both HTML and CSS, though I've tried my best in playing around with this code and trying to find answers online (including this website) all to no avail. So here's my code relating to these sections:

#logo {
  display: inline-block;
  margin: -30px 0px -100px 10px;
}
.hheader {
  background-color: #005073;
  background-image: -webkit-linear-gradient(rgba(0, 60, 80, .8) 0%, rgba(0, 80, 105, .8) 50%, rgba(0, 60, 80, .8) 100%);
  /* For Safari 5.1 to 6.0 */
  background-image: -o-linear-gradient(rgba(0, 60, 80, .8) 0%, rgba(0, 80, 105, .8) 50%, rgba(0, 60, 80, .8) 100%);
  /* For Opera 11.1 to 12.0 */
  background-image: -moz-linear-gradient(rgba(0, 60, 80, .8) 0%, rgba(0, 80, 105, .8) 50%, rgba(0, 60, 80, .8) 100%);
  /* For Firefox 3.6 to 15 */
  background-image: linear-gradient(rgba(0, 60, 80, .8) 0%, rgba(0, 80, 105, .8) 50%, rgba(0, 60, 80, .8) 100%);
  /* Standard syntax */
  box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.4);
  /* Standard syntax */
  -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.4);
  border-style: solid;
  border-width: 1px;
  border-color: black;
  margin-bottom: 2em;
  margin-top: 30px;
}
<div class="container">
  <div class="hheader">
    <a id="logo" href="/" title="Return to home">
      <img src="images/logo.png" alt="Density Art Logo">
    </a>
  </div>

And in case it's required, here's the full code for both:

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Density Art - Home</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
    <div class="container">
        <div class="hheader">
            <a id="logo" href="/" title="Return to home">
            <img src="images/logo.png" alt="Density Art Logo">
            </a>
        </div>

        <div class="nav_menu">
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Website Design</a></li>           
                    <li><a href="#">Art &amp; Poetry</a></li>  
                    <li><a href="#">Blog &amp; Other</a></li>
                    <li><a href="#">Music &amp; More</a></li>
                    <li><a href="#">Shop</a></li>  
                </ul>
            </nav>
        </div> <!-- end of container-->
    </div> <!-- end of navigator menu bar--> 
</header>


    <div id="content">
        <section id="leftcolumn">

            <h1>Home</h1>

            <h3>Who are we?</h3>

            <p>Density art is a small company local to Newcastle, Australia. We produce extremely quality websites, art and poetry alongside other projects that we have discoverdd is in absolutely high demand. You'll completely love all we have to offer so you may enjoy yourself when you will search through our products and buy them.</p>

            <p>Density art is a small company local to Newcastle, Australia. We produce extremely quality websites, art and poetry alongside other projects that we have discoverdd is in absolutely high demand. You'll completely love all we have to offer so you may enjoy yourself when you will search through our products and buy them.</p>

            <h3>What is our aim?</h3>

            <p>Density art is a small company local to Newcastle, Australia. We produce extremely quality websites, art and poetry alongside other projects that we have discoverdd is in absolutely high demand. You'll completely love all we have to offer so you may enjoy yourself when you will search through our products and buy them.</p>

            <p>Density art is a small company local to Newcastle, Australia. We produce extremely quality websites, art and poetry alongside other projects that we have discoverdd is in absolutely high demand. You'll completely love all we have to offer so you may enjoy yourself when you will search through our products and buy them.</p>

        </section> <!-- end of left column content-->

        <aside id="rightcolumn">

            <h2>Get Connected!</h2>
            <h5>Join our evergrowing community and become a part of Density Art</h5>

            <a href="http://www.facebook.com/" target="_blank"><img src="images/btns/fb.png" alt="Facebook"></a>
            <h4>Facebook</h4>

            <a href="http://www.instagram.com/" target="_blank"><img src="images/btns/ig.png" alt="InstaGram"></a>
            <h4>Instagram</h4>

            <a href="http://www.soundcloud.com/" target="_blank"><img src="images/btns/sc.png" alt="SoundCloud"></a>
            <h4>SoundCloud</h4>


            <a href="http://www.facebook.com/" target="_blank"><img src="images/btns/em.png" alt="Email"></a>
            <h4>Email</h4>


            <a href="http://www.facebook.com/" target="_blank"><img src="images/btns/ph.png" alt="Phone Call"></a>
            <h4>Phone Call</h4>


        </aside> <!--end of right column content-->

    </div> <!-- end of content form-->

<footer>
    <div id="footerbar">

        <p>Copyright &copy; informatrion copyright 2001 etc bnlah blah Copyright informatrion copyright 2001 etc bnlah blah Copyright informatrion copyright 2001 etc bnlah blah</p>

        <hr>

        <h6>Contact us</h6>
        <h6>Legal Terms</h6>
        <h6>Shopping Cart</h6>
        <h6>Facebook</h6>
        <h6>Instagram</h6>



    </div>


</footer>

</body>
</html>

CSS

html {
-webkit-font-smoothing: antialiased;
text-rendering: optimiszelegibility;   
}


body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
line-height:20px;
color: ebe9e9; 
}

h1, h2 {
font-weight: 700;
margin:0;
line-height: 45px;    
}


h4, h6  {
font-weight: bold;
margin: 5px 0 5px 0;    
}

h1 {
font-size:48px;
}

h2 {
font-size:30px;
}

h3 {
font-size:24px;
font-weight: bold;
}

h4 {
font-size:20px;
line-height: 45px;
}

h5 {
font-size:16px;
font-weight: 600;
margin:0;
line-height: 45px; 
}

h6 {
font-size:12px;
line-height: 20px;
}

p {
margin: 0 0 10px 0;

}

nav ul li{
display: inline;
}

#logo {
display:inline-block;
margin: -30px 0px -100px 10px;
}

.hheader {
background-color: #005073;
background-image: -webkit-linear-gradient(rgba(0,60,80,.8) 0%,        rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8)  50%, rgba(0,60,80,.8) 100%); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* For Firefox 3.6 to 15 */
background-image: linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* Standard syntax */
box-shadow: inset 0px 0px 7px 2px rgba(0,0,0,0.4); /* Standard syntax */
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0,0,0,0.4);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0,0,0,0.4);
border-style: solid;
border-width: 1px;
border-color: black;
margin-bottom: 2em;
margin-top: 30px;
}

.container {
width: 960px;
padding: 0 10px;
margin: 0 auto;
}

.nav_menu {
background-color: #005073;
background-image: -webkit-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Firefox 3.6 to 15 */
background-image: linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* Standard syntax */
-webkit-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4); /* For Firefox 3.6 to 15 */
-moz-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4);  /* For Firefox 3.6 to 15 */
box-shadow: inset 0px 0px 2px 1x rgba(0,0,0,0.4); /* Standard syntax */
border-style: solid;
border-width: 1px;
border-color: black;
max-height: 2em
}

If any kind member has the required knowledge and the ability to help me then please type out a beginner-friendly response.

Here's a JSFiddle for the code: https://jsfiddle.net/7hb9bd58/2/

Upvotes: 3

Views: 2333

Answers (3)

Harshit
Harshit

Reputation: 286

in css make changes ,change height according to your need

    .hheader {
      height:265px;
    }
 #logo {
    display: block;
    margin: 2px 0px -100px 10px;
    float: left;
}

Upvotes: 0

Eric Phillips
Eric Phillips

Reputation: 920

Set the position of your logo to absolute

#logo {
    display:inline-block;
    position:absolute;
    margin: -30px 0px -100px 10px;
}

This will remove the image from the flow, so it will no longer force .hheader's height to containe it. To compensate, specify a height for hheader. (I went with 190px, you can fine tune)

.hheader {
    height:190px;
/* rest of css */
}

https://jsfiddle.net/7hb9bd58/6/

Upvotes: 1

Slavenko Miljic
Slavenko Miljic

Reputation: 3846

The .hhheader height is not changing because, the margin on the #logo does not affect the header size (which depends on the size of the logo), you're only moving the #logo, nothing more.

Is there a reason why don't you just set the height of the .hheader element. Something like

height: 190px;

https://jsfiddle.net/7hb9bd58/4/

OR, if you for some reason you are not allowed to do so, maybe you can just scale the logo, and it'll appear to overflow the header container

#logo {
    display:inline-block;
    transform: scale(1.3);
    margin-left:50px;
}

https://jsfiddle.net/7hb9bd58/5/

Upvotes: 5

Related Questions