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

Ändra tables till css med data från mysql


Ringbom

Rekommendera Poster

Hej

 

jag har börjat ändra mina hemsidor till responsiv design. Saken är den att jag har många hemsidor skrivna och alla är uppbyggda med tables (skrivna 2004 ung....)

Jag har nu fastnat på en struktur som jag plockar upp från en databas... har slitit mitt hår länge nu och kan inte få till det.

Ska koda så det ser bra ut i mobilen... 

Någon som har något förslag på hur jag ska ändra denna kod så jag kan få två rader med en bild på varje rad, samt slottsnamn och landskap.

Ska bli en lista alltså.. kanske förklarar dåligt men här är koden som nu funkar kanon men som ska ändras...

 

<%
With Response
.Write "<table width=""500px;"">" & vbCrLf
lngX = 0
Do While Not RecSet.EOF
    If lngX Mod 3=0 Then .Write "<tr valign=""top"">" & vbCrLf
    .Write "<td class=""vtextcenter"" style=""width:140px;height:150px;"">"
    .Write "<a href=""slottdetalj.asp?id=" & RecSet("id") & """ class=""nobgc""><img style=""width:140px;height:100px;border:1;"" class=""galleri"" src=""./slott/" & RecSet("foto2") & ".jpg"" alt=""" & RecSet("slottsnamn") & """/></a><br />"
    .Write "<a href=""slottdetalj.asp?id=" & RecSet("id") & """ class=""vtextgalleri"">" & RecSet("slottsnamn") & "<br>" & RecSet("karta") & "</a>"
    .Write "</td>" & vbCrLf
If lngX Mod 3=3 Then .Write "</tr>" & vbCrLf
lngX = lngX + 1
  RecSet.MoveNext
  Loop
  .Write "</table>" & vbCrLf
End With
%>

i mobilen ska det bli 2 rader (se bild) och vid större skärmstorlek flera rader

som passar till skärmens storlek..

Hur gör man, blir stressad av google som mailar stup i kvarten och säger att mina sidor halkar ner i sökresultaten om jag inte ändrar till mobilanpassat :-(

 

Uppskattar om någon kan ge mig någon idé. 

 

)slott.jpg

 

Länk till kommentar
Dela på andra webbplatser

Det enklaste är kanske att börja med att kolla på Bootstrap eller Pure till exempel och se hur deras hantering av kolumner och liknande fungerar. Antagligen så gör du något liknande eller så använder du deras ramverk och lägger på dina egna anpassningar så sidan ser ut som du vill.

Länk till kommentar
Dela på andra webbplatser

Jo jag har försökt med både bootstrap och kurser på lynda.com men det blir en salig röra ändå... det är själva mobilvarianten som jag inte får till. 

så här ser det ut för tillfället http://slottsguiden.info/m_slott.asp (om du skrollar ner till litet fönster eller ser på det i mobilen. 

(nu sticker jag till frissan :-)

Länk till kommentar
Dela på andra webbplatser

Om vi tittar på bootstrap så har dom ett exempel som ser ut så här ungefär.

<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-4">
Kolumn 1
</div>
<div class="col-xs-6 col-md-4">
Kolumn 2
</div>
<div class="col-xs-6 col-md-4">
Kolumn 3
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">
Kolumn 1
</div>
<div class="col-xs-6 col-md-4">
Kolumn 2
</div>
<div class="col-xs-6 col-md-4">
Kolumn 3
</div>
</div>
</div>

Så istället för en tabell så ar du en divtagg med klassen container-fluid. Istället för en tr så har du en divtagg med klassen row. Och istället för td så har du en divtagg med klasserna col-xs-6 och col-md-4. Det tror jag kommer göra att du får tre kolumner på större skärmar, men en kolumn på mindre.

 

Det borde göra att du kan få ungefär samma layout som idag, fast fint fungerande i mobil.

Länk till kommentar
Dela på andra webbplatser

Jättetack för svaret, är grymt tacksam. Ska genast testa när jag kommer hem.

Länk till kommentar
Dela på andra webbplatser

  • 6 months later...

Efter ett längre uppehåll är jag tillbaka... har inte fått till det här ännu eftersom jag plockar upp från en databas... den koden som jag har på den gamla sajten ser ut så här (http://slottsguiden.info/slott.asp
Jag kan få till det i en sån lista, men grejen är den att när man förminskar fönstret försvinner bilderna i den högra kolumnen... :(

Den koden som jag försöker ändra är en som jag fick hjälp av här för flera år sedan (tror det var den här sajten) Den ser ut så här 

<%
With Response
	lngX = 0
	Do While Not RecSet.EOF
    If lngX Mod 3=0 Then .Write "<tr valign=""top"">" & vbCrLf
    .Write "<td style=""width:125px;height:155px;text-align:center;"">"
    .Write "<a href=""m_slottdetalj.asp?id=" & RecSet("id") & """><img style=""width:100%;height:80%;"" class=""galleri"" src=""./slott/" & RecSet("foto2") & ".jpg"" alt=""" & RecSet("slottsnamn") & """/></a><br />"
    .Write "<a href=""m_slottdetalj.asp?id=" & RecSet("id") & """>" & RecSet("slottsnamn") & "<br>" & RecSet("karta") & "</a>"
    .Write "<pre></pre>" 
    .Write "</td>" & vbCrLf
	If lngX Mod 3=3 Then .Write "</tr>" & vbCrLf
	lngX = lngX + 1
  RecSet.MoveNext
  Loop
  .Write "</table>" & vbCrLf
End With
%>

<%
'********** DB-close ***************
	RecSet.Close
	Set RecSet = Nothing

	Connect.Close
	Set Connect = Nothing
'***********************************
%>

Jag sitter verkligen fast :(
jag har försökt att ta bort table och tr, td, men ändå collapsar inte bilderna i mobilen så att de ligger under sig, utan två ligger i bredd och tredje försvinner helt, går inte ens att skrolla utåt höger för att se den, den bara försvinner...

 

så om man ser på http://slottsguiden.info/slottlandskap.asp?landskap=2 så försvinner slottet skottorp. I listan finns det när fönstret är stort fem slott, men i mobilen bara 4.

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...