Nettside via Excel

8 innlegg i emnet

Skrevet (endret)

Hei.

Har laget en nettside ved kun bruk av Excel på OSx: www.juskart.tk

Er det mulig å fjerne den tomme plassen som finnes til høyre og under?

Endret av deiiNos
0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Jøss! Det er faktisk det rareste jeg har sett!

Problemet med å lage en nettside i utradisjonelle applikasjoner, så som Excel, Word, PowerPoint eller andre MS Office-programmer, er at det følger med en hel haug med unødig webkode - som vil gi deg masse problemer når du forsøker feilsøking og rettinger i koden.

Disse programmene egner seg rett og slett ikke for webprogrammering.

Jeg ser av kildekoden at det er generert hundrevis av tabeller, kolonner og rader, samt massivt bruk av bilder. Dette gjør at siden blir svært lite brukervennlig, og tung å laste inn i nettleseren.

Er du åpen for å endre kodespråket for jus-kartet?

Jeg har ikke vært borte i organisasjonskart i HTML/CSS fra før - men etter litt googling viser det seg at det ikke er så vanskelig å få til.

Ved hjelp av en listestruktur i HTML, samt litt smart CSS-koding, vil du få et veldig bra resultat.

Nå vet ikke jeg hvordan dine webprogrammeringsfunksjoner er, men jeg har hjulpet deg litt på vei her:

Se denne siden for mitt forslag: http://fx.itpro.no/scr/juskart.html

Filen er ikke fullført i henhold til ditt fullstendige kart, men gir et godt innblikk i hvordan det kan se ut.

Gi gjerne tilbakemelding om du lurer på noe.

Kildekoden for filen, inkludert CSS og HTML finner du her: http://jsfiddle.net/88wWc/1/

<style type="text/css">
	/*Now the CSS*/
* {margin: 0; padding: 0;}

.tree
{
	width: -moz-max-content;
	margin-left: auto;
	margin-right: auto;
}

.tree ul {
	padding-top: 20px; position: relative;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

.tree li {
	float: left; text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
	content: '';
	position: absolute; top: 0; right: 50%;
	border-top: 1px solid #ccc;
	width: 50%; height: 20px;
}
.tree li::after{
	right: auto; left: 50%;
	border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
	display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
	border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
	border-right: 1px solid #ccc;
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
	content: '';
	position: absolute; top: 0; left: 50%;
	border-left: 1px solid #ccc;
	width: 0; height: 20px;
}

.tree li a{
	border: 1px solid #ccc;
	padding: 5px 10px;
	text-decoration: none;
	color: #666;
	font-family: arial, verdana, tahoma;
	font-size: 11px;
	display: inline-block;
	
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
	background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
	border-color:  #94a0b4;
}
</style>
<div class="tree">
	<ul>
		<li>
			<a href="#"><strong>RETTSVITENSKAP / JUS</strong></a>
			<ul>
				<li>
					<a href="#">Internasjonal rett</a>
                    <ul>
                        <li>
                            <a href="#">EØS-rett</a>
                            <ul>
                                <li>
                                    <a href="#">Gjennomføring av EØS i Norge</a>
                                    <ul>
                                        <li><a href="#">Krav til gjennomføring</a></li>
                                        <li><a href="#">Utfordringer</a></li>
                                        <li><a href="#">Statens erstatningsansvar</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Rettskildene</a></li>
                                <li><a href="#">Instutisjoner</a></li>
                            </ul>
                                
                        </li>
                        <li><a href="#">Folkerett</a></li>
                        <li><a href="#">Menneskerettigheter</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nasjonal rett</a>
                    <ul>
                        <li>
                            <a href="#">Offentlig rett</a>
                            <ul>
                                <li><a href="#">Statsrett</a></li>
                                <li>
                                    <a href="#">Forvaltningsrett</a>
                                    <ul>
                                        <li>
                                            <a href="#">Generell forvaltningsrett</a>
                                            <ul>
                                                <li><a href="#">Materiell</a></li>
                                                <li><a href="#">Prosessuell</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#">Spesiell forvaltningsrett</a>
                                            <ul>
                                                <li><a href="#">Strafferett</a></li>
                                                <li><a href="#">Miljørett</a></li>
                                                <li><a href="#">Velferdsrett</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="#">Strafferett</a></li>
                                <li><a href="#">Prosessrett</a></li>
                            </ul>
                        </li>
                        
                        <li>
                            <a href="#">Privat rett</a>
                            <ul>
                                <li><a href="#">Arverett</a></li>
                                <li><a href="#">Familierett</a></li>
                                <li><a href="#">Personrett</a></li>
                                <li><a href="#">Formuerett</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
			</ul>
		</li>
	</ul>
</div>

2

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet (endret)

Takker for svar. Forslaget ditt er utrolig bra. Har kun vært borti tutorial i Visual Basic som ble lagt ut på ITpro i 2008, imidlertid forstår jeg logikken i HTML-koden du har skrevet, så jeg kommer til å bygge videre på den ved bruk av jsfiddle.

Takker for at du har satt meg på rett spor! Får prøve meg frem og se om det funker :)

Endret av deiiNos
0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Så bra!

Ikke meningen å tråkke i salaten/arbeidet ditt - men det var ingen god måte å lage en nettside på. :)

CSS står for Cascading Style Sheets - eller på norsk; stilsett - og skal utfylle HTML-koden. HTML er et markeringsspråk, og bestemmer hvordan en nettside bygges opp; eksempel vis <h2>Overskrift</h2>, eller <a href="http://itpro.no">Link</a>

Med CSS kan vi f.eks bestemme at <h2> (Heading 2 - Overskrift 2) </h2> skal være med skriftsstørrelse 24 og være blå:

h2{
 font-size:24pt;
 color:blue;
}

Selve innholdet, er jo det du skaper selv og legges mellom markeringene i HTML.

<h2>Overskrift 2</h2>
<p>Paragraf - Dette er innholdet!</p>

Vi har også en innføring i CSS på våre nettsider som kan være verdt å lese: http://itpro.no/artikkel/13837/en-innforing-i-css/

Bare spør hvis du lurer eller står fast underveis!

2

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet (endret)

Hallo! :)

Nå har jeg jobbet videre på www.juskart.tk ved bruk av JSfiddle (http://jsfiddle.net/deinos/Wu65n/), og har noen spørsmål.

1. Er det mulig å fjerne "juskart - jsFiddle demo by deinos" som står i adressefanen på nettleseren?

2. Kartet blir rart ved bruk av mobil og enkelte nettlesere. Mulig å fikse det?

3. Kan man sette midten av siden som default slik at det første man ser når man går inn er den øverste boksen "Rettsvitenskap/jus"?

4. Er det mulig å få til en boks med info som kommer opp når man holder musepekeren over/klikker på boksene? (Uten at det blir for vanskelig programmering)

Endret av deiiNos
0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

1. Ja. Se i <head>-seksjonen på HTML-filen din. Der finner du en tag som heter <title>. Om du redigerer den, vil du få en annen sidetittel.

2. Hva er rart?

3. Skal undersøke senere om ingen andre gjør det før meg.

4. Det enkleste er å bruke title=""-attributten på <li>-elementet. Det spørs litt hva/hvor mye du legger i begrepet infoboks. Om du skriver <li title="Tekst her"> vil du få opp en liten tooltip-boks når du holder musepekeren over. Videre er det selvfølgelig andre, mer avanserte løsninger også, dersom overnevnte ikke var tilfredsstillende nok. :)

1

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

1. Takk! :)
4. Takk! :)

2. Problemet er at kartet blir splittet opp ved bruk av Google Chrome, Safari og Internett Explorer. Har prøvd på Windows 8, OS X Maverick og Android. Kartet fungerer helt fint ved bruk av Firefox på PC, Mac eller smarttelefon.

hur4ed.png

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!


Start en konto

Logg inn

Har du allerede en konto? Logg inn her.


Logg inn nå

  • Hvem er aktive   0 medlemmer

    Ingen innloggede medlemmer aktive