CSS blog layout med opacity?

2010-09-29, 21:19 #1

Medlem

Reg: Okt 2009

Inlägg: 1 314

Har en blogg som för nuvarande ser ut såhär: http://sourzu.blogspot.com
Och jag vill ha så att den gråa delen är svart med lite transparens, och en linje just utanför med overlay eller liknande. Funderar om hur jag kan göra detta?
Ska se ut ungefär såhära:
http://i52.tinypic.com/anldhg.jpg

Någon som kan hjälpa?

Koden till bloggen är följande:

<html>
<head>
<title>“Another word for creativity is courage”</title>

<style type="text/css">
body {
background: #000000;
background: url(http://i55.tinypic.com/2mhg8et.jpg) repeat fixed;
font-family: verdana;
font-size: 8pt;
letter-spacing: 1px;
color: #E6E6E6;
}

a:link, a:visited, a:active {
text-decoration: none;
color: #FF6EAD;
font-weight: bolder;
border-bottom: 1px solid #000000;
}

a:hover {
text-decoration: none;
border-bottom: 1px solid #D0085F;
color: #FFFFFF;
font-weight: bolder;
}

a.side {
text-decoration: none;
background: #353535;
color: #E6E6E6;
font-weight: bolder;
padding: 3px;
width: 190px;
disply: block;
}

a.side {
font-weight:none;
text-decoration:none;
display:block;
color:#E6E6E6;
background-color:#353535;
padding:2;
}

a.side:hover {
font-weight:none;
text-decoration:none;
color:#848484;
background-color: #5A5A5A;
}

table{
font-family: verdana;
font-size: 8pt;
letter-spacing: 1px;
color: #E6E6E6;
}

.sidebar {
font-family: verdana;
border-left: 1px dashed #00a7b1;
width: 200px;
padding-left: 10px;
}

.blog {
padding: 5px;
}

.date {
font-family: verdana;
text-transform: uppercase;
font-size: 7pt;
color: #CDCDCD;
}

.ptitle {
font-family: verdana;
font-size: 17pt;
letter-spacing: 2px;
border-bottom: 1px solid #00a7b1;
}

.stitle {
font-family: times new roman;
font-size: 15pt;
border-bottom: 1px solid #00a7b1;
}

b, strong {
color: #00bcc8;
}

i, em {
color: #79c0e8;
}

u {
text-decoration: none;
border-bottom: 1px dashed #90ebfc;
color: #40c8e5;
}

blockquote {
padding: 10px;
border: 1px solid #373737;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background: #494949;
}

</style>
</head>
<noembed><body></noembed>

 

<div align='center'>
<div style='width: 803px; background-color: #292929; padding: 5px;'>
<img src="http://imgur.com/wn6RV.jpg">
 

<div align='left'>
<table width='800px'>
<tr>
<td valign='top'>
<div align="justify">
<div class="blog">

<Blogger>
<div class="date"><BlogDateHeader><$BlogDateHeaderDate$ ></BlogDateHeader>; <$BlogItemDateTime$></div>
<div class="ptitle"> <$BlogItemTitle$></div> 
<$BlogItemBody$>
 
</Blogger>
</div></div>

<td valign='top' class='sidebar'>
<div class="stitle">About Me</div>
My name is Emil. 
I'm 19 years old. 
I live in Luleå, Sweden. 
My interests are graphics, photography and motion graphics 
and that's the main focus for my blog.
 
 

<div class="stitle">Archive</div>
<BloggerArchives>
<a class="side" href='<$BlogArchiveURL$>'><$BlogArchiveName$></a>
</BloggerArchives>
 

</body>
</html>

Citera

2010-09-29, 21:37 #2

Medlem

Reg: Maj 2007

Inlägg: 3 529

Finns ett rätt så fiffigt sätt, som bygger på två bakgrundsbilder. Tyvärr omöjligt att beskriva på ett enkelt sätt. Eric Meyer använder det t ex på sin demo complex spiral.

http://meyerweb.com/eric/css/edge/complexspiral/demo2.html
http://meyerweb.com/eric/css/edge/complexspiral/glassy.html

Det ser jätteknepigt ut, men när du fattar galoppen är det rätt straight ahead.

Citera

2010-09-29, 22:17 #3

Medlem

Reg: Okt 2009

Inlägg: 1 314

Okej, förstod tyvärr inte hur jag ska göra.

Citera

2010-09-29, 22:35 #4

Medlem

Reg: Maj 2007

Inlägg: 3 529

Citat:

Ursprungligen postat av MR

Okej, förstod tyvärr inte hur jag ska göra.

Kan beskriva det utförligt, men inte just nu. Klockan är mycket och imorgon går planet tidigt. Om intresse finnes så skriver jag en kortfattad instruktion om en vecka.

Citera

2010-09-30, 00:26 #5

Medlem

Reg: Okt 2009

Inlägg: 1 314

Jag börjar undra om detta ens är liksom CSS?

Citat:

Det är ju denna som verkar visa hur bred denna ruta ska vara. Men jag förstår inte vars den får längden ifrån.

Lite längre ner verkar den också ha på bredden något

Citat:

Iaf, denna kod då på exemplet är ju

Citat:

div#content {
background-color: white;
background-image: url(glassy-ripple.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-attachment: fixed;

och då förstår jag inte hur jag ska kunna skriva in detta i mina koder. Då det är helt olika.
Där min kod bestämmer färgen osv, så är det ju med taggar.

Citera

2010-09-30, 01:34 #6

Medlem

Reg: Nov 2006

Inlägg: 613

Det här är rimligen det närmsta du kan kan komma med bara en bakgrundsbild och css:

HTML-kod:

<html>

<head>

<style type="text/css">

	body, h1, p {
		margin: 0;
		padding: 0;
	}

	body {
		background-image: url("http://i55.tinypic.com/2mhg8et.jpg");
	}

	#wrapper {
		width: 954px;
		margin: 60px auto;
		border: 3px solid rgba(255,255,255, .1);
		border-radius: 3px; -moz-border-radius: 3px;
	}
		#wrapper > div:first-child {
			background-color: rgba(0,0,0, .8);
			width: 914px;
			min-height: 500px; /* for demo only, remove for production */
			padding: 10px 20px;
		}
		
	h1, p {
		font-family: arial;
		color: #fff;
	}
	
	h1 {
		font-size: 20px;
	}
	
	p {
		font-size: 14px;
	}

