Breedte website aanpassen naar schermresolutie

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Senior Front-end Developer

Senior Front-end Developer bij Capgemini Bij Capgemini bouwen we niet zomaar webapplicaties en mobiele apps waar onze opdrachtgevers en hun klanten mee overweg kunnen. Nee, we ontwikkelen applicaties voor miljoenen gebruikers en dan ook nog apps waar men écht gelukkig van wordt. Van de medewerkers in de organisatie zelf tot aan de eindgebruikers. En als Senior Front-end Developer ben jij hierbij onmisbaar! De rol Van het bouwen van nieuwe functionaliteiten, het behouden, bewaken en verbeteren van de huidige infrastructuur en applicaties tot aan het ontwikkelen van nieuwe innovaties. Als Front-end Developer ben je de lead developer binnen jouw scrumteam en

Bekijk vacature »

Network Engineer

The Medline IT team is working every day to provide innovative solutions to our internal and external customers with the goal that these solutions will differentiate us from the competition. Network Engineer In order to support its growth, Medline International is looking to hire a full-Network Engineer, based in one of its European offices in Arnhem (NL), or Kleve (DE). ACTIVITIES: Administer and operate Medline’s international network and collaboration services. Provide intensive support of network systems and existing network landscapes. Systematically and appropriately isolate faults and ensure trouble-free operation of the IT systems. Conceptualise network solutions and implement project tasks,

Bekijk vacature »

Java Custom Software Developer

Jouw rol Als Java developer houd jij van uitdagende maatwerk oplossingen. Het liefste bouw je aan aan complexe en grootschalige oplossingen. Laatst zag je bijvoorbeeld nog een slimme oplossing voorbij komen die je graag zou willen uitwerken. Moet je daarvoor nieuwe technologie leren kennen, dan school jij jezelf bij. Soms moet je je collega's en de klant overtuigen om jouw idee te omarmen. Als jij dan het door jou aangebrachte idee ziet draaien dan kijk jij er alweer naar uit om de volgende oplossing te bouwen. Plaats in de organisatie Binnen onze Custom Software Development practice (CSD) werken we gezamenlijk

Bekijk vacature »

Front-end developer die interesse en/of kennis hee

Functieomschrijving Jij zult hier in het begin vooral aan de Front-end gaan werken en pas in een later stadium echt de Back-end werkzaamheden gaan oppakken. Daar krijg je veel vrijheid in waardoor je de mogelijkheid krijgt om ook je creativiteit los te laten. Al met al een hele toffe functie met heel veel mogelijkheden om jezelf te ontwikkelen als developer. Dus....werk jij graag in een klein en sterk team met veel verantwoordelijkheid waar je de mogelijkheid krijgt om richting Fullstack te groeien?! Reageer dan direct! Functie-eisen - Je hebt minimaal een HBO diploma en het liefst in de richting van

Bekijk vacature »

Technical Lead Developer met doorgroei mogelijkhed

Voor een toonaangevende specialist in softwareoplossingen gericht op strategisch portfolio management ben ik op zoek naar een ambitieuze Technical Lead. De applicatie is volop in ontwikkeling. Zo worden er vele nieuwe functionaliteiten toegevoegd in .Net Core en staat een migratie naar de Azure op de planning. Om deze ontwikkeling te begeleiden en het team aan te sturen, zijn ze op zoek naar een ambitieuze Technical Lead. Wat je gaat doen: Een roadmap maken voor de komende jaren De juiste architectuur neerzetten, hands-on ontwikkelen (front-end en back-end) De migratie naar Azure begeleiden Het 8-koppige ontwikkel team inhoudelijk aansturen en coachen Communicatie

Bekijk vacature »

IT Architect

