/ Forside/ Teknologi / Internet / Hjemme sider / Spørgsmål
Login
Glemt dit kodeord?
Brugernavn 

Kodeord  


Reklame
Top 10 brugere
Hjemme sider
#NavnPoint
molokyle 23766
bentjuul 7763
Klaudi 7497
BjarneD 4584
severino 4460
Manse9933 4366
disken 3947
natmaden 3885
miritdk 3593
10  refi 3578
KOMPOZER – BOKS
Fra : EA_HS
Vist : 955 gange
500 point
Dato : 25-06-09 15:44

Hvordan indsættes en ’Boks’,.. (eller hvad det hedder)
i programmet Kompozer, ?
’Boksen’ skal indsættes i feltet ’indhold’
her er et eksempel UDEN,.. ’Boks’ :
http://kimludvigsen.dk/index.php

og her er ’Boksen’ indsat,.. den hvor der reklameres for hæftet ’Kompozer’
http://kimludvigsen.dk/programmer-internet-kompozer-trin-tips.php

hvad kaldes sådan en ’Boks’,. ?


 
 
Kommentar
Fra : ajohansen


Dato : 25-06-09 15:49

er det <iframe> du tænker på

//ajohansen

Kommentar
Fra : Eyvind


Dato : 25-06-09 16:02

Du har jo nok ikke det lille hæfte om kompozer.
For det sår omtalt på side 22 > hjemmeside med stil altså css
Og det er netop boxe der laves med css (cascade stile sheet)

Du bør købe det lille hæfte fra Kim Ludvigsen
http://libris.dk/it_litteratur/webkonstruktion/vis_produkt/shop/hjemmesider-med-kompozer/?cHash=cfdd02b0f8

Kommentar
Fra : molokyle


Dato : 25-06-09 19:23

Jeg kan anbefale, at læse den litteratur du finder hér: http://www.webdesign101.dk/

On-line? ..kan du læse videre ..selv samme sted: http://www.webdesign101.dk/csslayout/

..eller her: http://www.hjemmesideskolen.dk/html/css2.asp?id=css1

Engelsk? ..så her: http://www.w3schools.com/

</MOLOKYLE>



Kommentar
Fra : molokyle


Dato : 25-06-09 19:30

Ps. Iøvrigt kan vi ik' rigtigt bruge dine link til 'noget' ...det er jo serveside kode i PHP og ta'r derfor en tur omkring serverens parser ...FØR klientkildekoden i (X-)HTML, Javascript osv., når os alm. dødelige brugere

Vi kan KUN se den kode serveren har genereret på baggrund af PHP koden.

Dine stylesheets finder du hér: http://kimludvigsen.dk/style/ludvigs.css

Kode
html, body, .venstre, .venstremenu, .midt, .faktaboks, .smalfaktaboks, .faktaboksright {
height: 100%;
}
body, .topbar, .midt, .oversigt, .kategorier1, .kategorier2, input, textarea, a.menuoverskrift, a.tekstlink, a.tekstlinkher {
color:rgb(0,0,0);
background-color: rgb(255,255,255);
}
body {
margin: 5px;
padding: 0px;
background-image: url(../billeder/baggrund.jpg);
text-align: center;
}
.side {
width: 770px;
position:relative;
top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
font-family: helvetica,arial,sans-serif;
}
.topbar {
border-style: solid solid none;
border-color: rgb(74,74,74);
border-width: 2px 2px medium;
background: url(../billeder/logo.gif) repeat scroll 0%;
position: relative;
top: 0px;
height: 80px;
width: 761px;
z-index:20;
}
.reklame {
position: relative;
float: left;
top: 10px;
left: 40px;
width: 500px;
height: 60px;
z-index:20;
}
.menu {
border-style: none solid solid;
border-color: rgb(74,74,74);
border-width: medium 2px 2px;
background: rgb(74, 74, 74) none repeat scroll 0%;
color: rgb(255, 255, 255);
position: relative;
top: 0px;
left: 0px;
height: 25px;
width: 761px;
z-index:20;
}
.fastmenu {
border-style: none;
color: rgb(255,255,255);
position: fixed;
top:0px;
background: rgb(74,74,74) url(../billeder/logo3.png);
height:32px;
width: 763px;
z-index:10;
margin-left: auto;
margin-right: auto;
padding-left:2px;
padding-top:5px;
}
.indpakning {
position: relative;
padding:0px;
top:5px;
width: 768px;
background-image: url(../billeder/bagindpakning.png);
background-repeat: repeat-y;
}
.venstre {
border: 2px solid rgb(74,74,74);
border-bottom: 0px;
padding: 2px;
background: rgb(161,192,224);
float: left;
position: relative;
top: 0px;
padding-top: 5px;
width: 146px;
color: rgb(0,0,0);
z-index:8;
}
.venstremenu {
border: 2px solid rgb(255,255,204);
padding: 0px;
background: rgb(255,255,204);
position: relative;
top: 5px;
left: 5px;
width: 133px;
color: rgb(0,0,0);
}
.venstremenu a {
padding-left:0px;
margin-left:2px;
}
.midt {
border: 2px solid rgb(74,74,74);
border-bottom: 0px;
padding: 5px;
float: left;
position: relative;
top: 0px;
left: 5px;
width: 592px;
z-index:8;
}
.oversigt {
float: left;
position: relative;
padding-left: 4px;
width: 290px;
}
.kategorier1 {
float: left;
position: relative;
width: 275px;
}
.kategorier2 {
float: left;
position: relative;
width: 275px;
}
.faktaboks, .smalfaktaboks, .faktaboksright {
border: 2px solid rgb(74,74,74);
background: rgb(238,238,238);
color: rgb(0,0,0);
}
.faktaboks {
margin: 15px auto;
padding: 5px 3px 0px 3px;
position: relative;
width: 500px;
}
.smalfaktaboks {
padding: 5px 3px 0px 3px;
margin-bottom:10px;
position: relative;
width: 398px;
}
.faktaboksright {
padding: 3px;
float: right;
top: 10px;
left: 1px;
width: 170px;
margin-bottom: 3px;
}
p {
padding: 3px;
margin-top:0;
color: rgb(0,0,0);
}
li {
padding: 10px;
}
.sitemap {
margin-bottom: -1.3em;
}
.sitemap2 {
margin-bottom: 1.3em;
}
h1 {
font-weight: bold;
color: rgb(0,0,0);
background-color:inherit;
font-size: 300%;
margin-top: -0.1em;
}
h2 {
padding: 3px;
color: rgb(0,0,0);
background-color:inherit;
font-size: 120%;
font-weight: normal;
}
h3 {
color:rgb(0,0,0);
padding: 3px;
font-weight: bold;
font-size: 120%;
margin-bottom:0;
}
h4 {
padding: 3px;
color:rgb(0,0,0);
font-weight: bold;
margin-bottom:-0.5em;
}
h5 {
margin-top: -0.1em;
color:rgb(0,0,0);
font-size: 120%;
font-weight: normal;
}
.rubrik {
font-size: 170%;
margin-top:0;
}
.understreg {
text-decoration: underline;
}
.kursiv {
font-style: italic;
}
.fed {
font-weight: bold;
}
.midt span.fed {
font-weight: bold;
color:#222;
}
.red {
color:red !important;
}
td {
vertical-align: top;
}
form {
margin-bottom: -0.4em;
}
.flydestop {
clear: both;
}
a.tekstlink, a.tekstlinkher {
text-decoration: none;
}
a.sidelink {
color: rgb(0,0,0);
text-decoration: none;
}
a.venstremenulink {
background: rgb(255,255,204);
color: rgb(0,0,0);
text-decoration: none;
}
a.venstremenuoverskrift {
background: rgb(255,255,204);
color: rgb(0,0,0);
font-weight: bold;
text-decoration: underline;
}
a.menuoverskrift {
font-weight: bold;
text-decoration: underline;
}
a.venstremenulinkaktiv {
background: rgb(255,255,204);
color: rgb(119,119,119);
text-decoration: none;
}
a.venstremenulinkher:hover {
background: rgb(255,255,204);
color: rgb(0,0,0);
}
a.venstremenulink:hover {
background: rgb(193,224,247);
color: rgb(0,0,0);
}
a.sidelink:hover {
background: rgb(161,192,224);
color: rgb(51,51,51);
}
a.tekstlink:hover {
background: rgb(255,255,255);
color: rgb(68,68,68);
}
a.menulink {
color: rgb(255,255,255);
background: rgb(74,74,74);
text-decoration: none;
font-weight: bold;
}
a.menulinkaktiv {
color: rgb(187,187,187);
text-decoration: none;
font-weight: bold;
}
a.menulink:hover {
background: rgb(119,119,119);
color: rgb(255,255,255);
}
a.tekstlinkfed { background: rgb(255, 255, 255);
color: rgb(0, 0, 0);
text-decoration: none;
font-weight: bold;
}
a.sort {
color: rgb(0, 0, 0);
}
.midtlinks1, .midtlinks2, .midtlinks3 {
float: left;
margin-top: 8px;
margin-bottom: 8px;
padding-bottom: 8px;
width: 33%;
}
.midtlinks1, .right {
text-align: right;
}
.midtlinks2, .centrer, .billedemidt {
text-align: center;
}
#logo {
float: left;
width: 200px;
}
img, .reklamelink {
border: medium none ;
}
.billedeleft {
padding: 3px;
float: left;
margin-bottom: 5px;
}
.billedeoversigt {
padding: 3px 3px 1px;
float: left;
margin-bottom: -5px;
}
.billederight {
padding: 3px;
float: right;
margin-bottom: 5px;
}
.billedemidt {
padding: 3px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
}
input {
border-style: solid;
border-color: rgb(0,0,0);
border-width: 0px 1px 1px 0px;
font-family: arial,sans-serif;
background-image: none;
font-size: 12px;
}
.bestilling input {
border-style: solid;
border-color: rgb(0,0,0);
border-width: 1px 1px 1px 1px;
font-family: verdana,arial,sans-serif;
background-image: none;
width:300px;
padding:3px;
}
.bestilling input.lilleform {
border-style: solid;
border-color: rgb(0,0,0);
border-width: 1px 1px 1px 1px;
font-family: verdana,arial,sans-serif;
background-image: none;
width:40px;
padding:3px;
}
.bestilling input.mellemform {
border-style: solid;
border-color: rgb(0,0,0);
border-width: 1px 1px 1px 1px;
font-family: verdana,arial,sans-serif;
background-image: none;
width:200px;
padding:3px;
}

