Having trouble moving h1 and #logo

Question

Creating a website to practice html/css. Having trouble moving the position of my h1 and #logo image.

body {
  text-align: center;
  background: url(/images/bg.png);
  background-size: cover;
  font-family: sans-serif;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  position: absolute;
  width: 100%;
  display: block;
}

p {
  text-align: center;
  font-size: 24px;
  font-family: sans-serif;
}

h1 {
  display: inline-block;
  color: black;
  position: relative;
  top: -90%;
  text-align: center;
  text-indent: 10px;
  font-size: 20px;
}

h1:hover {
  color: #B40400;
}

#logo {
  top: 50%;
}

<a href="http://www.example.com">
  <h1>Test</h1>
</a>
<img border="0" id="logo" src="http://placehold.it/420x120" alt="MAL." width="420" height="120">

<h1>Test1</h1>
<h1>Test2</h1>
<h1>Test3</h1>
<h1>Test4</h1>
<h1>Test5</h1>

Please help! Thanks.

score 0 · Answer 1 · answered Apr 15 '14 at 13:18

0

if wouldnt use top, bottom, left and right unless it is really necessary. Also, using percentages for top requires the element to have a parent that has either relative, absolute or fixed positioning WITH a set height.

Rather use margins:

margin: top, right, bottom, left;

So to move your H1:

margin: 50px, 0, 0, 0;

OR

margin-top: 50px;

answered Apr 15 '14 at 13:18

Slugge

180
1
11

I'm trying to make the website work at all window sizes. I looked at this http://stackoverflow.com/questions/4668789/how-to-make-my-web-page-display-in-full-in-any-browser-window-of-any-size which said to remove all margins. – Apr 15 '14 at 13:20
Removing all margins is not a good tip. Making a website work for all sizes screens does not necessarily mean that you should get rid of margins. You should probably start with some basic courses in html / css before you search for answers in stackoverflow. – Slugge Apr 15 '14 at 13:23
@Mal The position property's value on your body and h1 elements should be swapped. See here: http://jsfiddle.net/zDkGq/ – Xhezairi Apr 15 '14 at 13:24
@Xhezairi I want the h1s to be below the logo with the logo in the center of the page. How would I do that? – Apr 15 '14 at 13:27
@Xhezairi Sorry I mean more like this http://i.gyazo.com/db31dc0db158554c3318a241fb0d6824.png – Apr 15 '14 at 13:39
@Mal can't tell what exactly it is that you're trying to make of this, but here's another attempt. http://jsfiddle.net/zDkGq/2/ Make sure you give a look at this piece http://alistapart.com/article/css-positioning-101 – Xhezairi Apr 15 '14 at 13:57
@Xhezairi this is perfect except I'd like the logo to be in the middle. Thanks a lot. – Apr 15 '14 at 14:25

score 0 · Answer 2 · answered Apr 15 '14 at 13:47

@Mal your fiddle is not correct, the correct syntax is...

<div id="wrap">
    <img border="0" id="logo" src="/images/logo.png" alt="MAL." width="420" height="120" />
        <h1 class="name"><a href="http://www.example.com">Test</a></h1>
        <h2>Test1</h2>    
        <h2>Test2</h2>    
        <h2>Test3</h2>    
        <h2>Test4</h2>  
        <h2>Test5</h2>    
   </div>

You must to close tag, and the you must wirte inside of your

Having trouble moving h1 and #logo

2 Answers2