BNP Paribas Cardif zoekt een IT Architect Ben jij een ster in denken als een visionair op het gebied van (technische) bedrijfsinrichting? Ben je in staat om dit te vertalen naar praktische richtlijnen en principes voor de organisatie? Ben je een gedreven en positief ingestelde collega? En wil je graag werken voor een internationale verzekeraar? Dan ben jij onze nieuwe IT Architect! Wat je bij ons doet Als IT Architect zorg je voor de ontwikkeling van met name de IT componenten in de architectuur van BNP Paribas Cardif. De architectuur is afgeleid vanuit de overkoepelende BNP Paribas Cardif visie en

Bekijk vacature »

Xamarin Developer

Functieomschrijving Ben jij de Xamarin expert die de volgende stap in zijn carrière wil zetten? Houd jij er van om veelgebruikte apps verder uit te bouwen terwijl je de kwaliteit blijft waarborgen en heb je daarnaast zelf innovatieve ideeën ? Lees dan snel verder! Samen met het gehele mobile app team ben jij verantwoordelijk voor: de (door)ontwikkeling van Native applicaties voor Android en iOS; het verder samenbrengen van de applicatie en de web omgeving; de innovatie van de applicatie, het is belangrijk dat jij zelf meedenkt en jouw ideeën voorlegt binnen het team; feedback vanuit de gebruikers te behandelen en

Bekijk vacature »

Java developer / Goede doelen organisatie

Functieomschrijving Wil jij als Java developer bijdragen aan een betere wereld? Ben jij een developer die graag afwisseling in zijn werk heeft? Dan is dit de baan voor jou! Als software developer werk je in teamverband aan het bouwen en uitbreiden van diverse financiële applicaties, alsmede de koppeling met diverse externe leveranciers (ASP’s); Om aan de specifieke wensen, ingegeven door de doelstellingen van de klant, gehoor te geven worden de applicaties binnen de organisatie ontwikkeld en op maat gemaakt; Het hele Java EE spectrum van de web front-end, EJB’s tot aan de connectoren naar de database komt hier bij kijken.

Bekijk vacature »

Front-End Developer / JavaScript / AngularJS / Fin

Functieomschrijving Are you an enthusiastic Front-End Developer? Do you want to work with JavaScript & frameworks like AngularJS and be part of a future migration to Vue.js? Do you have a focus on delivering high quality code that is scalable, readable and clean? If your answers are yes, than this might be your new job! The client designs and develops the next generation of applications. As a Front-End Developer you are, with your team, responsible to speed up and strengthen the digital transformation by designing, implementing and supporting the internet banking applications with main focus on payments solutions. Your focus

Bekijk vacature »

Medior PHP Developer Innovatie Creativiteit

Functieomschrijving Ben jij een PHP Developer die out of the box denkt? Zoek jij naar de mogelijke als naar de onmogelijke oplossingen? Sta jij te springen om de nieuwste tools en technieken toe te passen in jouw werk? Reageer nu en kom alles te weten! Ben jij iemand die energie krijgt van het ontwikkelen van een complexe PHP objectgeoriënteerde platform; Denk jij graag mee over de architectuur; Werk jij goed in een Scrum team om nieuwe functionaliteiten te ontwikkelen; Neem jij graag deel aan verschillende development projecten; Geeft een mooie schone code jouw energie en doe jij er alles aan

Bekijk vacature »

.NET C# ontwikkelaar gezocht (C# Winforms, Xamarin

.NET C# ontwikkelaar bij een slagvaardig en hard groeiend bedrijf met korte lijnen? In een omgeving waar je onder andere direct samen met de oprichter werkt aan het verder ontwikkelen van een vernieuwend product? Dan is deze vacature zeker iets voor jou. Voor een bedrijf in Rotterdam zijn we momenteel op zoek naar een .NET C# ontwikkelaar. Het gaat om klein bedrijf dat op een punt is aanbeland waar de vraag naar hun software flink aan het toenemen is. Hierdoor zijn ze op zoek naar meerdere .NET ontwikkelaars die samen met de oprichter en nog verschillende andere collega’s hun software

