Hi all, have a few issues I want to sort out with my website

First of all

http://www.damianblades.co.uk/testing/Portfoliobox/index.html

I want that black bar to be at the bottom and to have spacing away from the other content and for the life of me I can't remember how to do it.

Also, those image boxes where copied 12 times and just adjust manually. This is impractical, I know there is another way around it. How can it be done?

And the second

http://www.damianblades.co.uk/testing/infobox/test.html

the image at the top has attributes of 100% WxH so that as the screen gets smaller, so does the image. But I couldn't work out how to build everything around it, so both the buttons and boxes are inside the images container. I tried it outside of this container with an absolute attributes, but it would stay where it was as the image got smaller and bigger. So it would either overlap or be miles away, it wouldn't move with the image. I tried relative and inherit but still no luck.

Anyone have any easy fixes for this?

Thanks,

Damian.

It all looks black to me, i am not sure which bar you are talking about.

The second issue, please don't use tables for layout!!

You have used a unordered list for the navigation, but haven't used any list items. Your links should be in <li> tags not <span>.

You have;

<div id="buttons">
<ul class="style1">
<span class="style2"><a href="imagesINFOBOX/about.html">ABOUT</a>
<a href="imagesINFOBOX/portfolio.html">PORTFOLIO</a>
<a href="imagesINFOBOX/contact.html">CONTACT</a>
<a href="http://damianbladesphotography.bigcartel.com/">SHOP</a></span>
</ul>
</div>

What you should have is;

<div class="buttons">
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</div>

your CSS can then look like;

buttons {
width: 100%;
}
buttons ul {
margin: 0 auto;
display: inline;
}
buttons ul li {
list-style: none;
display: inline;
}

or something along those lines don't take the above as gospel i am just throwing things together in my lunch break.. read here if you need help understanding lists; http://www.alistapar...es/taminglists/

I would create a div that is 100% wide, then you need to center the <ul> using margin: 0 auto; Infact.. having looked a bit closer, its all just a bit of a mess!

Can i suggest you try using a framework like bootstrap? http://twitter.github.com/bootstrap/

Hi all, have a few issues I want to sort out with my website

First of all

http://www.damianbla...obox/index.html

I want that black bar to be at the bottom and to have spacing away from the other content and for the life of me I can't remember how to do it.

The black bar is actually your background colour, which is showing through because your background image is a fixed size and you have it centered. Removing/unticking these two items in Chrome's "dynamic-CSS-changer-thingumie" (the F12 console, I dunno its official name) puts the grey gradient at the top of the page, fading down into black, which I assume is what you're trying to achieve?

• background-attachment: fixed;
  
• background-position: center;
  

edit - I agree with AP too. Even I've done basic website layouts/mockups with Bootstrap, it can make things surprisingly easy/portable. I'm not actually a web designer/programmer though, so I don't know at what point its hand-holding actually becomes a hindrance.

Edited 28 November, 201213 yr by gac

Nowt wrong with using tables if necessary.

Depends what it's for, we've had problems with blind students using screenreaders in the past. Tables can confuse them greatly making websites virtually unusable, whereas CSS divorces the layout from the "flow" of text, meaning you can have the website read out in a totally different order to how it appears visually, should you want to. It's one of those things where when it's done well, it's great, but when done even slightly badly it's appalling

Agreed, however tables are often fine.

Tables are great for presenting tabular data on a website.

It's almost like they were made for it.

Nowt wrong with using tables if necessary.

Yes, for displaying information in a table as intended.

Absolutely not for layout, if you are still using tables for layout in 2012 you need to step away from the text editor and check yourself before you wreck yourself. :p Its actual fact that god kills a kitten every time someone uses a table for layout.

And back to the original post, i forgot to post it earlier. Try and keep your code lowercase, makes it nicer to read. If you need to user uppercase then use the text-transform css property. Its also a good idea to get into the habit of naming your css classes properly and not using style1 and style2, you will thank yourself in the long run.

I got a little lost with that boot strap frame work. I didn't really get what I was looking at. I decided, it is probably easier for you guys to see what I am trying to achieve rather than trying to guess the look through my code....

Easy to do, but i'm not going to do it for you :p

Keep at it and learn, hacking away, getting stuck, finding a solution is the best way to learn.

Looking at your mock up, i'd say this could be a good place to start for structure.

<div class="container">
<div class="header">
<a href="#"><img class="logo" src="logo.png"></a>
</div>
<div class="navigation">
<ul>
<li class="active"><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</div>
<div class="body">
<!-- your body content goes here -->
</div>
<div class="footer">
<div class="footer-left"></div>
<div class="footer-right"></div>
</div>
<div class="social-icons"></div>
</div>

Easy to do, but i'm not going to do it for you :p

Keep at it and learn, hacking away, getting stuck, finding a solution is the best way to learn.

Looking at your mock up, i'd say this could be a good place to start for structure.

<div class="container">
<div class="header">
<a href="#"><img class="logo" src="logo.png"></a>
</div>
<div class="navigation">
<ul>
<li class="active"><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</div>
<div class="body">
<!-- your body content goes here -->
</div>
<div class="footer">
<div class="footer-left"></div>
<div class="footer-right"></div>
</div>
<div class="social-icons"></div>
</div>

I am not looking for a hand out, I believe in doing it myself! Also if you guys do it for me I will never learn how to do it for myself. I am terribly lost with it though,. I don't know what I am actually looking at/what I need to do to fix it. I appreciate the help so far, but I don't really get what I need to do.