Breedte website aanpassen naar schermresolutie

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Senior Applicatieontwikkelaar Java of .NET

Wij zijn Turnn! In korte tijd hebben we als startup een platform ontwikkeld en in de markt gezet voor het organiseren van volledige mobiliteit van consumenten en medewerkers van bedrijven. Openbaar vervoer, deelauto’s, deelfietsen en nog veel meer kun je plannen, boeken, betalen met ons platform. Dit platform bestaat uit onder meer een apps, backend en een multimodale reisplanner. Met een jong en creatief team zijn we in rap tempo de markt aan het veroveren. Nu nog hoofdzakelijk in Nederland maar met grote plannen om de grens over te gaan. We zoeken naar gedreven, eigenwijze en ervaren developers om de

Bekijk vacature »

Ontwikkelaar Oracle, PL/SQL

De business unit transport en logistiek van ICT Group biedt IT-oplossingen voor onder meer containerterminals, logistieke dienstverleners in de belangrijkste havens van West-Europa, distributiecentra en productiebedrijven. Onze oplossingen zorgen ervoor dat de verschillende systemen in de supply chain naadloos samenwerken met andere interne en externe systemen, zoals een ERP, een WMS en verschillende apparatuur. We verbinden de wereld van informatietechnologie (IT) met de systemen in het operationele domein (OT). Bij specifieke klanten gebruiken we hier technieken als PL/SQL, Apex en Oracle voor. Samen met de klant(en) uit de transport en logistiek en onze businessanalisten functionaliteiten bespreken en bepalen. Functionele wensen

Bekijk vacature »

Java Ontwikkelaar

Binnen ICT Group werkt de business unit Machine & Systems zich bezig met geavanceerde besturingssystemen voor machine- en apparatenbouwers en voor grote systeemintegratoren. Met je collega’s zorg jij ervoor dat producten optimaal functioneren en connected zijn. Internet of Things, Cloud oplossingen en Big Data zijn niet meer weg te denken uit dit marktsegment. We leveren complete producten (hardware, OS en software applicaties) en zijn van toegevoegde waarde door het uitvoeren van complete projecten met resultaatverantwoordelijkheid op één van onze locaties, door het leveren van kennis en ervaring op locatie van onze klanten én door middel van advies trajecten. Requirements in

Bekijk vacature »

Java Software Developer - Groningen

De vacature Als ALTEN Digital Enterprise staan wij voor fullstack en softwareontwikkeling dat doen we dan ook vanuit verschillende expertises. We gaan ervan uit dat je inmiddels weet wat er allemaal komt kijken bij het maken van software in enterprise-omgevingen. Daarnaast snappen we ook dat jij de diepte hebt opgezocht in één van die expertises, zoals Front-end applicatieontwikkeling, API’s en backend development, Cloud- en dataplatformen, of Internet of Things (IoT). Je beschikt al over aardig wat kennis, maar je bent nog niet uitgeleerd. Dat is mooi, want wij vinden zo’n instelling belangrijk. Het hart van ALTEN is namelijk technologie en

Bekijk vacature »

.NET Ontwikkelaar / Medior @ Regio Duiven

2021-06-07 iSense .NET Ontwikkelaar Medior Ben jij een C# Developer die binnen een innovatieve, logistieke organisatie wilt werken? Vind je het interessant om de door jou ontwikkelde software en code te koppelen aan complexe systemen en daarnaast de implementatie te begeleiden? Lees snel verder! ISK49485 Nieuw Organisatie Je komt als Ontwikkelaar te werken bij een organisatie die is gespecialiseerd in industriële automatiseringsoplossingen. De organisatie heeft al ruim 45 jaar ervaring met optimalisatie van processen binnen de industriële sector. De organisatie kenmerkt zich als innoverend, meedenkend en informeel. Binnen het team heerst er een positieve teamspirit met een gezonde dosis ondernemerschap

Bekijk vacature »

Medior Applicatieontwikkelaar Java of .NET

Wij zijn Turnn! In korte tijd hebben we als startup een platform ontwikkeld en in de markt gezet voor het organiseren van volledige mobiliteit van consumenten en medewerkers van bedrijven. Openbaar vervoer, deelauto’s, deelfietsen en nog veel meer kun je plannen, boeken, betalen met ons platform. Dit platform bestaat uit onder meer een apps, backend en een multimodale reisplanner. Met een jong en creatief team zijn we in rap tempo de markt aan het veroveren. Nu nog hoofdzakelijk in Nederland maar met grote plannen om de grens over te gaan. We zoeken naar gedreven, eigenwijze en ervaren developers om de

Bekijk vacature »

C# .NET Core Ontwikkelaar

Binnen ICT Group werken we binnen de business unit transport en logistiek dagelijks aan complexe maatwerk software voor bedrijfskritische systemen. Bij en voor onze klanten gaan we aan de slag met technische, complexe software-oplossingen binnen de technische automatisering op onder meer het IoT vlak. Zo ontwikkelen wij bijvoorbeeld aan een Iot oplossing waar we van ruim 200.000 machines hun telemetrie en events verwerken. Dit komt neer op 200 miljoen berichten per dag. Hierin leggen we de focus op de schaalbaarheid binnen dit project zodat we in de toekomst een veelvoud van berichten kunnen verwerken. Dit wordt mogelijk gemaakt met behulp

Bekijk vacature »

Software Developer

De vacature Wil jij applicaties ontwikkelen die een verschil kunnen maken in de zorg? Als software engineer bij everywhereIM maak je uitsluitend apps en webapplicaties voor de zorg. Al onze producten zijn gericht op gebruik door de arts of de patiënt. We krijgen deze opdrachten direct uit het werkveld waardoor de te ontwikkelen app gelijk impact creëert voor de doelgroep. Daarnaast werk je bij ons in een veelzijdig team, bestaande uit projectmanagers, artsen en software engineers. Wij creëren plek voor een allround software engineer met ervaring in PHP, Laravel en Ionic, of de ambitie om jezelf hierin te ontwikkelen. Een

Bekijk vacature »

.Net Developer

De vacature Alle tools, die heb jij als senior .NET developer al lang onder de knie. Nee, jij dompelt je volledig onder in de problemen van de klant: wat heeft de klant nodig en waar ligt het échte probleem? En wanneer jij nieuwe tools moet aanleren om tot de oplossing te komen, doe jij dat gewoon. Daarnaast ben je in staat om over systemen, processen en technieken heen te denken en de klant en het team hierin mee te nemen Als senior ga je natuurlijk net een stapje verder: je coacht de juniors en mediors en zorgt voor duidelijk klantcontact.

Bekijk vacature »

Medewerker ICT servicedesk

De afdeling Informatievoorziening is richtinggevend op het gebied van informatievoorziening, fungeert als waterschap brede informatiedienst en levert de benodigde ICT. De afdeling heeft een proactieve instelling om tijdig te kunnen inspelen op ontwikkeling en technologieën op het tempo van verandering. De afdeling Informatievoorziening zoekt wegens interne doorstroming een enthousiaste medewerker voor de functie van: Medewerker ICT servicedesk voor 36 uur per week, locatie Hoofdkantoor Zwolle Wat ga je doen? Voor een Medewerker ICT servicedesk zullen de werkzaamheden op hoofdlijnen bestaan uit: aannemen en registreren van ICT vragen, klachten en verstoringen, telefonisch of schriftelijk; beantwoorden van vragen en het oplossen van

Bekijk vacature »

Full stack Developer

De vacature Apployed en People Inc. zijn dynamische HR-applicaties, wat betekent dat onze consultants en/of klanten deze applicaties zelf volledig kunnen aanpassen en inrichten, zonder dat daar een ontwikkelaar aan te pas hoeft te komen. Denk hierbij aan schermen, dynamische zaken (logica in de API-server), rapporten en brieven. Wat dit precies inhoudt, vertellen we je graag tijdens een kennismakingsgesprek. Bovenstaande stelt speciale eisen aan zowel de API-server, als aan de front-end applicaties. Tot voor kort was de back-end van onze applicaties geschreven in Delphi. Inmiddels zijn we bezig om al onze applicaties naar de Microsoft stack te brengen, met alle

Bekijk vacature »

API Developer / Red Hat Fuse @ Amersfoort

2021-05-25 iSense API Developer Red Hat Fuse Heb jij als API Developer/Integratie specialist al enige ervaring met het ontwikkelen van API's en wil jij aan de slag met nieuwe oplossingen als Red Hat Fuse en 3Scale? Lijkt het jou gaaf om aan de vooravond te staan van de implementatie van een volledig nieuw applicatiehuis met tal van koppelingen? Ga jij daarnaast graag aan de slag binnen een uitdagende omgeving waarbij je de mogelijkheid krijgt jezelf verder te ontwikkelen? Lees dan snel verder! ISKO47622 Organisatie Deze organisatie is een toonaangevende speler in de vastgoedbranche en telt momenteel ruim 500 medewerkers. Met

Bekijk vacature »

Frontend developer

De vacature Frontend developer/fullstacker met voorkeur voor frontend met gevoel voor design, krijgt er energie van om een mooi design neer te zetten We zijn op zoek naar een hele ervaren lead developer die heel graag bereid is om zijn kennis te delen. We zijn nu bezig om een developer 1x per week een onderwerp te laten toelichten. Functie eisen Het leuk vinden om mensen verder te helpen/leren Fijn vinden om met andere mensen samen te werken, geen einzelgänger Je moet in staat zijn om een eigen mening te hebben en te beargumenteren maar beslissen als team welke kant we

Bekijk vacature »

Frontend Developer

De vacature Heb jij ervaring met front-end developing en wil jij ons team graag ondersteunen in het bieden van slimme digitale oplossingen voor al onze klanten? Dan zijn wij op zoek naar jou! Als aanvulling op ons developmentteam zijn wij op zoek naar een groeibaas die bijdrage levert aan de snelheid, kwaliteit en intelligentie van ons huidige team. Onder de kernwaarden Volgas, Vrienden en Samen zul je met je collega’s onze klanten laten groeien naar een hoger niveau. Bij ons staat plezier op de werkvloer altijd voorop! Check onze Instagram pagina voor een sfeerimpressie van ons team, wie weet voel

Bekijk vacature »

ASP.NET CORE developer Fullstack / Intern

Bedrijfsomschrijving Mijn klant houdt zich bezig met alleen maar maatwerk software. Door de flexibiliteit van de developers bedienen ze bijna elke markt; van start-ups tot aan de grotere internationaal georiënteerde bedrijven. Bepaalde applicaties zijn standaard geworden en worden als totaalpakket aan de klant aangeboden. Andere applicaties worden maandelijks onder de loep genomen. Kortom: genoeg uitdaging voor een .NET Developer. Je komt te werken in een gezellig team van ongeveer 20 mensen met een platte structuur. Er wordt veel voor het personeel geregeld en regelmatig ga je met het team op pad. Je collega's zijn IT minded mensen. Het gaat hier

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

07/12/2021 23:09:26
 
Joakim Broden

Joakim Broden

06/03/2013 10:33:39
Quote Anchor link
Niet met vaste breedtes werken maar met %
 
B a s
Beheerder

B a s

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

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.