geschikte layout voor webontwerp

nuet · vr 15 jan 2016

Hoe zou ik onderstaande layout in de pdf's het beste kunnen verwerken in een template? Is een projectje van een studente. Ik zit zelf te denken aan een 2columns responsive maar zit een beetje met de grote bloem rechts in de maag die overal moet terugkomen. Ik dacht eerst de pentagons van de navigatie in een header te zetten en de subnavigatie van 2D en 3D in een linkerkolom...of kan ik het beter anders aanpakken?

vinTage · vr 15 jan 2016

Die bloem kun je gewoon als background-image in de body zetten, heb je daar nooit geen omkijken meer naar (behalve dat het verschillende bloemen zijn).
De rest kun je plempen waar je wilt i.m.h.o.

Dekjam · vr 15 jan 2016

Sluit me aan bij vinTage

nuet · vr 15 jan 2016

ja die bloem heb ik ook al als achtergrond in de body gezet met no-reply en right. Maar waar ik nu teganaan loop is die navigatie:
dat zijn 4 hexagons aan mekaar waarbij de current blauw omlijnd is en de andere paars
Zij heeft de anchors ook als images in de hexagons maa r ik wil daar html van maken. Hoe kan ik nu het beste omgaan met die hexagons in de navigatie?
Bijv: classe about, als ie current is de blauwe pentagon inladen als achtergrond en voor de andere die met paarse border? Dus alle pentagons losknippen of alles aan mekaar laten zitten en met de anchors erin gaan schuiven met position? Wat is wijsheid?

vinTage · vr 15 jan 2016

Gewoon een sprite met maar twee van die dingen, een paarse en een lichtblauwe.

Echter wel een probleempje (zie de rode borders) je hebt overlap.


<style>
*{margin:0;padding:0}
header{margin-left:30px;}
.hexagon {
	background: url('hexagons.png') no-repeat -210px 0;
	width: 125px;
	height: 112px;
	display:inline-block;
	border:solid 1px red;
	margin-left:-30px
}
.hexagon:nth-child(odd){padding-top:55px}
.active {
	background: url('hexagons.png') no-repeat 0 0;
}
.hexagon:hover{
	background: url('hexagons.png') no-repeat 0 0;
}
</style>

<header>
	<div class="hexagon"></div>
	<div class="hexagon"></div>
	<div class="hexagon active"></div>
	<div class="hexagon"></div>
</header>

Voor de sprite heb ik gewoon jou afbeelding hierboven (about.png) gepakt en de tweede en het laatste hexagon ding eruit gegumd.

nuet · vr 15 jan 2016

oke ik ga daar ook eens mee aan de slag met die sprite maar wat ik nu ff niet goed snap is dat in mijn voorbeeld het achtergrond image als anchor gezien wordt. Waarschijnlijk doe ik iets stoms verkeerd maar dit is wat ik heb:


<body>

<div id="container">

	<!-- header -->	
	<header id="header">
		<h1 id="title">Responsive Layout</h1>
	</header>


	<!-- Navigation -->	
	 

	<!-- Sidebar -->
	<aside  id="sidebar">
		<h3>This is the Sidebar</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. </p>		
	</aside>
	<section id="content">
		
		<div id="navprojecten">
			
			<a class="about" href="about.html">About me</a>
			<a class="portfolio" href="portfolio.html">Portfolio</a>
			<a class="projecten" href="projecten.html">Projecten</a>
			<a class="contact" href="contact.html">Contact</a>
			
		</div>
		

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

		
	
	</section>

	

	<!-- Navigation -->
	<footer id="footer" class="clearfix">
		Copyright &copy Andor Nagy 2015
	</footer>

</div>

</body>

En dit is de css:



.clearfix {
	display: block;
	clear: both;
}

body {
        margin: 0;
	padding: 0;
	font-size:18px;
	line-height: 32px;
	color: #333;
	word-wrap:break-word !important;
	font-family: 'Open Sans', sans-serif;
}

a {
	
	color: #000
}

a:hover {
	
	color: #000;
}


#container{
	margin: 0 auto;
	max-width: 1200px;
}

header {
	width: 94%;
	padding: 3%;
	background-color: #FF5722;
}

header #title {
	font-size: 50px;
	color: #fff;
}



/* Navigation
--------------------------------------------- */

nav {
	width: 100%;
	background-color: #fcfcfc;
	
	min-height: 200px;
	min-height: 200px;
}



#navabout {
  width: auto;
  height: 170px;
  background: transparent url("../images/about.png") no-repeat;
}
#navportfolio {
  width: auto;
  height: 170px;
  background: transparent url("../images/portfolio.png") no-repeat;
}
#navprojecten {
  width: auto;
  height: 170px;
  background: transparent url("../images/projecten.png") no-repeat;
}
#navcontact {
  width: auto;
  height: 170px;
  background: transparent url("../images/contact.png") no-repeat;
}

