Pagina 1 van 2
CSS in kompozer
Geplaatst: 19 november 2011, 17:37
door han52krol
Hallo,
Ik heb inmiddels veel gelezen over dat CSS en zie door de bomen het bos eigenlijk niet meer.
Wat moet ik nu eerst doen?Een body maken?Een wrapper?Een container? De een heeft het over een wrapper, dan over een container...... of eerst een header? Waarom is er niet gewoon iets simpels te vinden over dit moeilijke onderwerp voor een leek
Ik heb met Kompozer een nieuwe site gemaakt, dus met tabellen.Om het een en ander uit te proberen, en dat is gelukt. Maar jullie vragen wel eens om het hier te plaatsen? Hoe doe ik dat dan? De nieuwe site is nog niet online en moet de huidige gaan vervangen.
Gr. Han
Re: CSS in kompozer
Geplaatst: 19 november 2011, 18:00
door Frederik
Als je iets van je website wilt laten zien dan kun je in het berichtveld het adres typen en deze wordt hier dan als link weergegeven.
Wij kunnen er dan op klikken om te kijken.
CSS vindt ik ook moeilijk, maar als je het niet te moeilijk maakt is het wel te doen, al dan niet met behulp van een CSS editor of CSS wizard.
Een body hoef je niet te maken, dat is een html begrip: in de body wordt de inhoud van de webpagina weergegeven (tekst en afbeeldingen), meer niet.
In het CSS bestand kun je vervolgens aangeven hoe tekst eruit moet komen te zien: lettertype, grootte, kleur, enzovoort.
Idem een header: dat is een afbeelding zoals bovenaan dit forum waarin het logo staat.
Gebruik je geen logo/afbeelding bovenaan een pagina, heb je in principe ook geen 'header' nodig.
Met CSS wordt dan bepaalt hoe hoog en breed en waar precies dat logo moet verschijnen.
CSS is dus niets anders dan een tekstbestand met regels waarin geformuleerd wordt hoe de
layout van de website eruit komt te zien
Je kunt dit zo uitgebreid en moeilijk maken als je zelf wilt.
Een zeer uitgebreide verwijzing van Martijn over CSS begrippen:
http://www.mozbrowser.nl/forum/viewtopi ... 16&t=21161
Re: CSS in kompozer
Geplaatst: 19 november 2011, 20:02
door han52krol
Frederik,
Bedankt vor je uitleg. Ja, hij krijgt een header en mijn winkellogo. De winkellogo , een afbeelding, komt linksboven te staan en de welkomslogo, een afbeelding van een vliegtuig met tekst, daar rechts van op de zelfde hoogte. Hoe krijg ik dit dan? Door een Div in een div of een container/ wrapper en daar in weer een div? Het enigste wat er aan veranderd is het inhoud gedeelte. Op sommige sub-pagina's komt plaatjes en tekst, anderen teksten op gekleurde regels.
Ik vind het nog steeds vreemd dat men dit moeilijke onderwerp niet gewoon simpel kan uitleggen aan een leek. Het gekste is, dat ik met de tabellen alles wel voor elkaar krijg hoe ik de site wil hebben. Alleen dat mag niet van die W3C jongens , dan worden ze boos.
Gr. Han
Re: CSS in kompozer
Geplaatst: 19 november 2011, 22:45
door Frederik
Je kunt dan beter wachten totdat het uitgewerkt en klaar is, desnoods print je dan de bron van je pagina uit en leg je het css bestand ernaast. Dan kun je veel beter zien hoe dit in elkaar steekt. Beter dan ik het kan uitleggen.
En wat die boosheid betreft. Dat is niet zo. Werken met tabellen in een website is achterhaald, ook omdat het veel meer tijd vergt om een website in tabellen te ontwerpen, maar het is niet fout. Ook een website die stijf staat van de tabellen kan als het goed gedaan is foutloos gevalideerd worden. Het is niet praktisch, verder valt er niet veel verkeerds over te zeggen. Als iemand niets van CSS begrijpt en dat niet onder de knie krijgt is een tabellen structuur een geaccepteerd alternatief.
Er bestaan verder hele mooi en foutloos ontworpen css templates die overal gratis te vinden en te gebruiken zijn. Je eigen tekst en afbeeldingen erin en klaar ben je. Eventueel kun je zelf kleuren, afbeeldingen, lettertypes in het css bestand aanpassen om de vormgeving meer naar je eigen hand te zetten. Omdat css voor mij zelf ook geen afgesloten hoofdstuk is en ik ook niet alles snap, vindt ik de die templates een uitkomst!
Ik snap niet dat men daar niet veel meer gebruik van maakt: het scheelt zo ontzettend veel werk en moeite en je hoeft zelf het wiel niet nog eens opnieuw uit te vinden.
Re: CSS in kompozer
Geplaatst: 20 november 2011, 12:13
door han52krol
Frederik,
Bedankt voor je uitleg. Ik laat dat CSS voor wat het is. Ik ga gewoon op de "oude" voet verder. Dan maar "minder" mooi en "goed" volgens de Professoren van W3C.
De oude site werkte voortreffelijk, ondanks de tabellen, in FF, IE.8, Safari, Google Chrome.
Ik heb gewoon het idee dat je dubbel werk doet en ik kan alles wat ik wil met Kompozer. Letters kleuren, deze vetter maken. Diverse lettertypen gebruiken.
Ook eens gegoogled en er zijn ontzettend veel mensen die ook dat CSS maar niets vinden en gewoon maar bij tabellen blijven. Ja, het ziet er mooier uit, maar waarom geen goede , duidelijke uitleg? Daar loop ik tegen aan, het is meer van zoek het maar uit. Prima, maar ik wil ook nog graag een goede nachtrust.
Het menu maak ik wel met een ongenummerde lijst en als dat goed gaat scrolled hij niet mee. Ik heb het idee dat CSS alleen werkt voor de vormgeving van mijn site. De Content verschilt gewoon per pagina. En ik heb geen idee hoe ik dat allemaal voor elkaar kan boksen, vandaar dat ik het mooi zo laat. Als je naar
vkh Models gaat en je zoekt de produktpagina met die mooie witte-grijze regels dan zie je wat ik allemaal bedoel. Met de tabellen is het mooi gelukt en hij laadt snel in een browser en Google & Yahoo vinden de site heel snel. Dan maar een Tokkie op dit gebied.....
Gr. Han
Re: CSS in kompozer
Geplaatst: 22 november 2011, 19:26
door han52krol
Ik heb wat geprobeerd. Het schijnt nu een interne CSS te zijn. Dit is het:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>probeersel</title>
<meta content="han krol" name="author">
<style type="text/css">
{
display: inline;
position: static;
top: 1em;
left: 1em;
bottom: 1em;
right: 1em;
width: 1em;
max-width: 1em;
min-width: 1em;
height: 1em;
max-height: 1em;
min-height: 1em;
float: left;
clear: none;
direction: ltr;
unicode-bidi: normal;
z-index: auto;
border: ;
border-collapse: collapse;
border-spacing: 1em;
border-color: black;
border-style: none;
border-width: thin;
border-bottom: ;
border-bottom-color: black;
border-bottom-style: none;
border-bottom-width: thin;
border-left: ;
border-left-color: black;
border-left-style: none;
border-left-width: thin;
border-right: ;
border-right-color: black;
border-right-style: none;
border-right-width: thin;
border-top: ;
border-top-color: black;
border-top-style: none;
border-top-width: thin;
margin: 0;
margin-top: 1em;
margin-right: 1em;
margin-bottom: 1em;
margin-left: 1em;
padding: 0;
padding-top: 2em;
padding-right: 2em;
padding-bottom: 2em;
padding-left: 2em;
outline: ;
outline-width: medium;
outline-style: inherit;
outline-color: invert;
overflow: visible;
clip: auto;
visibility: visible;
color: black;
background-color: white;
background-image: url("");
background-attachment: scroll;
background-position: center;
background-repeat: repeat;
font-family: serif;
font-size: larger;
line-height: normal;
font-style: normal;
font-weight: normal;
font-variant: normal;
font-stretch: normal;
font-size-adjust: 0.5;
text-align: left;
text-indent: 0;
text-decoration: underline;
text-shadow: none;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
white-space: normal;
vertical-align: sub;
marker-offset: auto;
list-style-type: disc;
list-style-image: url("");
list-style-position: outside;
caption-side: top;
table-layout: auto;
empty-cells: show;
speak-header: once;
size: 0;
marks: crop;
page-break-before: auto;
page-break-inside: auto;
page: auto;
orphans: 2;
widows: 2;
cursor: auto;
scrollbar-3dlight-color: black;
scrollbar-arrow-color: black;
scrollbar-base-color: black;
scrollbar-darkshadow-color: black;
scrollbar-face-color: black;
scrollbar-highlight-color: black;
scrollbar-shadow-color: black;
scrollbar-track-color: blue;
}
body
{
}
table
{
}
tbody
{
}
tr
{
}
td
{
}
img
{
}
br
{
}
span
{
}
big
{
}
ul
{
}
li
{
}
small
{
}
:first-child
{
}
:link
{
}
:visited
{
}
:hover
{
}
:active
{
}
:focus
{
}
:first-line
{
}
:first-letter
{
}
:before
{
}
:after
{
}
*
{
}
</style>
</head>
<body style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"
alink="#000088" link="#0000ff" vlink="#ff0000">
<table
style="text-align: left; width: 100%; height: 100%; margin-left: auto; margin-right: auto; background-color: white;">
<tbody>
<tr>
<td
style="vertical-align: top; background-color: rgb(0, 0, 102); text-align: center; width: 217px;"><img
style="width: 97px; height: 70px;" alt=""
src="file:///G:/Documents%20and%20Settings/han/Mijn%20documenten/VKH%20Probeer%20map%20css/afbeeldingen/vkh.png"
vspace="30"><br>
<br>
</td>
<td
style="vertical-align: top; background-color: rgb(0, 0, 102); text-align: right; width: 1000px;"><img
style="width: 1011px; height: 276px;" alt=""
src="afbeeldingen/vkh_banner_nl.png"><br>
</td>
</tr>
<tr align="center">
<td colspan="2"
style="vertical-align: top; background-color: rgb(0, 0, 102); text-align: right; width: 1000px;"><span
style="color: white; font-family: Verdana;"><big><big><big>VKH
Models Vroomshoop
Nederland </big></big> </big>
</span><br>
</td>
</tr>
<tr>
<td
style="vertical-align: top; background-color: rgb(0, 0, 102); width: 217px;"><span
style="color: white; font-family: Helvetica,Arial,sans-serif;">Menu</span><br
style="color: white; font-family: Helvetica,Arial,sans-serif;">
<br style="color: white; font-family: Helvetica,Arial,sans-serif;">
<span
style="color: white; font-family: Helvetica,Arial,sans-serif;">Bouwdozen</span><br
style="color: white; font-family: Helvetica,Arial,sans-serif;">
<br style="color: white; font-family: Helvetica,Arial,sans-serif;">
<span
style="color: white; font-family: Helvetica,Arial,sans-serif;">Boeken</span><br>
</td>
<td style="vertical-align: top; width: 1000px;"> <br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</td>
</tr>
<tr>
<td colspan="2"
style="vertical-align: top; height: 1%; width: 1000px;"><small><small><span
style="font-family: Helvetica,Arial,sans-serif;">Copyright © VKH 2011</span><br
style="font-family: Helvetica,Arial,sans-serif;">
</small></small> <br>
</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>
Vraag mij niet hoe het is gegaan. Het zegt mij niets. Kan dit nu ook om worden gezet in een externe style sheet? Ik kan de nieuwe layout nog niet plaatsen, ik heb geen idee hoe ik dat moet doen bij WebReus. Ik kan wel een keer de oude er af gooien en de nieuwe plaatsen, maar....dat lijkt mij niet zo handig.
Gr. han
Re: CSS in kompozer
Geplaatst: 23 november 2011, 8:21
door nirwana
Zie
dit artikel in onze Wiki voor het exporteren van een interne stylesheet naar een apart bestand. Daaronder staat nog een alinea over het gebruiken van een externe stylesheet in een nieuwe pagina.
Als je een (test)pagina op een webserver wilt plaatsen, dan kun je die bijvoorbeeld lokaal onder een andere naam opslaan. Dan kan de index.html in jouw geval even indexTest.html worden. Vervolgens kun je indexTest.html eenvoudig op de webserver plaatsen en dan kun je hier een linkje naar deze indexTest.html-pagina plaatsen. Vergeet niet om ook een eventueel extern stylesheet-bestand (.css) op de webserver te plaatsen als je dat gebruikt.
Kortom, je kunt prima iets op de webserver erbij zetten als test-pagina. Zolang je daarmee niets overschrijft heeft het geen effect op je huidige website.
Re: CSS in kompozer
Geplaatst: 23 november 2011, 17:07
door han52krol
Dus als ik het goed begrijp, dan moet hij in de map van mijn winkel komen en dan een link plaatsen? Hoe zie ik die link? Moet ik die aan maken met Kompozer in het menu?? Ik heb dit nog nooit gedaan. Ik heb het wel eens geprobeerd, resultaat, Niets, Nakkes, Nada.
Re: CSS in kompozer
Geplaatst: 24 november 2011, 8:05
door nirwana
Inderdaad gewoon in de hoofdmap van jouw website plaatsen.
Stel je noemt dat bestand indextest.html, dan kun je het bestand daarna benaderen als
http://www.vkh-models-vroomshoop.nl/indextest.html
Dan plaats je hier op het forum dat adres en klaar ben je. Je hoeft dus niet in Kompozer alsnog een link te maken vanaf een andere webpagina.
Re: CSS in kompozer
Geplaatst: 24 november 2011, 17:08
door han52krol
Hoi Martijn,
Ik ben zo blij als een kind....Gelukt onder de link die jij gaf. Dus..... Ik heb er niets aan gedaan. Het menu is nog niet klaar. De CSS staat er nog gewoon in zoals iets hier boven.Wat ik begrepen heb, dat er: Eerst een div Box/Wrapper?/ Alg. Container moet worden gemaakt. Dan een div voor de banner , div voor de content, div voor het menu en een div voor de voet. Alleen moet ik dan ook een div maken voor het mooie, door mij zelf ontworpen logo? Dit logo zit niet vast aan de banner.
Gr. Han
Re: CSS in kompozer
Geplaatst: 26 november 2011, 10:23
door han52krol
Hallo.
Ik zit een beetje vast. Ik heb met kladblok wat div'jes gemaakt. Het valt mij op dat, als je div's maakt, er veel verschil in zit.Dit zijn de div's die ik gemaakt heb:
<div id="container">
<div id="banner"> </div>
<div id="logo"> </div>
<div id="menu"> </div>
<div id="content"> </div>
<div id="footer"> </div>
</div>
Nu wil ik deze div'jes hier tussen plakken in de bron van Kompozer. Dit is de html-tekst hiervan.
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>probeersel</title>
<meta content="han krol" name="author">
</head>
<body style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"
alink="#000088" link="#0000ff" vlink="#ff0000">
<table
style="text-align: left; width: 100%; height: 100%; margin-left: auto; margin-right: auto; background-color: white;">
<tbody>
<tr>
<td
style="vertical-align: top; background-color: rgb(0, 0, 102); text-align: center;"><img
style="width: 97px; height: 70px;" alt=""
src="file:///G:/Documents%20and%20Settings/han/Mijn%20documenten/VKH%20Probeer%20map%20css/afbeeldingen/vkh.png"
vspace="30"><br>
<br>
</td>
<td
style="vertical-align: top; background-color: rgb(0, 0, 102); text-align: right;"><img
style="width: 1011px; height: 276px;" alt=""
src="afbeeldingen/vkh_banner_nl.png"><br>
</td>
</tr>
<tr align="center">
<td colspan="2"
style="vertical-align: top; background-color: rgb(0, 0, 102); text-align: center;"><span
style="color: white; font-family: Verdana;"><big><big>VKH
Models Vroomshoop
Nederland </big></big>
</span><br>
</td>
</tr>
<tr>
<td
style="vertical-align: top; background-color: rgb(0, 0, 102); width: 17%;"><span
style="color: white; font-family: Helvetica,Arial,sans-serif;">Menu</span><br
style="color: white; font-family: Helvetica,Arial,sans-serif;">
<br style="color: white; font-family: Helvetica,Arial,sans-serif;">
<span
style="color: white; font-family: Helvetica,Arial,sans-serif;">Bouwdozen</span><br
style="color: white; font-family: Helvetica,Arial,sans-serif;">
<br style="color: white; font-family: Helvetica,Arial,sans-serif;">
<span
style="color: white; font-family: Helvetica,Arial,sans-serif;">Boeken</span><br>
</td>
<td style="vertical-align: top;"><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align: top; height: 1%;"><small><small><span
style="font-family: Helvetica,Arial,sans-serif;">Copyright VKH 2011</span><br
style="font-family: Helvetica,Arial,sans-serif;">
</small></small> <br>
</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>
Het moet tussen de <body> en </body>, deze laatste vond ik makkelijk, maar waar is het begin?Of moet ik helemaal vanaf de fundering beginnen en alles langzaam naar boven toe opbouwen, net als een huis, zeg maar, zo gezegt...? Wie helpt?
Gr. Han
Re: CSS in kompozer
Geplaatst: 26 november 2011, 12:54
door knorretje
Als je een huis bouwt, dan begin je met de fundering en de buitenkant, en vervolgens vul je de ruimte met tussenwanden zodat je afzonderlijke kamers krijgt.
Als laatste vul je de kamers met meubilair. Op deze manier zou ik ook deze webpagina maken. Je maakt eerst een skelet van (bijna) lege divje's en als alles op zijn plaats staat vul je de divje's met de uiteindelijke inhoud. Als je een beginner bent, dan is het handig om elke div in het begin een andere achtergrond te geven of een gekleurde rand en er al vast een paar woorden in te zetten.
Je ziet dan beter waar elke div op het scherm staat.
Als de skeletstructuur klaar is, kun je de voorlopige achtergrondkleuren veranderen naar de definitieve kleuren, en elke div vullen met de uiteindelijke inhoud.
Re: CSS in kompozer
Geplaatst: 26 november 2011, 16:01
door knorretje
Hieronder staat een voorbeeld van een pagina die is gemaakt met behulp van gekleurde div's.
Het menu en de content zijn naast elkaar geplaatst door het menu de eigenschap float te geven.
De container wordt gecentreerd door de margin-left en margin-right op auto te zetten.
Ik heb de container een rode rand gegeven zodat deze beter zichtbaar is.
Ik heb de footer clear both meegegeven voor het geval dat de hoogte van het menu of de content wordt gewijzigd.
Code: Selecteer alles
<!DOCTYPE html>
<html>
<head>
<title>Voorbeeld divstructuur</title>
<style>
#container{
width: 800px;
background: #EEEEEE;
border: solid red 2px;
margin-left: auto;
margin-right: auto; }
#banner {
height: 100px;
background: #D8F5FF; }
#logo {
height: 100px;
background: #C1FFDB; }
#menu {
float: left;
width: 200px;
height: 600px;
background: #FFD7C2;
}
#content {
height: 600px;
background: #FFFFFF; }
#footer {
clear: both;
height: 50px;
background: #E0C7E4; }
p,body { margin: 0px;}
</style>
</head>
<body>
<div id="container">
<p>container</p>
<div id="banner"><p>banner</p></div>
<div id="logo"><p>logo</p></div>
<div id="menu"><p>menu</p></div>
<div id="content"><p>content</p></div>
<div id="footer"><p>footer</p></div>
</div>
</body>
</html>
Re: CSS in kompozer
Geplaatst: 26 november 2011, 16:30
door nirwana
@knorretje: bedankt voor dit voorbeeld.
De voorbeeldpagina van Knorretje heb ik ook even online gezet:
http://www.mozbrowser.nl/web/hankrol/cssknorretje.html
Als ik Han's voorbeeld bekijk dan denk ik eerlijk gezegd dat "banner" en "logo" naast elkaar moeten komen te staan, dus zal dan ook daar een float meegegeven moeten worden.
Ook denk ik dat banner en logo dan omgedraaid moeten worden, maar dat terzijde. Het voorbeeld biedt een mooi uitgangspunt om verder in te vullen met de onderdelen van de website.
Re: CSS in kompozer
Geplaatst: 26 november 2011, 17:54
door han52krol
Hoi Martijn & Knorretje.
Bedankt voor jullie hulp. Ben vandaag eerst voor de shop weer weg geweest. Maar,idd, het logo (VKH) en de banner moeten bovenin in, naast elkaar komen.
Ik zal eerst eens gaan prutsen met een compleet nieuwe pagina in Kompozer. Ik had gedacht dat ik vanuit de bestaande, nieuwe site kon werken, maar de vlieger gaat dus niet op.
Gr. han