Forum Mjukvara Programmering och digitalt skapande Tråd

HTMl / Align right fast lite mer centrerat?

1
Skriv svar
Permalänk
Medlem
●

HTMl / Align right fast lite mer centrerat?

Hej. Jag forsoker gora en html footer med en bild som ar i mitten fast till hoger och en annan bild som ar i mitten fast till vanster. Problemet nu med align=right ar att de gar for mycket till hoger, jag skulle vilja att de gar 70% till hoger och motsvarande pa andra sidan men jag hittar inte i html hur man gor detta. Ett annat alternativ ar att centrera och flytta x pixlar till hoger och den andra bilden at vanster. Det skulle funka fint men aterigen, jag vet inte hur man center+shift i html.

Tacksom om ni kan hjalp en noob!

Visa signatur
Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av shabik:

Hej. Jag forsoker gora en html footer med en bild som ar i mitten fast till hoger och en annan bild som ar i mitten fast till vanster. Problemet nu med align=right ar att de gar for mycket till hoger, jag skulle vilja att de gar 70% till hoger och motsvarande pa andra sidan men jag hittar inte i html hur man gor detta. Ett annat alternativ ar att centrera och flytta x pixlar till hoger och den andra bilden at vanster. Det skulle funka fint men aterigen, jag vet inte hur man center+shift i html.

Tacksom om ni kan hjalp en noob!

Gå till inlägget

Skicka med den kod du har just nu, rita gärna i paint t.ex. hur exakt du önskar att det ska se ut så kan vi säkert hjälpa dig.
Det blir alltid lättare med visuella hjälpmedel.

Visa signatur

Citera om du vill ha svar, hjälpte jag dig, gilla svaret!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av freddyfresh:

Skicka med den kod du har just nu, rita gärna i paint t.ex. hur exakt du önskar att det ska se ut så kan vi säkert hjälpa dig.
Det blir alltid lättare med visuella hjälpmedel.

Gå till inlägget

Tack for hjalpen!

Koden jag har skrivit ar foljande:

<img src="https://xxxxx/ribaWhite2-300x79.png" align="left">
<img src="https://xxxxx/2019/01/INTBAU-v3-same-size-as-RIBA-01-300x79.p..." align="right">
<br><br><br><br>
<center> <span style="color: white; font-size: 10px;">JOHN SIMPSON ARCHITECTS LTD. | 29 Great James St, London WC1N 3ES, UK | +44 20 7405 1285 | info@johnsimpsonarchitects.com | </span>
</center>

Visa signatur
Redigera
Citera flera Citera
Permalänk
99:e percentilen ★
●
Skrivet av shabik:

[…] jag vet inte hur man center+shift i html.

Gå till inlägget

Svaret är att du inte gör det i HTML alls, utan i CSS. Tumregeln är att bara beskriva innehåll i HTML och beskriva allt som har med presentation att göra i CSS. (align-attributet är obsolete och ska ej användas överhuvudtaget. Här kan du validera din HTML. Glöm inte <!DOCTYPE html> högst upp så att du berättar att din kod ska tolkas som HTML5.)

Möjligen kan CSS-egenskapen transform vara en bra lösning:

img {
    display: block;
    width: 100px;
    margin: 0 auto; /* centrerad */
    transform: translateX(20%); /* av bildens bredd */
}

Från bilden ser det dock ut som att det du egentligen söker är margin-left respektive margin-right på bilderna.

<center> är också ett typiskt element du ej bör använda, av samma anledning som align. Använd istället text-align: center i CSS. Du verkar även använda <br> som "lite extra vertikalt utrymme" när det egentligen betyder "radbrytning". Använd istället margin-top eller dylikt i CSS.

Senast redigerat
Visa signatur

Skrivet med hjälp av Better SweClockers

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Alling:

Svaret är att du inte gör det i HTML alls, utan i CSS. Tumregeln är att bara beskriva innehåll i HTML och beskriva allt som har med presentation att göra i CSS. (align-attributet är obsolete och ska ej användas överhuvudtaget. Här kan du validera din HTML. Glöm inte <!DOCTYPE html> högst upp så att du berättar att din kod ska tolkas som HTML5.)

Möjligen kan CSS-egenskapen transform vara en bra lösning:

img {
    display: block;
    width: 100px;
    margin: 0 auto; /* centrerad */
    transform: translateX(20%); /* av bildens bredd */
}

Från bilden ser det dock ut som att det du egentligen söker är margin-left respektive margin-right på bilderna.

<center> är också ett typiskt element du ej bör använda, av samma anledning som align. Använd istället text-align: center i CSS. Du verkar även använda <br> som "lite extra vertikalt utrymme" när det egentligen betyder "radbrytning". Använd istället margin-top eller dylikt i CSS.

Gå till inlägget

Otroligt vänligt att du tar dig tid att svara. Jag ser inte riktigt hur den koden du skrev img skulle göra att något är till höger/vänster utan det ser väldigt centrerat ut? Jag hade hoppats på att ha 2 bilder exakt lika stora, ena till höger och andra till vänster. Så ej centrerat. Det är ju inte heller texten som alignas ut det är ju PNG. Själva texten jag har är, och ska vara centrerad.

Visa signatur
Redigera
Citera flera Citera
Permalänk
99:e percentilen ★
●
Skrivet av shabik:

Otroligt vänligt att du tar dig tid att svara. Jag ser inte riktigt hur den koden du skrev img skulle göra att något är till höger/vänster utan det ser väldigt centrerat ut? Jag hade hoppats på att ha 2 bilder exakt lika stora, ena till höger och andra till vänster. Så ej centrerat. Det är ju inte heller texten som alignas ut det är ju PNG. Själva texten jag har är, och ska vara centrerad.

Gå till inlägget

Efter att ha tittat närmare på din bild tänker jag att något sådant kanske kan fungera:

<!DOCTYPE html>
<style>
footer {
    background-color: #778;
    box-sizing: border-box;
    color: white;
    font-size: 10px;
    height: 60px;
    padding-top: 40px;
    text-align: center;
}

footer img {
    position: absolute;
    top: 20px;
}

footer #footer-riba {
    left: 2cm;
}

footer #footer-intbau {
    right: 2cm;
}
</style>

<footer>
    <img id="footer-riba" src="ribaWhite2-300x79.png">
    <span>JOHN SIMPSON ARCHITECTS LTD. | 29 Great James St, London WC1N 3ES, UK | +44 20 7405 1285 | info@johnsimpsonarchitects.com | </span>
    <img id="footer-intbau" src="INTBAU-v3-same-size-as-RIBA-01-300x79.png">
</footer>

Där har jag också gjort några ändringar för att separera innehåll (HTML) och presentation (CSS). Jag rekommenderar att du lägger CSS-koden i en egen fil (typ stylesheet.css), men jag har lagt den direkt i ett <style>-element ovan i demosyfte.

Flexbox är också otroligt bra och helt klart värt att läsa på om.

Visa signatur

Skrivet med hjälp av Better SweClockers

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Alling:

Efter att ha tittat närmare på din bild tänker jag att något sådant kanske kan fungera:

<!DOCTYPE html>
<style>
footer {
    background-color: #778;
    box-sizing: border-box;
    color: white;
    font-size: 10px;
    height: 60px;
    padding-top: 40px;
    text-align: center;
}

footer img {
    position: absolute;
    top: 20px;
}

footer #footer-riba {
    left: 2cm;
}

footer #footer-intbau {
    right: 2cm;
}
</style>

<footer>
    <img id="footer-riba" src="ribaWhite2-300x79.png">
    <span>JOHN SIMPSON ARCHITECTS LTD. | 29 Great James St, London WC1N 3ES, UK | +44 20 7405 1285 | info@johnsimpsonarchitects.com | </span>
    <img id="footer-intbau" src="INTBAU-v3-same-size-as-RIBA-01-300x79.png">
</footer>

Där har jag också gjort några ändringar för att separera innehåll (HTML) och presentation (CSS). Jag rekommenderar att du lägger CSS-koden i en egen fil (typ stylesheet.css), men jag har lagt den direkt i ett <style>-element ovan i demosyfte.

Flexbox är också otroligt bra och helt klart värt att läsa på om.

Gå till inlägget

Otroligt vad snäll du är. Nu jäklar börjar det likna nåt. Problemet nu dock är att bilderna ibland överlappar texten nu och allt är på samma rad. Vad jag vill är att bilderna är på första raden, sen andra raden centrerat är texten UNDER men du nämnde att jag inte ska lägga in "br". Testade dock att lägga in br för att få ner det hela under pngsen men då försvinner istället texten!.

Visa signatur
Redigera
Citera flera Citera
Permalänk
Medlem
●

@shabik:
Yeay jag kom på det själv! Så genom att öka toppadding så flyttades endast texten ner så ökade till 110 och nu är det perfekt. Grymt uppskattat att du tog dig tid och hjälpte mig med detta. Fantastisk människa som tar sin tid att hjälpa en annan.

Visa signatur
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Rekommenderar att du kollar upp flexbox och grid för att jobba med positionering. Då får du allt responsivt också.
Dvs. om du är intresserad av att jobba med designbiten på frontend.

Skickades från m.sweclockers.com

Redigera
Citera flera Citera
Permalänk
Medlem
●

Hej igen! Nu kom jag precis på att den koden är lite problematisk. Den offsetar 7 cm vilket är fine FÖRUTOM när man resizar så de börjar det överlappas.

Helst vill jag lägga in en css som kanske döljer pngsen när de blir så små men jag hittar inte riktigt hur jag kan lägga in det.

Visa signatur
Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av shabik:

Hej igen! Nu kom jag precis på att den koden är lite problematisk. Den offsetar 7 cm vilket är fine FÖRUTOM när man resizar så de börjar det överlappas.
http://www.johnsimpsonarchitects.com/logooverlap.png

Helst vill jag lägga in en css som kanske döljer pngsen när de blir så små men jag hittar inte riktigt hur jag kan lägga in det.

Gå till inlägget

Media queries

Skickades från m.sweclockers.com

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av zaibuf:

Media queries

Skickades från m.sweclockers.com

Gå till inlägget

Jo jag såg denna men jag vet inte hur jag ska lägga in det.

Så här är den koden som jag vill lägga in det i:

<!DOCTYPE html>
<style>
footer {
box-sizing: border-box;
color: white;
font-size: 10px;
height: 60px;
padding-top: 110px;
text-align: center;
}

footer img {
position: absolute;
top: 20px;
}

footer #footer-riba {
left: 7cm;
}

footer #footer-intbau {
right: 7cm;
}
</style>

<footer>
<img id="footer-riba" src="https://test3.rental-academy.com/wp-content/uploads/2019/01/I...">JOHN SIMPSON ARCHITECTS LTD. | 29 Great James St, London WC1N 3ES, UK | +44 20 7 405 1285 | info@johnsimpsonarchitects.com |
<img id="footer-intbau" src="https://test3.rental-academy.com/wp-content/uploads/2019/01/r...">
</footer>

Visa signatur
Redigera
Citera flera Citera
Permalänk
Medlem
●

T ex så har jag testat det här (det funkar inte):

<!DOCTYPE html>
<style>
footer {
box-sizing: border-box;
color: white;
font-size: 10px;
height: 60px;
padding-top: 110px;
text-align: center;
}

footer img {
position: absolute;
top: 20px;
}

footer #footer-riba {
left: 7cm;
}

footer #footer-intbau {
right: 7cm;
}
@media only screen and (max-width: 468px) {
/* For mobile phones: */
[class="footer-intbau"
display:none;
}
}

</style>

<footer>
<img id="footer-riba" src="https://test3.rental-academy.com/wp-content/uploads/2019/01/I...">JOHN SIMPSON ARCHITECTS LTD. | 29 Great James St, London WC1N 3ES, UK | +44 20 7 405 1285 | info@johnsimpsonarchitects.com |
<img id="footer-intbau" src="https://test3.rental-academy.com/wp-content/uploads/2019/01/r...">
</footer>

Visa signatur
Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag har testat sjukt många combos. Jag lägger allt ovanför style btw.

<!DOCTYPE html>
<style>
footer {
box-sizing: border-box;
color: white;
font-size: 10px;
height: 60px;
padding-top: 110px;
text-align: center;
}

footer img {
position: absolute;
top: 20px;
}

footer #footer-riba {
left: 7cm;
}

footer #footer-intbau {
right: 7cm;
}

@media (min-width: 600px) {
footer-riba {
display:none;
}
}</style>

Visa signatur
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

@shabik: Du vill att ingen av bilderna i footern ska synas?

@media only screen and (max-width:768px){
  #footer-riba, #footer-intbau {
    display: none;
  }
}
Redigera
Citera flera Citera
Permalänk
Medlem
●

@zaibuf:

Wii tack så otroligt mycket. Du är grym!

Visa signatur
Redigera
Citera flera Citera
Permalänk
Medlem
●

Tar bort detta inlägg, det löste sig. Jag verkade bara ha motsägande kod.

Senast redigerat
Visa signatur
Redigera
Citera flera Citera
Permalänk
Medlem
●

SOLVED!! (se lösning nedan) Okej jag har nu läst om flexbox och gått till en renare kod utan absolute och använde flexbox space-around nu och fick det äntligen att funka okej. Ett nytt problem dock att efter 636 px och mindre så poppar footern ut och blir skev. Jag fattar inte alls vad det kan komma från. Någon som vet vad som händer och hur jag kan fixa det?

https://test3.rental-academy.com/

LÖSNING: Det kom från att jag hade alla boxar med en defined width på 500 px. Jag tog bort alla och nu så händer inte det längre.
Jag förstår dock fortfarande inte riktigt varför två flexbox containers överlappas när det blir små upplösningar men men.

Senast redigerat
Visa signatur
Redigera
Citera flera Citera
Permalänk
Medlem
●

@shabik:

Hej igen. Nu vill de att om det blir en liten storlek (säg 600 px) så istället för att 3 föremål är jämte varandra på bredden så går på höjden istället.

Alltså att 1,2,3 blir
1
2
3.

Vet någon hur jag kan göra detta?

Visa signatur
Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av shabik:

@shabik:

Hej igen. Nu vill de att om det blir en liten storlek (säg 600 px) så istället för att 3 föremål är jämte varandra på bredden så går på höjden istället.

Alltså att 1,2,3 blir
1
2
3.

Vet någon hur jag kan göra detta?

Gå till inlägget

Flexbox.
Sätt flex-wrap: wrap på din flex container.

Fortfarande komiskt att de ställer massa krav på dig, som jag tolkar inte är en utvevklare, istället för att betala någon som arbetar med det. Hoppas du får bra med dough 😂

Skickades från m.sweclockers.com

Senast redigerat
Redigera
Citera flera Citera
1
Skriv svar