13 replies [Last post]
chrisb12416
chrisb12416's picture
Offline
Regular
Last seen: 11 years 24 weeks ago
Timezone: GMT+1
Joined: 2010-07-09
Posts: 22
Points: 29

Hi there,
So I'm coding my first design of many. I've read quite a few psd to css/html tutorials so far, which is all well and good, but when it comes to coding my own designs im running straight into... a brick wall.

So, here is my design in photoshop:

Here is the code I have written so far:

Html:

<html>
<head>
<title>Sparple Money-Making Blog</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<div id="photos">
</div>
</div>
</div><!--header ends-->
</div>
</body>
</html>

CSS:

*{
margin: 0px;
padding: 0px;
}
 
body {
margin-top: 20px;
background-image: url(imgs/bg.png);
background-repeat: repeat-x;
background-color: #0c0c0c;
}
 
#container {
margin: auto;
width: 1100px;
}
 
#header {
width: 1100px;
height: 304px;
}
 
#logo {
float: left;
width: 485px;
height: 224px;
display: inline;
background-image: url(imgs/logo.png);
background-repeat: no-repeat;
}
 
#photos {
float: right;
width: 652px;
height: 304px;
display: inline;
background-image: url(imgs/photos.png);
background-repeat: no-repeat;
}

Struggling to understand why the logo.png and photos.png are stacking on top of each other when i have a div wide enough for both of them, floating them to each side of the div respectively... probably a noob mistake, but there we go, help?

Also, could anyone shed some light as to how I would go about coding the rest of the design - mainly the nav. I want the nav to fall underneath the logo's dropshadow. I can probably get the nav coded into the design, but not positioned where i mentioned. Help?

Thanks,
Chris.

DaculaWeather
DaculaWeather's picture
Offline
newbie
Dacula Ga
Last seen: 11 years 14 weeks ago
Dacula Ga
Timezone: GMT-4
Joined: 2010-07-10
Posts: 3
Points: 4

Chris, it looks like your two

Chris, it looks like your two div's (logo and photo) are 1138px wide and the container div is 1000px. That would cause that problem.

chrisb12416
chrisb12416's picture
Offline
Regular
Last seen: 11 years 24 weeks ago
Timezone: GMT+1
Joined: 2010-07-09
Posts: 22
Points: 29

Thanks, man!

Thanks, man! Smile

EDIT: Okay, changed the width of my containers and nothing seemed to happened, when trying to float the photos to the right, they remain ontop of the logo. They only move if I float it left then use margins to shift them accross, but im assuming that would cause resolution problems.

How do I make it so each image is aligned left and right, so the container defines the distance between them, even if it means I put them in a container too small and they overlap each other upon resize?

Thanks.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You've got #photos contained

