Archief - Menu naast gecentreerd logo plaatsen?

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
K

KingOfWoods

Legacy Member
Hallo allemaal.

Ik heb volgende code:

HTML: 
<header id="header" class="mainWidth">
		<div>
			<img src="images/Logo.svg" class="logo" alt="logo"/>
			<div id="mainNav">
				<ul>
					<li class="selected"><a href="index.html">Home</a></li>
					<li><a href="article.html">Verkoop</a></li>
					<li><a href="gallery.html">Verhuur</a></li>
					<li><a href="profile.html">Contact</a></li>
					<li><a href="extra.html">Magazijn</a></li>
				</ul>
			</div>
		</div>
	</header>

en dit logo heb ik centraal in de div staan volgens volgende manier:
HTML: 
#header
{
	height: 300px;
	margin: 0 auto;
}

.logo 
{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

Nu wil ik het menu dus naast dat logo krijgen, maar het logo moet wel in het midden van de pagina blijven staan. Weet iemand hoe ik dit kan fixen.
Als ik met positioneringen en marge's begin te koefelen, dan trekt het op niks meer vanaf ik mijn scherm kleiner of groter maak.

thx
C

CrushTheButton

Legacy Member
Heb je een live voorbeeld?

Als ik op je tekst af ga kan je volgende code eens proberen.

#header {
.... ( wat er al staat)
position: relative;
}

.logo {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
K

KingOfWoods

Legacy Member
hey bedankt voor het antwoord. Dit lost het niet op. Mijn logo blijft wel in het midden staan, maar het menu steekt gans links. Als ik het ga positioneren via left: 60% bv dan verdwijnt het eens ik mijn scherm kleiner als 50% maak :)
Is er een mogelijkheid om dit dan naar onder te schuiven? Ik heb eens gekeken naar http://responsivemobilemenu.com/en/ wat mss een oplossing kan bieden, maar ik vroeg mij af of het niet eenvoudig in css te doen kon worden ipv weer enkele libaries te moeten inladen.

Live voorbeeld
C

CrushTheButton

Legacy Member
Streaker zei:
hey bedankt voor het antwoord. Dit lost het niet op. Mijn logo blijft wel in het midden staan, maar het menu steekt gans links. Als ik het ga positioneren via left: 60% bv dan verdwijnt het eens ik mijn scherm kleiner als 50% maak :)
Is er een mogelijkheid om dit dan naar onder te schuiven? Ik heb eens gekeken naar Responsive Mobile Menu wat mss een oplossing kan bieden, maar ik vroeg mij af of het niet eenvoudig in css te doen kon worden ipv weer enkele libaries te moeten inladen.

Live voorbeeld
Klik om te vergroten...

Waar moet het menu dan precies staan? Moet dit gecentreerd worden?
K

KingOfWoods

Legacy Member
Het is de bedoeling dat dat menu inderdaad naast de ballen van het logo komen te staan. Dus er niet over zoals zou gebeuren als ik het centreer., maar aan de rechterkant ervan
C

CrushTheButton

Legacy Member
Probeer dit dan eens.

#header {
.... ( wat er al staat)
position: relative;
}

nav (of hoe die ook heet) {
position: absolute;
top: ...px; (bepaal hoeveel px vanaf boven)
right: ...px; (hoeveel px vanaf rechts)
}
K

KingOfWoods

Legacy Member
CrushTheButton zei:
Probeer dit dan eens.

#header {
.... ( wat er al staat)
position: relative;
}

nav (of hoe die ook heet) {
position: absolute;
top: ...px; (bepaal hoeveel px vanaf boven)
right: ...px; (hoeveel px vanaf rechts)
}
Klik om te vergroten...

Mja had k al geprobeerd. alles lukt tot ik mijn scherm kleiner maak. dan verdwijnt het menu. ben nu bezig aan het spelen met dat mobile menu. merci toch al-.
C

CrushTheButton

Legacy Member
Streaker zei:
Mja had k al geprobeerd. alles lukt tot ik mijn scherm kleiner maak. dan verdwijnt het menu. ben nu bezig aan het spelen met dat mobile menu. merci toch al-.
Klik om te vergroten...

Je zou ook een float voor je menu kunnen gebruiken. En je kan ook met media queries werken voor de scherm groottes.
K

KingOfWoods

Legacy Member
Thx. Ga het inderdaad met media queries moeten oplossen. IS wat extra werk, maar het krijgt de job wel gedaan.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan