Kritikk ønskes på fotoblogg

MDCCLXXVI · 30. desember 2007

Heisann!

Holder på å opprette en fotoblogg. Har satt hele dagen å omgjort en template jeg fant på nettet.

Resultatet ble slik.

Hva synes dere?

Er mest nysgjerrig på hva dere synes om typografien og selve layoutet. Fungerer det? Er det intuitivt?

På forhånd, takk!

/Mr. Lid

Teig · 31. desember 2007

Rent og stilfullt

Ville derimot flyttet "next" og "previous" under eller rett over bildet. Føler at de ligger litt gjemt helt øverst. Og er "home" nødvendig når det er like mulig å trykke på linken helt øverst i venste hjørne? Og hvorfor strekker ikke footeren seg helt ned til bunnen?

Endret 31. desember 2007 av hakhag

MDCCLXXVI · 31. desember 2007

Rent og stilfullt

Ville derimot flyttet "next" og "previous" under eller rett over bildet. Føler at de ligger litt gjemt helt øverst. Og er "home" nødvendig når det er like mulig å trykke på linken helt øverst i venste hjørne? Og hvorfor strekker ikke footeren seg helt ned til bunnen?

Next og Previous knappene har jeg der for å holde området rundt bildet så clean som mulig, og ja, home knappen kunne vært fjernet. Det kommer etterhvert litt mer oppe på den menyen. En about link og en archive link.

Hvorfor footeren ikke strekker seg helt ned i opera evt. firefox er jeg ikke 100% sikker på. Noen som kunne sjekket det ut kanskje? Den går helt ned i IE i alle fall :/

Klikk for å se/fjerne innholdet nedenfor

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php echo photoblog_title(); ?></title>
<meta name="description" content="<?php echo photoblog_description(); ?>" /> 
<meta name="keywords" content="<?php echo photoblog_keywords(); ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo photoblog_path(); ?>templates/Lid/style.css" title="style" />
</head>
<body>

<!-- start menu -->
<div id="menu">
<div class="wrap">
	<div id="logo">
		<h1><a href="http://olsenlid.net/">Midnight Reveries</a></h1>
		<h2>By Kristian Strupstad Olsen Lid</h2>
	</div>
	<div id="menu1" class="box2">
		<ul>
			<li><a href="<?php echo article_previous(); ?>" title="Previous photo">« Previous</a> •</li>
			<li><a href="<?php echo article_next(); ?>" title="Next photo">Next »</a> •</li>
			<li><a href="<?php echo photoblog_path(); ?>index.php" title="Home">Home</a><!-- •--></li>
			<!-- <li><a href="<?php echo link_about(); ?>" title="About">About</a> •</li>
			<li><a href="<?php echo link_archives(); ?>" title="Archives">Archives</a></li>-->
		</ul>
	</div>
</div>
</div>
<!-- end menu -->

<!-- start page -->
<div id="page">
<!-- start content -->
<div id="content1">
	<div class="post">
		<h1 class="title"><?php echo article_title(); ?></h1>
		<div class="entry"><center>
			<?php echo article_photo_exists('<div id="content">'); ?>
			<?php echo article_photo('<a href="'. article_previous() .'"'. article_previous_title() .'">', '</a><br />'); ?>
				<?php echo article_photo_exists('</div>' . "\n" . '<!-- end div photo -->'); ?></center>
		</div>
		<div class="meta">
			<p class="byline"><?php echo article_date('advanced', 0); ?></p>
			<p class="comments"><a href="<?php echo comments_popup(); ?>" title="Comments">Comments</a></p>
		</div>
	</div>
</div>
<!-- end content -->
<div style="clear: both;"> </div>
</div>
<!-- end page -->

