[Bijdrager DeXoN]

Blog Layout Check

[size=9:ec317dab24]
Website Layout – Blog – WIP

http://www.deviantart.com/view/36612427/

Dit is een WIP dat waarschijnlijk zal uitgewerkt worden om te dienen als mijn blog. Dus zeg maar eens wat jullie er van vinden en wat ik er nog kan aan verbeteren.

Thx DeXoN
[/size:ec317dab24]

[Bijdrager wout3r]

Ik heb er eigenlijk niet zoveel op aan te merken, ik ben alleen benieuwd of je het kan realiseren

[Bijdrager DeXoN]

Dat zal geen probleem zijn. Enkel de backgrounds die een repeat nodig hebben zal een beetje zoeken zijn maar voor de rest zal het geen probleem zijn. Ik vrees enkel dat de site wel zwaar al worden en dat ik een preloader ga meoten gebruiken.

[Bijdrager WouterReyntjens]

echt mooi en clean!
het maken van de site in xhtml en css mag geen probleem zijn, zeker het groene is heeel makkelijk, neem een rijtje van 3 “sterretjes” en repeat het over x en y
padding 0 en margin ook

grtz

[Bijdrager DeXoN]

Nja da groene weet ik :D. Maar het is de header en de content box die een klein beetje puzzelwerk gaat vergen.

[Bijdrager HSL]

”DeXoN”

Ik vrees enkel dat de site wel zwaar al worden en dat ik een preloader ga meoten gebruiken.

ehm,… een preloader bij een html/css site is niet echt nodig hoor, zo zwaar kan hij niet zijn

[Bijdrager WouterReyntjens]

de top is natuurlijk wat anders maar de content box is vrij makkelijk!
je sliced juist de rand tot aan het wit, (boven onder, links en rechts) en dan is dat probleem ook al uit de weg

grtz

[Bijdrager DeXoN]

@ HS-L
Welja ik weet het nog niet hoe groot de afbeeldingen zijn. Ik ga eerst de site in een beta stage steken die dan getest wordt. En wanneer mensen dan vinden dat het te ombetant is om zo lang te wachten zal ik er een preloader insteken.

@ WouterReyntjens
Bedank maar ik weet dit ook allemaal hoor
Het zal enkel een klein beetje puzzelwerk worden omdat de randen onregelmatig zijn he. Maar dit zal ik wel oplossen hoor

[Bijdrager WouterReyntjens]

misschien is het makkelijker om de site in flash te maken,

voor xhtml en css=>
de top, ik denk dat ik het weet,
je neemt een licht en een donker streepje,je repeat het op de x
en maak er een background van

=> dit is gewoon de gele achtergrond als je me begrijpt, de effecten laat je weg

daarboven zet je een div met de andere effecten

=> je doet de gele achtergrond weg, transparante achtergrond, en je kan het opslaan in png

grtz
als je vragen hebt let me know:p

kheb het niet kunnen laten en ik heb al begonnen:p Klik de top is niet super goed maar ik heb het snel gesliced uit je gifje dus daarom dat de top niet optimaal is, als je het eens wil zien stuur mij dan de psd en dan toon ek eens hoe ik het denk dat het zal lukken

grtz

[Inactief Anoniem]

Ga je er WordPress voor gebruiken?

[Bijdrager DeXoN]

@ WouterReyntjens
Je bent heel erg bedankt hoor maar ik zal dit zelf wel allemaal doen. Wat is er anders leuk aan een website maken hé.

@ darkleroy
Nee ik ga Expression Engine gebruiken omdat ik totaal niet overweg kan met wordpress.

[Bijdrager Jonnotie]

Wow dat ziet er ongelooflijk goed uit. Alleen het lijkt me inderdaad moeilijk omdat om te zetten naar xhtml en css. Succes er mee!

[Bijdrager TijhofGraphics]

Ik denk dat het het beste is om inderdaad dat van WouterReyntjens(dit ongeveer als bsis te gebruiken.
Om dan in die header een jpeg(of gif of png) met dat logo te centreren zodat het ook in smalle toestand of voor mensen met een kleiner beelscherm altijd in het midden staat.
En dan vanaf het groene gedeelte een <div> van begin tot eind met in de CSS bijvoorbeeld:
[code:1:48be67b0c9]
div.content {
width: 770px;
margin: 0px auto;
text-align: justify;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
[/code:1:48be67b0c9]

[Bijdrager DeXoN]

Zeg voor wat zien jullie mij
Ik wil nu niet cru overkomen maar ik weet dit wel allemaal hoor.
Maar nu zit ik in een klein putje. Ik heb dus men content box. Daarin moet het menu komen (links) en daarnaast de conent (rechts). Maar dit lukt me niet echt. Weet er iemand dit?

CSS:
[code:1:239bb59813]
/* Body CSS
————————- */
body {
background: url(images/main/bg_main.jpg) repeat;
color: #6E685C;
font-family: Verdana;
font-size: 9px;
line-height: 14px;
margin: 0 0 0 0;
text-align: center;
}

/* Header CSS
————————- */
#header {
background: url(images/main/bg_header.jpg) repeat-x;
height: 150px;
width: 100%;
border-bottom: 3px solid #E0BD79;
}

/* Wide browser windows
————————- */
#wrap {
width: 650px;
margin: 0 auto;
text-align: justify;
}

/* Content
————————- */
#content_top {
margin: 20px 0 0 0;
width: 650px;
height: 30px;
background: url(images/main/bg_content_top.jpg) no-repeat;
}

#content {
background-color: #FCF5EB;
background: url(images/main/bg_content.jpg) repeat-y;
padding: 0 20px 0 20px;
}

#content_menu {
width: 150px;
}

#content_info {
width: 500px;
margin-left: 150px;
position: relative;
}
[/code:1:239bb59813]

Html
[code:1:239bb59813]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Dexonia</title>

<link rel="stylesheet" type="text/css" href="stijlblad.css" />

</head>

<body>

<div id="header" align="center"><img height="150" width="640" alt="header" src="images/main/header.jpg" /></div>

<div id="wrap">

<div id="content_top"></div>
<div id="content">
<div id="content_menu">
<img height="23px" width="52px" alt="Menu" src="images/main/menu_menu.jpg" /><br />
Blog<br />
Downloads<br />
Portfolio<br />
Info<br />
Contact
</div>
<div id="content_info">
test
</div>
</div>

</div>
</body>
</html>
[/code:1:239bb59813]

[Bijdrager MVB]

Bij menu – float: left;
Bij de content – float: right;

Dat moet werken lijkt me.
Er mooie layout!

[Bijdrager DeXoN]

nope werkt niet echt

[Bijdrager MVB]

Ik zie het al, je hebt een margin-left en position: relative erin. Ik denk dat ze er gewoon uit kunnen omdat de floats al duidelijk maken dat het menu en content naast elkaar moeten. Sowieso is position: relative niet logisch omdat de content ten op zichte van het menu nog 150px verder komt te staan.

[Bijdrager DeXoN]

nee hoor het werkt gewoon niet

[Bijdrager MVB]

En als je nou het menu of de content smaller maakt? je hebt 500+150=650 maar daar zitten de paddings nog niet bij in. Heb in dit voorbeeld content_info even 400px gemaakt, kan misschien nog wel iets breder, maar dat mag je dan zelf wel even uitrekenen

[code:1:05e1faeb57]/* Body CSS

#content_menu {
width: 150px;
float: left;
}

#content_info {
width: 400px;
float: right;
}
[/code:1:05e1faeb57]

Als het nu nog niet werkt weet ik het ook niet meer

[Bijdrager hansenonline]

heb even het lekker lelijk gemaakt, maar door de kleuren kan je goed zien hoe het opgebouwd wordt.[code:1:8c7bf22615]/* Body CSS
————————- */
body {
background: url(images/main/bg_main.jpg) repeat;
color: #6E685C;
font-family: Verdana;
font-size: 9px;
line-height: 14px;
margin: 0 0 0 0;
text-align: center;
}

/* Header CSS
————————- */
#header {
background-color:grey;
height: 150px;
width: 100%;
border-bottom: 3px solid #E0BD79;
}

/* Wide browser windows
————————- */
#wrap {
width: 650px;
margin: 0 auto;
text-align: justify;
}

/* Content
————————- */
#content_top {
margin: 20px 0 0 0;
width: 650px;
height: 30px;

background-color: #33FF00;
}

#content {

background-color: red;
height: 400px;
width: 650px;
xpadding: 0 20px 0 20px;
}

#content_menu {
position:relative;
float:left;
width: 150px;
height: 400px;
background-color:orange;
}

#content_info {
width: 400px;
height: 400px;
background-color:#CCFF66;
xmargin-left: 150px;
position: relative;
float:right;
} /* CSS Document */[/code:1:8c7bf22615]
mocht je nog een foooter willen, moet je clear:both gebruiken.[code:1:8c7bf22615]/* Body CSS
————————- */
body {
background: url(images/main/bg_main.jpg) repeat;
color: #6E685C;
font-family: Verdana;
font-size: 9px;
line-height: 14px;
margin: 0 0 0 0;
text-align: center;
}

/* Header CSS
————————- */
#header {
background-color:grey;
height: 150px;
width: 100%;
border-bottom: 3px solid #E0BD79;
}

/* Wide browser windows
————————- */
#wrap {
width: 650px;
margin: 0 auto;
text-align: justify;
}

/* Content
————————- */
#content_top {
margin: 20px 0 0 0;
width: 650px;
height: 30px;

background-color: #33FF00;
}

#content {