textarea {
border-style: solid;
border-color: rgb(0,0,0);
border-width: 0px 1px 1px 0px;
background-image: none;
font-family: helvetica,arial,sans-serif;
font-size: 12px;
}
.bestilling textarea {
border-style: solid;
border-color: rgb(0,0,0);
border-width: 1px 1px 1px 1px;
font-family: verdana,arial,sans-serif;
background-image: none;
width:300px;
padding:3px;
}
.streg {
text-decoration: underline;
font-size: 150%;
font-weight:bold;
margin-bottom:2px;
}
ul {
margin-top:0px;
padding-top:0px;
}
.i {
font-family: times,serif;
}
.overskrift {
padding-top: 35px !important;
}
.kategorier1, .kategorier1, .oversigt, a.tekstlink span.fed {
color:rgb(0,0,0)
}
.footer {
position: relative;
padding:0px;
top:0px;
width: 768px;
background-image: url(../billeder/baggrund-footer.png);
background-repeat: no-repeat;
background-color: rgb(255,255,255);
}
.kant {
border:solid 1px black;
}
.annonceboks {
background-color:#fff;
border:solid 1px black;
width:140px;
margin-left:auto;
margin-right:auto;
padding:0;
font-family:arial;
margin-top:10px;
margin-bottom:10px;
text-align:center;
}
.annonce {
color:#fff;
background-color:#32669A;
text-align:center;
}
p.annonce {
margin:0px;
padding:0px;
}
dt {
margin-top:20px;
font-weight:bold;
}
table.tabelkanter {
border-collapse:collapse;
border:solid;
border-width:1px;
border-color:black;
}
table.tabelkanter td{
border:solid;
border-width:1px;
border-color:black;
padding-left:5px;
}
.indryk {
margin-left:20px;
}


</MOLOKYLE>

</MOLOKYLE>

Kommentar
Fra : Eyvind


Dato : 25-06-09 19:35

Nå Molokyle - er du ved at komme på mærkerne igen....................med kodningen.

Kommentar
Fra : EA_HS


Dato : 25-06-09 22:31

Citat
Ps. Iøvrigt kan vi ik' rigtigt bruge dine link til 'noget'


.......... vil det sige at ingen kan se / læse disse link,.. :

http://kimludvigsen.dk/index.php
http://kimludvigsen.dk/programmer-internet-kompozer-trin-tips.php
..........................................

Eyvind
jeg lånte engang hæftet 'Kompozer'
men der står ikke mere i hæftet, end på Kim Ludvigsens hjemmeside,
som jeg henviser til,.......
www.kimludvigsen punktum dk
men det hjælper selvfølgelig ikke,.. hvis du / i ikke kan se / læse linket, ?

er der mon noget i vejen med indstillingerne på min PC,.. ?

Kommentar
Fra : EA_HS


Dato : 25-06-09 22:46

Ellers kan siderne ses her,.. uden ’Boks’
og med ’Boks’
http://peecee.dk/upload/view/177826
http://peecee.dk/upload/view/177827


Kommentar
Fra : Eyvind


Dato : 25-06-09 23:03

Jo jo - vi kan læse og kigge på dine link fra kim Ludvigsen - men Molokyle mener nok at selve kodningen (css) ikke kan ses men kun resultatet i det link.

Jeg kan i dine to link se afrundede boxe

Kommentar
Fra : EA_HS


Dato : 25-06-09 23:42

afrundede boxe,...
de skulle ellers være 'kantede' (ikke runde hjørner som KANDU boxe,. ø/v og nederste/h)

Jeg har prøvet at ‘rode’ lidt med Kompozer,
og indsat en skabelon (1-2)
skabelonen er opbygget i nogle koder, eller stilark, (CSS-editor)
jeg vil gerne ha’ ’Boksen’ placeret ved markøren, (på første foto)

Jeg går ud fra ’Boksen) skal tilføjes ’stien’ indhold,.. ? (foto 2)
men hvordan gør jeg det i praksis,
der kan indsættes flere forskellige tabeller, og ’formularer’
fx formular felt
formular billede
tekstområde
valgliste
definer knap
definer etikette
definer feltsæt

( må meget gerne klippes ud i pap,.. masser af pap,)
http://peecee.dk/upload/view/177833
http://peecee.dk/upload/view/177834

sidste foto viser css-stilark,.. som de kaldes.



Kommentar
Fra : molokyle


Dato : 26-06-09 09:37

Jeg tror du skal læse lidt på lektien
De 'bokse' du omtaler er såmen bare et resultat af den 'box-model', som ALLE (X-)HTML elementer er underlagt. En BOKS er intet andet end layout egenskaber for et element defineret i CSS.

En simpel box laves f.eks. ud fra et alm. <div> ..</div> afsnit ved at angive dette elements egenskaber:

Størrelse: højde og bredde.
Placering: koordinaer.
Baggrund: farve eller grafik.
Ramme: Tykkelse og afbildning (linje-type el. grafik.)
Margin: Afstand til nabo-element/-er.
Padding: Indre 'luft' til indhold.

http://www.w3schools.com/css/css_boxmodel.asp

En sådan boks kunne se således ud i CSS:
Kode
<style type="text/css">
<!--
div.boks {
position:absolute;
top:64px;
left:128px;
margin:0;
padding:4px;
height:128px;
width:250px;
border-color:red;
border-style:solid;
border-width:2px;
color:#fff;
background:#000;
}
-->
</style>

..og (X-)HTML koden der benytter denne typografi f.eks.:
Kode
<div class="boks">
<p>
Dette er min boks.
</p>
</div>


Resultatet ses her: http://www.cssboxing.com/temp/boks.html

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 26-06-09 11:39

Hvis du er en 'newbie', så begynder du hér:

http://www.hjemmesideskolen.dk/

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 28-06-09 15:16

Når du er blevet færdig med at læse, så kan du med din viden om box-modellen, f.eks. lynhurtigt lave en dynamisk menu med CSS, uden nogen form for javascript eller events, der både validerer korrekt i forhold til webstandarderne og som vises ens i alle de gængse moderne browsere.
Prøv det. Det er nemt !
Her en sådan simpel menu baseret på en div markør, nogle link markører indeholdende en inline span markør, lidt tekst og intet andet: http://www.cssboxing.com/temp/simpelmenu.html