</style>

</head>

<body>

<div id="wrapper"><div>

	<h1>Placeholder</h1>
	<p>Placeholder</p>
	<p>Placeholder</p>
	<p>Placeholder</p>
	<p>Placeholder</p>

</div></div>

</body>

</html>

Det är rgba() som sätter färger där den fjärde parametern är opacity. Dvs rgba(255,255,255, .1) är helt vit med opacity 0.1. Border-radius samt -moz-border-radius ger runda kanter. Samtliga dessa egenskaper fungerar enbart i moderna webbläsare (alltså inte internet explorer eller äldre versioner av andra webbläsare). Vill du ha genomskinlighet på annat sätt rekommenderar jag att använda en genomskinlig png-bild som bakgrundsbild. Observera att jag använt en div för ramen och en div för bakgrunden. Det var för att bakgrunden annars blandade sig med ramen.

Citera

2010-09-30, 01:55 #7

Medlem

Reg: Nov 2006

Inlägg: 613

Det funkade visst utan rgba vilket innebär att det stöds av långt fler webbläsare, dock blev koden aningen fulare.

HTML-kod:

<html>

<head>

<style type="text/css">

	body, div, h1, p {
		margin: 0;
		padding: 0;
	}

	body {
		background-image: url("http://i55.tinypic.com/2mhg8et.jpg");
	}

	#wrapper {
		position: relative;
		width: 960px;
		margin: 60px auto;
		border-radius: 3px; -moz-border-radius: 3px;
	}
		#wrapper > div:first-child {
			position: absolute;
			z-index: 0;
			width: 954px;
			height: 100%;
			border: 3px solid #fff;
			opacity: .1;
			border-radius: 3px; -moz-border-radius: 3px;
		}
		#wrapper > div:nth-child(2) {
			position: absolute;
			z-index: 0;
			background-color: #000;
			opacity: .8;
			width: 954px;
			height: 100%;
			margin: 3px;
		}
	
	#content {
		position: relative;
		z-index: 1;
		width: 914px;
		padding: 13px 23px;
	}
		
	h1, p {
		font-family: arial;
		color: #fff;
	}
	
	h1 {
		font-size: 20px;
	}
	
	p {
		font-size: 14px;
	}