a.about, a.portfolio, a.projecten, a.contact {
  text-decoration: none;
  z-index: 99;
}

a.about {
  
  position: absolute;
  padding: 40px 0 0 26px;
}
a.portfolio {
  position: absolute;
  padding: 96px 0 0 134px;
}
a.projecten {
  position: absolute;
  padding: 40px 0 0 236px;
}
a.contact {
  position: absolute;
  padding: 96px 0 0 340px;
}

/* Content
--------------------------------------------- */
aside {
	float: left;
	padding: 3%;
	width: 24%;
	background-color: #fcfcfc;
}
#content {
  min-height: 700px;
	float: left;
	padding: 3%;
	width: 64%;
	background: #fcfcfc url("../images/bodybg.png") no-repeat right;
}


footer{
	width: 94%;
	padding: 3%;
	background-color: #FF5722;
	border-top: 5px solid #E64A19;
	color: #fff;
	text-align: center;
}

In de verschillende pagina's wordt iedere keer een ander achtergrond image ingeladen maar de anchors pakken allemaal contact.html. Ik snap dat niet, de anchors verwijzen toch allemaal naar hun eigen pagina?

http://webprofis.nl/test/linda/about.html

vinTage · vr 15 jan 2016

Simpel, je werkt met absolute en een koeigrote padding.


a.contact {
    position: absolute;
    padding: 96px 0 0 340px; /*haal deze maar eens weg*/

Je zou dat in orde moeten krijgen door geen padding te gebruiken, maar gewoon left:**px en width/height/top

nuet · vr 15 jan 2016

idd , werkt nu perfect. Beetje dom van mij om dat zo te doen @-)

vinTage · vr 15 jan 2016

Waarom maak je er niet gewoon een php van, dan hoef je niet elke keer ALLES aan te passen

nuet · vr 15 jan 2016

vinTage schreef:: Waarom maak je er niet gewoon een php van, dan hoef je niet elke keer ALLES aan te passen

Yep, dacht ik ook al aan. Maar weet nog niet hoe ze de site moet presenteren. Kan best zijn op de laptop. Als het op een webserver gezet mag worden ga ik idd met php alles includen; scheelt een berg typewerk

nuet · za 16 jan 2016

dit moet de hoofdpagina worden; dit is een groot image. Wat kan ik hier het beste mee doen? compleets als bodybg inladen en dan de anchors in de paarse hexagons zetten of de hexagons apart uitsnijden, verschillende divjes aanmaken en elk divje de achtergrond van een paarse hexagon meegeven? Maar weet niet of ik dat wel spits krijg, want ze staan natuurlijk alles behalve netjes naast elkaar of onder mekaar

ReneV · zo 17 jan 2016

Zou de bloem als bg gebruiken.
De hexagons in een div en die met een positie plaatsen.
Zo kun je straks makkelijk responsive werken.

tip: http://csshexagon.com/

google eens op css hexagon grid

bootstrap of jquery plugin kom e al een heel eind mee

nuet · zo 17 jan 2016

ReneV schreef:: tip: http://csshexagon.com/

die is geweldig. Ik had al eens op css only gekeken maar kon alleen maar vinden in een kleur en niet met border. Maar border is dus ook mogelijk met css only. Goeie tip, scheelt nu een hoop images laden

nuet · zo 17 jan 2016

@reneV de bloem kan die ook met css only???

)

ReneV · ma 18 jan 2016

zoek eens op kersenbloesem in css

)

weer een tip: google background srcset

Maar die hexagon in css is een pluspunt, zo kun je eenvoudige blokken scalen waardoor het er allemaal iets mooier uit komt te zien.

nuet · ma 18 jan 2016

heb eens ff gespeeld met die hexagon css maar is ook een heel gedoe. probleem si dat nergens een vorobeeld te ziens i met border eromheen. Of het staat verticaal omhoog en moet weer gedraaid worden. En als je eenkleiner formaat wilt, dan ben je er niet met allen de width aan te passen. Dan gaat weer alles scheef lopen enmoet je weer vele dingen aanpassen.
Dus voor mij: gewoon een simpel image, resizen op maat en klaar

ReneV · ma 18 jan 2016

wat zijn de afmetingen van de hexagon (s) ?

ReneV · ma 18 jan 2016



<div class="hexagon een"></div>
<div class="hexagon twee"></div>
<div class="hexagon drie"></div>



.hexagon {
  position: relative;
  background-color: #ffffff;
  border-left: solid 5px #e60be6;
  border-right: solid 5px #e60be6;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
}

.hexagon:before {
  border-top: solid 7.0711px #e60be6;
  border-right: solid 7.0711px #e60be6;
}
.hexagon:after {
  border-bottom: solid 7.0711px #e60be6;
  border-left: solid 7.0711px #e60be6;
}

