What are you working on? v2

[Mikeyspike]

Hey guys, I've got a quick question. I'd like to start designing my websites using CSS layouts, rather than HTML tables, however, i've been looking all over the internet and i jsut can't seem to find any decent tutorials covering everything i need to know, from designing the website, to getting it into the editor and laying it out using Div tags. I really want to start getting into CSS design but i jsut don't know where to start.

Thanks

[nullsquared]

w3schools has an excellent CSS tutorial, and that's where I learned

[Mikeyspike]

Thanks Null :) I'll have a look now :)

[DarkSpirit05er]

[img]http://dl.dropbox.com/u/5270753/website/tmpphpht4VQG.jpg[/img]
How do I put those links where they belong? I have no idea.
They are supposed to be on the navigation bar, below the header, right side, in the rectangles.

[KSI]

I'd be nice to have your code. I would assume just by looking at it: float:right and display:inline

[DarkSpirit05er]

Sorry, here it is.

#menu ul{
	list-style-type:none;
	padding:0;
	margin-top:-27px;
}

#menu li{
	float:left;
	text-align:center;
}

#menu a{
	display:block;
	width:105px;
	height:27px;
	background-image:url(images/linkback.jpg);
}

<div id="menu">
   <ul id="nav">
      <li id="home"><a href="#" ><p>Home  </p></a></li>
      <li id="pfolio"><a href="#" ><p>Portfolio</p></a></li>
      <li id="contact"><a href="#" ><p>Contact</p></a></li>
   </ul>
</div>

[andersonmat]

-snip-

[editline]02:12PM[/editline]

Your method provides too much work. Separate the navigation bar and the header image.

Do this:

<div id = "navigationBar">
	<a>Home</a>
	<a>Portfolio</a>
	<a>Contact</a>
</div>

CSS:

#navigationBar{
	width: setyourwidthhere;
	text-align: right;
}

#navigationBar > a{
	padding: 2px 5px;
	background-image: url('path to button background');
	background-position: center center;
	display: inline-block;
}

I didn't test it, but that's the idea.

[Mikeyspike]

right, I'm fannying around with CSS layouts now, and im trying to figure out how to get two div tags to sit side by side so i can seperate content, but im not sure how too. I've had a look on WC3 schools but can't seem to find anything about it anyone help me out again ? :)
ohh btw, here is my current setup of Code and design:
[URL]http://img580.imageshack.us/img580/6183/websitep.jpg[/URL][URL="http://img205.imageshack.us/img205/9718/websitey.jpg"]
[/URL]

[nullsquared]

Look at the Floating section.

[DarkSpirit05er]

[QUOTE=andersonmat;22260956]-snip-

[editline]02:12PM[/editline]

Your method provides too much work. Separate the navigation bar and the header image.

Do this:

<div id = "navigationBar">
	<a>Home</a>
	<a>Portfolio</a>
	<a>Contact</a>
</div>

CSS:

#navigationBar{
	width: setyourwidthhere;
	text-align: right;
}

#navigationBar > a{
	padding: 2px 5px;
	background-image: url('path to button background');
	background-position: center center;
	display: inline-block;
}

I didn't test it, but that's the idea.[/QUOTE]

It doesn't do anything:
[img]http://dl.dropbox.com/u/5270753/website/Untitled-4.png[/img]

I'm sure it's something really simple and I just can't figure it out because I don't have enough experience with CSS. Sorry. :saddowns:

[Mikeyspike]

Thanks thats worked. However i've got another problem now, One of my div tags overlaps another, and does not push the "holder" tag down, however the tag next to it does. Here is what i mean:

Content3 tag pushing down the "holder" tag:
[URL]http://img130.imageshack.us/img130/9467/problem1t.jpg[/URL]

Content2 tag overlaping my Footer tag and not pushing the holder tag down:
[URL]http://img17.imageshack.us/img17/7492/problem2be.jpg[/URL]

[KSI]

I think clear:both; fixes the problems with floating. I'm not 100% sure, though.

[Mikeyspike]

What tag would i put that in? My two content tags or the holder?

Just tryed all 3, Doesn't work "/

[nullsquared]

In a separate tag that goes after your floating elements.

[Mikeyspike]

Yeah, I've jsut put it in my footer tag, And its half fixed the problem. It still doesn't push down my Holder tag with the background Thanks again guys :)

[andersonmat]

[QUOTE=DarkSpirit05er;22261876]
I'm sure it's something really simple and I just can't figure it out because I don't have enough experience with CSS. Sorry. :saddowns:[/QUOTE]

For your Navigation Bar:
- Set a background-image
- margin: 0px auto;

[editline]03:41PM[/editline]

Also, width

[nullsquared]

[QUOTE=Mikeyspike;22262404]Yeah, I've jsut put it in my footer tag, And its half fixed the problem. It still doesn't push down my Holder tag with the background Thanks again guys :)[/QUOTE]

Put it in an empty tag that's right after your floating stuff, but still in the "main" body that you want to stretch down.

[Mikeyspike]

[QUOTE=nullsquared;22264534]Put it in an empty tag that's right after your floating stuff, but still in the "main" body that you want to stretch down.[/QUOTE]

Perfect. Thanks a bunch, really apreciated :D :hfive:

[KmartSqrl]

I prefer to use clearfix over clear classed divs

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

Then all you do is add the clearfix class to the element that contains the floated elements.

There's some rare spots where clearfix can cause weird browser inconsistencies and things like that though, so when that happens I just fall back to clear classed divs.

[Mikeyspike]

Thanks for that. So, i'd add that into my CSS and then create a div tag with the .clearfix:after class after the two floating div I'm guessing?

THanks again :)

[KmartSqrl]

Nope with clearfix you don't add any extra tags, you'd do it like this:

<div id="container" class="clearfix">
    <div id="float1"></div>
    <div id="float2"></div>
</div>

[Mikeyspike]

[QUOTE=KmartSqrl;22265388]Nope with clearfix you don't add any extra tags, you'd do it like this:

<div id="container" class="clearfix">
    <div id="float1"></div>
    <div id="float2"></div>
</div>

[/QUOTE]
ahh a lot simpler then, thanks :)

[jaybuz]

[QUOTE=KmartSqrl;22265193]I prefer to use clearfix over clear classed divs

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

Then all you do is add the clearfix class to the element that contains the floated elements.

There's some rare spots where clearfix can cause weird browser inconsistencies and things like that though, so when that happens I just fall back to clear classed divs.[/QUOTE]

I've always just added this to the element that holds the floats:

height: 1%;
overflow: hidden;

It always seems to work.

[KmartSqrl]

Clearfix has caused less problems than doing that for me.

[turb_]

Oi null, what you should do on the homepage of nullular.com is make it so when I mouse over one of the product names, it fades the image on the right to a screenshot of that product.

[animorten]

[QUOTE=Hexxeh;22235031]If he wants to point to my servers, I'd set that up.

Threads: facepun.ch/t/245135
Posts: facepun.ch/p/245256[/QUOTE]

OK :buddy:
what is your server?

[nullsquared]

[QUOTE=turb_;22274307]Oi null, what you should do on the homepage of nullular.com is make it so when I mouse over one of the product names, it fades the image on the right to a screenshot of that product.[/QUOTE]

Hey, that's a good idea! I'll do it.

[Spoco]

I decided to finish that blog that I started a while ago. I've got a login system and blog posting working. I'm using PHP session variables and IP-checks, because it's hosted on my university site which makes stealing session cookies very easy. I've got SHA-256 hashed passwords with 10 character long salts, pretty much done like shown on the bottom of [URL=http://phpsec.org/articles/2005/password-hashing.html]this article[/URL].

[URL]http://users.metropolia.fi/~samiky/blog/[/URL]

If anyone can spot any flaws in security, please let me know.

Also, I haven't checked how it looks on other browsers except Firefox 3.6.3 and IE8. I was surprised though that it actually seems to work fine on IE8. As far as I know the only thing that's fucked up on IE8 is the login form. Also, there's rounded corners only for Mozilla at the moment.

Todo:[list]
[*] Posting system improvements (No WYSIWYG or even image uploading at the moment)
[*] Post editing/deleting
[*] Session system optimization (Right now it's querying the user database every time a user with existing session variables refreshes a page (IP-check))
[*] Commenting system
[*]( Registration (maybe, for comments?) )
[/list]

[arienh4]

[QUOTE=nullsquared;22258908]Yeah, if it doesn't look good, people are really only 1 click away from leaving your site.[/QUOTE]
Because of a feature in the design they don't even know is possible? I doubt it.

[KmartSqrl]

[QUOTE=arienh4;22286641]Because of a feature in the design they don't even know is possible? I doubt it.[/QUOTE]

Yeah null is right actually. If you're going to the lengths of fine tuning drop shadows to make your design stand out then you should be making sure they work everywhere so that your design stands out everywhere. Users have incredibly short attention spans. If I remember correctly you generally have about 7 seconds to capture someone before they move on. (This is based on a number of usability studies that I've seen in the past, although the number 7 might be slightly off, I know it's close)