Jump to content

CSS Positioning


Jadystacia

Recommended Posts







left column




right column




logo




header






Cast into Shadows


The first band ever to record at Obsidian Recording was Cast into Shadows. I'd like to shout out to Donnie, Evan, Josh, Brian, and J.T. for being the first group to come through here and for making a kickass record along the way. You can find more about them in the Artists section of the site.






Website Launched!


After a looong time working on this site, I've finally finished just in time for summer! What you can expect is a lot of updates on what artists who record here are doing, free downloads, cool videos of their shows, special rates just for people who visit the site, and more. If you'd like to contact me, all my information and more is in the About section of the site.

Thanks for visiting, and I hope you enjoy!



Jun

1

Jun

7

New Website!

Welcome to the all-new Obsidian Recording site! I will regularly update with news, special rates, videos, featured free downloads, and more.






Edited by Jadystacia
Link to comment
Share on other sites

A couple comments...

 

-- You don't need two divs, one with an id of "container" and the other with a class of container. Drop one or the other, and then use this css instead of what you have (this assumes you remove the id):

 

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

 

to get the site to center, you'll need to add:

 

-- text-align:center; to "body"

-- text-align:left; to ".container"

 

In regards to the navigation, I usually suggest one of two options: http://htmldog.com/articles/suckerfish/dropdowns/ or http://users.tpg.com.au/j_birch/plugins/superfish/. I would probably suggest using the first option, unless you are already using jquery in your site, since jquery adds a bit of unnecessary page weight if you aren't using it elsewhere.

 

To be able to help you further, it probably would be best for you to post your site to a temporary location, and provide the link, so we can see how the site displays with images and everything in place.

Link to comment
Share on other sites

Hey, I posted up the site to Bravenet

 

I also updated the code I posted here as well. The site still isn't centering; no idea why not. I also tried using the code and following the tutorial on suckerfish; it didn't do anything and i rechecked it a few times, but ended up removing it. I need to overlay the inline dropdown onto the navigation bar image.

 

Thanks for the help.

Edited by Jadystacia
Link to comment
Share on other sites

Okay, the centering now works ;) no idea why that width fix was messing with it :/ My latest code is now posted.

 

Thanks for the help :) Almost everything is fine now, I just want to customize the dropdown a bit more, which shouldn't be an issue.

 

The first problem is that the navigation bar hides the drop down unless i move the mouse down along the far left of the main link, instead of anywhere on that link. So if I'm on the About link, I am limited to the A and that's it.

 

 

The other problem is that when I set an image as a background in the CSS segment, using

background-image: url("http://www.sd.com/picture");

, the image disappears. The navigation picture with the gradient is gone; I replaced how it looked by adding a border.

 

If I want to add content to the main body image, with three images (two next to the main content, taking up probably the first 40px of the body; one aligned top right taking about 100px), how could I do that? If the background is gone, that's bad because I can't add text to it.

 

Is it possible to make the main body a container, and then position things absolutely inside of it? That would solve my issues in that regard.

 

 

Thanks again for all your help.

Edited by Jadystacia
Link to comment
Share on other sites

A couple things...

 

-- the background image behind the navigation will reappear if you add "overflow:auto;" to the div.navigation. You will also need to add "padding:0" to your ul#nav.

 

-- "The first problem is that the navigation bar hides the drop down unless i move the mouse down along the far left of the main link, instead of anywhere on that link. So if I'm on the About link, I am limited to the A and that's it." I believe this is caused because "#nav a.main" is set to have a width of 10px. Remove the width, and that should fix it.

 

-- For the content area, you will need to code the site in such a way that you can use background images, and then use regular header or

tags to add your content. Using regular images, and then trying to absolutely position text on top of it isn't the way to go.

Link to comment
Share on other sites

Okay.

 

The background image has reappeared ;) Thanks.

 

I changed the content area, so the background image is appearing now. What I did was fix the height at 525px, so it now works.

 

The navigation is still messed up; I removed the width but it hasn't changed anything.

Link to comment
Share on other sites

A couple minor points...

 

I'd suggest you validate your site through http://validator.w3.org/. You have a couple basic coding errors that you should probably correct that the validator will catch, including a doubling of the

tags and invalid "h" tags.

 

In regards to the date/sidebar images, you'll probably need to add an extra div for each of those section, and then float/use margins and padding (or absolutely position) those items into the correct position.

Link to comment
Share on other sites

Okay. Thanks for all the help :) The site is 99% finished now, everything is positioned well + validated. One issue is that the absolute positioning doesn't work because of the ads on the temporary hosting site! That's fine though, because the place where it will be permanently hosted won't have top ads.

 

The issue with the navigation is still there, where it cuts out. I removed the width definition, so I'm not sure what's up.

 

 

*Is there a way for me to say host three files somewhere that's easily accessible for you? I have three documents I'm working with; the one at the top, along with one for an internal page that has an external style sheet. That's what I have issues with down below.

 

Since I have absolute positioning to get the text to position correctly over the footer image, I have another pair of issues. The first is how to make it so that as I add content, the center section stretches to accommodate it and the footer/header stay the same. Only the center stretches vertically.

 

What I've done now is made the body a picture that can be repeated over and over, and made the gradient part of it a separate image. So that's doing fine.

 

However, when it pushes the footer down, the footer flies over to the left and the positioned text does too, as well as being left way up the page.

 

I'm assuming once I know how much content i'll have, I can just push them back down, but what about the random alignment change?

 

Thanks again,

 

Tom

Edited by Jadystacia
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...