<!-- start footer -->
<div id="footer">
<div class="wrap">
	<div id="fbox1" class="box2">
		<h2><b>definition</b></h2>
		<p>Reverie \Rev"er*ie\, Revery \Rev"er*y\, n.; pl. Reveries. [F. r['e]verie, fr. r[^e]ver to dream, rave, be light-headed. Cf. Rave.] 1. A loose or irregular train of thought occurring in musing or mediation; deep musing; daydream.</p>
	</div>
	<div id="fbox2" class="box2">
		<h2><b>Freud</b> on reveries</h2>
		<p>According to Freud, a daydream is initially the expression of an unconscious fantasy; then, it is used as available material among the latent thoughts used by dreams. However, as he noted, there is an essential difference between night dreams and daydreams: the first is hallucinatory, the second is not, and the person remains more or less clearly aware that his daydream is an escape from a reality that is not completely suspended.</p>
	</div>
</div>
<p id="legal">(c) 2007 olsenlid.net</p>
</div>
<!-- end footer -->
</body>
</html>

Klikk for å se/fjerne innholdet nedenfor

body {
margin: 0;
padding: 0;
background: #FFFFFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333;
}

h1, h2, h3 {
margin: 0;
text-transform: lowercase;
font-weight: normal;
color: #3E3E3E;
}

h1 {
font-size: 32px;
}

h2 {
font-size: 23px;
}

p, ul, ol {
margin: 0 0 2em 0;
text-align: justify;
line-height: 26px;
font-size: 11px;
}

a:link {
color: #7BAA0F;
}

a:hover, a:active {
text-decoration: none;
color: #999999;
}

a:visited {
color: #7BAA0F;
}

img {
border: none;
}

img.left {
float: left;
margin-right: 15px;
}

img.right {
float: right;
margin-left: 15px;
}

/* Form */

form {
margin: 0;
padding: 0;
}

fieldset {
margin: 0;
padding: 0;
border: none;
}

legend {
display: none;
}

input, textarea, select {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333;
}

/* Logo */

#logo {
float: left;
}

#logo h1 {
font-size: 24px;
color: #EDEDED;
}

#logo h1 sup {
vertical-align: text-top;
font-size: 24px;
}

#logo h1 a {
color: #EDEDED;
}

#logo h2 {
margin-top: 10px;
font-size: 12px;
color: #A0A0A0;
}

#logo a {
text-decoration: none;
}

/* Menu */

#menu {
height: 28px;
min-height: 28px;
padding: 5px 15px 0 15px;
background: #003448;
}

#menu1 {
float: right;
padding: 0 0 0 10px;
}

#menu1 ul {
margin: 0;
list-style: none;
}

#menu1 li {
display: inline;
}

/* Page */

#page {
margin: 0 28% 0 28%;
padding: 50px 0 0 0;
}

/* Content */

#content {
width: auto;
}

/* Post */

.post {
}

.post .title {
margin-bottom: 20px;
padding-bottom: 5px;
background: url(images/img03.gif) repeat-x left bottom;
}

.post .entry {
margin: 0 0 18px 0;
}

.post .meta {
padding: 10px 0 0 0;
background: url(images/img03.gif) repeat-x;
}

.post .meta p {
margin: 0;
line-height: normal;
color: #999999;
}

.post .meta .byline {
float: left;
}

.post .meta .links {
float: right;
}

.post .meta .more {
padding: 0 20px 0 18px;
background: url(images/img06.gif) no-repeat left center;
}

.post .meta .comments {
float: right;
padding: 0 17px 0 0;
background: url(images/img07.gif) no-repeat right center;
}

.post .meta b {
display: none;
}


/* Boxes */

.box1 {
background: url(images/img05.gif) no-repeat;
}

.box2 {
color: #BABABA;
}

.box2 h2 {
margin-bottom: 15px;
background: url(images/img10.gif) repeat-x left bottom;
font-size: 16px;
color: #FFFFFF;
}

.box2 ul {
margin: 0;
padding: 0;
list-style: none;
}

.box2 a:link, .box2 a:hover, .box2 a:active, .box2 a:visited  {
color: #EDEDED;
}

/* Footer */

#footer {
height: auto;
padding: 100px 0 0 0;
background: #003448 url(images/img09.gif) repeat-x;
}

html>body #footer {
height: auto;
}

#footer .wrap {
margin: 0 28% 0 28%;
}

/* #fbox1, #fbox2, #fbox3 {
float: left;
} */

#fbox1 {
width: 35%;
padding: 0;
float: left;
}