Bekijk vacature »

Junior .NET Developer

Kom jij ons team versterken als Developer bij onze Tech Hub in Utrecht? HROffice is de software development tak van Adver-Online. HROffice bestaat uit een internationaal, gedreven en leergierig team van 20 developers, visual designers en consultants. Wij ontwikkelen al tien jaar krachtige web applicaties voor zowel grote als kleine organisaties met specialisaties op recruitment (HROffice Recruitment ATS), planning en tijdsregistratie (HROffice WFM) en HR dashboards (HROffice Portal). Met twee Scrum Teams werken we voor klanten als DocData, Praxis, Bolletje en Bol.com, maar ook binnen de uitzendbranche voor Start People, Unique, CapitalP, Uitzendbureau 65+ en Kaemingk. We ontwikkelen alle applicaties

Bekijk vacature »

IT Developer

Wat ga je doen? Goedemorgen, Yes weer een nieuwe dag! Vandaag begin jij als IT Developer in Almere bij Yource met het programmeren van belscripts om jouw collega’s in het Customer Contact Center zo goed mogelijk te servicen! Samen met jouw collega ontwikkelaars ben je verantwoordelijk voor de opzet en inrichting van campagnes en projecten in ons communicatieplatform. In de functie van IT Developer in Almere moet je in staat zijn om problemen snel te kunnen diagnosticeren en op te lossen. Daarnaast breng je proactief en reactief adviezen uit met als doel de efficiëntie te verhogen van of om risico's

Bekijk vacature »

Enthousiaste back-end ontwikkelaars gezocht in Ove

Functieomschrijving We zoeken vanwege de groei de ontwikkelafdeling meerdere Python/Django ontwikkelaar. Je komt te werken in een hecht klantteam van developers die dagelijks met elkaar werken aan uiteenlopende producten voor de organisatie. De team genoten gaan op een sympathieke manier met elkaar om en helpen elkaar bij het werk waar mogelijk. Er heerst hier zeker geen pakken cultuur en er is veel ruimte voor ontspanning en plezier. We zoeken zowel medioren als senioren die er van houden om aan complexe back-end code te werken. Je krijgt hier veel ruimte om zelf invulling te geven aan je werk en zo ook

Bekijk vacature »

Vacature Front-end Developer

Vacature Front-end Developer Van Ons, Amsterdam Vacature Front-end Developer ES6 kent geen geheimen voor je. Je voegt nog even een extra animatie toe om de website nóg vetter te maken. Korte laadtijden en goede UX zijn heilig. En je neemt geen genoegen met sites die niet geoptimaliseerd zijn voor mobiel. Samen met je gedreven, gezellige en knetterslimme collega’s werk je vanuit ons kantoor in Amsterdam aan de vetste cases voor de mooiste merken. Jouw focus ligt op front-end en je bent dus een belangrijke schakel in de projecten die we afleveren voor onze klanten. Jouw werk gaat de wereld over

Bekijk vacature »

06/03/2013 05:17:09
Quote Anchor link
Ik ben momenteel bezig met mijn persoonlijke website, maar loop al een poosje tegen een uitdaging aan. Ik wil graag dat de breedte van mijn website zich aanpast naar de schermresolutie van de bezoeker.
Hoogte maakt niet zoveel uit, het gaat echt om de breedte.

Ik ben zelf al veel op zoek geweest, en kwam een oplossing in de vorm van een Javascript tegen (welke de schermresolutie detecteert en op deze manier met jQuery een stylesheet selecteert), maar deze heeft als nadeel dat deze niet werkt als je Javascript hebt uitgeschakeld in de browser.
Daarnaast kwam ik ook een onderwerp als Liquid Design tegen, maar hier word ik niet echt wijs uit. Als ik naar Hyves kijk dan heeft deze website een fixed width, maar Facebook daarentegen past zich altijd netjes aan. Dat laatste is een beetje hoe ik het graag wil hebben.

