img klas beweegt helemaal niet er staat lege ruimte tussen 2 klassen?

(@johannes999)

Hallo,

Ik heb dit probleem. Ik ben 2 dagen bezig om het op te lossen, maar het lukte niet

wanneer je naar een resolutie gaat tussen (min-width: 1024px) en (max-width: 1619.999px) is er helemaal geen probleem bij mij website.

maar als je op de startpagina naar resolutie max-width 439.999px gaat, is er ook geen probleem.

maar als je naar onderhoud of banden pagina ’s gaat zie je een gat tussen de box class en de header image class .

Ik kan dit gat niet dichten. Ik heb elke tekst in de koptekst uitgeschakeld om te zien of het probleem daar zit! maar het probleem bestaat nog steeds.

Ik heb een nieuw thema gedownload en ik heb er vanaf het begin alles aan gedaan om er zeker van te zijn dat het probleem niet door het thema komt. Maar het probleem komt niet door het thema.

Ik begrijp niet waar dit het probleem kan zijn?

je moet op mijn website naar andere pagina’s gaan dan de startpagina en het inspecteerelement openen in een resolutie van 280 en 420 px en je zult de kloof zien tussen de box klasse en de header afbeelding klasse.

eigenlijk ik gebruik minus teken om de header op goede positie te hebben terwijl het hoort om margin-top:0 zijn.

hier is mij header CSS CODE:

.container1 .first-header {
		width:100%;
	height:65px;
		background:#45accb;	
		border:0.01px solid #45accb;
	display:flex;
	flex-direction:column;
	margin-top:-8.5rem;	
	}

deze is HTML CODE in onderhoud page php

<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="https://gmpg.org/xfn/11">

	<?php wp_head(); ?>
</head>
    

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
	
<div id="page" class="site">
	<a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', 'auto-repair' ); ?></a>

	<header id="masthead">


	<div class="container1">
	

		<div class="first-header">
			
	
		

		<!--	<div class="info">	Vooraf Prijs opgave </div>  -->
			
		
			
		
		
		<div class="sub-first-header">
			
		
		
		<div class="figure1"> 	
  <div class="menu">           
	  
	<span></span> 
	  <span></span>
	  <span></span>  
	  
	 </div>
		
	<div class="title">
<div class="span1"> HAXXXX </div>
		 <div class="span2">  ALP </div>
		 <div class="span3"> Svakion </div>
			</div>
		
		<div class="menu-bar">
 
    <ul>
      <li><a href="https://webdesignleren.com/" class="menu-link">Home</a></li>
		<li><a href="https://webdesignleren.com/onderhoud/" class="menu-link">onderhoud</a></li>
		<li><a href="https://webdesignleren.com/banden/" class="menu-link">banden</a></li>
		<li><a href="https://webdesignleren.com/apk/" class="menu-link">apk</a></li>
      <li><a href="https://webdesignleren.com/contact/" class="menu-link">Contact</a></li>
    </ul>
			
  </div>
			
      
		
		</div>
		
		
	<!--	
         
		<div class="tekst2">Klanten Beoordeling 9.2/10</div>
		<div class="tekst3">Vooraf prijs opgave</div>      ----->
			
			
			</div> 
		
		<div class="menu-title"> Menu </div>
		
		
		</div>
			
			
	
			 
		
		  <div class="second-header">
			  <!--  <div class="info2">	Hello </div>  --->
			  
			  <div class="sub-second-header">
			 
       <div class="description">
		  
          Tientallen jaren ervaring
		 
			  </div>	  
		                      
		
		<div class="description2">Auto Reparatie & APK Service</div>
		<div class="description3">hello</div>
			  
		</div>
		
				</div>	 </div>	
		
		<div class="onderhoud-image">
		
			<img     src="https://webdesignleren.com/wp-content/uploads/2023/03/auto-image-for-onderhoud-page-1920-1080.jpg" style="width: 100%"   height="auto"   />
		

          <div id="animation-tekst">
			  
			
    <div class="p p1">quick auto service <br>
					quick auto service</div>
			  
    <div class="p p2">quick auto service<br>
					quick auto service</div>
			  
    <div class="p p3">
      quick auto service <br>
	  quick auto service
      <div class="cursor"></div>
    
			  </div>
			  
			</div>	<!----id-->	
			
			</div>

u ziet dat ik gebruik voor first-header minus teken terwijl het moet 0px zijn .

mij vraag is :

1-wat het kan de oorzaak zijn dat ik voor de first-header minus teken gebruikt terwijl het moet margin-top :0 zijn ?

2-onder resolutie 440px hoe komt dat die lege ruimte bestaan tussen onderhoud-image en second-header klas ?

hoe ik dit probleem kan oplossen?

ik gebruik underscores_me thema zou deze thema de oorzaak zijn voor deze probleem?

als ja welke gratis thema is het beste om te gebruiken?.

dank u wel

De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

9 reacties aan het bekijken - 1 tot 9 (van in totaal 9)

Guido
(@guido07111975)

1 jaar geleden
Hallo,

Dit ziet er vrij complex uit. Wel zie ik dat je een media query gebruikt voor laptop:
```
/* laptop  */
@media (min-width: 1024px) and (max-width: 1619.999px) { 	
```
Als je scherm groter is dan 1619.999 pixels vervalt al die CSS. Volgens mij is dat niet jouw bedoeling in dit geval. Dus je zou dit eens kunnen verwijderen:
```
and (max-width: 1619.999px)
```
Guido
Thread starter johannes999
(@johannes999)

1 jaar geleden
dank u wel ,

ik heb de probleem opgelost dankzij chatbox .

ik heb in de header 2 containers die moet fixed zijn . eerste container heeft 3 rijen. tweede container heeft 2 rijen .

