WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > [SOLVED] Why does my header keep moving?

Reply
  Thread Tools Display Modes
Old 29th March 13, 05:26 PM   #1
scardesea
WLC Member
 
scardesea's Avatar
 
Join Date: Mar 2013
Posts: 6
Default Why does my header keep moving?

Hello again,

Sorry, I know I'm a complete n00b at this and probably driving you all crazy!

I sorted out my footer issue, and now have a front page that sort of looks like it works in the cssdesk sandbox:
http://cssdesk.com/ZBj8R

However, when I minimize the ribbon at the side, the header stays in place and everything else moves out of alignment. Why? I know it must have something to do with positioning but I have absolutely no idea what I'm doing wrong. The HTML & CSS are at the cssdesk link above but also here:

Code:
<!DOCTYPE html>

<html> 
<head>
<title> ˇ scar de sea ˇ | psychotic bashy-piano cabaret meets creepy ethereal folk 
<meta name="keywords" content="scar de sea, scar, piano, female vocalist, singer-songwriter, psychotic, bashy-piano, cabaret, rock, punk, folk, creepy, ethereal"> 
<meta name="description" content="psychotic bashy-piano cabaret meets creepy ethereal folk>
<meta name="author" content="scar de sea">  
<meta property="og:image" content="http://1.gravatar.com/blavatar/52186ec23301d9c0e0db2bbad961667c?s=200" />
</title>
</head> 

<body> 

<div class="header"> 
<a href="http://www.scardesea.com"> <img src="http://i1281.photobucket.com/albums/a511/scardesea/header_maybe_3_zps2f1fbf9b.jpg"/> </a>
</div> 

<div class="menu" id="home">
<a href="http://www.scardesea.com"> <img src="http://i1281.photobucket.com/albums/a511/scardesea/99430400-a3c1-4476-b471-29a44fe48933_zps63a7ef4c.jpg?t=1364559983"/></a>
</div>

<div class="menu" id="news">
<a href="http://www.scardesea.com/news"> <img src="http://i1281.photobucket.com/albums/a511/scardesea/49ccb5c7-61d4-432a-ab46-f16c1de01762_zpsdefba8de.jpg?t=1364560254"/></a>
</div>

<div class="menu" id="blog">
<a href="http://www.scardesea.com/blog"> <img src="http://i1281.photobucket.com/albums/a511/scardesea/35de9ef5-862f-4598-ba62-0ebd97e9ffc0_zps186f6c4c.jpg?t=1364560465"/></a>
</div>

<div class="menu" id="bio">
<a href="http://www.scardesea.com/bio"> <img src="http://i1281.photobucket.com/albums/a511/scardesea/318eaf0c-c666-4744-a16c-f3945e1a2105_zps356f4d71.jpg?t=1364560884"/></a>
</div>

<div class="menu" id="songs">
<a href="http://www.scardesea.com/music"> <img src="http://i1281.photobucket.com/albums/a511/scardesea/2bb840f2-d433-48c1-a8cf-3df3802fbcd3_zps7a2c1843.jpg?t=1364561097"/></a>
</div>

<div class="menu" id="poems">
<a href="http://www.scardesea.com/poems"> <img src="http://i1281.photobucket.com/albums/a511/scardesea/875bef79-9d2f-41e3-9da6-f3cfb632e29f_zps8e8332c8.jpg?t=1364561486"/></a>
</div>

<div id="hearthemusic">
<img src="http://i1281.photobucket.com/albums/a511/scardesea/hearthemusic_zps166d7a22.jpg"/>
</div>

<div id="soundcloudset">
<iframe width="300px" height="350" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F4391454"></iframe>
</div>
</body>

<div id="latestheader">
<img src="http://i1281.photobucket.com/albums/a511/scardesea/latestlyrics_zps7979cba4.jpg"/>
</div>

<div id="scribblings">
<img src="http://i1281.photobucket.com/albums/a511/scardesea/6b301794-6801-4444-bb7b-e506a83876ce_zpsb04392a8.jpg?t=1364565808"/>
</div>

<div id="******s">
<img src="http://i1281.photobucket.com/albums/a511/scardesea/1077d8ec-1bc3-426e-a7a0-d56c2bfee19b_zps20570c4b.jpg?t=1364566033"/>
</div>

<div id="stalkme">
<img src="http://i1281.photobucket.com/albums/a511/scardesea/694ed9fc-50da-4ad3-9e9f-7e3d1459d9bf_zps955c8a3f.jpg?t=1364567133"/>
</div>

<table>
    <tr></tr>
        <td><a href="http://www.twitter.com/scardesea"><img src="http://i1281.photobucket.com/albums/a511/scardesea/ec9e134a-5d7b-4e04-bb77-53fd0dde0bed_zps8b962ce3.jpg?t=1364568230"/></a></td>
        <td><a href="http://www.facebook.com/scardesea"><img src="http://i1281.photobucket.com/albums/a511/scardesea/7a87442b-23d7-4c40-a36d-cce206642e32_zpse2c1f7da.jpg?t=1364568272"/></a></td>
        <td><a href="http://www.pinterest.com/scardesea"><img src="http://i1281.photobucket.com/albums/a511/scardesea/8e801162-ab75-401d-8470-5ad0b17480c6_zps2d8467c1.jpg?t=1364568280"/></a></td>
    <tr></tr>
</table>

<div id="signup">
<img src="http://i1281.photobucket.com/albums/a511/scardesea/signup_zpsabcf9100.jpg"/>
</div>

