Relativt ny innen html og css: feil/forbedring?

sinols · 28 Apr 2014

Hei

Har jobbet meg sakte men sikkert fremover i html/css.

Jeg har fått god hjelp med skjønt en hel del selv. Jeg lurer på om det er noen som ser noen feil eller forbedringsmuligheter i denne filen jeg har laget;

Takker for all kritikk og hjelp; det å jobbe med html/css har faktisk gått fra ett mareritt til mer logikk og gøy når man for det til slik man ønsker.

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title>{Title}{block:SearchPage}, {lang:Search results for SearchQuery}{/block:SearchPage}{block

ostSummary}, {PostSummary}{/block

ostSummary}</title>
{block

escription}<meta name="description" content="{MetaDescription}" />{/block

escription}

<link rel="shortcut icon" href="{Favicon}" />
<link rel="apple-touch-icon" href="{PortraitURL-128}"/>
<link rel="alternate" type="application/rss+xml" href="{RSS}" />


<meta name="color:Text" content="#38383b"/>
<meta name="color:Text Light" content="#939498"/>
<meta name="color:Link" content="#c85555"/>
<meta name="color:Link Hover" content="#c85555"/>
<meta name="color:Background" content="#fefefe"/>
<meta name="color:Selection background" content="#fff68c"/>


<meta name="if

ost header in bold" content="1" />
<meta name="if

ost show date" content="1" />
<meta name="if

ost show tags" content="1" />
<meta name="if

ost show reblog" content="1" />
<meta name="if

ost show note count" content="0" />
<meta name="if

ost show sources" content="1" />
<meta name="if

ost show permalink" content="1" />
<meta name="if

ost show timeago" content="1" />


<meta name="if:Nav show Home link" content="1" />
<meta name="if:Nav show Archive link" content="1" />
<meta name="if:Nav show Ask link" content="0" />
<meta name="if:Nav show RSS link" content="1" />

<meta name="if:Show blog description" content="1" />
<meta name="if:Hide notes" content="0" />
<meta name="if:Enable infinite scrolling" content="1" />
<meta name="text:Footer text" content=""/>


<meta name="text:Link to Twitter" content=""/>
<meta name="text:Link to Facebook" content=""/>
<meta name="text:Link to Dribbble" content=""/>
<meta name="text:Link to YouTube" content=""/>
<meta name="text:Link to Flickr" content=""/>


<meta name="if:Font Family Serif" content="0" />


<meta name="text:Image width in px" content="900"/>
<meta name="text:Column width in px" content="694"/>
<meta name="text:Spacing before intro in px" content="95"/>
<meta name="text:Spacing after description in px" content="25"/>
<meta name="text:Spacing before first post in px" content="125"/>
<meta name="text:Spacing between posts in px" content="130"/>

<style type="text/css">

/*--------------------------------------------------------------
# 01 IMPORT FONTS ---------------------------------------------
--------------------------------------------------------------*/

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic,700italic);

{block:IfFontFamilySerif}
@import url(http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic);
{/block:IfFontFamilySerif}

/*--------------------------------------------------------------
# RESET -------------------------------------------------------
--------------------------------------------------------------*/

/* CSS Tools: Reset CSS
v2.0 | 20110126
License: none (public domain) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/*--------------------------------------------------------------
# 02 TYPOGRAPHY -----------------------------------------------
--------------------------------------------------------------*/

/* ## Font families
------------------------------------------------ */

body { font-family: 'source sans pro', 'Helvetica', Arial, sans-serif; }

{block:IfFontFamilySerif}
body { font-family: 'pt serif', Georgia, serif !important; letter-spacing: .01rem; }
{/block:IfFontFamilySerif}

/* ## Font sizes
------------------------------------------------ */

body {
font-size: 1.4em;
line-height: 1.65em;
-webkit-font-smoothing: antialiased;
background: {color:Background};
}

/* ## Paragraphs
------------------------------------------------ */

p, ol, ul { margin-bottom: 1.740em; }
p:last-child,
ol:last-child,
ul:last-child { margin-bottom: 1.740em; }

h2, h3, h4, h5, h6 { margin: 0; }

h1 {
margin: 44px 0 5px 0;
font-size: 1.44em;
line-height: 1.2em;
font-weight: 600;
font-family: 'source sans pro', 'Helvetica', Arial, sans-serif }

/* ## Font styling
------------------------------------------------ */

body { color: {color:Text}; }

::-moz-selection { background: {color:Selection background}; }
::selection { background: {color:Selection background}; }

blockquote {
margin: 1.740em 0;
font-weight: bold;
padding-left: 20px;
border-left: 6px solid {color:Link};
}

ul, ol { margin-left: 1em; }

ul { list-style-type: square; }

ol { list-style-type: decimal; }

em,
i { font-style: italic; }

strong,
b { font-weight: bold; }

.caps {
font-variant: small-caps;
text-transform: lowercase;
}

/*--------------------------------------------------------------
# 03 LINKS ----------------------------------------------------
--------------------------------------------------------------*/

/* ## href
------------------------------------------------ */

a:link { -webkit-tap-highlight-color: {color:Link}; }

a, a:active, a:visited {
color: {color:Link};
text-decoration: none;
}

a:hover,
a.read_more,
.tumblr-link .link a { color: {color:Link Hover}; }

.tumblr-link .link a:hover { color: {color:Link}; }

/*--------------------------------------------------------------
# 04 SHARED MODULES -------------------------------------------
--------------------------------------------------------------*/

/* ## Base elements
------------------------------------------------ */

/* Flex box on everything */
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* Clear elements */
section:after,
nav:after {
content: "";
display: table;
clear: both;
}

.clear { clear: both; visibility: hidden; }

img,
iframe { max-width: 100% !important; }

/* ## Page masthead
------------------------------------------------ */

#page-masthead,
#page-masthead a { color: {color:Text}; }
.tumblr-footer,
.tumblr-footer a,
#page-footer,
#page-footer a,
.notecontainer,
.notecontainer a { color: {color:Text Light}; }

#page-masthead a:hover,
.tumblr-footer a:hover,
#page-footer a:hover,
.notecontainer a:hover { color: {color:Link Hover}; }

#header a {
text-decoration: none;
font-weight: bold;
line-height: 1.65em;
display: block;
float: left;
}

#header a:after { content: "-"; color: {color:Text}; margin: 8px; }

#header a:empty { display: none; }

#page-masthead ul {
margin: 0;
list-style-type: none;
display: block;
clear: both;
line-height: 1.92em;
}

#page-masthead li { display: inline-block; margin-right: 16px; }

ul#links li:after { content: ""; }
ul#links li:last-of-type:after { content: ""; }

#description {
line-height: 1.65em;
}

/* ## Page footer
------------------------------------------------ */

#page-footer {
text-align: left;
line-height: 1.65em;
}

/* ## tumblr posts
------------------------------------------------ */

#page-masthead,
.tumblr-post { display: block; }

.title {
font-size: 2.3em;
line-height: 1.3em;
margin-bottom:-5px;
{block:IfPostheaderinbold}
font-weight:600;
{/block:IfPostheaderinbold}
font-family: 'source sans pro', 'Helvetica', Arial, sans-serif;
}

.tumblr-photo,
.tumblr-photoset,
.tumblr-video { text-align: center; }

.tumblr-photo .copy,
.tumblr-photoset .copy,
.tumblr-audio .copy,
.tumblr-video .copy { text-align: left; }

.tumblr-photoset .photosetcopy { margin-bottom: 2.4em; }

.tumblr-chat .line { padding: .2em 0; }
.tumblr-chat .line:last-of-type { padding-bottom: 0px; }

.tumblr-quote .quote:before { content: " » " }
.tumblr-quote .quote:after { content: " « " }

.tumblr-quote .copy,
.tumblr-answer .copy { margin-top: .4em; }

.tumblr-answer .question { padding-bottom: .2em; }

.tumblr-answer span,
.tumblr-answer span a { color: {color:Text light}; }

.tumblr-answer span a:hover { color: {color:Link Hover}; }

.tumblr-footer {

}

.tumblr-footer ul {
margin: 0;
list-style-type: none;
display: block;
clear: both;

}

.tumblr-footer li { display: inline-block; }

.tumblr-footer li:after { content: " / "; }

.tumblr-footer ul.tags li:after,
.tumblr-footer li:last-of-type:after { content: ""; }

ol.notes {
list-style-type: none;
display:inline;
{block:IfHidenotes}
display: none;
{/block:IfHidenotes}

}

li.note {
padding: 10px 0 10px 0;
border-bottom: solid 1px #ddd;
}

.pagination {
display: block;
clear: both;
}
{block:IfEnableinfinitescrolling}
.pagination { display: none; }
{/block:IfEnableinfinitescrolling}

.pagination a { line-height: 1.65em; }

.pagination a:hover { color: {color:Link Hover}; }

.pagination .prev,
.pagination .jump,
.pagination .next { display: inline-block; }

.pagination .prev,
.pagination .jump,
.pagination .next:before { content: "/"; }