#fbox2 {
width: 55%;
float: right;
padding: 0 0 0 10px;
}

#legal {
clear: both;
padding-top: 0;
text-align: center;
color: #375C69;
}

#legal a {
color: #476B77;
}

AnaXyd · 31. desember 2007

Ser bra ut dette. Ser kildekoden er preget av noe gammel kode, som <center>.

Ellers så ser siden ryddig og pen ut, og passer utmerket som fotoblogg.

Lovskogen · 31. desember 2007

Er det dine bilder, eller bare eksempler?

MDCCLXXVI · 1. januar 2008

Er mine bilder.

Center koden var et siste desperat forsøk på å få bildene centrert i content div'en... hvis noen har et forslag på hvordan jeg kan klare meg uten den tag'en så er det hjertlig velkomment

Kim T · 1. januar 2008

.klassepabilde{
display: block;
margin: 0 auto;
}

Det skal vel fungere tenker jeg. Ellers ser det ut som div-mania i kildekoden.

Endret 1. januar 2008 av Kim T

MDCCLXXVI · 1. januar 2008

.klassepabilde{
display: block;
margin: 0 auto;
}
Det skal vel fungere tenker jeg. Ellers ser det ut som div-mania i kildekoden.

Funket ikke. Bilde havner da helt i venstre kant ved to to horisontale linjene over og under.

Ja, mulig jeg tar meg tid til å rydde opp koden etterhvert. Som sagt gikk jeg ut i fra en template, da jeg har glemt så og si 90% av det jeg kunne om html og css :/

Så to spørsmål gjennstår. Hvordan får jeg footeren til å strekke seg helt ned til kanten i opera og evt. firefox?

Og hvordan får jeg sentrert bildet uten å bruke <center> tag'en? :hmm:

Endret 1. januar 2008 av Mr. Lid

Kim T · 1. januar 2008

det skal fungere det jeg skrev. Men du har så mange div'er og jeg tror de roter det til. Du kan forsøke å sette følgende.

#content {
width: 900px; /*bredden på div'en/bildet */
margin: 0 auto;
}

Lovskogen · 1. januar 2008

De to bildene var veldig freshe, hvordan har du redigert de?

agm · 1. januar 2008

Hva med bare

.post .entry {
margin: 0 0 18px 0;
text-align:center;
}

MDCCLXXVI · 1. januar 2008

Hva med bare

.post .entry {
margin: 0 0 18px 0;
text-align:center;
}

Fungerte utmerket! Grazie

Noen som vet hvordan jeg får footeren til å strekke seg helt ned, slik at det ikke er en hvit 10px linje nederst? (i opera og firefix vel og merke).

@lovskogen:

Klikk for å se/fjerne innholdet nedenfor

De to bildene var veldig freshe, hvordan har du redigert de?

Tja, litt fargekorrigering i lightroom og teksturlag i photoshop...

Endret 1. januar 2008 av Mr. Lid

MDCCLXXVI · 2. januar 2008

Har nå teste litt, men får fortsatt ikke footeren til å strekke seg 100% ned til bunnen av siden, uten å lage en 10 meter lang scrollbar...

html, body {
height: 100%;
}

...

#footer {
height: 100%;
padding: 100px 0 0 0;
background: #003448 url(images/img09.gif) repeat-x;
}

Logg inn

Kritikk ønskes på fotoblogg

Anbefalte innlegg

MDCCLXXVI

Lenke til kommentar

Videoannonse

Teig

Lenke til kommentar

MDCCLXXVI

Lenke til kommentar

AnaXyd

Lenke til kommentar

Lovskogen

Lenke til kommentar

MDCCLXXVI

Lenke til kommentar

Kim T

Lenke til kommentar

MDCCLXXVI

Lenke til kommentar

Kim T

Lenke til kommentar

Lovskogen

Lenke til kommentar

agm

Lenke til kommentar

MDCCLXXVI

Lenke til kommentar

MDCCLXXVI

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Russlands invasjon av Ukraina [Ny tråd, les førstepost] 1 2 3 4 3164

Hvem er aktive 0 medlemmer