Ik heb namelijk net zo'n header als Facebook heeft, volledige schermbreedte en margin:0; vanaf de bovenkant en de zijkanten, maar weet dus niet hoe ik het kan oplossen dat deze header zich ook netjes aanpast aan de schermbreedte van de bezoeker.

Het gaat om: http://(verwijderd)/products/contactform (voorbeeldsite)

index.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
    <div id="page">
        <div id="header"><h1>Mario Geheim Products</h1></div>
        <div id="container">
            <div id="sidebar"></div>
            <div id="content">
                <form action="core.php" id="contactform" method="post" name="contactform">
                    <h1>Contactformulier</h1>
                    <input type="text" id="name" name="name" value="Uw naam" onfocus="if(this.value=='Uw naam')this.value='';" onblur="if(this.value=='')this.value='Uw naam';"><br>
                    <input type="text" id="emailaddress" name="emailaddress" value="Uw e-mailadres" onfocus="if(this.value=='Uw e-mailadres')this.value='';" onblur="if(this.value=='')this.value='Uw e-mailadres';"><br>
                    <input type="text" id="subject" name="subject" value="Een onderwerp" onfocus="if(this.value=='Een onderwerp')this.value='';" onblur="if(this.value=='')this.value='Een onderwerp';"><br>
                    <textarea id="message" name="message" onfocus="if(this.value=='Uw bericht')this.value='';" onblur="if(this.value=='')this.value='Uw bericht';">Uw bericht</textarea>
                    <input type="hidden" id="security" name="security">
                    <input type="submit" id="send" name="send" value="Doorgaan" disabled>
                    <div class="clear"></div>
                </form>
            </div>
        </div>
    </div>
</body>


