Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

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

1
Skriv svar
Permalänk
Medlem
●

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!!

Redigera
Citera flera Citera
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å.

Redigera
Citera flera Citera
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

Redigera
Citera flera Citera
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.

Redigera
Citera flera Citera
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.

Gå till inlägget

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

Redigera
Citera flera Citera
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.

Gå till inlägget

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

Redigera
Citera flera Citera
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.

Gå till inlägget
Skrivet av cfj:

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

Gå till inlägget

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

Redigera
Citera flera Citera
Permalänk
Medlem ♥ ★
●

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

Redigera
Citera flera Citera
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.

Gå till inlägget

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.

Redigera
Citera flera Citera
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

Redigera
Citera flera Citera
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!!

Gå till inlägget

Ä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>
Redigera
Citera flera Citera
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

Redigera
Citera flera Citera
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.

Redigera
Citera flera Citera
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

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara