Hur fäster man en rubrik så att den inte påverkas av t.ex bilder i ett HTML-dokument?

Permalänk

Hur fäster man en rubrik så att den inte påverkas av t.ex bilder i ett HTML-dokument?

Hej! Jag håller på med en webbsida i Brackets. Jag har skapat en stor rubrik i toppen av dokumentet och infogat en bild som logga i samma höjd som rubriken. Jag försöker få sidan att se proffsig ut men förstår inte hur jag kan få den centrerade rubriken att inte påverkas av loggan. Just nu är ligger loggan bara i vänstra hörnet och gör att rubriken inte ligger i mitten av dokumentet vilket jag vill att den ska. Det bästa hade varit ifall jag fick sidan att se ut som Sweclockers logga och rubrik men centrerar finns det något smart sätt att fixa detta på?

Tack så hemskt mycket på förhand!!

Permalänk
Medlem

Man får tänka till lite och använda CSS helt enkelt. Jag har inte pysslat så mycket med sånt sedan jag läste webbdesign på nittiotalet men du får tänka på positionering, max-width och så.

Permalänk
Medlem

Alltså det bästa sättet att layout hemsidor är att använda flexbox.

https://www.w3schools.com/css/css3_flexbox.asp

https://flexboxzombies.com/p/flexbox-zombies

Permalänk
Medlem

Det enklaste torde vara att du skapar en centrerad tabell med en rad och tre celler. Bild och rubrik lägger du i mittcellen centrerade sida vid sida. Beroende på vilken totalbredd du vill ha får du "labba" lite med cellindelningen för att rubrik och bild skall få plats i mittcellen.

Permalänk
Medlem
Skrivet av KjellO:

Det enklaste torde vara att du skapar en centrerad tabell med en rad och tre celler. Bild och rubrik lägger du i mittcellen centrerade sida vid sida. Beroende på vilken totalbredd du vill ha får du "labba" lite med cellindelningen för att rubrik och bild skall få plats i mittcellen.

EH nej, tabeller ska inte användas för layout, tabeller ska användas till, tja tabeller.
För layout används CSS.

Permalänk
Medlem
Skrivet av KjellO:

Det enklaste torde vara att du skapar en centrerad tabell med en rad och tre celler. Bild och rubrik lägger du i mittcellen centrerade sida vid sida. Beroende på vilken totalbredd du vill ha får du "labba" lite med cellindelningen för att rubrik och bild skall få plats i mittcellen.

Tabeller använder man för att visa data i en tabell, aldrig för layout.

Permalänk
Medlem
Skrivet av Johan_G3:

EH nej, tabeller ska inte användas för layout, tabeller ska användas till, tja tabeller.
För layout används CSS.

Skrivet av cfj:

Tabeller använder man för att visa data i en tabell, aldrig för layout.

Tabeller användes innan man hade CSS, men nej de senaste decenniet eller så så har det inte varit rekommenderat.

Permalänk
Medlem

Beror lite på "hur" du vill "fästa" den. Men CSS och absolut positionering tex.

Permalänk
Medlem
Skrivet av snajk:

Tabeller användes innan man hade CSS, men nej de senaste decenniet eller så så har det inte varit rekommenderat.

Mm jag vet, har skrivit en eller annan sida sedan den första på det sena 90-talet.
Kan ändå inte låta bli att protestera lite när jag ser eller hör någon föreslå tabeller för layout.

Permalänk
Medlem

Kolla på css funktion "float" om det är det du menar.
Finns även en annan function i CSS som låter en "wrappa" text runt bilder i olika former, men minns inte namnet just nu.
Annars om bilden ska vara över, och texten under och båda är centrerade så kan du även använda flexbox, eller margin: auto

Permalänk
Medlem
Skrivet av linneaagnes:

Hej! Jag håller på med en webbsida i Brackets. Jag har skapat en stor rubrik i toppen av dokumentet och infogat en bild som logga i samma höjd som rubriken. Jag försöker få sidan att se proffsig ut men förstår inte hur jag kan få den centrerade rubriken att inte påverkas av loggan. Just nu är ligger loggan bara i vänstra hörnet och gör att rubriken inte ligger i mitten av dokumentet vilket jag vill att den ska. Det bästa hade varit ifall jag fick sidan att se ut som Sweclockers logga och rubrik men centrerar finns det något smart sätt att fixa detta på?

Tack så hemskt mycket på förhand!!

Är det typ såhär du menar?
Att du vill ha din Logga till vänster, och texten till höger och på samma rad, centrerat?
Isåfall är detta ett exempel på det:
har border: solid bara för att visa storleken på DIV och var de befinner sig.

<style> .huvud { display: flex; } .logo { width: 200px; height: 200px; border: solid 1px; display: flex; justify-content: center; align-items: center; } .texten { width: 200px; height: 200px; border: solid 1px; display: flex; justify-content: center; align-items: center; } </style> <body> <div class="huvud"> <div class="logo">Logo</div> <div class="texten">Text</div> </div> </body>

Permalänk
Medlem

Ett annat trix är att låta bilden vara bakgrund så kommer den inte att påverka texten. Bakgrundsbilder kan du positionera och skala som du vill

Permalänk
Medlem

Som någon annan här att sagt så är Flexbox det överlägsna bästa sättet att göra det (med CSS). Det här är en riktigt bra sida att använda som referens.

Permalänk
Medlem

Vet inte hur flexbox hade löst ditt problem om det är den horizontella placeringen av rubriken du menar.
Så här kan du göra med float eller background;

<div style="text-align: center"> <img style="float: left"/> Hej rubrik </div> <div style="text-align: center; background-image:url('myimg.gif'); background-repeat: no-repeat; background-position:left center;> Hej rubrik </div>

Disclaimer för pseudokod