Hulp gevraagd HTML & CSS

donderdag 27 juni 2019 08:21

Acties:

0 Henk 'm!

DennisR1998

Topicstarter

Hey allemaal!

Op het moment ben ik bezig om een website te maken met HTML &CSS.
De bedoeling is dat er een afbeelding als gehele achtergrond komt.

Op de afbeelding staat wel het e.e.a. aan tekst alleen hierbij moet wat toegevoegd worden.
Als ik de tekst toevoeg word het op de computer goed weergegeven. Als ik het open op een mobiel of ik resize de browser verspringt de tekst (h2 in html). Ik ben hier al erg lang mee bezig

De tekst moet komen te staan tussen 2 regels tekst die standaard op de afbeelding staan.
Dit wil ik werkend hebben voor alle resoluties. Is dat uberhaupt mogelijk?

Hebben jullie tips hoe ik de tekst goed kan vastzetten?
Hierbij mijn code:

<!doctype html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="utf-8">
<title></title>
</head>

<body>

<style>
body
{
text-align:center;
overflow-y: hidden;
overflow-x: hidden;
width:100%;
margin:0 auto;
padding:0px;
font-family:helvetica;
background-color: #000000;

background: url() no-repeat center center fixed;
background-size: 1000px;
width: 1000px;
height: 1000px;
background-color: #000000;
}
#wrapper
{
text-align:center;
margin:0 auto;
padding:0px;
width:700px;
}
h1
{
margin-top:225px;
color:white;
font-size: 20px;
font-weight: bold;
}
h2
{
position: absolute;
top: 58%;
left: 50%;
transform: translate(-50%, -50%);
font-size:16px;
font-weight: bold;
color:white
}
</style>

<div class="container">
<div class="row">
<div class="h2">
<h2>CLICK <a href="">HERE</a> SEE OUR OPENING HOURS AND<br>
OTHER INFO

</div>
</div>
</div>

</body>
</html>

[ Voor 5% gewijzigd door DennisR1998 op 27-06-2019 08:39 ]

donderdag 27 juni 2019 08:26

Acties:

0 Henk 'm!

TI_Observer

Zet top 58% naar 50% en voeg margin 0 toe

Mooier is om al die absolute en transform zooi van die h2 af te halen en dit op de .h2 (rare class name) te zetten:
.h2 {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

[ Voor 107% gewijzigd door TI_Observer op 27-06-2019 08:31 ]

Ik lieg ALTIJD... zie je dat was weer een leugen!

donderdag 27 juni 2019 08:33

Acties:

0 Henk 'm!

DennisR1998

Topicstarter

Dat ziet er dan inderdaad wat beter uit

. Bedankt!
Nu staat de tekst alleen net iets te hoog. Is hier nog wat aan te doen?
Kan ik ook aanpassen dat de tekst niet automatisch groter word als de resolutie veranderd?

Als ik de h2 class het volgende maak:

.h2 {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

verspringt de tekst weer...
De tekst moet komen te staan tussen 2 regels tekst die standaard op de afbeelding staan.
Dit wil ik werkend hebben voor alle resoluties. Is dat uberhaupt mogelijk?

[ Voor 44% gewijzigd door DennisR1998 op 27-06-2019 08:39 ]

donderdag 27 juni 2019 09:28

Acties:

0 Henk 'm!

The Quizmaster

Om de layout aan te kunnen passen aan verschillende resoluties / devices, zal je media queries nodig hebben.

Bijvoorbeeld:

code:

@media all and (min-width: 500px) {
 .h2 {
   ...
 }
}

Is het niet mogelijk om de regels tekst die op de afbeelding staan ook in je HTML te zetten? Dan heb je veel meer vrijheid met het positioneren ervan.

donderdag 27 juni 2019 09:32

Acties:

0 Henk 'm!

DennisR1998

Topicstarter

Waar zet ik exact het @media in mijn css?
Het is zeker mogelijk om de tekst in mijn html te zetten en van de afbeelding te halen.

Is het dan mogelijk om het juist te positioneren? En moet in het @media ook de background image url staan?

donderdag 27 juni 2019 10:39

Acties:

0 Henk 'm!

DJMaze

Even beginnen bij het begin:

Cascading Stylesheet:

1 2	background: url() no-repeat center center fixed; background-size: 1000px;

Je afbeelding (en pagina!!

) heeft een vaste grootte.
Op een 4K scherm is de afbeelding dus heel klein.
Op een simpele telefoon is de afbeelding dus heel groot (of vanwege je geforceerde pagina maat, niet te lezen zo klein).
En dan maakt het ook nog uit of het apparaat landscape of portrait modus gebruikt.

Hoe ga je een 1000x800 afbeelding plaatsen in een 480x800 scherm?
Welke delen moeten buiten beeld vallen?
Hoe groot ga je de H2 renderen op een klein scherm?
etc. etc.

Ik zou graag meer input van je zien wat nou exact je doel is.

En gebruik de meet unit "vw"

[ Voor 11% gewijzigd door DJMaze op 27-06-2019 10:44 ]

Maak je niet druk, dat doet de compressor maar

donderdag 27 juni 2019 10:47

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Webdevelopment

DJMaze schreef op donderdag 27 juni 2019 @ 10:39:
Ik zou graag meer input van je zien wat nou exact je doel is.

Nog liever zie ik dat @DennisR1998 een nieuw topic opent per onze Quickstart waarbij code tags worden gebruikt voor code en waarbij en boel meer eigen inzet getoond wordt. En een topictitel gekozen wordt die de lading een beetje dekt; deze titel kun je natuurlijk zo'n beetje op elk topic in Webdesign, Markup & Clientside Scripting plakken. Zie tenslotte ook: Kan iemand even...?

[ Voor 7% gewijzigd door RobIII op 27-06-2019 10:48 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Onderwerpen

Vraag

Alle reacties