<div id="mc_embed_signup">
<form action="http://scardesea.us5.list-manage2.com/subscribe/post?u=b0c339216eb40bb0daf8733c5&amp;id=d07e691360" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
	<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="you@email.com" required>
	<div class="clear"><input type="submit" value="subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

<div id="epic">
<img src="http://i1281.photobucket.com/albums/a511/scardesea/2c0c7e6c-b8b6-4a56-b7bb-937f60ac264e_zps9ed7655a.jpg?t=1364570875"/>
</div>

<div id="footer">
<img src="http://i1281.photobucket.com/albums/a511/scardesea/footer_maybe_2_zps3ae97033.jpg"/>
</div>

<div class="footer_menu" id="homebutton">
<a href="http://www.scardesea.com"><img src="http://i1281.photobucket.com/albums/a511/scardesea/924df1ec-e4db-4243-a50d-b8d0fc0d8d5b_zpse788ff7d.jpg?t=1364571722"/></a>
</div>

<div class="footer_menu" id="newsbutton">
<a href="http://www.scardesea.com/news"><img src="http://i1281.photobucket.com/albums/a511/scardesea/450f280b-d87c-4cda-8e05-9b8f6cbb982e_zps5fdbd61d.jpg?t=1364571941"/></a>
</div>

<div class="footer_menu" id="blogbutton">
<a href="http://www.scardesea.com/blog"><img src="http://i1281.photobucket.com/albums/a511/scardesea/d3ab78ba-4fae-4105-8eeb-f9d435e59e74_zps4b2ca159.jpg?t=1364572198"/></a>
</div>

<div class="footer_menu" id="biobutton">
<a href="http://www.scardesea.com/bio"><img src="http://i1281.photobucket.com/albums/a511/scardesea/d958d9d0-9e47-4c2d-bec7-ab8915f74a9b_zpsf3add41e.jpg?t=1364571513"/></a>
</div>

<div class="footer_menu" id="songsbutton">
<a href="http://www.scardesea.com/songs"><img src="http://i1281.photobucket.com/albums/a511/scardesea/ab1d83d9-6773-4120-a514-2f2516523db5_zpse7c23b17.jpg?t=1364572644"/></a>
</div>

<div class="footer_menu" id="poemsbutton">
<a href="http://www.scardesea/com/poems"><img src="http://i1281.photobucket.com/albums/a511/scardesea/5165a577-4d04-430d-a8b0-e00a06a626cc_zps27b03fcf.jpg?t=1364572796"/></a>
</div>
Code:
body {
  background-color:#ffffff;
}

.header {
	position:relative;
  margin:auto;
  padding: 10px 10px 10px 10px;
  height:450px;
  width:830px;
}
#home {
	position:relative;
	top:-58;
	right:-100;
}
#news {
	position:relative;
	top:-78;
	right:-239;
}
#blog {
	position:relative;
	top:-98;
	right:-378;
}
#bio {
	position:relative;
	top:-120;
	right:-520;
}
#songs {
	position:relative;
	top:-141;
	right:-650;
}
#poems {
  position:relative;
  top:-158;
  right:-788.5;
}

#hearthemusic {
      position:relative;
      top:-100px;
      right:-60px;
}

#soundcloudset {
      position:relative;
      top:-99px;
      right:-60px;
}

#latestheader {
      position:relative;
      top:-490px;
      right:-380px;
}

#scribblings {
      position:relative;
      top:-489px;
      right:-380px;
}

#******s {
      position:relative;
      top:-485px;
      right:-380px;
}

#stalkme {
      position:relative;
      top:-1023px;
      right:-700px;
}

table {
    position:relative;
    top:-1030px;
    right:-690px; 
}

#signup {
    position:relative;
    top:-1040px;
    right:-711px;
}

#mc_embed_signup {
        position:relative;
        top:-1040px;
        right:-711px;
}

.button {
      background-color:#ffffff;
      box-shadow: 5px 5px 5px #8A0808;
      font-family:georgia;
}

#epic {
    position:relative;
    top:20px;
}

#footer {
    position:relative;
    bottom:-1050px;
    left:-650px;
    top:300px;
}

#homebutton {
    position:relative;
    bottom:-215px;
    left:-613px;
}

#newsbutton {
    position:relative;
    bottom:-199px;
    left:-472px;
}

#blogbutton {
    position:relative;
    bottom:-180px;
    left:-333px;
}

#biobutton {
    position:relative;
    bottom:-157px;
    left:-190px;
}

#songsbutton {
    position:relative;
    bottom:-138px;
    left:-60px;
}

#poemsbutton {
    position:relative;
    bottom:-123px;
    left:79.5px;
}
Thanks so much!
Scar
scardesea is offline   Reply With Quote
Old 29th March 13, 11:16 PM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,711
Default Re: Why does my header keep moving?

Wrap everything below the header in a DIV as well, and make the same width as the header, and then auto center it like the header.

That's a quick fix. Really, how you're arranging things is poorly done. Using positioning to move an element up and to the left, when it can be done with margins is poor usage. The page is doing exactly what you tell it to. Your menu items are X distance from the left side via a right:-Xpx CSS property. But if your left side moves, then so do your menu items.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 30th March 13, 12:38 AM   #3
scardesea
WLC Member
 
scardesea's Avatar
 
Join Date: Mar 2013
Posts: 6
Default Re: Why does my header keep moving?

Thanks, that worked

Sorry, I know I have no idea what I'm doing; when I have enough cash I'll pay someone else to actually make a good site

Thanks again for your help!
Scar
scardesea is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:31 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

CopyrightŠ 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.