CSS veranderen maten header

Status
Niet open voor verdere reacties.

femke98

Meubilair
Lid geworden
16 dec 2006
Berichten
6.660
Ik heb een website gemaakt (met een theme die gratis gebruikt mag worden), maar ik vind de bovenkant te hoog/te grot.

Hier de CSS, maar ik kan niet zo goed vinden waar ik het allemaal een beetje in elkaar kan laten vouwen, zeg maar.

HTML:
/* Wrapper */

	#wrapper {
		max-width: 68em;
		width: 100%;
		margin: 0 auto;
		padding: 0 2em;
		opacity: 1;
		filter: none;
		-moz-transition: opacity 1s ease, -moz-filter 1s ease;
		-webkit-transition: opacity 1s ease, -webkit-filter 1s ease;
		-ms-transition: opacity 1s ease, -ms-filter 1s ease;
		transition: opacity 1s ease, filter 1s ease;
	}

	body.is-loading #wrapper {
		opacity: 0;
		-moz-filter: blur(1px);
		-webkit-filter: blur(1px);
		-ms-filter: blur(1px);
		filter: blur(1px);
	}

	body.is-covered #wrapper {
		-moz-filter: blur(3px);
		-webkit-filter: blur(3px);
		-ms-filter: blur(3px);
		filter: blur(3px);
	}

/* Header */

	#header {
		text-align: center;
		padding: 6em 0 4em 0;
	}

		#header h1 {
			color: rgba(255, 255, 255, 0.65);
		}

		#header .avatar {
			border-radius: 100%;
			display: inline-block;
			margin: 0 0 2em 0;
			padding: 0.5em;
			border: solid 1px rgba(255, 255, 255, 0.25);
			background-color: rgba(255, 255, 255, 0.075);
		}

			#header .avatar img {
				border-radius: 100%;
				display: block;
				width: 10em;
			}

		@media screen and (max-width: 1280px) {

			#header {
				padding: 4em 0 2em 0;
			}

		}

Kan iemand mij wegwijs maken hoe dat moet? Het gaat om deze website: https://angelavanderploeg.nl/
 
Ben je bekend met de Element Inspector (Element Inspecteren) van je browser? Daarmee kan je precies zien welke CSS-stijlen er aan een HTML-element hangen, en kan je er lokaal mee spelen.
 
Het gaat om deze html en bijbehorende css. Met de waardes kan je wat spelen (groter/kleiner)
Code:
<div id="wrapper">
    <header id="header">
        <span class="avatar"><img src="images/avatar.jpg" alt="" /></span>
        <h1>Op deze pagina kan uw website staan.</h1>

[B]CSS[/B]

/* ruimte boven/onder header */
#header {
    padding: 2em 0 1em 0;
}
/* ruimte boven koptekst */
#header h1 {
    margin-top: 0em;
}
/* ruimte onder avatar */
#header .avatar {
    margin: 0 0 1em 0;
}
/* schermbreedte kleiner dan 1280px */
@media screen and (max-width: 1280px) {
    #header {
        padding: 2em 0 1em 0;
    }
}
Suc6. Have fun.
 
Hoi bron,
Wat erg, was deze helemaal vergeten!! Had ook andere prioriteiten.
Ik ga er van de week mee stoeien, bedankt zover.

Uiteraard laat ik het weten of het gelukt is hoe ik het graag zou willen zien.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan