Breedte website aanpassen naar schermresolutie

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Medior iOS Developer

As an iOS Developer, you make sure our mobile app gives our users the best possible way to buy, browse and interact with Coolblue. How do I become an iOS Developer at Coolblue? You feel comfortable writing Swift code and working together with your colleagues to guarantee high quality. Besides that you think about technical decisions like architecture, tools and processes. You also keep an eye on the performance of the app and you analyse with your team how to improve it. Following scrum is second nature to you. In short, you get a lot of energy from building an

Bekijk vacature »

Senior applicatieontwikkelaar

Ben jij een gedreven applicatieontwikkelaar met minimaal drie jaar werkervaring? En wil je een uitdagende baan met impact én jezelf breed ontwikkelen? Bij UPS bouw je mee aan complexe systemen die wereldwijd worden gebruikt en krijg je alle ruimte om nóg beter te worden in je vak. Dit ga je doen In een dynamisch scrumteam werk je aan de hand van processen en technologieën zoals CI/CD en DevOps aan het behalen van jullie doelen. Je bent betrokken bij alle facetten van applicatieontwikkeling: van ontwerpen en bouwen tot testen en implementeren. Je levert ontwerpen die passen bij de onderliggende frameworks en

Bekijk vacature »

C# Developer/ SQL Server/ Visual Studio/Javascript

