3 Replies - 381 Views - Last Post: 01 October 2012 - 05:52 AM

#1 sturpon711  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 25-September 12

issue moving an image

Posted 30 September 2012 - 09:17 AM

I cant seem to move this logo. I wrapped it in a div. But when I inspect the element it doesnt show that its being affected by the #logo in my css. In addition, I want to move the login|signup piece up but I padding or margin dont seem to be working. Thank you for any help
www.epicswap.com/index2.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">

* {
margin:0px;
padding:0px;
}

html {
background: url(/img/back.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


#header
{
width:100%;
margin-bottom:2%;
color:black;
position:relative;
}

#header2
{
padding:20px;
width:100%;
color:#FFFFFF;
position:relative;
float:left;
margin-left:20px;
overflow:hidden;
}

#header2 .transparency
{
opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
background-color:#000000;
width:340px;
height:1500px;
position:absolute;
top:0px;
left:0px;
z-index:-1;
}

#logo {
margin: auto;
width: 18em;
padding-top: 2em;
}


p1 {
text-align:center;
font-size:3em;
padding-bottom:1em;
}

p2 {
text-align:left;
font-size:2em;
padding: 28.5em;
}

#container {
margin:auto;
width:75%;
height:940px;
background-color:#f0f0f0;
}


#about {
border-bottom:1px solid #999;
}

.twoCol {
height:30em;
margin:2%;
width:46%;
background-color:#999;
float:left;
}

form {
padding:1.5em 2em 2em 2em;

}

.label {
margin: 5%;
font-size: 1.25em;
font-family: Avenir;
text-shadow: 1px 1px 3px white;
}

input {
font-family: Courier New;
font-size: 1.5em;
height:1.5em;
margin:2% 5% 5% 5%;
width:90%;
border-color:#555555;
-webkit-appearance: none;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
-webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
}

.inset {
-moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
-webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
}
button {
height:2em;
margin:0% 5% 5% 5%;
width:92%;
background-color:#00aeff;
font-size: 1.5em;
cursor: pointer;
-webkit-appearance: none;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border-color:#008aff;
-moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
-webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
box-shadow: inset 0 3px 12px rgba(0,0,0,.24);
text-shadow: 1px 1px 5px grey;
}

button:active {
position: relative;
top: 1px;
}

text{
font-family: Avenir;
font-size: 1.5em;
}
</style>
</head>


<body>
<!-- container one starts -->
<div id="header">
<div id="logo">
<img src="/img/logo_6.png" alt="">
</div>
</div>
<div id="nav"><p2><a>Sign Up</a> | <a>Log In</a></p2></div>
</div>


<!-- container one ends -->
<div id="container">
<div id="about">
<p1>Epic Swap is a place to trade skillz, make friends, and chiiiiulllllll</p1>
</div>
<div id="left" class="twoCol"></div>
<div id="right" class="twoCol">
<form class="rounded">
<label class="label">Name:</label>
<input type="text" />
<label class="label">Username:</label>
<input type="text" />
<label class="label">Password:</label>
<input type="text" />
<label class="label">Email:</label>
<input type="text" />
<button id="signUpSubmit" value="submit">Sign Up!</button>
</form>
</div>

</div>
</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: issue moving an image

#2 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3394
  • View blog
  • Posts: 9,599
  • Joined: 08-June 10

Re: issue moving an image

Posted 01 October 2012 - 01:07 AM

View Poststurpon711, on 30 September 2012 - 06:17 PM, said:

But when I inspect the element it doesnt show that its being affected by the #logo in my css.

why should it? the CSS hooks onto the div, not the img.


View Poststurpon711, on 30 September 2012 - 06:17 PM, said:

I cant seem to move this logo. ... I want to move the login|signup piece up but I padding or margin dont seem to be working.

where do you want to move it?
Was This Post Helpful? 0
  • +
  • -

#3 sturpon711  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 25-September 12

Re: issue moving an image

Posted 01 October 2012 - 05:48 AM

When I inspect the logo online, the rules in my CSS don't show up:
#logo {
054
margin: auto;
055
width: 18em;
056
padding-top: 2em;
057
}



My html is.

<div id="logo">
160
<img src="/img/logo_6.png" alt="">
161
</div


I'm not quite sure if I understand your comment. I thought I was hooking the css with the div but its not showing up when I inspect the element in chrome.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3394
  • View blog
  • Posts: 9,599
  • Joined: 08-June 10

Re: issue moving an image

Posted 01 October 2012 - 05:52 AM

that’s the CSS I found in your link:
#logo {
margin: auto;
width: 18em;
padding-top: 2em;
margin: -2% 0 0 40%;
}

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1