Archief - centreren, <figure> en werken met procenten

50Euro · 27 jul 2012

Hey,

Ben opnieuw begonnen en van het weinige dat ik wist ben ik weer veel vergeten. Mijn code zal wel niet goed zijn.. Graag opmerkingen.

Tipke Testpagina

Op deze website werk ik in css met procenten, gemakkelijk in scalen wel maar is dit gebruikelijk? Ik merk als ik te klein ga mijn j van header niet goed komt. Maar lagere resolutie is voor later normaal.

Hoe kan ik die "j"amescartoons en "welkom..." centreren mocht ik willen?

Waarom geeft figure padding effect? En wanneer moet je figure eigenlijk gebruiken?

Zou het bv mogelijk zijn om een soort van "imageholder" te maken waarbij je een vast venster hebt? Bv een canvas dat zoals de grootte nu bij landschap is maar dat het portret zich "autoscaled"? Of lost dat probleem zichzelf op als ik later (wss met een jquery plugin) zo een diaschow maak? Kan dat "portret" natuurlijk ook in 3 knippen in die slideshow dan maar ben nieuwsgierig qua opties.

Alvast bedankt om te lezen!

W0utR · 27 jul 2012

Waarom doe je niet gewoon:

Code:

<h1><span>J</span>amescartoons</h1>
<h2>Welkom...</h1>

En dan wat spelen met de positioning van je h2 en je bekomt hetzelfde resultaat, dan kan je makkelijk #amescartoons en vaste breedte geven en centeren

Code:

#amescartoons {
    width: 200px;
    margin: 0px auto;
}

Figure zal bij default een padding hebben, daarom dat het tegenwoordig wat standaard is om een reset.css te gebruiken, of gewoon

Code:

* {
    margin: 0px;
    padding: 0px;
}

Figure is eigenlijk een tag die omschrijft dat je met een afbeelding bezig bent:

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

Bekijk het zoals de <nav> tag, soort van een wrapper voor al je menu elementen.

Met dat laatste ben ik niet helemaal mee, je wilt dus dat je afbeeldingen een vaste grote behouden binnen een vakje?
Kijk eens naar de overflow property, daarmee zou het al makkelijk moeten lukken.

50Euro · 27 jul 2012

Bedankt en indrukwekkende website van u trouwens.

W0utR zei:
Waarom doe je niet gewoon:

Code:

<h1><span>J</span>amescartoons</h1> <h2>Welkom...</h1>

En dan wat spelen met de positioning van je h2 en je bekomt hetzelfde resultaat,

Ik probeer dit maar ik kan de j niet laten zakken. Zou graag hebben dat die gelijk komt met de h2 lijn.

welkom bij jamescartoons

Code:

<h1><span id="j">j</span>amescartoons</h1>
<h2>welkom op de website van jamescartoons</h2>

Code:

header {
	font:"Segoe UI";
	/* width:400px;
	margin:0 auto; */
}
header h1 {
	font-size:61px;
}
header #j {
	font-size:55px;
	letter-spacing:-2px;
}
header h2 {
	font-size:20px;
	margin-left:19px;
	margin-top:-18px;
}

W0utR · 27 jul 2012

Ik ben niet helemaal mee met wat je juist wilt, maar ongeveer zoiets? Edit this Fiddle - jsFiddle

50Euro · 27 jul 2012

welkom bij jamescartoons

dit dus, bedankt

50Euro · 27 jul 2012

ik zou dus graag van dit welkom bij jamescartoons naar bv dit gaan welkom bij jamescartoons met slideshow

Dus waar je nu op homepage 2 die tekening ziet zou ik daar een slideshow in willen. bv 960px * 685 venster (zoals de afmetingen van Goffin tekening) waar images zichzelf in passen zonder dat ze zich vervormen.

Ik vermoed dat ik voor het resizen php moet aanspreken en voor de slideshow jquery?

Bestaan er jQuery slideshows waar de border de afmetingen aanneemt van de image?

welkom bij jamescartoons Hoe kan ik deze eigenlijk centreren?

50Euro · 28 jul 2012

Nivo Slider Image Sizes and Rails

Hier staat het zowat wat ik wil maar jquery kennis is 0 dus moet ik veel opzoeken.

