Graphic Design Forum and Web Design Forum  

Go Back   Graphic Design Forum and Web Design Forum »Web Design Forum »CSS Forum

Notices

CSS Forum Cascading Style Sheets (CSS) and XHTML Forum


Reply
 
LinkBack (1) Thread Tools Display Modes
  1 links from elsewhere to this Post. Click to view. #1 (permalink)  
Old 10-10-2008, 10:02 AM
dreamingdesigner's Avatar
Junior Member
 
Join Date: Oct 2007
Posts: 29
Default Can I optimise this css code?

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.
Digg this Post!Add Post to del.icio.usBookmark Post in Technorati Share This Article & VoteReddit! Wong this Post!Stumble this Post!RSS Share on FacebookForum Netvibes Page
Reply With Quote

  #2 (permalink)  
Old 10-10-2008, 10:05 AM
PR Design's Avatar
CSS Wizardry
 
Join Date: May 2007
Location: Leeds, England
Gender: Male
Posts: 7,414
Default

Give me a few mins.
__________________
CSS Wizardry | “Yeah, do maggots get drunk when they bury alcoholics?”
Digg this Post!Add Post to del.icio.usBookmark Post in Technorati Share This Article & VoteReddit! Wong this Post!Stumble this Post!RSS Share on FacebookForum Netvibes Page
Reply With Quote
  #3 (permalink)  
Old 10-10-2008, 10:08 AM
PR Design's Avatar
CSS Wizardry
 
Join Date: May 2007
Location: Leeds, England
Gender: Male
Posts: 7,414
Default

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>
__________________
CSS Wizardry | “Yeah, do maggots get drunk when they bury alcoholics?”
Digg this Post!Add Post to del.icio.usBookmark Post in Technorati Share This Article & VoteReddit! Wong this Post!Stumble this Post!RSS Share on FacebookForum Netvibes Page
Reply With Quote
  #4 (permalink)  
Old 10-10-2008, 10:13 AM
PR Design's Avatar
CSS Wizardry
 
Join Date: May 2007
Location: Leeds, England
Gender: Male
Posts: 7,414
Default

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).
__________________
CSS Wizardry | “Yeah, do maggots get drunk when they bury alcoholics?”
Digg this Post!Add Post to del.icio.usBookmark Post in Technorati Share This Article & VoteReddit! Wong this Post!Stumble this Post!RSS Share on FacebookForum Netvibes Page
Reply With Quote
  #5 (permalink)  
Old 10-10-2008, 10:39 AM
dreamingdesigner's Avatar
Junior Member
 
Join Date: Oct 2007
Posts: 29
Default

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.
Digg this Post!Add Post to del.icio.usBookmark Post in Technorati Share This Article & VoteReddit! Wong this Post!Stumble this Post!RSS Share on FacebookForum Netvibes Page
Reply With Quote
  #6 (permalink)  
Old 10-10-2008, 10:43 AM
PR Design's Avatar
CSS Wizardry
 
Join Date: May 2007
Location: Leeds, England
Gender: Male
Posts: 7,414
Default

You can add minor stylings back in. Tweak the right:5px; value I think is what you want.
__________________
CSS Wizardry | “Yeah, do maggots get drunk when they bury alcoholics?”
Digg this Post!Add Post to del.icio.usBookmark Post in Technorati Share This Article & VoteReddit! Wong this Post!Stumble this Post!RSS Share on FacebookForum Netvibes Page
Reply With Quote
  #7 (permalink)  
Old 10-10-2008, 11:19 AM
dreamingdesigner's Avatar
Junior Member
 
Join Date: Oct 2007
Posts: 29
Default

Thanks!
Digg this Post!Add Post to del.icio.usBookmark Post in Technorati Share This Article & VoteReddit! Wong this Post!Stumble this Post!RSS Share on FacebookForum Netvibes Page
Reply With Quote
  #8 (permalink)  
Old 10-10-2008, 11:20 AM
PR Design's Avatar
CSS Wizardry
 
Join Date: May 2007
Location: Leeds, England
Gender: Male
Posts: 7,414
Default

Worked?
__________________
CSS Wizardry | “Yeah, do maggots get drunk when they bury alcoholics?”
Digg this Post!Add Post to del.icio.usBookmark Post in Technorati Share This Article & VoteReddit! Wong this Post!Stumble this Post!RSS Share on FacebookForum Netvibes Page
Reply With Quote
  #9 (permalink)  
Old 10-10-2008, 12:05 PM
dreamingdesigner's Avatar
Junior Member
 
Join Date: Oct 2007
Posts: 29
Default

Was for the help.

Haven't been able to test it yet, but I think it needs some more tweaking besides the "right" attribute.
Digg this Post!Add Post to del.icio.usBookmark Post in Technorati Share This Article & VoteReddit! Wong this Post!Stumble this Post!RSS Share on FacebookForum Netvibes Page
Reply With Quote
  #10 (permalink)  
Old 10-10-2008, 12:35 PM
zumojuice's Avatar
100% Freshly Squeezed™
 
Join Date: Feb 2007
Location: York
Gender: Male
Posts: 3,809
Default

Knew I'd find harry dossing off work in this thread...
__________________
Richard Gray
http://www.zumojuice.me.uk
Digg this Post!Add Post to del.icio.usBookmark Post in Technorati Share This Article & VoteReddit! Wong this Post!Stumble this Post!RSS Share on FacebookForum Netvibes Page
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


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


All times are GMT. The time now is 04:15 AM.



Estetica Design Forum's Privacy Policy
Powered by vBulletin® Version 3.7.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0