Functieomschrijving Ben jij een gedreven en enthousiaste .NET Developer (C#) met gevoel voor design en usability? Wil jij als C# Ontwikkellaar jouw skills graag inzetten op de development afdeling van een innovatieve, flexibele organisatie met een groot bereik? Lees dan snel verder! Je gaat aan de slag in het websites team of portals team waarin je je bezighoudt met concept & design, implementatie en ook een stukje bugfixing en onderhoud; Je werkt met je team volgens de Scrum werkwijze; Zo adviseer je ook de PO & Scrum Master over de technische architectuur, koppelingen en integratie met externe systemen en API’s;

Bekijk vacature »

OutSystems Developer / International environment /

Functieomschrijving Would you like to work in a professional and international working environment and do you have experience in the field of OutSystems? Apply now! Translate wishes and requirements into technical designs; Design and develop new software feautures and technologies, mainly in the field of logistics/planning; Maintainance, administration and improvement of the OutSystems platform; Solving issues and bugs within the software; Define and run test plans; Documentation of development and bugfixes; Constant improvement of the OutSystems platform and follow-up of newest innovations within this field. Functie-eisen Knowledge of and experience with OutSystems is required. Experience with other low-code platforms is

Bekijk vacature »

.NET Ontwikkelaar / ASP.NET MVC / Azure / C#

Functieomschrijving Ben jij een ervaren .NET Ontwikkelaar en ben jij gewend om in technische uitdagende omgevingen te werken met onder andere C#, ASP.NET en Azure? Dan is deze functie voor jou! Als .NET Ontwikkelaar ga je: Programmeren van high-availability en high-security applicaties in C#; Overleggen met de informatie analisten en testers; Ontwikkelen van webservices (WCF); Ondersteunen bij de Azure migratie; Coachen van andere ontwikkelaars; Begeleiden van het team en Product Owner; Waarborgen van de Scrum principes; Wegnemen van impediments voor het team; 20% van je tijd besteden aan innovatie; Bouwen van unit testen. Functie-eisen Als .NET Ontwikkelaar heb je: HBO/WO

Bekijk vacature »

Java Developer Backend Maatschappelijk 1 miljoen k

Functieomschrijving Ben jij opzoek naar echte uitdaging? Wil jij meebouwen aan de toekomst? Als deze applicatie niet werkt dan is dit groot nieuws op televisie! Een nieuwe backend applicatie bouwen met de laatste technieken (Java, Weblogic, Oracle databases) Uitvoeren van diverse analyses; Bestaande applicatie uit faseren; Nauwe samenwerking met andere disciplines; Sparingspartners voor andere ontwikkelaars; Uiteraard kom je met nieuwe en innovatieve oplossingen; Uitvoeren van diverse testen; Functie-eisen Minimaal HBO werk en denkniveau; In ieder geval 3 jaar werkervaring als ontwikkelaar binnen complexe grote omgevingen; Ervaring met logistieke processen is een sterke pre; Je bent analytisch en beschikt over een

Bekijk vacature »

.NET developer worden bij onze leukste klant?

Functieomschrijving Er is daarom altijd behoefte aan nieuwe collega's op gebied van .NET Development, maar ook binnen andere takken van ontwikkeling. Daarnaast is het verloop van medewerkers heel laag: Wanneer je hier eenmaal werkt, zul je niet snel meer weg willen. De doorgroeimogelijkheden zijn onbeperkt, de opdrachten altijd uitdagend en interessant en daar bovenop zijn de arbeidsvoorwaarden ook nog eens uitstekend. Neem contact met mij op, dan plan ik op korte termijn een gesprek en dan zul je het mij je eigen ogen zien! In jouw nieuwe leasewagen rijd je straks naar de klant toe, waarbij je zelden langer dan

Bekijk vacature »

PHP Laravel developer voor maatwerk projecten

Functieomschrijving Er wordt hier gezocht naar een ervaren backend specialist die graag zijn tanden zet in het optimaliseren van webapplicaties. Er worden nog steeds nieuwe features bedacht, hier mag jij aan gaan meewerken, en die worden dan in het kleine team ontwikkeld. Je gaat werken met de nieuwste technieken en gaat werken aan een eigen product· Voordeel bij dit soort organisaties is dat de ontwikkelboog lang is en dat er veel aandacht is voor kwaliteit. Herken jij jezelf in bovenstaand profiel? Reageer dan snel! Functie-eisen - Je beschikt als PHP ontwikkelaar over HBO werk en denk niveau; - Je hebt

Bekijk vacature »

.NET Developer Financieel

Werk jij als software developer het liefst met uitdagende systemen? Dan kun jij je bij onze vestiging in Amsterdam volledig uitleven als .NET Developer Financieel. Wanneer begin je? Jouw baan Je ontwerpt, ontwikkelt, ondersteunt en onderhoudt je eigen financiële module binnen HiX, onze ICT-totaaloplossing voor de zorg. Je schrijft objectgeoriënteerde code, speurt naar verbeteringen, werkt aan vernieuwende projecten, doet code reviews en voert testen uit. Een uiterst verantwoordelijke job, want dankzij jouw software kunnen zorginstellingen hun zorg factureren, voldoen aan afspraken met zorgverzekeraars, verplichte landelijke aanleveringen van financiële data doen en nog veel meer. Je brainstormt regelmatig met collega’s hoe

Bekijk vacature »

.Net Software Developer voor IT consultancy (.Net

Voor een groeiend ICT consultancy bureau in Haarlem & Leiden zijn we op zoek naar een ervaren .Net Back-end Developer. Een developer die bij klanten als het UWV, de Rabobank en Tata Steel applicaties designed, ontwikkelt en implementeert. Bijvoorbeeld een IT omgeving Cloud-ready maken, de IT security verhogen, applicaties naar .Net Core migreren en veel applicaties en functionaliteiten ontwikkelen met behulp van de nieuwste stack. Wat je gaat doen bij het MBK en multinationals: Ontwikkelen (greenfield) en onderhouden van .Net (C#) websites, applicaties en infrastructuren Cloud oplossingen bouwen Het opzetten van het technisch ontwerp en databases Een hoge diversiteit ervaren

Bekijk vacature »

.NET C# web developer met focus op gebruiksvriende

Ben je op zoek naar een baan binnen een klein softwarebedrijf? Een bedrijf met een informele, persoonlijke en familiaire sfeer? Waar je je als developer zowel richt op de back- als frontend? Wellicht dat deze vacature dan iets voor jou is. Voor een softwarebedrijf, gevestigd in het centrum van Rotterdam, zijn we momenteel op zoek naar .NET C# web developer. Dit mag iemand zijn die net van school komt, maar ook iemand die al behoorlijk wat ervaring heeft. Het bedrijf bestaat inmiddels ruim 10 jaar en en door de aanhoudende groei zijn ze opzoek naar versterking van 1 a 2

Bekijk vacature »

Java Developer / Overheidsinstelling / 4500

Functieomschrijving Ben jij als Java Developer toe aan een stabiele organisatie zonder commercieel doeleinde? Ga jij voor kwaliteit, collegialiteit en stabiliteit? Dan is dit jouw baan! Ontwikkelen van nieuwe en bestaande webservices; Uitbreiden van functionaliteiten binnen de producten- en dienstenportefeuille; Als het in jouw interessegebied ligt kan je betrokken worden bij het vormgeven van verantwoordingsrapportages; Werken aan gegevensuitwisseling met SOAP, ervaring hierin met Apache Synapse/Axis2 is een pre; Werken aan Java web GUI ontwikkeling, ervaring hierin met GWT, Bootstrap, Javascript, HTML en CSS is een pre; Werken met testframeworks, ervaring hierin met JUnit en Selenium is een pre; Ervaring met

Bekijk vacature »

Java Developer/Consultant

JAVA Developer/Consultant – JAVA / Spring / DevOps / Scrum / Kanban Net binnen, JAVA developer/consultant voor een ambitieuze organisatie in Flevoland. • Medior / senior level Java developer • Centrale kantoor locatie op 5 minuten afstand van het statio • JAVA / Spring / DevOps / CI-CD / KanbanScrum / Agile • Goed salaris - €30.000-€70.000-, op basis van ervaring, en winstdeling • Reageer door te bellen met 020-8004990 of mail naar gerjan.hofland@searchability.com Deze organisatie is gespecialiseerd in software-ontwikkeling met Java en webtechnologie en werkt met klanten uit de MKB en de top 100 van bedrijven in Nederland! Bron:

Bekijk vacature »

Functioneel Applicatiebeheerder (DIV)

Functioneel Applicatiebeheerder (DIV) Ken jij het vak Functioneel Applicatiebeheerder en dan vooral op het gebied van DIV? Dan kan jij ons team Documentaire Informatievoorziening (DIV) goed ondersteunen. Met jouw affiniteit met ICT weet jij je weg te vinden in het Zaaksysteem en help jij je collega’s. De inhoud van je werk Als applicatiebeheerder ben je er voor je collega’s. Jij helpt ze bij het gebruiken van de applicaties op het gebied van digitaal zaakgericht werken. Jij weet hen te stimuleren en te helpen om de software optimaal te benutten en te gebruiken. Jij begrijpt het DIV vak en hebt ook

Bekijk vacature »

Technisch Ontwerper / Applicatie Ontwikkelaar

Technisch Ontwerper / Applicatie Ontwikkelaar Actief Wat ga je doen? Als Technisch Ontwerper / Applicatie Ontwikkelaar kom je te werken bij onze gerenommeerde klanten op projecten of opdrachten van omvang en formaat. Je bent verantwoordelijk voor het omzetten van functionele specificaties naar een technisch ontwerp, het ontwerp van programmaspecificaties voor toepassingen, de realisatie van (gewijzigde) programmaonderdelen en databestanden van toepassingen en de technische systeemtest van applicatietoepassingen. Daarnaast geef je vorm aan webpagina’s en applicaties, stel je gebruikersdocumentatie op en verleen je ondersteuning bij het oplossen van productiefouten. Tevens ben je verantwoordelijk voor het samenstellen en onderhouden van de applicatie c.q.

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

26/09/2020 14:47:29
 
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.