I had this problem with Nivo slider my portrait images would resize to 100% width and that made thes images real big in height. Check the caption in the portrait image. welkom bij jamescartoons

I added everything except the last piece of code where I get this error. http://www.tipke.be/test/afbeeldingen/nivo_error.jpg

Why does the last piece of code give an error? If I put the portrait image as first image the image is good but not centered and the other images resize at the same width. (But that’s the last piece of code that gives the error I suspect) Example here welkom bij jamescartoons

Thx in advance!

-BVR- · 28 jul 2012

Waarom al die php voor resizen?

Gebruik media queries? Evt. met jQuery fallback.

50Euro · 28 jul 2012

Is dat niet voor de resolutie?

En die php is 1 bestandje dia dan automatisch afbeelding resized en kleiner maakt qua MB/kb..

Afbeelding in lijst ziet er zo uit:

<img src="afbeeldingen/timthumb.php?src=afbeeldingen/landscape.jpg&q5&w=960" alt="" title="#goffin" />

Dat is toch niet overdreven?

-BVR- · 29 jul 2012

Op die manier. Ik dacht dat je bedoelde dat je je stylesheets aanpaste naargelang de window size. Toch zou ik voor dit ook jQuery gebruiken

Maar goed, dat is mss omdat ik beter met jQuery dan met PHP kan werken.

De error die je krijgt is volgens mij niet belangrijk. Volgens mij zegt Dreamweaver dat daar nog een semicolon achter moét - terwijl het bij mijn weten ook werkt zonder.

Voor te centreren en width aan te passen:

Code:

#slider { 
  width: auto;
  margin: 0 auto;
  max-width: 75%
}

En uw css is maar vreemd. Relative en absolute overload!

50Euro · 29 jul 2012

Zou al ietsje beter moeten zijn.

Dit is eigenlijk wat ik wil maar kan portret afbeeldingen niet centreren.
welkom bij jamescartoons

Dit is mijn html

Code:

<div id="slider">
	<div id="slide-holder">
		<div id="slide-runner">
			<a href="#"><img id="1" src="afbeeldingen/timthumb.php?src=afbeeldingen/portrait.jpg&amp;q5&amp;h=685" class="slide" alt="" /></a>
    		<a href="#"><img id="2" src="afbeeldingen/timthumb.php?src=afbeeldingen/landscape.jpg&amp;q5&amp;w=958" class="slide" alt="" /></a>
    		<a href="#"><img id="3" src="afbeeldingen/timthumb.php?src=afbeeldingen/IMG_1296.jpg&amp;q5&amp;w=958" class="slide" alt="" /></a>
		<div id="slide-controls">
     		<p id="slide-client" class="text"><strong><span></span></strong></p>
            <p id="slide-desc" class="text"></p>
     		<p id="slide-nav"></p>
    	</div>
		</div>
	</div>
</div>

en CSS *nog opkuiswerk

Code:

@charset "utf-8";
/* CSS Document */
* {
  margin: 0;
  padding: 0;
}
header, footer, article, section, hgroup, nav, figure {
	display:block;
}
#page {
	max-width:960px;
	margin:0 auto;
}
header {
	font-family:"Segoe UI";
	float:right;
}
header h1 {
	font-size:61px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
header span {
	font-size:68px;
	margin-top: -4px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: -17px;
}
header h2 {

	font-size:20px;
	margin-top: 18px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 4px;
}
article {
	position:absolute;
}
article ul {
	list-style-position: inside;
	list-style-type: none;
}
article li {
}
body {
	cursor : default;
	font-size : 12px;
	line-height : 16px;
	font-family : "Segoe UI";
}
a:link, a:visited {
text-decoration : none;
}
a img {
	border : 0;
}
div#slider {
margin : -1px 0 0;
}
div#video-header {
height : 685px;
margin : -1px 0 0;
}
div#slider div.wrap {
height : auto;
}
div#slider div#slide-holder {
z-index : 40;
width : 960px;
height: 695px;
position : absolute;
margin-top:100px;
}
div#slider div#slide-holder div#slide-runner {
width : 960px;
height : 685px;
overflow : hidden;
position : absolute;
}
div#slider div#slide-holder img {
	margin-top:10px;
	display : none;
	position : absolute;
}
div#slider div#slide-holder div#slide-controls {
	left : 0;
	top: -20px;
	width : 960px;
	height : 46px;
	display : none;
	position : absolute;
}
div#slider div#slide-holder div#slide-controls p.text {
	float : left;
	display : inline;
	font-size : 10px;
	line-height : 16px;
	margin-top: 15px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0px;
}
div#slider div#slide-holder div#slide-controls p#slide-desc {
	margin-left:15px;
}
div#slider div#slide-holder div#slide-controls p#slide-nav {
	color:#000;
	float : right;
	height : 24px;
	display : inline;
	margin-top: 11px;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 0;
}
div#slider div#slide-holder div#slide-controls p#slide-nav a {
	color:#000;
	height : 24px;
	display : inline;
	font-size : 11px;
	margin : 0 5px 0 0;
	line-height : 24px;
	font-weight : bold;
	text-align :right;
	text-decoration : none;
}
div#slider div#slide-holder div#slide-controls p#slide-nav a.on {
	font-size:10px;
	color:#666666;
}
div#slider div#slide-holder div#slide-controls p#slide-nav a {

}