Man kan selvfølgelig tilrette og lave alskens staffage, som link-/bagrundsgrafik således, at designet passer til sidernes øvrige indhold. Oftest vil man dog nok vælge, at basere sine menuer på en uordnet liste, da det så bli'r en smule mindre kompliceret at lave undermenuer mm.
Happy coding...
</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 29-06-09 19:11

...nogle få ændringer i CSS'en og man får en vandret menu ..UDEN, at ændre i selve XHTML koden:

http://www.cssboxing.com/temp/simpelhorizontalmenu.html

Egentlig er det derfor, at man bør lægge sin CSS kode i en ekstern fil.

Så skal man KUN rette i én fil for f.eks., at ændre udseende på en menu på ALLE sider.

Resten af koden forbliver den samme, som du vil kunne se ved, at sammenligne de 2 ovenstående eksempler.

Nemlig:
Kode
<body>
<div id="menu">
<a href="#1" accesskey="1" tabindex="1" title="link 1">Test 1<span class="info">Menuens 1. link.</span></a>
<a href="#2" accesskey="2" tabindex="2" title="link 2">Test 2<span class="info">Menuens 2. link.</span></a>
<a href="#3" accesskey="3" tabindex="3" title="link 3">Test 3<span class="info">Menuens 3. link.</span></a>
<a href="#4" accesskey="4" tabindex="4" title="link 4">Test 4<span class="info">Menuens 4. link.</span></a>
<a href="#5" accesskey="5" tabindex="5" title="link 5">Test 5<span class="info">Menuens 5. link.</span></a>
<a href="#6" accesskey="6" tabindex="6" title="link 6">Test 6<span class="info">Menuens 6. link.</span></a>
</div>
</body>

</MOLOKYLE>

Kommentar
Fra : EA_HS


Dato : 30-06-09 00:50

</MOLOKYLE>
Jeg er ikke I tvivl om at du har stor viden udi,.. it / hjemmesider mm.

Den eneste erfaring jeg har, er at jeg engang har ”konstrueret” en side i google pages,
123 hj.sider,.. lidt læsning omkring HTML o.lign…. det er jo til at overse,..
(nok omkring 2 min. ud af et døgn)

det forekommer mig, at være uendeligt ’tungt’ og langsommeligt,
hvis jeg skulle lære det, blot nogenlunde,.. vil det formentlig tage så lang tid,
at der er kommet helt nye systemer til,.. og det jeg er begyndt på er forældet,

det er altså IKKE noget jeg skal / vil, bruge mere tid på end højest nødvendig,

derfor har jeg (indtil videre) valgt programmet Kompozer,.. (muligvis Dreamweaver)
fordi det er opbygget,.. næsten klar til brug,.. ved hjælp af ’færdige’ skabeloner’,
dét,. begrænser mit arb. mest muligt,..

der er dog forskellige ting jeg er i tvivl om,.. bl.a. den nævnte ’Boks’
(kunne dog undværes,.. i værste fald)

selvom jeg læste / studerede alle dine links (indgående) .. og mere til,
vil jeg sikkert stadig være i tvivl om mange ting,

(man kan jo heller ikke ”læse sig” til at køre bil, fx)

Men, men,
når jeg prøver at indsætte nogle af dine (første koder) fungerer det ikke i Kompozer,
måske du kan forklare mig hvorfor,.. ?

hvis jeg derimod indsætter din,.. SIDSTE kode i ’min Kompozer skabelon’,
http://peecee.dk/upload/view/177833

kommer det til at sådan ud, :
http://peecee.dk/upload/view/178491

altså,.. faktisk ok,..
det skulle bare være en boks,.. 'lodret aflang ramme',.. der kan indsættes tekst, fotos, link mm.
nogenlunde som denne,.. (reklame for Kompozer hæftet) :
http://kimludvigsen.dk/programmer-internet-kompozer-trin-tips.php

hvordan gør jeg det,.. eller hvordan skal koden se ud,.. ?
jeg kan jo se at det er ved at ligne noget rigtig nu,….




Du har følgende muligheder
Dette spørgsmål er blevet annulleret, det er derfor ikke muligt for at tilføje flere kommentarer.
Søg
Reklame
Statistik
Spørgsmål : 173455
Tips : 31650
Nyheder : 719565
Indlæg : 6382313
Brugere : 218248

Månedens bedste
Årets bedste
Sidste års bedste