background-color: red;
height: 400px;
width: 650px;
xpadding: 0 20px 0 20px;
}

#content_menu {
position:relative;
float:left;
width: 150px;
height: 400px;
background-color:orange;
}

#content_info {
width: 400px;
height: 400px;
background-color:#CCFF66;
xmargin-left: 150px;
position: relative;
float:right;
} /* CSS Document */
#clear{clear:both;}
[/code:1:8c7bf22615] en voor je html[code:1:8c7bf22615]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Dexonia</title>

<link rel="stylesheet" type="text/css" href="stijlblad.css" />

</head>

<body>

<div id="header" align="center"><img height="150" width="640" alt="header" src="images/main/header.jpg" /></div>

<div id="wrap">

<div id="content_top"></div>
<div id="content">
<div id="content_menu">
<img height="23px" width="52px" alt="Menu" src="images/main/menu_menu.jpg" /><br />
Blog<br />
Downloads<br />
Portfolio<br />
Info<br />
Contact </div>
<div id="content_info">
test </div>
<div id="clear"></div>
</div>

</div>
</body>
</html> [/code:1:8c7bf22615]
succes en het ziet er mooi uit, maar moet je voor ee niet betalen?

[Bijdrager MVB]

@hansenonline
Zo zit er toch nog steeds ruimte tussen menu en content? Dat wordt nu rood, ik dacht namelijk dat die margin-left er uit moest??

[Bijdrager hansenonline]

ja er zit ruimte tussen, maar als je de maten goed invoert zie je die niet meer, dit was enkel ter illustratie hoe de blokjes opgebouwd worden.

[Bijdrager DeXoN]

Bedankt allemaak. De manier van MVB werkte dus wel. Maar het waren de afmetingen die ik moest veranderen.

[Bijdrager MVB]

Ok, mooi. Succes verder met de site!

[Bijdrager DeXoN]

U P D A T E
De basis dingen van de index pagina zijn gedaan.
http://pixiesplace.whateero.com/index.php

[Bijdrager WouterReyntjens]

misschien een kleine aanpassing:
de plaats waar je logo staat, dat zou ik doen met een transparante achtergrond, want nu als je je scherm groter maakt, dan zie je het.

het is maar een tip

grtz

[Bijdrager martijnG]

@ DeXoN

De streepjes achtergrond in de header is mooi herhalend, maar de streepjes in je logo sluiten daar niet op aan. Mischien kun je voor je logo een png24 maken zonder de streepjes achtergrond en voledige alpha transparantie.

Maak daarna een transparante gif aan van 1X1 pixel, en noem hem: blank.gif en sla hem op in de root van je www folder.

in je css file:
—-
[code:1:07e6e1f1e7]
img
{
behavior: url("pngbehavior.htc");
}
[/code:1:07e6e1f1e7]

pngbehavior.htc file:
[code:1:07e6e1f1e7]
<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>

var supported = /MSIE (5.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";

if (supported) fixImage();

function propertyChanged() {
if (!supported) return;

var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if ( ! new RegExp(blankSrc).test(src))
fixImage();
};

function fixImage() {
// get src
var src = element.src;

// check for real change
if (src == realSrc) {
element.src = blankSrc;
return;
}

if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}

// test for png
if ( /.png$/.test( realSrc.toLowerCase() ) ) {
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’" +
src + "’,sizingMethod=’scale’)";
}
else {
// remove filter
element.runtimeStyle.filter = "";
}
}

</script>
</public:component>
[/code:1:07e6e1f1e7]

[Bijdrager WouterReyntjens]

Waarom zou je het zo moeilijk maken voor de transparante png? er is een makkelijk scriptje voor:
maar een bestandje aan pngfix.js

[code:1:8527d27b3f]
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id=’" + img.id + "’ " : ""
var imgClass = (img.className) ? "class=’" + img.className + "’ " : ""
var imgTitle = (img.title) ? "title=’" + img.title + "’ " : "title=’" + img.alt + "’ "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=’" + img.src + "’, sizingMethod=’scale’);"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
[/code:1:8527d27b3f]
En zet dit in je head
[code:1:8527d27b3f]
<!–[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]–>
[/code:1:8527d27b3f]

Ps martijnG opletten voor dubbelposts.

[Bijdrager martijnG]

Reden waarom de htc file aangeroepen wordt in een behavior is omdat andere browsers behavior niet begrijpen. Daarnaast is .htc een IE only extensie, vandaar dus .htc en geen .js.

Reden waarom ik liever de de png behavior aanroep in de css is om rotzooi te voorkomen in de html ( scheiden van opmaak en content )

[Bijdrager DeXoN]

Van al hetgeen hierboven versta ik niets. En dat van de header weet ik maar wanneer ik hem transparant maak (gifje) dan bekom je het resultaat totaal niet. Maar ik zal het anders eens proberen met een png.