Stylesheet
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
body{background-color:#ffffff;color:#000000;cursor:default;font-family:Bitter,Verdana,Sans-Serif;font-size:15px;font-weight:700;margin:0;outline:0;padding:0;}
*{cursor:default;margin:0;outline:0;padding:0;}
#page{min-width:100%;width:1349px;}
#header{background-color:#0073c9;padding:50px 25px 25px;}
#header h1{color:#ffffff;font-family:Bitter,Verdana,Sans-Serif;font-size:25px;font-weight:700;}
form{background-color:#ececec;border:1px solid #bcbcbc;color:#000000;margin:25px auto;padding:35px;width:700px;}
form h1{background-color:#bcbcbc;color:#000000;font-size:30px;margin:-35px -35px 35px;padding:10px;text-align:center;}
input[type=text]{background-color:#ffffff;border:1px solid #cccccc;font-family:Bitter,Verdana,Sans-Serif;font-size:12px;font-weight:700;margin:5px 0;padding:10px;width:350px;}
textarea{background-color:#ffffff;border:1px solid #cccccc;font-family:Bitter,Verdana,Sans-Serif;font-size:12px;font-weight:700;height:100px;margin:5px 0;padding:10px;width:678px;}
input[type=submit]{background-color:#0073c9;border:0;color:#ffffff;float:right;font-family:Arial,Sans-Serif;font-size:12px;font-weight:700;padding:10px 15px;}
.clear{clear:both;}


Alvast bedankt!

Toevoeging op 06/03/2013 05:19:21:

En ja, er ontbreken inderdaad nog een paar divs in de stylesheet. Komt nog!
Gewijzigd op 19/07/2013 00:51:06 door Bas IJzelendoorn
 
PHP hulp

PHP hulp

29/01/2020 22:15:55
 
Joakim Broden

Joakim Broden

06/03/2013 10:33:39
Quote Anchor link
Niet met vaste breedtes werken maar met %
 
Bas Kreleger
Beheerder

Bas Kreleger

06/03/2013 11:33:43
Quote Anchor link
Kijk hier eens naar: http://twitter.github.com/bootstrap/. Je bent op zoek naar een responsive layout.
 
Erik Jansen

Erik Jansen

06/03/2013 11:37:38
Quote Anchor link
Bas Kreleger op 06/03/2013 11:33:43:
Kijk hier eens naar: http://twitter.github.com/bootstrap/. Je bent op zoek naar een responsive layout.


Idd aanrader
 
Keizer Webdesign

Keizer Webdesign

06/03/2013 16:05:15
Quote Anchor link
of google is op "responsive design"
 

06/03/2013 16:42:48
Quote Anchor link
Ik vraag me af of bootstrap en ik vrienden zullen worden :(
 
Jordi Kroon
Redacteur

Jordi Kroon

06/03/2013 16:51:21
Quote Anchor link
Wat lukt er dan niet? Heb je de (sourcecode van de) voorbeelden al bekeken?
 

06/03/2013 17:22:46
Quote Anchor link
Dat is mij echt te ingewikkeld. Ik heb inderdaad de sourcecode bekeken en het bestand gedownload, daarna de Javascript al in mijn index gezet, maar toen ik aan de stylesheet begon...
Ik denk ook niet dat die bootstrap voor mij geschikt is. Met de bootstrap wordt het voor mij iets te onoverzichtelijk op welke manier de lay-out zich op verschillende schermen aanpast, terwijl je dit met andere lay-outs wel zelf kunt bepalen.
Terugkomend op de lay-out van Facebook zie ik dat de header full-width is, en het logo en het inlogformulier een kleinere breedte hebben met een soort min-width. Enig idee hoe ik dit het beste kan realiseren?
 
Keizer Webdesign

Keizer Webdesign

06/03/2013 19:45:40
Quote Anchor link
Kijk hier anders is naar

http://black-dog.co/http://black-dog.co/wp-content/uploads/2012/03/responsive.png

dat is wat ze noemen een "responsive webdesign" ik denk dat je daar wel wat mee kan aangezien je geen bootstrap wil.

http://2012.inspireconf.com/ vergroot en verklein je browser is op die site!
 

06/03/2013 20:52:14
Quote Anchor link
Het zou een goede oplossing kunnen zijn, maar de informatie die ik zonet heb doorgelezen zegt mij dat ik hiervoor een webdesignbureau in de arm moet nemen?
Ik kan niet echt relevante websitebouwgerichte informatie hierover vinden.

Ik ga toch voor de optimalisatie voor 1024*768, dan kan ik later voor mobiele websites een aparte website ontwikkelen mocht ik dat tegen die tijd nodig vinden. En mensen met 800*600 resoluties scrollen maar.
Nu is de vraag hoe. De content is niet zo'n probleem, die kun je vaste breedtes meegeven zodat ze voor 1024*768 geoptimaliseerd zijn en er op grotere resoluties eveneens prima uitzien. Maar de header moet zich wel constant aanpassen aan de breedte van de resolutie.
Je kunt geen width opgeven, maar dat heeft als probleem dat, als je de browser kleiner maakt en je gaat scrollen, je een witruimte krijgt naast de header. Maar ik wil dus ten alle tijde mijn header de volledige breedte laten weergeven. Hoe doe ik dat?
 
Jasper DS

Jasper DS

06/03/2013 22:33:13
Quote Anchor link
Je sprak daar over een javascript / jquery tool dat een andere stylesheet inlaad. Gebruik dat (want dat snap je?) maar gebruik gewoon de css media-queries. Dat is zonder js, puur css en dan ben je stiekem ook al met responsive design bezig. ;-)
 

06/03/2013 22:43:42
Quote Anchor link
De laatste reactie snap ik niet Jasper DS. Ik was inderdaad bezig met zo'n jQuery-script dat de schermresolutie detecteert en vervolgens aan de hand daarvan een stylesheet detecteert.
Dit script heb ik in het verleden ook al gebruikt, maar nu kreeg ik 'm door onbekende reden niet werkend. Maar ik snap niet hoe ik dat werkend zou moeten krijgen als ik de Javascript zou weglaten?

Kunnen jullie me helpen met wat voorbeeldjes? Misschien begrijp ik het dan beter. Ben best een noob.
 
Reshad F

Reshad F

06/03/2013 23:15:16
Quote Anchor link
google is op media queries :)
 

07/03/2013 02:58:26
Quote Anchor link
Laten we eens helemaal afstappen van die media queries, fluid designs, responsive designs en Javascript, etc. Wat is een andere mogelijkheid om ervoor te zorgen dat ALLEEN DE HEADER de schermbreedte aanneemt?
Ik heb niet zoveel aan alles wat ik net opnoemde! Of tenminste, ik heb er misschien wel veel aan, maar het is niet wat ik bedoel.

Toevoeging op 07/03/2013 04:54:35:

Ik heb nu een paar kleine aanpassingen gedaan in de structuur en de stylesheet, en het lijkt alsof het probleem nu even opgelost is. Maar ik ben benieuwd of jullie dit technisch ook kunnen onderbouwen, en of het probleem hiermee definitief opgelost is?

index.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
<body>
    <div id="page">
        <div id="header">
            <div id="logo"><h1>(verwijderd)</h1></div>
        </div>
        <div id="content">
            <div class="title"><h1>Nog even geduld</h1></div>
            <p>Deze website gaat binnenkort online. U kunt altijd een e-mail sturen naar <a href="mailto:*****">****</a>.</p>
        </div>
    </div>
</body>


Stylesheet
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body{background-color:#ffffff;color:#000000;cursor:default;font-family:Bitter,Verdana,Sans-Serif;font-size:12px;font-weight:700;margin:0;outline:0;padding:0;width:100%;}
*{cursor:default;margin:0;outline:0;padding:0;}
a,a:active,a:visited{color:#3f76d0;text-decoration:none;}
a:hover{color:#000000;text-decoration:none;}
#page{margin:0 auto;min-width:1007px;}
#header{background-color:#0073c9;width:100%;}
#logo{margin:0 auto;padding:50px 25px 25px;width:900px;}
#logo h1{color:#ffffff;font-family:Bitter,Verdana,Sans-Serif;font-size:28px;font-weight:700;}
#content{background-color:#ececec;border:1px solid #bcbcbc;margin:25px auto;padding:25px;width:850px;}
.title{background-color:#bcbcbc;margin:-25px -25px 25px;padding:10px;text-align:center;}
.title h1{font-size:36px;font-weight:700;}
input[type=text],textarea{background-color:#ffffff;border:1px solid #cccccc;font-family:Bitter,Verdana,Sans-Serif;font-size:12px;font-weight:700;margin:5px 0;padding:10px;width:300px;}
textarea{height:100px;width:700px;}
input[type=submit]{background-color:#0073c9;border:0;color:#ffffff;float:right;font-family:Arial,Sans-Serif;font-size:12px;font-weight:bold;padding:10px 15px;}
.clear{clear:both;}


- In de body{ staat nu een width:100%;
- #page heeft een min-width:1007px; (1024px minus de scrollbar), zodat de website op schermbreedtes vanaf 1024px goed wordt weergegeven
- #header heeft een width:100%;
- #logo, die binnen de #header staat, heeft een vaste width:900px;
- #content heeft nu ook een vaste width:850px;

Zal mijn header nu op alle, zo niet de meeste, schermresoluties (vanaf 1024px dan) de breedte van het scherm aannemen, ook als ik mijn browserscherm verklein? Dus krijg ik dan geen witranden naast de header?
Gewijzigd op 19/07/2013 00:51:54 door Bas IJzelendoorn
 
Tim S

Tim S

07/03/2013 12:47:07
Quote Anchor link
Waarom zet je de header niet buiten de page div?
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.