You've got #photos contained within #logo, so even though #photos is wider, it's floating to the right boundary of the parent element (#logo) which is only 485px wide.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

chrisb12416
chrisb12416's picture
Offline
Regular
Last seen: 11 years 24 weeks ago
Timezone: GMT+1
Joined: 2010-07-09
Posts: 22
Points: 29

Sorted it. Now I'm really

Sorted it.

Now I'm really struggling though.

As you can see in the images, I have a nav which is attached directly onto my logo, then with the photo's image to the right of both of these.

I can't get everything in the right place on the right level. I can get it looking how its supposed to with the navigation image ABOVE the logo, but I want it to be below so the logo's drop shadow falls onto the nav.

Help? Sad How would I do that.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Well,maybe you should start

Well,maybe you should start with a proper standards triggering docgtype,

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

chrisb12416
chrisb12416's picture
Offline
Regular
Last seen: 11 years 24 weeks ago
Timezone: GMT+1
Joined: 2010-07-09
Posts: 22
Points: 29

Once I've started with that,

Once I've started with that, what should I then go on to do? Smile

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

chrisb12416 wrote: Once I've

chrisb12416 wrote:

Once I've started with that, what should I then go on to do? Smile

Read the forum "sticky" messages and then the messages in the "How to" section, wbere these things are all explained.

Until you understand the basics then you are like a contracter building a house without worrying about those boring old things like codes and foundations. He might even end up with a house, but then should not be surprised when it falls down in the first good blow, or catches fire and burns down due to an electrical short.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

chrisb12416
chrisb12416's picture
Offline
Regular
Last seen: 11 years 24 weeks ago
Timezone: GMT+1
Joined: 2010-07-09
Posts: 22
Points: 29

I appriciate that a lot of

I appriciate that a lot of people will come here and just ask questions without reading up on the site first, but i read all the topics that sounded relevant and it wasn't covered anywhere.

All I needed someone to tell me was to look up the z-axis/z-index and I would have been fine lol - Obviously I've found it now.

Thats anyway, everyone.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

chrisb12416 wrote: I

chrisb12416 wrote:

I appriciate that a lot of people will come here and just ask questions without reading up on the site first, but i read all the topics that sounded relevant and it wasn't covered anywhere.

You admit to being a beginner, so what qualifications do you think you have to know what is and what is not, relevant?

Quote:

All I needed someone to tell me was to look up the z-axis/z-index and I would have been fine lol - Obviously I've found it now.

Well, judging only by the code you posted, you needed, and need, a lot more than that. However it's your life and if you wish to continue a mistaken approach that's your right of course. But you'd save yourself an immense amount of frustration and the creation of a lot of broken sites if you'd read up on and understand the basics first.

It's human nature to want to jump into the deep end, of course, but if you don't want to drown it's still a bad idea.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

chrisb12416
chrisb12416's picture
Offline
Regular
Last seen: 11 years 24 weeks ago
Timezone: GMT+1
Joined: 2010-07-09
Posts: 22
Points: 29

That's you're fault for

That's you're fault for making assumptions - beginner at css I may be, but I have a lot of experience in other fields of programming, css is just another language I've decided to pickup on my web design endeavours. Everyone can approach things with a certain degree of common sense, for example, I'm fairly certain I don't need to read the topic: "IE bug: Are your floated margins huge?!" in the How To's because I'm not having that problem, thus I deem it irrelevant in my search for help.

tl;dr - high horse, get off it.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

chrisb12416 wrote: That's

chrisb12416 wrote:

That's you're fault for making assumptions - beginner at css I may be, but I have a lot of experience in other fields of programming, css is just another language I've decided to pickup on my web design endeavours.

CSS/HTML are not "just another language", as you are assuming. Many of the things you "know" in other languages will lead you entirely astray here. Many of the truly awful web pages out there are just exactly the ones done by "programmers", only exceeded by those done by graphics designers.

If you've been doing "web design" without CSS before then you almost certainly have a lot of very bad habits you need to unlearn before you can do CSS/HTML successfully. The whole approach needs to be different, and that means virtually re-learning html among other things. I know, I've been through the process myself.

Our opinions as to just which of us is on the "high horse" differ.
But I do notice that you are the one who started the name calling.

If you think, for example, that the document type declaration is irrelevant as you seem to, then you are in for a very long struggle indeed.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

chrisb12416
chrisb12416's picture
Offline
Regular
Last seen: 11 years 24 weeks ago
Timezone: GMT+1
Joined: 2010-07-09
Posts: 22
Points: 29

-I declared doc type in my

-I declared doc type in my code, if you've seen my latest thread - lesson learnt.
-Web design has multiple elements - I'm a photoshop user and can 'design' in that quite happily, obviously its a multiple stage process, of which photoshop is one of the first.
-I don't think you interpreted my post well at all - i know its not 'just' another language, its a highly valuable one and the only reason i'm here is to learn more about it to make my life a bit easier.

This bickering isn't getting us anywhere, so lets just leave it - thanks to everyone else and your own contributions.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

chrisb12416 wrote: This

chrisb12416 wrote:

This bickering isn't getting us anywhere, so lets just leave it.

Exactly. Locking this thread to avoid any further unnecessary lecturing.

If you require help with any other problems, please start a new thread.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference