Website beeldvullende banner aangepaste positie

[damnsharp]

Hoi,
Ik wil weer een 1-pagina website bouwen maar loop bij deze site tegen wat css problemen aan. Althans, ik heb een oplossing ervoor maar volgens mij doe ik het niet op een correcte manier.

Test website link

De groene balk moet precies de hoogte van tekst Menu2 zijn. Straks wordt de website een WordPress site en dan kan de tekst meer en minder worden.
Ik moet nu puzzelen met pixels om de positie van de groene balk nu aan te passen. Kan het zo dat de positie op dezelfde plek als de tekst blijft staan en dat de hoogte zich aanpast aan de hoeveelheid tekst?

Even uitleg structuur.
De wrapper-content is 100%. Daaronder hangt content-top, banner en content. In de content div komt dus de tekst (later WordPress PHP loop).

 

[damnsharp]

Oh aanvulling, als ik een div om de tekst heen zet kan ik er qua kleur zijn maar dan nog niet qua breedte omdat de tekst in de content div valt die specifieke breedte heeft. Of daar moet een trucje voor zijn Ik kan hem gaan uittrekken width 100% en met margin-left -50% of zo... heb dat bij menu4 geprobeerd met een banner-inside class.

 

[bron]

Hoi damnsharp

Ik heb wat overbodige code uit de html en css gehaald om te kijken waar het probleem zit.
In de bijlage vind je de bestanden. De js, html en css heb ik aangepast.
Misschien kun je er iets mee.

Suc6.

 

[bron]

Je andere vraag heb ik ergens eerder gemaakt.
Centreren van bijvoorbeeld ul in een div

<div id="menu">
  <ul>
    <li><a href="#">Linkje</a></li>
    <li><a href="#">Linkje</a></li>
    <li><a href="#">Linkje</a></li>
  </ul>
</div>

#menu {
  width: 100%;
  height: 3em;
  text-align: center;
  background: #bbb;
}

#menu ul, #menu li {
  float: left;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#menu ul {
  left: 50%;
  top: 0;
  text-align: center;
  position: relative;
}

#menu li {
  width: auto;
  height: 3em;
  right: 50%;
  display: block;
  position: relative;
}

#menu li:hover {
  background: #ccc;
}

#menu a {
  display: block;
  font: 1em verdana,arial,sans-serif;
  line-height: 1em;
  padding: 1em;
  text-decoration: none;
}

**edit: klein beetje styling toegevoegd

 

[damnsharp]

@bron, dank je wel! Ik ga er meteen mee aan de slag en kom er straks op terug.

 

[damnsharp]

@bron, Ah ik snap nu hoe je het hebt gedaan. De div menu1 bijvoorbeeld krijgt een class van left en die krijgt eventueel een kleur mee en wordt beeldvullend. En omdat je met met div class daaronder van inner-content werkt dan kan je daarmee de positie bepalen van de content die daartussen staat. Klopt toch?
Ik dacht toen ik het eerst zag, ik zal die inner-content class bij die div zetten maar dat gaat natuurlijk niet goed vanwege grootte conflict lijkt mij (id = 100% en inner-content is 980px)

Enne... die styling is goed hoor, netjes gemaakt en mooi om te zien, is consequentere code dat valt op.

Dat centreren van het menu ga ik nu bekijken.

 

[bron]

Top dat je ermee verder kunt.

Inderdaad is id="home,menu2,menu3,menu4" (buitense div) nodig om de kleur schermbreed te maken.
En class="inner-content" is nodig voor de breedte van de content.

Het is voor mij gewoonte geworden om in de css de volgorde aan te houden
. css reset
. css opmaak voor gewone html tags
. structure html/css
. dan per onderdeel de html/css

Met andere woorden... je was echt goed bezig :thumb:

Enne... de layout van de css heb ik mooi gemaakt met een tooltje, niet handmatig hoor

*** edit - in .js heb ik uitgerekend: div_offset - nav_height (zodat de scroll goed gaat)

 

[damnsharp]

Dank je @bron voor snelle reactie! :thumb: En bedankt voor je compliment
Ik wilde je net al vragen: ik heb e.e.a. aangepast bij mijn eigen code maar wat er nu niet goed gaat is dat bij klikken op een menu item de tekst teveel onder menu gaat in plaats van bij jou netjes tegen het menu aan. Dit kan ik oplossen om de padding bij #home, #menu2, #menu3, #menu4 te vergroten maar dan wordt het gekleurde blok ook groter. Ik zie niet hoe jij dat hebt gedaan (ondanks Firebug...).
Maar nu zie ik je reactie en je hebt wat in .js aangepast dus, begrijp ik dat goed?

 

[bron]

Yep, de aanpassing was nodig voor een goede animatie.

Het beste kun je in de nieuwe html/css onderdeel voor onderdeel toevoegen en dan telkens tussendoor testen.

 

[damnsharp]

Bron, kan het ook in CSS ipv het aanpassen in de .js code? Zou toch kunnen werken als ik margin/padding op een andere manier toepas?

 

[bron]

Daar heb ik in eerste instantie naar gekeken. Wat in css opgelost kan worden heeft mijn voorkeur.

In dit geval heb je het probleem dat de content tot bovenaan het venster loopt. De navbar ligt hier bovenop. Dit kun je zien door tijdelijk even de navbar uit je html te halen. De hoogte van je navbar is namelijk precies de ruimte waar je het over hebt.
Er zullen waarschijnlijk wel trucs zijn om het voor elkaar te krijgen maar als je dan over 3 maanden iets moet veranderen snap je er nix meer van (het nadeel van slimme trucs). Ik denk dat dit de netste oplossing is in deze opzet.

*** edit - je kunt de performance van je pagina verbeteren met de jquery van de google site

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

 

[damnsharp]

Helder bron, houden we het toch zo?! Oh, er komt nu achter de link #[object Object] te staan in browser window. Waarom is dat?

 

[bron]

Ik heb hierboven net even de script regel in "..../1.8.2/jquery.min.js" veranderd omdat hierin de animatie goed werkt.

*** edit - deze regel uiteraard in plaats van je huidige jquery.js regel.

 

[damnsharp]

Bron, inderdaad nu laad de site sneller, had ik niet verwacht, mooi.
Weet je hoe/wat met dat [object] tekst?

Andere vraag, ik heb de content-top waar het plaatje in aangeroepen wordt width van 100% gegeven en nu veranderd naar max-width van 100% want wil dat als scherm kleiner wordt het plaatje krimpt. Dat ga ik later met adaptive images script doen.
Maar, het plaatje wordt niet kleiner als ik het scherm kleiner maak. Snap het niet.

#content-top {
		background: url("images/top-image.jpg");
		max-width: 100%;
		min-height: 750px;
}

 

[bron]

De oorzaak van [object Object] zit in core.js op regel: $target = $(target)
Dit is een object dat verderop wordt gebruikt in: window.location.hash = $target
maar dat mag niet. Heb je de originele core.js nog zodat ik daarin kan kijken?

 

[damnsharp]

Natuurlijk, hier komt ie:
Bekijk bijlage core.zip

Weet je hoe/wat ivm dat plaatje en resizen bij kleiner maken browservenster? Volgens mij houdt een div of zo hem op de grootte vast maar kan het niet vinden.

 

[bron]

Heel simpel
een img in de html kun je resizen, een css2 background:url(".......") niet.

*** edit - in css3 kun je cover gebruiken (nog aanpassen aan je pagina).

  background: url("....") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

cover:
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.

contain:
Scale the image to the largest size such that both its width and its height can fit inside the content area.

Voorbeelden op http://www.css3.info/preview/background-size/

 

[bron]

De oorzaak van de foutmelding [object] is er uit. De laatste opdracht (function) wordt 2 keer uitgevoerd, namelijk voor html en voor body, maar daar heb je nu geen last van. Zo zou het moeten werken.

$(document).ready(function() {
	$('a[href^="#"]').on('click',function (event) {
		event.preventDefault();
		var target = this.hash,
		$target = $(target);
		$('html, body').stop().animate(
			{scrollTop: $target.offset().top - $("#navbar").height()},
			900,
			'swing',
			function(){ }
		);
	});
});

*** Edit: een deel van de aanpassing eruit gehaald omdat window.location.hash=target de pagina (na de animatie) omhoog trekt. Nadeel (of voordeel) is nu dat in de url geen # meer staat.