Jag bråkade länge och väl med divarna på min hemsida innan de fogade sig.
De hoppade runt lite hur som helst när jag ändrade storlek på fönstret.
Gjorde allt i Notepad++, så det tog ju en liten stund. Men fördelen är att inget sker automatiskt och/eller ändras av sig självt som i något designprogram.
Förresten heter det mahogny på svenska. Mahogany är engelska.
Ja, det är besvärligt med Divarna. Jag har försökt att få det som på bilden. Där textinput rad 1 och knappen för fontval rad 1 upptar en rad med varsin div och samma på rad 2 för text input 2. Sist kommer Skylten men den vill ju uppta en rad fast vid sidan om de 2 raderna för input. Vetesjutton hur man får till det.
blockindelning.JPG
Du har inte behörighet att öppna de filer som bifogats till detta inlägg.
Gjorde ett enkelt test med att använda <br>. Det verkar funka på min dator när man minskar skärmbredden ner till minimum.
Steg två blir att försöka få in samma struktur i koden för sidan. Det är lätt att röra till det.
Om bootstrap-klasserna funkar som de gör normalt så brukar man använda sm,md,lg,xl för att styra olika layout beroende på skärmstorlek.
Tex har du col-lg-5 som säger att den (kolumnen) är 5 av 12 enheter bred med en upplösning som klassas som large eller större.
Du kan ju också nestla row och col för att skapa layouten.
Jag har inte koll på var gränserna för resp storlek går, men det står säkert i dokumentationen nån stans.
edit: Och om jag minns rätt finns det även klasser för att dölja för större än, eller mindre än X, vilket man kan använda om man har helt annan markup för tex en mobilvy än för desktop.
Jag tror det går mot det bättre i min dator nu. Det går att minska ner till minimum i Chrome i alla fall. Det största problemet var att få knapparna att inte lägga sig över texten i rullgardinslistorna när man minskade bredden.
Skärmklipp-2.JPG
Du har inte behörighet att öppna de filer som bifogats till detta inlägg.
Ja, Font- (och Färg)val hoppar inte längre omkring när man ändrar fönsterstorlek.
Kvar att lösa är spcialfonterna som inte nödvändigtvis finns färdigt i webläsaren.
WR.png
Du har inte behörighet att öppna de filer som bifogats till detta inlägg.
Det är ett problem. Men jag tror jag löser det genom att presentera fonterna som går att välja och hur de ser ut på en lista som man öppnar i en modal. Den som skall köpa skylten behöver ju nödvändigtvis inte se den önskade fonten direkt på skylten.
Huvudsaken är ju att han kan se hur den ser ut. Det är ju jag som skall fräsa texten så jag ser ju vilken text som är vald i beställningen.
Att få till det med en automatisk installation av fonterna i användarens dator är definitivt en överkurs som jag inte vill lägga tid på tror jag. Fast nyfikenheten kanske tar över när sidan är klar för övrigt. Vem vet.
Kanske det går att länka fonten tillfälligt via servern utan att installera den.
Ett bra knep för att komma rätt med gridindelningen är att lägga in alla 12 gridarna längst upp på sidan. Man ser då lätt vart man kan få plats med de olika komponenterna.
Ett fel som jag gjorde i början var att flytta en komponent med negativ positionsangivelse i CSS så att den hamnade in på föregående grid. Det gäller att hålla komponenterna inom sina områden.
Det går ju att med hjälp av CSS få komponenterna vart man vill, men ligger de i fel grid så skiter det sig när man förminskar skärmen, som alla kunde se i på min sida i början av mina äventyr.
Nya problem som gör mig yr i mössan. Jag har en rutin som skriver ut x och y coordinaterna när man flyttar texten på skylten. Den fungerar utmärkt, men jag vill ändra y-värdet så att det blir positivt och noll i skyltens övre hörn. Rutinen ser ut så här:
function move(e) {
if (!e) e = window.event;
if (dragok) {
d.style.left = dx + e.clientX - x + "px";
d.style.top = dy + e.clientY - y + "px";
var y1 = dy + e.clientY - y;
var myoffset = 280;
var y2 = "Rad 1 y = " + y1 + myoffset;
document.getElementById("ytext1").innerHTML = y2 + " px";
return false;
}
}
Vad jag försöker göra är att lägga till myoffset (280) till y2 men utskriften blir i stället "Rad 1 y = -198280 px"
290 adderas inte utan skris ut efter -198. Där skulle det stå -18 om det funkade som jag vill. Har jag blivit tokig eller är det något viktigt i javascript jag missat? Jag har även testa med
var myoffset = parseInt("280"); med samma resultat.
Jag får en error i chrome när jag kollar på sitt script.
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
och den pekar på raden
document.getElementById("ytext1").innerHTML = y2 + " px";
Du kanske inte har någon ytext1 utskriven på versionen jag kan se.
Nej den version jag jobbar med nu är denna Men det problemet löste sig på ett annat vis. Av någon konstig anledning så funkade det så här i stället. Lite underligt kan tyckas att det inte går att plussa på 280 på y2 men ok på y1
Undrar vad du gjort med texten, för muspilen är förflyttningspilar på en bredd av minst 10 gånger så bred som texten, åt höger.
Så om jag placerar texten 5cm till vänster utanför skylten, kan jag fortfarande ta tag i texten som på en osynlig pinne på höger sida om skylten.
