Just nu i M3-nätverket
Gå till innehåll
Martassen

Få webbplats mobilvänligare

Rekommendera Poster

Hej!

Hur gör jag den något mer vänlig när man exempelvis sitter med telefoner. Jag tycker det ser bra ut via dator och ipade och så som det ser ut i dator är bra men i telefoner blir det lite litet. skulle jag vilja ha det lite bättre. Är ej utvecklare och mina kunskaper är begränsade(Väldigt begränsade). Lite anpassning för få det lite bättre i telefoner.

 

Så här ser min CSS ut:

html { overflow-y: scroll; }


body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	margin-top: 7px;
	margin-left: 0px;
	background-color:#CCC;

	
}
table {
	font-size: 11px;
}
h3 {
	color: #933;
	font-size: 14px;
	margin:0px
	padding:0px;
	margin-bottom: 0px;
}

p {
	margin-top: 0px;
}

h4 {
	color: #933;
	font-size: 11px;
	margin:0px
	padding:0px;
	margin-bottom: 0px;
	margin-top: -1px;
}

a {
	color: #039;
	text-decoration: none;
}

	
a:hover {
	font-weight: normal;
	color: #933; 
	important;}
	
}
a:visited{
	color:#039;
	text-decoration:none;
}

#header {
	position:relative;
	background:#000;
	height: 100px;
	width: 750px;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
	margin-left:0px;
	margin-right:10px;
	margin-bottom:10px;
	
	
	
}

#kontakt {
	color: #FFF;
	position: absolute;
	width: 120px;
	left: 621px;
	top: 18px;
	font-family: Verdana, Geneva, sans-serif;
	border: thin none #FFF;
	text-align: right;
	font-size:11px;
	height: 69px;
	
}

#header a {
	color: #fff; /*Vit*/
	font-size: 13px;
}

#header a:hover { color: #ccc;/* ljus grå*/ }


#kontakt a {
	color:#fff;
	font-size:11px;
}

#heldiv{
	Width:790px;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	background-color:#FFF;
}
		
#foot {
	height: 17px;
	width: 789px;
	text-align: center;
	margin: 0px;
	padding: 0px;
	color: #933;
	font-weight: normal;
}

Så här ser en sida ut. Alla sidor har samma upplägg layout. Enda skillnaden är textinnehållet på de andra sidorna.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>utbildning, datautbildning, mw</title>
<link href="css1.css" rel="stylesheet" type="text/css">
<link href="spec_css.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="heldiv">
<div id="header"> <img src="images/m3.gif" alt="Mw">
<hr>
<div id="kontakt"><strong>M</strong><br>
  Lär för framtiden<br>
  Tel:45<a href="mailto:info@mf.se"><br>
  Info@fdf.se </a></div>
<table width="730" border="0">
  <tr>
      <td width="59"><a href="default.html">Hem</a></td>
      <td width="110"><a href="utb.html">Utbildningar</a></td>
      <td width="122"><a href="konsult.html">Konsultjänster</a></td>
      <td width="81"><a href="omoss.html">Om oss</a></td>
      <td width="137"><a href="arb_med_oss.html">Arbeta med oss</a></td>
      <td width="104"><a href="kontakt.html">Kontakta oss</a></td>
      <td width="87"> </td>
    </tr>
</table>
</div>
<table width="790" border="0" cellpadding="10" cellspacing="10">
  <!--DWLayoutTable-->
  <tr>
    <td width="158" valign="top" height="400"><h4>Utbildning för Projektledare</h4>
      <p>Arbetar du som projektledare och behöver skapa övergripande tidplaner för dig och dina medarbetare? Då kan Project vara en utbildning för dig och ditt företag.<br>
        <a href="projectgr.html">Läs mer</a><br>
        <br>
  </p>
<p><img src="dator.jpg" width="157" height="236"></p>
<h4>Excel för ekonomer</h4>
<p>Arbetar du med ekonomi och behöver spetsa dina Excelkunskaper. Då kan Excel för ekonomer vara en utbildning för dig.<a href="excelek.html"><br>
  Läs mer<br>
</a></p>
<h4>Lär dig Bildbehandla med Photoshop</h4>
<p>Behöver du lära dig grunderna i att retuschera, skapa och frilägga bilder som är anpassade för både tryck och webb?<br>
  <a href="PSgr.html">Läs mer </a><br>