</style>

</head>

<body>

<div id="wrapper">
	<div></div> <!-- frame -->
	<div></div> <!-- background -->
	<div id="content">
		<h1>Placeholder</h1>
		<p>Placeholder</p>
		<p>Placeholder</p>
		<p>Placeholder</p>
		<p>Placeholder</p>
	</div>
</div>

</body>

</html>

Citera

2010-09-30, 09:40 #8

Medlem

Reg: Okt 2009

Inlägg: 1 314

Okej, får den tyvärr inte att fungera.
När jag scrollar ner så blir det en till bakgrund

<html>
<head>
<style type="text/css">
body, div, h1, p {
margin: 0;
padding: 0;
}
body {
background-image: url("http://i55.tinypic.com/2mhg8et.jpg");
}
#wrapper {

position: relative;
width: 960px;
margin: 60px auto;
border-radius: 3px; -moz-border-radius: 3px;
}
#wrapper > div:first-child {
position: absolute;
z-index: 0;
width: 954px;
height: 100%;
border: 3px solid #fff;
opacity: .1;
border-radius: 3px; -moz-border-radius: 3px;
}
#wrapper > div:nth-child(2) {
position: absolute;
z-index: 0;
background-color: #000;
opacity: .8;
width: 954px;
height: 100%;
margin: 3px;
}
#content {
position: relative;
z-index: 1;
width: 914px;
padding: 13px 23px;
}
h1, p {
font-family: arial;
color: #fff;
}
h1 {
font-size: 20px;
}
p {
font-size: 14px;
}

</style>
</head>
<body>

<div id="wrapper">
<div></div> 
<div></div> 
<div id="content">
<h1>Placeholder</h1>
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
PlaceholderPlaceholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
PlaceholderPlaceholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
</div>
</div>

</body>
</html>

Citera

2010-09-30, 09:56 #9

Medlem

Reg: Nov 2006

Inlägg: 613

Aha, du vill att bakgrunden ska ligga orörlig samt ej repeteras? Då ska du ändra raden

HTML-kod:

background-image: url("http://i55.tinypic.com/2mhg8et.jpg");

till

HTML-kod:

background: url("http://i55.tinypic.com/2mhg8et.jpg") fixed no-repeat center center;

Men då blir det problem med att bilden är för liten.

Förresten, vilken webbläsare använder du?

Citera

2010-09-30, 10:11 #10

Medlem

Reg: Okt 2009

Inlägg: 1 314

Jag använder FireFox, nu verkar den vara helt okej, iaf för mig.
Enda problemet är att stoppa in allt jag hade tidigare. Vilka koder ska jag då tabort isf? från den orginala som hade också <head> osv

Citera

2010-09-30, 10:24 #11

Medlem

Reg: Nov 2006

Inlägg: 613

Alla style/layout/design properties som ligger i själva HTML:en bör tas bort. Det anses fult att blanda design med innehåll. Så rensa alla dina taggar från properties såsom style, align, valign och dylikt. Properties såsom class, id, src osv ska du dock låta vara kvar.

När detta är gjort får du börja mixa befintlig css med ny css och se vad som händer. Enklast är att börja med väldigt lite css, lägg till lite och se vad som händer, om allting är okej så lägg till lite till osv. Till att börja med tycker jag du ska redigera body-taggen och lägga in #wrapper-diven med de två tomma nestade divarna först.

Citera

2010-09-30, 11:22 #12

Medlem

Reg: Okt 2009

Inlägg: 1 314

Fattar fan ingenting

Citera

CSS blog layout med opacity?

Skapa ett konto eller logga in för att kommentera

Skapa ett konto

Logga in