Of kan dit ook aan de jQuery liggen?

Ps. Dan maar eens beginnen met jQuery want dit blijkt toch zéér frequent voor te komen.

50Euro · 30 jul 2012

In Opera, Safari, Chrome, IE9 ziet de website er goed uit.

Maar merk nu dat in IE8 (IE6, IE7 en lager niet getest) de website niet in center staat en ook opmaak van de heading klopt niet.. Ligt dat aan mij of IE? En wat kan je hieraan doen?

Eenvoudig? Of moet je voor IE versies lager dan 9 verschillende css schrijven?

welkom bij jamescartoons

-BVR- · 30 jul 2012

Seg makker, ik ga hier u niet nog 's helpen als ge niks met mijn raad doet hé.

50Euro · 30 jul 2012

BramVroy zei:
Code:

#slider { width: auto; margin: 0 auto; max-width: 75% }

Als ik dit doe is het zoals nu.. Staan de afbeeldingen in IE8 centraal maar in elke andere browser helemaal naar rechts.

Ik had met u advies wel zitten proberen maar kwam er niet.

De header krijg ik in IE8 ook niet goed :'(

Begrijp u frustratie maar raak ook helemaal in de war.. Alle browsers goed maar IE8 slaat de css van header en centreren niet aan..

Scissor · 30 jul 2012

Zet er eens bij

text-align:center

50Euro · 30 jul 2012

Gelukt met de slider! Maar de header nog niet jammer genoeg.. Het ziet er nu wel in elke browser hetzelfde uit. IE6 en IE7 weet ik niet.

Heb wel gevonden dat IE8 de css opmaak pas bekijkt als je werkt met id's.

Iemand idee hoe ik deze header naar rechts verplaats? Dus "welkom op de site van jamescartoons" onder "jamescartoons". Maar dan aan de rechterkant.

welkom bij jamescartoons

Code:

* {
  margin: 0;
  padding: 0;
}
header, footer, article, section, hgroup, nav, figure {
	display:block;
}#koptitel {
	margin: 0 auto;
	width: 960px;
}
#titel {
	font-size:61px;
	margin-top: 18px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#slogan {
	font-size: 20px;
	margin-top: 16px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 20px;
}

<header>
<div id="koptitel">
<h1 id="titel">jamescartoons</h1>
<h2 id="slogan">welkom op de website van jamescartoons</h2>
</div>
</header>

Ps Mocht je aan zee zitten en het is slecht weer.. Rara wie ben ik kik Gratis ingang, James is er met 2 cartoons bij.

50Euro · 31 jul 2012

Is mij gelukt gisteren.. Moet nu wel nieuwe F5 knop hebben denk ik..

Archief - centreren, <figure> en werken met procenten

50Euro

Legacy Member

W0utR

Legacy Member

50Euro

Legacy Member

W0utR

Legacy Member

50Euro

Legacy Member

50Euro

Legacy Member

50Euro

Legacy Member

-BVR-

Legacy Member

50Euro

Legacy Member

-BVR-

Legacy Member

50Euro

Legacy Member

50Euro

Legacy Member

-BVR-

Legacy Member

50Euro

Legacy Member

Scissor

Legacy Member

50Euro

Legacy Member

50Euro

Legacy Member