/*--------------------------------------------------------------
# 05 LAYOUT ---------------------------------------------------
--------------------------------------------------------------*/

/* ## Width
------------------------------------------------ */

#page-masthead,
.tumblr-audio,
.tumblr-quote,
.tumblr-text,
.tumblr-answer,
.tumblr-chat,
.tumblr-link,
.copy,
.tumblr-footer,
.notecontainer,
.pagination,
#page-footer {
margin:auto;
max-width: {text:Column width in px}px;
margin-top:39px;
}

#page-masthead,
.tumblr-photo .copy,
.tumblr-photoset .copy,
.tumblr-video .copy,
.tumblr-audio,
.tumblr-quote,
.tumblr-text,
.tumblr-answer,
.tumblr-chat,
.tumblr-link,
.tumblr-footer,
.notecontainer,
.pagination,
#page-footer { padding: 0 25px; }

.tumblr-photo img,
.tumblr-photoset img {
width: {text:Image width in px}px;
height: auto;
}

/* ## Layout options
------------------------------------------------ */

#page-masthead {
margin-top: {text:Spacing before intro in px}px;
margin-bottom: {text:Spacing before first post in px}px; }

#description { margin-bottom: {text:Spacing after description in px}px; }

.tumblr-post { margin-bottom: {text:Spacing between posts in px}px; }

.notecontainer { margin-top: {text:Spacing between posts in px}px; }

.pagination {
margin-bottom: {text:Spacing between posts in px}px;
margin-top:-26px; }

#page-footer {
margin-bottom: {text:Spacing between posts in px}px;
margin-top:-26px; }

/*--------------------------------------------------------------
# 06 MEDIA QUERIES (RESPONSIVE) -------------------------------
--------------------------------------------------------------*/

@media only screen and (max-width: 740px) {

body { font-size: 1.24em; line-height: 1.62em; }

.title { font-size: 1.72em; line-height: 1.34em; margin-bottom: -1px; }

p, ol, ul { margin-bottom: 1.410em; }
p:last-child,
ol:last-child,
ul:last-child { margin-bottom: 1.410em; }

h1 {
margin: 34px 0 6px 0;
font-size: 1.2em;
line-height: 1.28em;
font-weight: 600;
font-family: 'source sans pro', 'Helvetica', Arial, sans-serif }

blockquote { margin: 1.410em 0; }

.tumblr-audio,
.tumblr-quote,
.tumblr-text,
.tumblr-answer,
.tumblr-chat,
.tumblr-link,
.copy,
.tumblr-footer,
.notecontainer { margin-top:28px; }

.tumblr-post { margin-bottom: 92px; }

#page-masthead { margin-top: 41px; margin-bottom:89px; }

#page-footer { margin-bottom: 47px; margin-top:-28px; }

</style>

Dag Frogner · 28 Apr 2014

Nå er ikke jeg noen racer på dette selv, men er det ikke myyye enklere at du peker oss til en nettside som har denne koden istedet?

Jeg tviler litt på at noen vil sitte å finlese all den koden for å prøve å finne noe feil.

sinols · 28 Apr 2014

Det er kansje bedre ja ..

Skagentheme

Ting som jeg trenger hjelp md;

Få tumblr photoset til og fungere med 900 bredde isteden for standardene til Tumblr.

Bilde i tekst post samt video og lyd post samme bredde som tekst post (fylle containeren)

Når jeg ikke bruker noe tekst i footer så vil jeg at det skal bli mindre "luft" fra siste elemnt til bunn. Samme når jeg ikke bruker "pagination".

fabbz · 28 Apr 2014

Bilde i tekst post samt video og lyd post samme bredde som tekst post (fylle containeren)

Kode:

.tumblr-photo img, .tumblr-photoset img {
width: 694px;
}

Om du skal ta med padding som er på 25px må du bruke 669px som width.

Når jeg ikke bruker noe tekst i footer så vil jeg at det skal bli mindre "luft" fra siste elemnt til bunn. Samme når jeg ikke bruker "pagination".

Vet ikke hvordan det ser ut når du ikke bruke footer, men antar at den er tom, men eksisterer som en div.

Kode:

.tumblr-footer {
min-height: 50px;
}

sinols · 30 Apr 2014

For ikke photoset til og fungere på 900 bredde: noen som vet hvordan?
Skagentheme, This is how photoset will look like in our theme!...

Dette bilde er satt sammen i PS: må få det til å funke i tumblr photo-set funksjon.

Relativt ny innen html og css: feil/forbedring?

sinols

Medlem

Dag Frogner

Supermedlem

sinols

Medlem

fabbz

Medlem

sinols

Medlem