<nav> inne i <form> ? Krise?

[Mr.Postman]

Hei

 

Jeg holder på å lage en meny til nettsiden min. Der jeg har en logo, søkefelt, og en navigasjonsmeny.

 

Ville ha alt samlet i en div, men ettersom jeg legger til flere så blir den "nye" parent osv...

 

Tingen er at jeg har

<form action="" class="uiSearch">
	 <input type="search" name="googlesearch" placeholder="#" class="searchBox" /><input type="submit" value="search" class="searchButton" />


	<nav class="uiNav">
	 <a>Hjem</a>
		<a>Bilder</a>
	</nav>
	</form>

 

 

 

Det er vell helt bort i natta å ha et <nav> element i et <form> element? Men med den så fikk jeg layouten 100% som jeg ville og den funket i alle browsere. Hva sier dere?

[agm]

Det vil selvsagt fungere, men semantisk sett bør det være omvendt. Søkefunksjonen er en av måtene du kan navigere på, og blir jo et navigasjonselement (som bør ligge inne i en nav).

 

Hva med å legge inn CSS-verdiene fra uiSearch til uiNav? Det bør være enkelt å fikse.

[Mr.Postman]

Det vil selvsagt fungere, men semantisk sett bør det være omvendt. Søkefunksjonen er en av måtene du kan navigere på, og blir jo et navigasjonselement (som bør ligge inne i en nav).

 

Hva med å legge inn CSS-verdiene fra uiSearch til uiNav? Det bør være enkelt å fikse.

 

Ja, men da kan jeg fjerne &--#60;form&--#62; elementet vell? Dersom jeg tar søkefeltet i &--#60;nav&--#62; elementet.

 

 

Merket nå at det er mest sannsynlig <form> tagg'en som ødelegger alt. Inspirerte i Google Chrome og såg at den har en utrolig stort bredde og høgde.

Endret 18. juli 2012 av Mr.Postman

[Mr.Postman]

Det vil selvsagt fungere, men semantisk sett bør det være omvendt. Søkefunksjonen er en av måtene du kan navigere på, og blir jo et navigasjonselement (som bør ligge inne i en nav).

 

Hva med å legge inn CSS-verdiene fra uiSearch til uiNav? Det bør være enkelt å fikse.

 

Ja, men da kan jeg fjerne <form> taggen vell? Dersom jeg tar søkefeltet i <nav> taggen.

 

 

Merket nå at det er mest sannsynlig <form> tagg'en som ødelegger alt. Inspirerte i Google Chrome og såg at den har en utrolig stort bredde og høgde.

 

Må nesten ha <form> taggen siden det blir mindre CSS for da slipper jeg å plassere både "search" knappen og søkefeltet. Men da kan jeg jo eventuellt bruke en div tag.

[agm]

Merket nå at det er mest sannsynlig <form> tagg'en som ødelegger alt. Inspirerte i Google Chrome og såg at den har en utrolig stort bredde og høgde.

Ja, regner med det. Prøv å legge inn f.eks.

.uiSearch {
   margin: 0;
   padding: 0;
}

[Mr.Postman]

Det vil selvsagt fungere, men semantisk sett bør det være omvendt. Søkefunksjonen er en av måtene du kan navigere på, og blir jo et navigasjonselement (som bør ligge inne i en nav).

 

Hva med å legge inn CSS-verdiene fra uiSearch til uiNav? Det bør være enkelt å fikse.

 

Har nå løst problemet sånn som dette:

 

<nav class="uiNav">
	  <div class="searchHolder">
	 <input type="search" name="googlesearch" placeholder="#" class="searchBox" /><input type="submit" value="search" class="searchButton" />
	    <a>hjem</a>
	    <a>bilder</a>
	    </div>
    </nav>

 

Problemet er at dette blir vell ikkje korrekt HTML5, men jeg lar det stå sånn

[Mr.Postman]

Merket nå at det er mest sannsynlig &--#60;form&--#62; tagg'en som ødelegger alt. Inspirerte i Google Chrome og såg at den har en utrolig stort bredde og høgde.

Ja, regner med det. Prøv å legge inn f.eks.

.uiSearch {
margin: 0;
padding: 0;
}

 

En liten ting til...

 

Hvilket er best å bruke for plassering av forskjellige element.

 

margin

top/right/left/bottom

float:right/left

 

For jeg liker ikke å skrive foreksempel: margin-right: 200px; da jeg føler det blir for voldsomt, selv om det funker

 

og ser ofte de store som Facebook, Twitter osv, bruker float.

(bruker også text-align: center; for enkelte ting)

Endret 18. juli 2012 av Mr.Postman

[agm]

Jeg prøver å holde meg til en kombinasjon av float, margin og padding.

 

Position absolute og relative kombinert med top/right/bottom/left kun når det trengs.

 

 

Kanskje flere folk med gode tips her?

[Cerandin]

Sier meg enig med agm her, float margin og padding er kombinasjonen for å posisjonere menyelementer. Position taggen bruker jeg kun når jeg ikke får det til med float, margin eller padding. Div tags og klasser bruker jeg for det meste, og aldri <form> eller lignende med mindre det skal være en form.