Missa inte Amazon Prime Day i Dagens fynd

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
Avstängd

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.

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.

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.

Visa signatur

Asus C6H | R9-3900XT | 4x8GB G-Skill Ripjaws V 3600@3466 CL14 | Asus Radeon RX 580 8GB Strix Gaming OC | Asus Strix Raid DLX | Corsair Obsidian 750D AE

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
Avstängd
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.

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

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.

Visa signatur

Asus C6H | R9-3900XT | 4x8GB G-Skill Ripjaws V 3600@3466 CL14 | Asus Radeon RX 580 8GB Strix Gaming OC | Asus Strix Raid DLX | Corsair Obsidian 750D AE

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

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

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>

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

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

Visa signatur

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

Permalänk

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

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

Visa signatur

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