.hexagon.een{
  width: 300px; 
  height: 173.21px;
  margin: 86.60px 0;
}
.hexagon.een:before,
.hexagon.een:after {
  width: 212.13px;
  height: 212.13px;
  left: 38.9340px;
}
.hexagon.een:before {
  top: -106.0660px;
}
.hexagon.een:after {
  bottom: -106.0660px;
}

.hexagon.twee{
  width: 150px; 
  height: 86.60px;
  margin: 43.30px 0;
}
.hexagon.twee:before,
.hexagon.twee:after {
  width: 106.07px;
  height: 106.07px;
  left: 16.9670px;
}
.hexagon.twee:before {
  top: -53.0330px;
}
.hexagon.twee:after {
  bottom: -53.0330px;
}

.hexagon.drie{
  width: 75px; 
  height: 43.30px;
  margin: 21.65px 0;
}
.hexagon.drie:before,
.hexagon.drie:after {
  width: 53.03px;
  height: 53.03px;
  left: 5.9835px;
}
.hexagon.drie:before {
  top: -26.5165px;
}
.hexagon.drie:after {
   bottom: -26.5165px;
}

en nu de haxegon.nummer positioneren bv. position absolute top en left of wat dan ook.

ReneV · ma 18 jan 2016

Oh ja je vroeg of die kersenbloesem ook in css kon?
Dat kan

https://developer.mozilla.org/media/uploads/demos/e/l/elufo/5efb2533c28b17d06ed2d594736bb410/css3-cherry-blossom_1319479594_demo_package/

nuet · ma 18 jan 2016

ReneV schreef:: Dat kan https://developer.mozilla.org/media/uploads/demos/e/l/elufo/5efb2533c28b17d06ed2d594736bb410/css3-cherry-blossom_1319479594_demo_package/

is toch niet te geloven dat iemand dat als hobby heeft

)

Ik heb die hexagons in ee fidle geprobeerd maar dat viel me gisteren ook al op met die webgenarator: hij wordt daar precies weergegeven maar in werkelijkheid verschuift er een en ander met die code: http://jsfiddle.net/EZqCz/540/

ReneV · di 19 jan 2016

Is niet eenvoudig, en inderdaad het voorbeeld klopt niet.
Als je met de border werkt dan moet je die 5px van de border van de breedte aftrekken enz. enz.

Kijk hier eens http://codepen.io/web-tiki/pen/HhCyd
Werken met responsive hexagon en achtergrond image, misschien dat je daar iets mee kunt.
Probleem zal hem zitten zodra je een image verkleint zal de border ook wazig worden.

Maar waarom moet hij zo zijn als op je afbeelding?
Want het hele patroon wordt daar uit zijn geheel getrokken, zodat het hexagon niet meer klopt.

nuet · di 19 jan 2016

ik heb hem nu vooralsnog zo; (zonder css hexagons maar met images): http://webprofis.nl/demo/vd/1/discussievoorbeelden/linda/index.html
Wat ik niet snap: op mijn phone is het ontwerp op desktop precies hetzelfde als op de desktop; dus home hexagon en de 3 subhexagons 2d, 3d en fotografie in de sidekolom.
Als ik op mijn desktop de browser verklein en de width komt onder de 968px, dan wordt daar een andere html structuur geladen en dat zou ook op de phone moeten gebeuren maar dat doet ie op de phone niet

ReneV · di 19 jan 2016

Waarom bestaat jou reset.css uit html inhoud ?

Snap je css niet,
all en max width 968px ?

Waar is je phone dan ?

nuet · wo 20 jan 2016

resect.css heb ik er al uitgeknikkerd
Ik moet eerlijk bekennen, heb weinig kaas gegeten van responsive werken. Zoals de desktop het nu weergeeft is prima. Maar voor de phone had ik een andere structuur in gedachten zoals image bijlage.
ik heb in de css met


@media (min-width:320px)

geexperimenteerd en dan gaat ie idd over op die andere structuur maar dan krijgt de desktop ook die structuur wat weer net niet de bedoeling is.
Wat dan eigenlijk ook de bedoeling is is dat de hexagonenen schermbreefte worden op de phone zodat je niet meer hoeft uit te zoomen (hieronder)
Portfolio heeft een submenuutje 2D, 3D en fotografie.
http://webprofis.nl/test/linda/index.html

ReneV · wo 20 jan 2016

Het is vrij makkelijk, maar wel tijd rovend.
Ik begin eerst met kleine resolutie, en zo ga ik steeds groter werken.

Hier staan bijvoorbeeld alle media queries: https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries.

Met ff webmaster tool zet ik mijn window op phone weergave, en nu maak ik mijn css.
Dan zet ik mijn weergave op tablet enz.


Mozilla:
Crome:
Opera:
IE:
Safari:

geschikte layout voor webontwerp

Reacties