7 replies [Last post]
Adam19
Offline
newbie
Last seen: 14 years 25 weeks ago
Joined: 2008-01-10
Posts: 4
Points: 0

Hi,

I realise this is my first post, and I hope that it won't be my last! I hope the more I learn the more I can contribute to this board.

My problem is this;

I am trying to set up a website based on a design given to me.

However, it's not proving to be an easy task getting these 'panels' (as I call them) to display the way I want them too. Now this could just be down to me not having that extra bit of knowledge that I may need, which is where you come in! How would you reccomend I achieve this look through CSS?

if you visit www.adamhughes.co.uk/uni/ you'll see its current state, if you want to view the style sheet as it is at the moment then visit www.adamhughes.co.uk/uni/style.css

I hope a solution can be found! I have been trying to get my head around it for a couple of days now!

Thanks in advance for any help offered.

Adam

Katie
Katie's picture
Offline
Enthusiast
Seattle, WA
Last seen: 6 years 34 weeks ago
Seattle, WA
Timezone: GMT-8
Joined: 2006-08-06
Posts: 357
Points: 2

I may have gone a little

I may have gone a little overboard once I got Photoshop open...

In short, I'd make the titled photos a background image on the html tag, and put the content in the body with a nice big margin and white background.

AttachmentSize
howiddoit.gif 87.44 KB

Blog: Pew Pew Laser Blog
Online File Storage: DropBox
Daily Deals on Local Activities: Groupon

hayesha
Offline
newbie
Sri Lanka
Last seen: 14 years 21 weeks ago
Sri Lanka
Joined: 2008-01-09
Posts: 9
Points: 0

Re: 'Panels' either side of content

Hi Adam,

According to the information provided I see that you are finding some trouble in setting the navigation links, If you check with the following link I hope You will be able to find more information to overcome your issue with CSS:

http://www.dynamicdrive.com/style/

Adam19
Offline
newbie
Last seen: 14 years 25 weeks ago
Joined: 2008-01-10
Posts: 4
Points: 0

Sorry, after re-reading my

Sorry, after re-reading my post I see I never really specified what I was having problems with!! It's the images which come out of the content - theres one on the left and one on the right. The two sort of poloroids. I don't know to get them to....be there!

I should be OK with the navigation, I just haven't got to it as I have been caught up with this other problem and I feel some urge to get that sorted before moving on!

Katie
Katie's picture
Offline
Enthusiast
Seattle, WA
Last seen: 6 years 34 weeks ago
Seattle, WA
Timezone: GMT-8
Joined: 2006-08-06
Posts: 357
Points: 2

Actually, I must rescind my

Actually, I must rescind my original recommendation a bit. Create one image that contains the photographs, all four of them. Style the BODY tag with that image as a bg image. Put the bg color on the HTML tag, and set the height of HTML tag to 100%. Then add a wrapper div to contain all the content, with a white background.

Like so:

Tulip Photos

/* #796174 Purple */
html
{ font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
background-color: #796174;
height: 100%;
}
body
{ color: #000000;
background: transparent url(images/photostack.gif) top center no-repeat;
width: 550px;
margin: 0 auto;
}
#wrapper
{ margin: 10px 125px;
border: solid #000000 1px;
padding: 10px;
background-color: #FFFFFF;
}
h1, h2, p
{ margin: 0 0 .5em 0;
padding: 0;
}



Tulips

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras urna elit, suscipit in, condimentum ut, euismod vitae, risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis dapibus laoreet magna. Curabitur gravida ultrices justo.



In leo. Ut felis sapien, scelerisque a, vehicula vitae, auctor in, dolor. Curabitur tempus dui in augue. Nunc libero. Nunc quam sapien, ullamcorper sed, scelerisque eget, venenatis in, tellus. Vestibulum quis eros in arcu condimentum facilisis.



Pellentesque sapien. Duis pede. Praesent ut libero. Nulla facilisi. Sed non libero et lorem consectetuer congue. Etiam fermentum adipiscing lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut nonummy. Vivamus imperdiet gravida felis. Aenean mi dui, auctor ut, varius vel, mollis sit amet, ante. Mauris eros elit, vestibulum eu, tincidunt ut, euismod et, urna.


AttachmentSize
photostack.gif 72.95 KB

Blog: Pew Pew Laser Blog
Online File Storage: DropBox
Daily Deals on Local Activities: Groupon

Adam19
Offline
newbie
Last seen: 14 years 25 weeks ago
Joined: 2008-01-10
Posts: 4
Points: 0

Katie - Thank you very much

Katie - Thank you very much for the help. A very logical solution! Something I should have thought of!

The only other problem I am having now (which may require a new thread) is a gap issue in firefox. If you have firefox installed (sure you will!) goto www.adamhughes.co.uk/uni and you'll see what I mean. Any ideas how to resolve this?

Thanks!

Katie
Katie's picture
Offline
Enthusiast
Seattle, WA
Last seen: 6 years 34 weeks ago
Seattle, WA
Timezone: GMT-8
Joined: 2006-08-06
Posts: 357
Points: 2

Is it that white space

Is it that white space between the header and the navigation ul? You probably need to clear out the default margin on the ul.

#navigation ul { margin: 0; padding: 0; }

Remember that all elements have some style applied to them by the browser, and you may need to override this to get the effect that you're looking for. It's common to have the following code to override browser default styles, or something like it, at the beginning of a stylesheet:

h1, h2, h3, p, ul, ol, li { margin: 0; padding: 0; }

Eric Meyer has a more detailed universal reset stylesheet at: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/.

Blog: Pew Pew Laser Blog
Online File Storage: DropBox
Daily Deals on Local Activities: Groupon

Adam19
Offline
newbie
Last seen: 14 years 25 weeks ago
Joined: 2008-01-10
Posts: 4
Points: 0

katie - you star!! My

katie - you star!! My lecturer shown us that site, but I wasn't able to find it before.

Thank you for your help, again, and I apologise for my amateurness at this!

Yes, it was the gap between the nav and the content. Your solution has solved it.