Can I optimise this css code? - Graphic Design Forum and Web Design Forum

dreamingdesigner · #1 (**permalink**) 10-10-2008, 10:02 AM

Currently I have this piece of code:

Code:

<div class="info-post">
<div class="info-post-user">1/10/2008 351 scholio</div>
<div class="info-post-back"><a href="javascript:history.back()">Terug</a></div>
<div class=clearboth></div>
</div>

with this css:

Code:

.clearboth {    clear:both;}
.info-post {
    margin-top:5px;
    padding: 5px;
    background: #90a8ae;
}
.info-post-user {
    float:left;
    width:490px;
    font-size: 1.3em;
    line-height: 1.4;
}
.info-post-back {
    float:left;
    width:100px;
    font-size: 1.3em;
    line-height: 1.4;
    text-align:right;
}

to display this:

In my opinion that is a bit too much code to display something so simple.
I've been trying to optimise the code, but so far I've been unable to make it show up as the image above..

So I'm wondering if any of you have any idea if I can optimise my code and how to do it.

PR Design · #2 (**permalink**) 10-10-2008, 10:05 AM

Give me a few mins.

PR Design · #3 (**permalink**) 10-10-2008, 10:08 AM

HTML Code:

<html>
<head>
<style type="text/css">
.info-post {
	margin-top:5px;
	padding: 5px;
	background: #90a8ae;
	width:600px;
	overflow:hidden;
	font-size: 1.3em;
	line-height: 1.4em;
}
.info-post-user {
	float:left;
	width:490px;
}
.info-post-back {
	float:right;
	width:100px;
	text-align:right;
}
</style>
</head>
<body>
	<div class="info-post">
		<div class="info-post-user">1/10/2008 351 scholio</div>
		<div class="info-post-back"><a href="javascript:history.back()">Terug</a></div>
	</div>
</body>
</html>

PR Design · #4 (**permalink**) 10-10-2008, 10:13 AM

Even better:

HTML Code:

<html>
<head>
<style type="text/css">
.info-post-user{
	position:relative;
	width:600px;
	margin-top:5px;
	padding:5px;
	background:#90a8ae;
	width:600px;
	overflow:hidden;
	font-size:1.3em;
	line-height:1.4em;
}
.info-post-user a{
	position:absolute;
	right:5px;
	width:100px;
	text-align:right;
}
</style>
</head>
<body>
		<div class="info-post-user">
			1/10/2008 351 scholio <a href="javascript:history.back()">Terug</a>
		</div>
</body>
</html>

That's 620 chars down to 476 (including my rudimentary html structure).

dreamingdesigner · #5 (**permalink**) 10-10-2008, 10:39 AM

Thanks for the help but I think both codes need a bit of tampering.

If I use the first one, it displays niecely in FF3 but the overlay isn't working in IE6.

If I use the second one, it displays nicely in IE6 (?!) but takes away the margin for the next item in FF3.

PR Design · #6 (**permalink**) 10-10-2008, 10:43 AM

You can add minor stylings back in. Tweak the right:5px; value I think is what you want.

dreamingdesigner · #7 (**permalink**) 10-10-2008, 11:19 AM

Thanks!

PR Design · #8 (**permalink**) 10-10-2008, 11:20 AM

Worked?

dreamingdesigner · #9 (**permalink**) 10-10-2008, 12:05 PM

Was for the help.

Haven't been able to test it yet, but I think it needs some more tweaking besides the "right" attribute.

zumojuice · #10 (**permalink**) 10-10-2008, 12:35 PM

Knew I'd find harry dossing off work in this thread...

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Need CSS code for wordpress	velina	CSS Forum	2	07-10-2008 05:43 PM
Where/how did you learn to code? Or did you?	Maggled	General Web Design Forum	29	11-08-2008 06:12 AM
Code-Slider	picky-very-picky	General Web Design Forum	1	12-12-2007 02:22 PM
Bar Code Chandelier	Toon	Off Topic	7	06-07-2007 06:08 PM
Ever1 knows that I can't code.	whitey-wonder	Graphic Design and Web Design Help	9	21-03-2007 11:18 PM