</p></td>
    <td width="374" valign="top"0><h4>Mw
    Lär för framtiden</h4>
      <p>vi erbjuder utbildningar av högsta kvalitet där vårt fokus är att ge kunderna marknadens bästa 
        utbildningsresultat. Vi har som affärsidé att anpassa utbildningen efter kundens önskemål och genom det öka företagens lönsamhet. Bland våra kunder finns flera av Sveriges största 
        företag. Vi genomför uppdrag över hela landet och vill vara det självklara valet som utbildningspartner. Vi kan anpassa utbildningen efter dina önskemål och du kan även välja innehåll ifrån en eller flera av våra utbildningar och genom det skapa din egna anpassade utbildning för dig och dina medarbetare. </p>
      <p>Våra utbildningar genomförs i både nybörjarnivå och i avancerad nivå. Har du svårt för att välja vilken nivå som passar just dig, hjälper vi dig och ditt företag hitta den rätta nivån på utbildningen.</p>
      <h4>Öka lönsamheten på ditt företag</h4>
      <p>Känn glädjen av att bli effektivare på din arbetsplats genom att utbilda dig på M. Utbildningen är en investering för framtiden och är till för att öka ditt företags lönsamhet. Spara  all tid du lägger på att kämpa dig fram som användare  och utbilda dig istället på oss redan nu.</p>
      <h4>Välj utbildning:</h4>
      <p><a href="accessgrund.html">Access grund</a><br>
        <a href="accessforts.html">Access fortsättning</a><br>
        <a href="excelgr.html">Excel grund</a><br>
        <a href="excelintensiv.html">Excel intensiv</a><a href="excelforts.html"><br>
        Excel fortsättning</a><br>
        <a href="excelek.html">Excel för ekonomer</a><br>
        <a href="Illustrgrund.html">Illustrator grund</a><br>
        <a href="Illustrfk.html">Illustrator fortsätttning</a><br>
        <a href="indesigngr.html">Indesign grund</a><br>
        <a href="indesignfk.html">Indesign fortsättning</a><br>
        <a href="PSgr.html">Photoshop grund</a><br>
        <a href="psfk.html">Photoshop fortsättning</a><br>
        <a href="projectgr.html">Project grund</a><br>
        <a href="projectfk.html">Project fortsättning</a><br>
        <a href="powpoint.html">PowerPoint</a><br>
        <a href="wordgr.html">Word grund</a><br>
      <a href="wordfk.html">Word fortsättning</a></p>
      <h4>IT-Coachen</h4>
      <p>För dig med ledande befattning erbjuder vi individuell utbildning. Vi gör en analys av ditt individuella behov och utbildningen genomförs på tider som passar dig.</p>
      <h4>Efter utbildningen</h4>
      <p>Efter genomförd utbildning kan vi sätta ihop tillfällen där vi genomför uppföljning av det du lärt dig och ta upp specifika moment och frågeställningar som du och dina medarbetare funderar över. En så kallad uppföljningsdag ifrån genomfört utbildningstillfälle.</p></td>
    <td width="158" valign="top"><h4><img src="lila.jpg" width="157" height="236"><br>
      <br>
    </h4>
      <h4>Lär dig Indesign</h4>
      <p>Lär dig det senaste layoutprogrammet för att skapa kataloger och produktblad mm.<br>
        <a href="indesigngr.html">Läs mer</a></p>
      <h4>Skäddarsydd utbildning</h4>
      <p>Vi kan skräddarsy en utbildning för dig och ditt företag. <a href="kontakt.html">Kontakta oss</a> för mer information.      </p>
      <h4>Specifika lösningar</h4>
      <p>Vi erbjuder  specifika lösningar på ditt företag. Behöver du hjälp med att skapa kalkylmodeller i Excel eller hjälp med att utveckla en databas för att hantera och förenkla större<br>
        datamängder på ditt företag? Kolla in vårt utbud kring våra konsulttjänster<br>
        <a href="konsult.html">Läs mer</a></p>
      <p><br>
    </p></td>
  </tr>
</table>
<div id="foot">LÄr för framtiden | <a href="mailto:Info@foretaget.se">Info@företaget.se </a>| 09</div>
</div>
</body>
</html>

Litet enkelt knep så det blir lite mer mobilanpassat? Ipade tycker jag det ser bra ut.

Redigerad av Martassen

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Eftersom du använder tabeller så finns det inget "enkelt" knep. Tabeller är jättekrångliga att anpassa för skärmstorlekar. Speciellt då du hårdkodar in bredder överallt. Eftersom du inte vet hur stor skärmen besökaren har så kan du inte ange en fast bredd för det kommer bli antagligen för litet eller förs stort.

 

Istället borde du titta på antagligen bootstrap eller pure eller någon annan resurs som tillhandahåller det som kallas för responsiv layout,

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Tack för ditt svar!:-)

 

Var inne lite på bootstrap men jag begriper inte riktigt hur jag ska göra.
Ska jag ladda ner den och isåfall vilken. Hur funkar det sedan? Osäker där.

Redigerad av Martassen

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Antagligen laddar du ned bootstrap, version 3 kommer fungera fint. Eller så länkar du in den. Jag tror det finns information om vilka platser man kan länka in den ifrån på deras webplats.

 

Sen fungerar det ungefär så här. en div med klass container fungerar ungefär som <table>-tagg. En div med klass row fungerar ungefär som <tr>-tagg. Kolumner fungerar så att du lägger till  klasser på div som heter något i stil med col-md-10 eller col-md-2 etc. Det motsvarar <td>-tagg. Numret beskriver hur breda kolumner du vill ha. Du anger inte i pixelstorlek utan hur många kolumners storlek mellan 1 och 12. Dom kommer anpassa sig efter skärmstorlek etc osv.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Om du enbart använder funktionerna för grid-systemet i bootstrap så behöver du nog inte ändra speciellt mycket. Typsnittet eventuellt.

 

Det bästa vore väl att prova.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu



×
×
  • Skapa nytt...