|
CSS - Css Like Blogspot?
Hello. I'm relatively new to CSS and was wondering how I can create a page to look like some of the blogspot templates. Here is the example: http://mickeymac.blogspot.com/
I basically want to have a header at the top, and then the links on the left, and information in the center. I know the basic idea after playing around and reading different tutorials, but I don't know how to do it with the rounded edges like on the example page. I mean the header seems like you could create a photoshop image or something, set that as the background, and write your text on it. But then the links which could always be changing, as well as the size of my content for the center, I'm not sure how to do it since I can't just create a background image in photoshop. Or is there some trick in making it stretch and shrink to fit the size of your content or something? Thanks! Similar TutorialsHere's a format of my css script.. im under blogspot.com's url. I am changing some details of their template ive chosen... like the comments, dates, text header, archives and sorts instead of the common text header, i would like to change it with a full linear header embedded (left to right as displayed on the screen) i was browsing sites, but i could not any css script that could copy and change the image url.. here it goes... please do edit/add as to my preference are... by the way, i will still use blogspot.com's photo upload feature and posting.. lastly i would like to have a navigation bar (links) following the 'embedded' top linear header (jpeg.format,as supported by a web host). some what like thishovered) MAIN SEARCH SITEMAP .... the sequence would be: LINEAR HEADER (jpeg format) BACKGROUND( see below: ****) Within the background the Navigation Line will start.. ------ blogspot posts will follow... ( my current css format. ------------ Code: [CPAN][
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" xml:lang="en" lang="en">
<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>
<style type="text/css">
/* IMAGE EFFECTS */
a:hover img { filter:none; }
img { filter:gray; }
body {
background-image:url ((URL address blocked: See forum rules)); background-position:center;
margin:0;
padding:45px 25px;
font:x-small trebuchet,verdana, serif;
text-align:center;
color:#cccccc;
font-size/* */:/**/small;
font-size: /**/small;}
/* IMAGE EFFECTS */
a:hover img { filter:none; }
img { filter:gray; }
a:link {
color:#ccc;
text-decoration:none;
}
a:visited {
color:#F0F0F0;
text-decoration:none;
}
a:hover {
color:#993300;
text-decoration:none;
}
a img {
border-width:0;
}
/* CURSOR: BODY */
body { cursor:crosshair; }
/* CURSOR: LINKS */
body { cursor:crosshair; }
/* Header
----------------------------------------------- */
@media all {
#header {
width:660px; length:1024px;
margin:0 auto 10px;
border:1px solid #333;
}
}
@media handheld {
#header {
width:90%;
length:100;
}
}
/* Content
----------------------------------------------- */
@media all {
#content {
width:660px;
margin:60 auto;
padding:0;
text-align:left;
}
#main {
width:410px;
float:left;
}
#sidebar {
width:210px;
float:right;
}
}
@media handheld {
#content {
width:90%;
}
#main {
width:50%;
float:none;
}
#sidebar {
width:100%;
float:left;
}
}
/* Headings
----------------------------------------------- */
/* Posts
----------------------------------------------- */
@media all {
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #444;
padding-bottom:1.5em;
}
}
@media handheld {
.post {
padding:0 1.5em 0 1.5em;
}
}
.post-title {
margin:.25em 0 0;
padding:0 0 4px;
font-size:120%;
line-height:1.4em;
color:#ad9;
}
.post-title a {
text-decoration:none;
color:#ad9;
}
.post-title a:hover {
color:#fff;
}
.post img {
padding:4px;
border:1px solid #222;
}
/* Comments
----------------------------------------------- */
/* Sidebar Content
----------------------------------------------- */
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #444;
list-style:none;
}
#sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-align:left;
text-indent:-15px;
line-height:1.5em;
}
#sidebar p {
color:#999;
line-height:1.5em;
}
/* Profile
----------------------------------------------- */
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
}
#footer hr {
display:none;
}
#footer p {
margin:0;
padding-top:15px;
font:78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
</style>
</head>
<body>
<!-- Begin #content -->
<div id="content">
<bgsound src="(URL address blocked: See forum rules)"loop="-1" /> MUSIC background. as is!
<!-- Begin #main -->
<div id="main"><div id="main2">
<Blogger>
<!-- Begin .post -->
<div class="post"><a name="<$BlogItemNumber$>"></a>
<div class="post-body">
<div>
<$BlogItemBody$>
</div>
</div>
</p>
</div>
<!-- End .post -->
<!-- Begin #comments -->
<!-- End #comments -->
<!-- begin code provided by createblog.com -->
<script language="JavaScript">
var message=" You are viewing ?????.";
function click(e) {
if (document.all) {
if (event.button==2||event.button==3) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// -->
</SCRIPT>
<!-- end code provided by createblog.com -->
</Blogger>
</div></div>
<!-- End #main -->
<!-- Begin #sidebar -->
<div id="sidebar"><div id="sidebar2">
<br> <br> <br> <br><br> <br><br> <br>
<ul>
< a href="http://other links"
style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px;" >HOME</a></li><br><br></a>
<a href="http://other links"
style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px;">SEARCH </a></li><br><br>
</ul> </MainOrArchivePage>
<MainOrArchivePage>
</MainOrArchivePage>
<!-- begin code -->
<a href>
<!-- end code -->
<!-- begin code -->
</a> <a href=style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 11px;" ></a>
<SCRIPT Language="JavaScript">
<!-- hide from old browsers
var curDateTime = new Date()
document.write(curDateTime)
//-->
</SCRIPT>
<!-- end code -->
<!--
<p>This is a paragraph of text that could go in the sidebar.</p>
-->
</div></div>
<!-- End #sidebar -->
</div>
<!-- End #content -->
<!-- Begin #footer -->
<div id="footer"><hr />
<p><!--Thank you for visiting!--> </p>
</div>
<!-- End #footer -->
</body>
</html>
</body>
</html>][/CPAN]
|
|||||||