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

Citera flera Citera

2021-04-12 13:39

snajk

Avstängd

Plats: Göteborg
Registrerad: Jun 2010

●

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å.

Citera flera Citera

2021-04-12 13:54

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

hypermode

Medlem ★

Registrerad: Sep 2005

●

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

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

Citera flera Citera (4)

2021-04-12 20:26

KjellO

Medlem ★

Plats: Lysekil
Registrerad: Dec 2017

●

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.

Visa signatur

Varit med i datorvärlden sedan början på 70 talet. Telegruppchef i Marinen, Jobbat med Xerox 800 ordbehandlingsmaskiner när det begav sig. PC-nisse sedan mitten av 80 talet. Raffinaderi inspektör sedan 1980.

Citera flera Citera

2021-04-13 09:01

Johan_G3

Medlem ★

Plats: Örebro
Registrerad: Jul 2015

●

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.

Visa signatur

Citera flera Citera (5)

2021-04-13 09:01

cfj

Medlem ★

Registrerad: Dec 2011

●

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.

Citera flera Citera

2021-04-13 09:04

snajk

Avstängd

Plats: Göteborg
Registrerad: Jun 2010

●

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.

Citera flera Citera (2)

2021-04-13 09:12

inquam

Medlem ★

Plats: Karlskrona
Registrerad: Aug 2009

●

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

Visa signatur

Huvudriggen är en Gigabyte Aorus Xtreme | 96gb DDR5 6000 | Ryzen 9950X3D | 5090
Utöver det är det för många datorer, boxar och servar för att lista :P

Citera flera Citera

2021-04-13 10:48

Johan_G3

Medlem ★

Plats: Örebro
Registrerad: Jul 2015

●

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.

Visa signatur

Citera flera Citera

2021-04-15 06:09

CubaCola

Medlem ★

Registrerad: Okt 2018

●

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

Visa signatur

I5 9600k@stock / Cooler Master Evo 212 / Gigabyte Z390 Gaming X / Corsair Vengeance LPX 16GB DDR4 3000MHz / MSI RTX2070 Gaming Z / EVGA 550 BQ / Asus VG27BQ 27" 165Hz

Ryzen 5 5600x@stock / Asus Rog Strix X570-E Gaming / Corsair Vengeance RGB Pro 16GB 3600MHz CL18 / MSI RTX3070 Suprim X / BeQuiet Pure Power 11 600W / Asus VG278Q 27" 144Hz

Citera flera Citera

2021-04-15 20:23

CubaCola

Medlem ★

Registrerad: Okt 2018

●

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>

Visa signatur

I5 9600k@stock / Cooler Master Evo 212 / Gigabyte Z390 Gaming X / Corsair Vengeance LPX 16GB DDR4 3000MHz / MSI RTX2070 Gaming Z / EVGA 550 BQ / Asus VG27BQ 27" 165Hz

Ryzen 5 5600x@stock / Asus Rog Strix X570-E Gaming / Corsair Vengeance RGB Pro 16GB 3600MHz CL18 / MSI RTX3070 Suprim X / BeQuiet Pure Power 11 600W / Asus VG278Q 27" 144Hz

Citera flera Citera

2021-04-15 20:29

kundun

Medlem ★

Plats: skåne
Registrerad: Jun 2004

●

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

Visa signatur

Oldschool [å:ldsku:l] adj. Användandet av datorprodukter som är äldre än 3 månader.

Citera flera Citera

2021-04-22 09:03

MariusFranzen

Medlem

Plats: Östersund
Registrerad: Okt 2015

●

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.

Visa signatur

We all got a chicken-duck-woman-thing waiting for us

CPU: Intel Core i7 10700K
GPU: Nvidia GTX 1080
RAM: DDR4 16 GB

Citera flera Citera

2021-04-22 19:52

kundun

Medlem ★

Plats: skåne
Registrerad: Jun 2004

●

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

Visa signatur

Oldschool [å:ldsku:l] adj. Användandet av datorprodukter som är äldre än 3 månader.