...

View Full Version : Image over Image



Canman07
10-30-2011, 09:29 PM
Hello, I am very new to coding. Today is my first day with it and I feel i am doing quite well, I have come across problems and have worked to fix them and here is one of them.

Here is a preview of my design: http://img822.imageshack.us/img822/6533/unled1pd.jpg

Here is where I am at: http://visionarycreativegrp.com/Demos/ForSale%20RED/

I am currently trying to get the Login Box done, for some reason it wont lineup with the top of the body... I dont know what to do

Any Help?

P.S. If anyone wants to check my coding, that would be nice. I may be doing something wrong.

Excavator
10-30-2011, 09:42 PM
Hello Canman07,
You have a little uncolapsing margin (http://nopeople.com/CSS%20tips/uncollapsing-margin/index.html) that is messing with you.

overflow: auto; can fix that for you, as well as show you another problem. Make your CSS look like this to see -

#navigation {
background-image:url(../images/nav.png);
width:1004px;
/*height:56px;*/
overflow: auto;
margin-top: 20px;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
}


The scroll bar that makes is from your width. You set your ul at 100% width and then add 6px padding on each end which makes it more than 100% wide.
Try adding this to your CSS as well -


#nav {
/*width: 100%;
float: left;*/
margin: 0 0 2em 0;
padding: 0;
list-style: none;
}

Canman07
10-30-2011, 09:51 PM
Thank's so much. I appreciate it. Another question i have is; If you scroll, the logo and everything else goes above the top bar.. How do i fix that, and how do i move the search bar so that it lines up with the very right of the body?

Excavator
10-30-2011, 09:57 PM
Try these changes to your topbar -



#top_bar {
background: url(../images/topbar.jpg) repeat-x;
/*background-repeat:no-repeat;*/
height:48px;
width:100%;
position:fixed;
top: 0;
left: 0;
z-index: 10;
}

Canman07
10-30-2011, 10:12 PM
You are so helpful. Thank's so much! What about lining it up with the right side of the body container?

Excavator
10-30-2011, 10:25 PM
You are so helpful. Thank's so much! What about lining it up with the right side of the body container?

#topbar has an issue or two:
top: 0; isn't going to do anything unless you position it as well. See positioning here (http://www.w3schools.com/css/css_positioning.asp).

Since, at 1004px width, #topbar is as wide as your #container, you can just center it and it should work fine.
You center #container with one method so I'll show you another way to center #topbar.

To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto


Try making your CSS look like this -

#searchbar {
width:1004px;
/*top:0;*/
margin: 0 auto;
}

Canman07
10-30-2011, 10:58 PM
I guess the problem i really dont understand about coding is how to get one thing over the other... For example

http://visionarycreativegrp.com/Demos/ForSale%20RED/

I want the Profile picture to be in that box like i have it in the design... But i dont know what the code is that i need to put in there to have it over the other. Other than that i think i understand a lot of it.

Excavator
10-30-2011, 11:10 PM
I want the Profile picture to be in that box like i have it in the design... But i dont know what the code is that i need to put in there to have it over the other. Other than that i think i understand a lot of it.

The way you have it now, loginbox_bg.png is loaded from the markup. It didn't load from the CSS with the path you gave it, I use the full path in the example below just because it's easier on my end.

Once you make login_bg.png a background image, you can place your profilepicture.png wherever you like inside #loginbox.

Try these changes:

The CSS:

#loginbox {
background:url(http://visionarycreativegrp.com/Demos/ForSale%20RED/images/loginbox_bg.png);
height: 93px;
width: 385px;
float: right;
margin-right: 5px;
margin-top: 6px;
}
and the markup:

<div id="loginbox">
<img src="images/profilepicture.png" alt="description">
</div>

Canman07
10-30-2011, 11:44 PM
I put what you said in and it worked, but when i copy and pasted it to duplicated it so that i could put the headlines there, it did this...

http://visionarycreativegrp.com/Demos/ForSale%20RED/

Canman07
10-31-2011, 12:55 AM
Helppp!!!

Excavator
10-31-2011, 01:09 AM
Viewed in FF8 that looks really good.
In IE I see your issue...

Check out the box model once. It seems to be one of the hardest concepts for new coders to grasp but it will help you.
See the box model here (http://www.w3.org/TR/CSS2/box.html). The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

Your 6 images all fit in #loginbox until IE adds it's border to them. To fix it, you just need to tell IE not to add it.

Put this in your CSS - img {border: none;}

Excavator
10-31-2011, 01:13 AM
In this bit of CSS -
#profilepicture {
background-image: url("../images/profilepicture.png");
background-repeat: no-repeat;
float: left;
margin-left: 17px;
margin-top: 19px;
z-index: -1;
}
the z-index: 1; doesn't do anything. z-index only works on positioned elements. See this about z-index (http://www.w3schools.com/cssref/pr_pos_z-index.asp).

Canman07
10-31-2011, 01:15 AM
Thanks! I fixed it. But take a look at it now, do you see how the grey box where the headlines will go is on the right, but it moves the login box to the left? Why does it do that?

Excavator
10-31-2011, 01:35 AM
Look what the clear property (http://www.w3schools.com/cssref/pr_class_clear.asp) does for you -
#loginbox {
background: url("../images/loginbox_bg.png") repeat scroll 0 0 transparent;
clear: right;
float: right;
height: 93px;
margin-right: 5px;
margin-top: 6px;
width: 385px;
}

Then, obviously, #loginbox will need to come before #headlines in the markup.

It will probably be easiest to add another containing element that can hold your #logingbox and #headlines, as well as those 4 back2back buttons and the image above them. That will keep things seperate from your 3 columns that will follow below.

In advance, look at a simple 3 column layout (http://nopeople.com/CSS%20tips/simple3column/index.html) that may help you.

Canman07
10-31-2011, 04:37 AM
Is there anyway you could help me align the boxes. I cant seem to fix this.

http://visionarycreativegrp.com/Demos/ForSale%20RED/

Excavator
10-31-2011, 05:24 AM
Re-arrange your markup so things that belong in the div under your #nav are contained by it. Something like this -

<li><a href="#"><font color="#FFFFFF">Downloads</font></a></li>
<li><a href="#"><font color="#FFFFFF">Partners</font></a></li>
<li><a href="#"><font color="#FFFFFF">Contact Us</font></a></li>

</ul>

</div>
<div id="below_nav">

<div id="loginbox">
<a href="#"><img src="images/profilepicture.png" alt="Profile Picture" id="profilepicture"></a>
<a href="#"><img src="images/go.png" id="go"></a>
<img src="images/userpass.png" id="username">
<img src="images/userpass.png" id="password">
<a href="#"><img src="images/register.png" id="register"></a>
<a href="#"><img src="images/lostpassword.png" id="lostpassword"></a>
</div>

<div id="headlines">
<ul id="headlinelink">

<li><a href="#"><font color="#FFFFFF">Back2Back Gaming Wins ESCW 2011</font></a></li>
<li><a href="#"><font color="#FFFFFF">Back2Back Gaming Wins ESCW 2011</font></a></li>
<li><a href="#"><font color="#FFFFFF">Back2Back Gaming Wins ESCW 2011</font></a></li>
<li><a href="#"><font color="#FFFFFF">Back2Back Gaming Wins ESCW 2011</font></a></li>
<li><a href="#"><font color="#FFFFFF">Back2Back Gaming Wins ESCW 2011</font></a></li>
<li><a href="#"><font color="#FFFFFF">Back2Back Gaming Wins ESCW 2011</font></a></li>
</ul>


</div>
<img src="images/6rowbg.png" id="6rowbg">
<h3> MATCHES</h3>
<!--end below_nav--></div>


And some CSS to go along with that -


#below_nav {padding: 6px 0 0;}
#loginbox {
background: url("../images/loginbox_bg.png") repeat scroll 0 0 transparent;
clear: right;
float: right;
height: 93px;
margin-right: 5px;
/*margin-top: 6px;*/
width: 385px;
}
#below_nav h3 {
clear: both;
background: #00f;
color: #fff;
}

Canman07
10-31-2011, 05:32 AM
what i meant, was I want that Box that is floating on the left to go next to the AD box in the middle.

This is what i dont understand about coding. I still have yet to grasp the concept.

Excavator
10-31-2011, 06:04 AM
posting the link again - http://visionarycreativegrp.com/Demos/ForSale%20RED/

Excavator
10-31-2011, 06:09 AM
what i meant, was I want that Box that is floating on the left to go next to the AD box in the middle.

This is what i dont understand about coding. I still have yet to grasp the concept.

If that's the case then both #adbox and your un-named div containing 6rowbg.png (can you tell I don't like not naming elements?) belong in #body.

Once they share the same container, you can postion them where you like.

Canman07
10-31-2011, 02:02 PM
I can't seem to line the boxes up right. I want the box with the "msi" logo to go underneath the box with the "Back2Back Gaming wins ESWC 2011". Then i was the black box next to the box with the "msi" logo in it... Can't seem to fix it.

Any help?

Excavator
10-31-2011, 03:19 PM
I can't seem to line the boxes up right. I want the box with the "msi" logo to go underneath the box with the "Back2Back Gaming wins ESWC 2011". Then i was the black box next to the box with the "msi" logo in it... Can't seem to fix it.

Any help?