eerste container heeft in eerste rij 1 kolom in de eind.

2-e rij heeft 3 kolommen.

derde rij heeft 1 kolom in het begin. (dat is de Menu naam onder hamburger-menu)

hetzelfde is voor tweede container . eerste rij heeft 1 kolom in de eind en tweede rij heeft 3 kolommen.

de probleem was wanneer ik margin-top gebruikte voor iedere container met flex en (position: fixed )

het 2 containers gingen paar rem naar beneden in fixed positie. er was blanke ruimte.

ik moest eigenlijk niet margin-top gebruiken maar alleen voor eerste container :
```
.container {
 top:0;
   z-index:9999;
 position:fixed; 
                }
```
en voor tweede container:
```
.container2 {
top:10.5%;
 z-index:1;
 position:fixed;
                  } 
```
op deze manier de probleem is opgelost.

u kunt nu naar mij website gaan en zien hoe ik heb het probleem opgelost. ik zoude nooit kunnen denken dat er is verschill tussen margin-top

en ( top ) hetzelfde voor ( % )in plaats van rem.

wat betreft de resolutie dat is op dit moment gebaseerd op mij laptop resolutie.

ik moet ongeveer tussen 6-8 resoluties maken omdat ik heb gezien dat paar resoluties 2 voor mobile 1 voor tablet ,ipad 2 voor laptop,desktop zijn niet voldoende voor mij design .

ik heb gezien van grote bekende bedrijven in Nederland zijn websites afwijkt soms in bepaalde resolutie. ik heb grote screen en gebruikt firefox en chrome samen.

ik was bijna klaar met deze website en iedere keer dat ik probeer af maken er komt een probleem .

ik heb mij eigen code voor menu en slider . ik heb voor het contact-form via inspect element in chrome style veranderd.

langzamer ik begin te leren. special werken met flex.

ik denk wanneer ik ben klaar met deze website ik ga Elementor pro gebruiken het maakt mij leven stukje makkelijker.

ik weet niet of het mag te zeggen wat betreft chat GPT kan iemand veel leren wat betreft CSS tricks , HTML, JS,PHP.

hartelijke bedankt voor u aandacht
Guido
(@guido07111975)

1 jaar geleden

ik denk wanneer ik ben klaar met deze website ik ga Elementor pro gebruiken het maakt mij leven stukje makkelijker.

Als je eigen CSS gebruikt moet je ook rekening houden met verschillende schermgroottes en dat maakt het extra lastig. En dan is een paginabouwer plugin handiger inderdaad. Maar zo’n plugin is echt niet nodig als je een eenvoudige site hebt of wilt, want dan volstaat de standaard blokeditor.

Guido

Thread starter johannes999
(@johannes999)

1 jaar geleden

dank u wel voor u advies.

johannes

Thread starter johannes999
(@johannes999)

1 jaar geleden

hallo iedereen,

ik kom met een kleine probleem container 2 heeft (top 10.5%) op normale resolutie ik heb ook expres zo gelaten onder resolutie max 439.999px .

maar er is verschil tussen Chrome en Firfox .

op normale resolutie er is geen enkele probleem maar onder 440px er wordt container2 misvormd dus ik kan hetzelfde waarde niet gebruiken voor 2 browsers . ik weet het niet of tag (top) is het probleem?

wat kan het oorzaak zijn en hoe ik kan deze probleem oplossen?

my url is :https://webdesignleren.com/

u moet in firefox en chrome onder 440px gaan om het verschil te zien.

dank u wel iedereen

Thread starter johannes999
(@johannes999)

1 jaar geleden

ik heb gelezen over css reset en normalize css ik ga morgen deze 2 opties proberen om te zien de probleem wordt opgelost.

dank u wel
Thread starter johannes999
(@johannes999)

1 jaar geleden
alle mobiele media queries was fout .

ik heb eindelijk opgelost met deze code:
```
.flex-container {
	width:100vw;
	max-width:100%;
   height: 150px;
  position: fixed;
  top:0;
  left: 0;  
	z-index:9999;
	display:flex;
	flex-direction:column;
background-size:cover;
}

	.row1 {
		
    width:100vw;
	max-width:100%;
	height:50%;
	background:yellowgreen;
	border:0.1px solid yellowgreen;		
background-size:cover;
	}	

	.row2{
border:0.1px solid red;
	width:100vw;
	max-width:100%;
	height:50%;
	background:blueviolet;	
	background-size:cover;
	} 
```
ik ben eindelijk opgelucht als amateur.

ik hoop eindelijk ik deze mij eerste website klaar maakt binnen paar dagen.

het meeste problemen zijn opgelost en ik heb geleerd ervan . maar volgende keer ik ga visual pakken en kijken wat ik leer ervan.

dank u wel
Guido
(@guido07111975)

1 jaar geleden

ik heb gelezen over css reset en normalize css ik ga morgen deze 2 opties proberen om te zien de probleem wordt opgelost.

De CSS reset moet je bovenaan je stylesheet zetten want dat reset de (eventuele) styling van je browser. Je begint dan als het ware op nul. Een bekende is deze. Elk thema heeft dit al dus jij hoeft daar niets mee te doen.

Maar installeer maar eens een thema zoals GeneratePress en bouw een site met de standaard blokeditor. Gaat vast veel sneller.

Guido

Thread starter johannes999
(@johannes999)

1 jaar geleden

dank u wel voor u advies,

ik heb u antwoord net gezien

.

9 reacties aan het bekijken - 1 tot 9 (van in totaal 9)

Het onderwerp ‘img klas beweegt helemaal niet er staat lege ruimte tussen 2 klassen?’ is gesloten voor nieuwe reacties.

img klas beweegt helemaal niet er staat lege ruimte tussen 2 klassen?

Onderwerptags

Weergaven