Du må være registrert og logget inn for å kunne legge ut innlegg på freak.no
X
LOGG INN
... eller du kan registrere deg nå
Dette nettstedet er avhengig av annonseinntekter for å holde driften og videre utvikling igang. Vi liker ikke reklame heller, men alternativene er ikke mange. Vær snill å vurder å slå av annonseblokkering, eller å abonnere på en reklamefri utgave av nettstedet.
AbonnerSkjul
Host1.no - Webhotell fra 29,-, virtuell server fra 249,-. 15% rabatt med rabattkode "nFF". Besøk oss på Host1.no!
  5 5811
lroedal
919 121
10. mars 2017
Hjelper noen å fikse på en nettside nå, men har satt meg litt fast på de siste endringene. Den er laget i Wordpress, og bruker en endret utgave av Twentyfourteen. Alt jeg har forsøkt så langt gir ringvirkninger. Det jeg har igjen å endre er;
  • Få de lyseblåe sidebarene like store på hver side av hovedinnholdet. Har blant annet forsøkt å endre på #secondary, men uten effekt, sikkert da den ikke har innhold.
  • Justere logoen slik at denne samsvarer med dem hvite bakgrunnen til hovedinnholdet. Blir det korrekt å bruke background-position, så justere antall piksler ut fra @media?
  • Prøver også å justere headeren til å bli litt større, men da kommer det hvite fra bakgrunnen opp på høyresiden av headeren, i tillegg til at menylenkene ender i toppen. Forsøkte å justere de ned uten hell.

Siden ligger på http://centromariposa.no - setter pris på hjelp.
Viva la Opium
jamen yolo da.
Viva la Opium's Avatar
2.151 1.370
10. mars 2017

Kode

.site {
	max-width: 80%;
	margin-left: 10%;
}

.site-header {
	background-position: 0;
	height: xxx; /* Da kan du justere høyden her */
}

.header-main {
	padding-right: 11%;
	margin-top: xxx; /* Og justere innholdet i headeren til å passe den nye høyden her */
}

.content-area {
	margin-top: xxx; /* Hvis du vil justere margen som blir «stjålet» fra headeren */
}

#content {
	margin-left: 0;
}

.main-content {
	width: 100%;
}

#secondary, .site:before {
	display: none;
}
Skjermbilde:



Dette gjør at det hvite blir 80% bredt, med 10% på hver side, og logoen følger venstresiden av det hvite feltet. Har ikke testet supernøye, men trooor det skal funke. Juster xxx-ene for å få riktig høyde på headeren.

Edit: Ser at logoen og menyelementene går i hverandre på mindre skjermstørrelser med denne løsningen, men da kan du ev. aktivere menyknappen på et tidligere tidspunkt e.l.? Må nok også justere litt marger/paddinger på innholdet.
Sist endret av Viva la Opium; 10. mars 2017 kl. 14:22.
lroedal
Trådstarter
919 121
11. mars 2017
Tusen takk! I ettertid ser jeg at jeg burde tenkt på at jeg bare kunne deaktivert #secondary. :P Igjen, tusen takk! Da får jeg nok ordnet i løpet av kvelden!

Har endret og justert nå, og det meste ser veldig bra ut! Lurer på en ting til - hvordan får jeg aktivert "mobilvisning" litt tidligere (litt høyere oppløsning)? Sidebaren blir svært slank før den legger seg under hovedinnholdet, så det hadde vært like greit å få lagt den under på et tidligere tidspunkt. Om "mobilmeny" aktiveres i samme slengen er det kanskje like greit. Kopierte den nåværende CSS-filen hit: http://pastebin.com/u4gmP2VP

Fant en annen løsning jeg likte bedre, men som ikke fungerte helt i praksis Toppen ser slik ut nå:

http://i.imgur.com/oOnZspQ.png

Med andre ord "spiser logoen opp" menyen. Jeg endret litt på padding og margin på ".primary-navigation .nav-menu" i Inspiser-konsollen, og endet opp med dette:

http://i.imgur.com/16aYux1.png

Problemet er at disse endringene ikke gjenspeiles likt når jeg faktisk legger de inn i CSS-filen - da blir resultatet slik:

http://i.imgur.com/PBJwokE.png

Og det er jo ikke noe fint. Noen som har forslag til hvordan jeg kan fikse dette?
Sist endret av lroedal; 11. mars 2017 kl. 16:18. Grunn: Automatisk sammenslåing med etterfølgende innlegg.
Yochi
Yochi's Avatar
1.017 228
12. mars 2017
TwentyFourteen trigger endel endringer fra functions.js: https://github.com/WordPress/WordPre...nctions.js#L96, ca rundt linje 96 og nedover.

Du kan eventuelt endre litt på verdiene der og se om det hjelper.
lroedal
Trådstarter
919 121
13. mars 2017
Takk for svar! Ser at det kan endres når menyen slår inn under linje 130. Jeg fikk forøvrig fikset det i går kveld - endret hvor jeg la logoen, gjorde noen endringer i header.php samt justerte litt på marginer. Da ble det gull.

Har nå en siste ting jeg sliter med å gjøre responsiv. Har tre "bokser" som skal ha nyheter i seg, og skal se slik ut:
http://i.imgur.com/yFU9RgH.png

Problemet er på mindre skjermer:
http://i.imgur.com/PKaT3S8.png

Ikke helt bra på "mobil" heller:
http://i.imgur.com/WYaWajB.png

Er det noen enklere måte å få teksten til å skalere på enn å skrive mange @media-queries? Prøvde meg på å bruke vw, men problemet er at boksene er langt mindre enn bodyen - så det blir ikke bra heller, siden den da skalerer OK på desktop men blir uleselig på telefon.

Jeg endte med å lage flere media-queries... :P Nå ser det ok ut, men tar gjerne i mot tips om det skulle vært en enklere måte!
Sist endret av lroedal; 13. mars 2017 kl. 00:40. Grunn: Automatisk sammenslåing med etterfølgende innlegg.
▼ ... noen uker senere ... ▼
lroedal
Trådstarter
919 121
31. mars 2017
Da er siden i mål, og ser bra ut i alle moderne nettlesere. Tar gjerne i mot tips til hvordan jeg kan forbedre CSS-koden slik at den fungerer bedre i eldre nettlesere også.