In #body, bodybg.png is pushing everything down 1281px. That should be the background image and loaded from the CSS. You have it loaded from the markup and the the CSS.

The still un-named and un-styled div containing 6rowbg.png is behaving correctly by taking the full width available to it inside #body.

#adbox is also behaving correctly by following the natural flow of the document.

Solution:

remove bodybg.png from the markup
name and style div containing 6rowbg.png
style #adbox differently


See a float tutorial here (http://css.maxdesign.com.au/floatutorial/), this will help you.

Canman07
10-31-2011, 03:58 PM
In #body, bodybg.png is pushing everything down 1281px. That should be the background image and loaded from the CSS. You have it loaded from the markup and the the CSS.

The still un-named and un-styled div containing 6rowbg.png is behaving correctly by taking the full width available to it inside #body.

#adbox is also behaving correctly by following the natural flow of the document.

Solution:

remove bodybg.png from the markup
name and style div containing 6rowbg.png
style #adbox differently


See a float tutorial here (http://css.maxdesign.com.au/floatutorial/), this will help you.

Ok, so i got the "ad" box to the right and under the headlines box. But it seems the 6rowbg.png is locked in the top right corner

Excavator
10-31-2011, 04:28 PM
You would still need to float those elements.
It may be time to visit the validator and fix some minor errors in your code, both CSS and markup, that are slowing your progress. The thing that sticks out first off is your div named 6rowbg. You have a number as the first character for an id.

Canman07
10-31-2011, 05:04 PM
fixed.

Canman07
10-31-2011, 05:17 PM
You would still need to float those elements.
It may be time to visit the validator and fix some minor errors in your code, both CSS and markup, that are slowing your progress. The thing that sticks out first off is your div named 6rowbg. You have a number as the first character for an id.


Also, i did the validator and passed.

Canman07
10-31-2011, 05:21 PM
I updated the files on the ftp. Here is what i have so far. http://visionarycreativegrp.com/Demos/ForSale%20RED/

I finally got them to lineup next to eachother, but now it wont align right... hmm

Excavator
10-31-2011, 06:46 PM
I updated the files on the ftp. Here is what i have so far. http://visionarycreativegrp.com/Demos/ForSale%20RED/

I finally got them to lineup next to eachother, but now it wont align right... hmm

Hmm, now you have #sixrowbg contained in #adbox. #adbox is only 328px wide which is why you need the huge negative margin to move #sixrowbg over. See the box model (http://www.w3.org/TR/CSS2/box.html) again.

Try this instead...
markup:

<div id="body">
<div id="adbox">
<a href="#"><img src="images/ad.png" alt="Ad" id="ad"></a>
</div>
<div id="sixrowbg">
<h4><font color="#FFFFFF">MATCHES</font></h4>
</div>
</div>

And some CSS:

#body {
height: 1281px;
width: 1004px;
margin-top:1px;
overflow: auto;
background: #000 url(../images/bodybg.png);
}

#adbox {
background: url(../images/adbox.png);
height: 279px;
width: 328px;
margin: 6px 6px 0 0;
float: right;

}

#ad {
padding: 10px 10px;
border: none;
}

#sixrowbg {
background: url(../images/6rowbg.png);
height: 279px;
width: 328px;
margin: 6px 6px 0 0;
float: right;

}

Canman07
10-31-2011, 07:00 PM
Hmm, now you have #sixrowbg contained in #adbox. #adbox is only 328px wide which is why you need the huge negative margin to move #sixrowbg over. See the box model (http://www.w3.org/TR/CSS2/box.html) again.

Try this instead...
markup:

<div id="body">
<div id="adbox">
<a href="#"><img src="images/ad.png" alt="Ad" id="ad"></a>
</div>
<div id="sixrowbg">
<h4><font color="#FFFFFF">MATCHES</font></h4>
</div>
</div>

And some CSS:

#body {
height: 1281px;
width: 1004px;
margin-top:1px;
overflow: auto;
background: #000 url(../images/bodybg.png);
}

#adbox {
background: url(../images/adbox.png);
height: 279px;
width: 328px;
margin: 6px 6px 0 0;
float: right;

}

#ad {
padding: 10px 10px;
border: none;
}

#sixrowbg {
background: url(../images/6rowbg.png);
height: 279px;
width: 328px;
margin: 6px 6px 0 0;
float: right;

}

I did, it ended up like this: http://visionarycreativegrp.com/Demos/ForSale%20RED/#

Excavator
10-31-2011, 07:34 PM
Check your markup. #sixrowbg is still inside #adbox.

Canman07
10-31-2011, 07:47 PM
Fixed!!! but why doesnt the image show up? And will i be able to copy and paste this for the next row? and how do i go about doing the "partners" box? It is the length of 2 rows...

Excavator
10-31-2011, 08:05 PM
Fixed!!! but why doesnt the image show up? And will i be able to copy and paste this for the next row? and how do i go about doing the "partners" box? It is the length of 2 rows...

What image does not show up? Your site is far enough along in development that it would be easier to refer to images and div elements by the id/class you've given them. Image problems can often be solved by double-checking path and spelling.

If you copy/paste an element to put on another row, be sure you don't re-use an id. If you plan on having multiple instances of the same div element it should be named with a class.

See class vs id here (http://www.tizag.com/cssT/cssid.php).

Excavator
10-31-2011, 08:08 PM
...had to go look at your .jpg again.

Partners box could be floated left. You might need to test it out a bit to figure out where it needs to be in the markup.

Canman07
10-31-2011, 11:52 PM
how do i get the word "Videos" and "Photos" in each of those boxes? I tried but failed...

Excavator
11-01-2011, 01:00 AM
You should look again at divitis (http://ahsanity.wordpress.com/2007/05/15/divitis-and-classitis-two-new-words-in-my-css-vocabulary/). You do not need to wrap everything in it's own div.

You are also having a hard time seeing where to place new elements. This time you have Videos and Photos inside #h4.
See the heading tag here (http://www.w3schools.com/TAGS/tag_hn.asp).

Try it like this.
markup:
<div id="galleriesbox">
<h4>MEDIA</h4>
<h5 id="videos">Videos</h5>
<h5 id="photos">Photos</h5>
</div>

And some CSS:


h4, h5 {
font-family: Titilliumtext22l,Arial, Helvetica, sans-serif;
color: #fff;
}
h4 {
font-size:13px;
margin-left:15px;
margin-top:14px;
width:100px;
text-shadow:#333;
font-weight:600;
}
h5#videos {font-size:13px;
margin-left:15px;
margin-top:14px;
width:100px;
text-shadow:#333;
font-weight:600;
float:right;
}
h5#photos {
font-size:13px;
margin-left:15px;
margin-top:14px;
width:100px;
text-shadow:#333;
font-weight:600;
float:right;
}

Now maybe you can play with the margins and put those where you want.

Canman07
11-01-2011, 01:58 AM
You should look again at divitis (http://ahsanity.wordpress.com/2007/05/15/divitis-and-classitis-two-new-words-in-my-css-vocabulary/). You do not need to wrap everything in it's own div.

You are also having a hard time seeing where to place new elements. This time you have Videos and Photos inside #h4.
See the heading tag here (http://www.w3schools.com/TAGS/tag_hn.asp).

Try it like this.
markup:
<div id="galleriesbox">
<h4>MEDIA</h4>
<h5 id="videos">Videos</h5>
<h5 id="photos">Photos</h5>
</div>

And some CSS:


h4, h5 {
font-family: Titilliumtext22l,Arial, Helvetica, sans-serif;
color: #fff;
}
h4 {
font-size:13px;
margin-left:15px;
margin-top:14px;
width:100px;
text-shadow:#333;
font-weight:600;
}
h5#videos {font-size:13px;
margin-left:15px;
margin-top:14px;
width:100px;
text-shadow:#333;
font-weight:600;
float:right;
}
h5#photos {
font-size:13px;
margin-left:15px;
margin-top:14px;
width:100px;
text-shadow:#333;
font-weight:600;
float:right;
}

Now maybe you can play with the margins and put those where you want.

Thank you so much! Fixed it. But now i don't understand why the background wont go to right back where it should be... underneath the nav bar.

Excavator
11-01-2011, 02:16 AM
You have moved the start tag for #body. Now #body has #loginbox, #healines, #adbox, #sixrowbg and #galleriesbox in it.

See here -
f="#"><font color="#FFFFFF">Partners</font></a></li>

<li><a href="#"><font color="#FFFFFF">Contact Us</font></a></li>

</ul>

</div>

<div id="body">
<div id="loginbox">
<a href="#"><img src="images/profilepicture.png" alt="Profile Picture" id="profilepicture"/></a>
<a href="#"><img src="

Move that back where it was and things should go back to normal.

Canman07
11-01-2011, 02:23 AM
You have moved the start tag for #body. Now #body has #loginbox, #healines, #adbox, #sixrowbg and #galleriesbox in it.

See here -
f="#"><font color="#FFFFFF">Partners</font></a></li>

<li><a href="#"><font color="#FFFFFF">Contact Us</font></a></li>

</ul>

</div>

<div id="body">
<div id="loginbox">
<a href="#"><img src="images/profilepicture.png" alt="Profile Picture" id="profilepicture"/></a>
<a href="#"><img src="

Move that back where it was and things should go back to normal.


i did and it moved the ads box out of place.

Canman07
11-01-2011, 04:55 AM
??? Please helpp ???



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum