Probleem met header voor responsive site

[CarlaBrand]

Wij hebben een bestaande template gekocht die ik zelf aan het aanpassen ben. Ik doe dat in Expression web. Deze template heeft ook een responsive gedeelte. Als ik onze site www.2bsure.nl op mijn telefoon open zie je in de header dat het adres/telefoongedeelte naast het logo blijft staan. Ik zou willen dat dit op de mobiele telefoon onder het logo komt boven de 'search' functie. Ik heb al geprobeerd om het in een -div- te zetten maar dan vervormt de header op mijn PC weer. Heeft iemand voor mij een oplossing?

 

[Jedi]

Je kunt aangeven dat als de site op een mobiel wordt weergegeven, er andere code moet komen te staan.
Dus een soort van if then.

 

[martijn12321]

Wat een vage code zeg haha
Het is nogal ingewikkeld omdat je vanalles in style='' hebt staan ipv in je stylesheet. Maar na even puzzelen is de oplossing heel simpel: zorg dat bij het kleine scherm het divje met id 'layer1' GEEN position: absolute heeft, maar gewoon static. Ik neem aan dat je weet hoe dat moet met css hè?

 

[Jedi]

Toch wel fijn dat je een beginneling zo goed helpt. Aan jouw opmerking heeft hij echt wat.

 

[CarlaBrand]

Bedankt voor jullie reacties, ik ga het proberen!

 

[martijn12321]

@Jedi is dat sarcastisch?

 

[CarlaBrand]

Ik ben er nog niet uit. Als ik van het adresblok een static layer maak komt hij inde responsive site inderdaad onder mijn logo maar ook op mijn scherm van mijn PC.

Ik heb niet zoveel verstand van html -taal dat ik daar zelf een if, then verhaal van kan maken.

Ik ga nu proberen om van logo en adresgegevens samen één png te maken ipv alleen het logo.

Als er nog tips zijn hou ik me aanbevolen.

 

[martijn12321]

Trek je maar niet teveel aan van Jedi, if/then kan sws niet in html en css
Ik snap het probleem niet? Moet die op de normalesite er wel naast staan en op de mobile niet?
Wat je nu doet is een oplossing, maar niet handig ivm kopieeren/plakken en laadtijd.
(en heb je nou al ervaring met responsive sites in css?)

 

[Maastricht]

Even 10 minuten vrij tussen opdrachten door en zag deze vraag staan.

Dit is niet de mooiste oplossing maar hij is wel makkelijk te implementeren en hij werkt.

Voeg de volgende code toe onder aan je style.css bestand:

@media only screen and (max-width: 767px) {
header .main #layer1 {
	position:inherit !important;
	float:left;
	margin-top:15px;
	left:0 !important;
}
}

 

[Jedi]

Nou, precies wat ik zei:

Je kunt aangeven dat als de site op een mobiel wordt weergegeven, er andere code moet komen te staan.
Dus een soort van if then.

 

[martijn12321]

@jedi uberhaubt al eens met css gewerkt? Ooit al eens een if erin tegen gekomen? En normaal erger ik me niet zo aan mensen zoals jij, maar als je commentaar op mij levert kun je het terug verwachten.
En als Carla het niet snapt kan ze dat zelf vragen. Aangezien haar site al responsive is ging ik er vanuit dat ze kan werken met media queries in css. Ik ga geen hele uitleg typen als de persoon het waarschijnlijk toch al kan en anders kan vragen.

 

[CarlaBrand]

Ik heb het stukje in de css gezet en hij doet het! Hartstikke bedankt voor jullie hulp.

 

[Jedi]

En wat doet dat stukje code ?
Als je schermbreedte kleiner is dan 767 pixels dan
In het Engels: if then
Maar goed, martijn weet het beter........

 

[martijn12321]

Zie jij het woord if erin staan?
Ja, het klopt inderdaad, het is een soort if, maar daar heeft zei niks aan. Dan heeft ze aan mijn reactie meer. En zoals ik al zei, dat kan, jij doet ook je best, maar je hoeft dan geen commentaar op mij te leveren als jij nóg minder toe voegt.
Het heet een media query. Google it.