Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

html tips

antrax - 05/04/2012 19:35

Lid

Hallo

Ik ben al tijdje bezig met html css en gaat al aardig goed.
Nu heb ik een eigen website en een vriend van me heeft een design gemaakt voor mij die ben ik nu aan het omzetten naar html en daar heb ik wat tips voor nodig. Bijvoorbeeld dat stukje op de screen dat heb zo gecodeerd als de code eronder. dat plaatje hieronder is ingedeeld in losse afbeeldingen zegmaar.
Nu is mijn vraag hoe ik het gecodeerd is dat goed of hoe kan ik dat anders het beste doen.

Vriendelijke Groeten Robbert
http://i39.tinypic.com/11t4hw8.png

html4strict code - Bekijk de code zonder highlighting - Klap code in

<div id="inloggen2">
<div id="vijftien"></div>
<div id="zestien"></div>
<div id="zeventien"></div>
<div id="Inloggen"></div>
<div id="negentien"></div> 
<div id="Prev"></div>

<div id="LoginFey"></div>    
</div>

<div id="inloggen2">
<div id="vijftien"></div>
<div id="zestien"></div>
<div id="zeventien"></div>
<div id="Inloggen"></div>
<div id="negentien"></div> 
<div id="Prev"></div>
 
<div id="LoginFey"></div>    
</div>

css code - Bekijk de code zonder highlighting - Klap code in

                 
#inloggen2
   {
	   width:952px;
	   height:195px;
	   background-color:#FFF;
	   text-align:center;
	   float:left;
   }	   
   
   #vijftien
   {
	   background-image:url(images/index_15.gif);
       float:left; 
	   width:495px;
	   height:69px;
   }
   
     #zestien
   {
	   background-image:url(images/index_16.gif);
       float:left; 
	   width:457px;
	   height:69px;
   }
   
             #zeventien
   {
	   background-image:url(images/index_17.gif);
       float:left; 
	   width:494px;
	   height:38px;
   }
   
  
  	       #eenentwintig
   {
	   background-image:url(images/index_21.gif);
       float:left; 
	   width:10px;
	   height:1px;
   }

   
   
  	       #negentien
   {
	   background-image:url(images/index_19.gif);
	   float:left;
       width:494px;
	   height:88px;
   }
   
          #Inloggen
   {
	   background-image:url(images/vakz4inloggen.gif);
       float:left; 
	   width:138px;
	   height:19px;
   }
   
          #Prev
   {
	   background-image:url(images/prev.jpg);
     float:left;
	 width:293px;
	   height:63px;
   }

           #LoginFey
   {
	 background-image:url(images/loginfey.jpg);
     position:relative; 
	  float:left;
	 width:78px;
	  height:83px;
   }
            
#inloggen2
   {
	   width:952px;
	   height:195px;
	   background-color:#FFF;
	   text-align:center;
	   float:left;
   }	   
 
   #vijftien
   {
	   background-image:url(images/index_15.gif);
       float:left; 
	   width:495px;
	   height:69px;
   }
 
     #zestien
   {
	   background-image:url(images/index_16.gif);
       float:left; 
	   width:457px;
	   height:69px;
   }
 
             #zeventien
   {
	   background-image:url(images/index_17.gif);
       float:left; 
	   width:494px;
	   height:38px;
   }
 
 
  	       #eenentwintig
   {
	   background-image:url(images/index_21.gif);
       float:left; 
	   width:10px;
	   height:1px;
   }
 
 
 
  	       #negentien
   {
	   background-image:url(images/index_19.gif);
	   float:left;
       width:494px;
	   height:88px;
   }
 
          #Inloggen
   {
	   background-image:url(images/vakz4inloggen.gif);
       float:left; 
	   width:138px;
	   height:19px;
   }
 
          #Prev
   {
	   background-image:url(images/prev.jpg);
     float:left;
	 width:293px;
	   height:63px;
   }
 
           #LoginFey
   {
	 background-image:url(images/loginfey.jpg);
     position:relative; 
	  float:left;
	 width:78px;
	  height:83px;
   }
 

20 antwoorden

Gesponsorde links

Pieter - 06/04/2012 11:04
SEO guru		Dat is een ondoorzichtige vraag. Al die cijfertjes als divs zeggen helemaal niets, het totale plaatje ontbreekt. Wat ik wel als tips kan geven: -gebruik zo min mogelijk divs, die vervuilen je code. Enkel gebruiken als het echt nodig is. -geef een logische opbouw aan je htmlstructuur. En treffelijke namen. Want hoe weet je binnen een halfjaar nog wat zeventien is?

antrax - 06/04/2012 13:33
Lid		Het gaat om dat plaatje die is in stukjes gehakt zegmaar en die moet ik omzetten naar html Css hoe kan ik dat het beste doen is me vraag? Iedergeval bedankt voor je andere tips

larssy1 - 06/04/2012 13:59
MySQL beginner		1. Geef plaatjes een duidelijke benaming (header, menuLeft, menuBg, menuRight, etc), geen index_17 en weet ik veel wat. 2. Geef je div's een duidelijke classe naam (headerContainer, header) 3. Maak de plaatjes niet te groot, bijv: achtergrond plaatje maak je gewoon een herhalend plaatje of constante achtergrond. Het is belangrijk dat het achtergrond plaatje zo klein mogelijk qua omvang blijft. Een te groot plaatje resulteert in een te lang ladende website. 4. Ik zelf deel altijd mijn plaatjes op en zet ze in de CSS in de achtergrond. Ik gebruik enkel plaatjes in mijn HTML als het ECHT nodig is, anders niet. Je kunt hiervoor wel kijken in mijn huidige project, misschien dat je er iets wijzer uit kunt komen. http://www.unrealxs.com/beta/beta/test/ Nog een belangrijk iets. Vergeet nooit je HTML en CSS W3C valid te krijgen.

antrax - 06/04/2012 14:43 (laatste wijziging 06/04/2012 14:45)
Lid		bedankt voor je tips zal ze meenemen uit jou huidige project wordt ik zeker wijzer nogmaals bedankt. Nog even een andere vraag hoe kan ik bij een li ervoor zorgen dat de de achtergrond kleur om en om is dus rood wit blauw en dan weer rood wit blauw

Pieter - 06/04/2012 15:58
SEO guru		Dat kan je via CSS (google op alternating row colors css) of via php.

larssy1 - 06/04/2012 18:48
MySQL beginner		Pieter schreef: Dat kan je via CSS (google op alternating row colors css) of via php. Alhoewel deze php een mogelijkheid is, kijk ik zelf vooral of de $i waarde een even of oneven getal is en of het een rest waarde heeft

Pieter - 06/04/2012 20:37
SEO guru		Dat is wat ik bedoel Larssy. Tenzij jij het via javascript zou doen.

antrax - 06/04/2012 20:50
Lid		bedankt allemaal ga ermee aan de slag nu thnxx

larssy1 - 07/04/2012 14:42
MySQL beginner		Pieter schreef: Dat is wat ik bedoel Larssy. Tenzij jij het via javascript zou doen. Ik probeer JS vaak te vermijden voor zulke gevallen indien het geval iemand JS niet aan heeft staan in zijn browser. Ik keek enkel naar het PHP voorbeeld in de link die jij gaf

antrax - 21/04/2012 10:26
Lid		Ben inmiddels opnieuw begonnen en het gaat al stukken beter dankzij jullie tips. Welke editior gebruiken jullie dreamweaver notepad ++. Ik gebruik dreamweaver in de browser is me template wel goed. Maar in dreamweaver kloppen de positie's van de plaatjes niet meer hebben jullie dat probleem ook wel is. Dit is in google chrome En dit is dan Dreamweaver groeten Robbert

Pieter - 21/04/2012 15:34 (laatste wijziging 21/04/2012 15:35)
SEO guru		Ik werk in Smultron, een mac variant van Notepad++. Kleuren highlighting van mijn code, meer heb ik niet nodig. De rest zit allemaal in het hoofd en ik heb in de loop der jaren mijn eigen documentatie opgebouwd. Ik ben sindsdien nog maar weinig programma's tegengekomen die ik liever gebruik. Positioneren doe ik zonder grafische editor, je code wordt er immers meestal zo lelijk of inefficiënt door. Klooien om alles pixelperfect te krijgen in elke browser moet je bijna overal doen.

larssy1 - 21/04/2012 16:43
MySQL beginner		Ikzelf gebruik Dreamweaver voor de Layout, voor puur de code gebruik ik vooral notepad++

antrax - 30/06/2012 01:43
Lid		Hallo allemaal de template omzetten naar html css is allemaal gelukt nu. Ben nu een stapje verder aan het gaan en dat is wordpress implementeren maar nu loop ik bij een stukje vast.hoe zorg ik er voor dat ik dit effect krijg in wordpress dus de kleuren om en om en de tekst/link afgekort zegmaar alvast bedankt http://i49.tinypic.com/24qvb0i.png

UpLink - 01/07/2012 00:23
...		Het mee in de CSS van de actieve template zetten of een custom CSS maken en mee laten inladen...

antrax - 01/07/2012 01:52

Lid

In de HTML CSS versie heb ik het zo. Deze css gebruik ik dus ook voor me wordpress template. vandaar dat ik niet hellemaal begrijp wat je bedoelt sorry.

html4strict code - Bekijk de code zonder highlighting - Klap code in

<li class="item A"> Duizenden fans op de eerste..  </li>
<li class="item B"> Duizenden fans op de eerste..  </li>
<li class="item A"> Duizenden fans op de eerste..  </li>
<li class="item B"> Duizenden fans op de eerste..  </li>
<li class="item A"> Duizenden fans op de eerste..  </li>
<li class="item B"> Duizenden fans op de eerste..  </li>
<li class="item A"> Duizenden fans op de eerste..  </li>
<li class="item B"> Duizenden fans op de eerste.. </li>

<li class="item A"> Duizenden fans op de eerste..  </li>
<li class="item B"> Duizenden fans op de eerste..  </li>
<li class="item A"> Duizenden fans op de eerste..  </li>
<li class="item B"> Duizenden fans op de eerste..  </li>
<li class="item A"> Duizenden fans op de eerste..  </li>
<li class="item B"> Duizenden fans op de eerste..  </li>
<li class="item A"> Duizenden fans op de eerste..  </li>
<li class="item B"> Duizenden fans op de eerste.. </li>

css code - Bekijk de code zonder highlighting - Klap code in

                .item.A {
	background-color:#e0e0e0;
		   width:225px;
	   height:20px;
	 }

            
.item.A {
	background-color:#e0e0e0;
		   width:225px;
	   height:20px;
	 }
 

Pieter - 01/07/2012 08:44
SEO guru		@Antrax, is de tekst die af te korten is, de tekst van je artikel? Anders kan je dat simpelweg via the_excerpt() regelen. In je functions.php kan je dan volgende code plakken: php code - Bekijk de code zonder highlighting - Klap code in function custom_excerpt_length( $length ) { return 20; } add_filter( 'excerpt_length', 'custom_excerpt_length', 999 ); function custom_excerpt_length( $length ) { return 20; } add_filter( 'excerpt_length', 'custom_excerpt_length', 999 ); Daarmee zet je de maximum lengte op 20 woorden. Voor de kleuren, kan je dit of via CSS3 doen, maar dan werkt het niet in elke browser: css code - Bekijk de code zonder highlighting - Klap code in li:nth-child(odd) { background: red; } li:nth-child(odd) { background: red; } Een andere mogelijkheid is via php in een loop de class te zetten.

antrax - 01/07/2012 23:05
Lid		Heb een bestand functions.php aangemaakt met de volgende code erin maar de code wil niet werken? moet ik het bestand functions.php ergens oproepen ofzo.bedoel de titel is nu lang maar moet afgekort moet worden. php code - Bekijk de code zonder highlighting - Klap code in <?php function custom_excerpt_length( $length ) { return 20; } add_filter( 'excerpt_length', 'custom_excerpt_length', 999 ); ?> <?php function custom_excerpt_length( $length ) { return 20; } add_filter( 'excerpt_length', 'custom_excerpt_length', 999 ); ?> Die css code werkt nu wel perfect.

Pieter - 02/07/2012 09:29

SEO guru

Je functions.php staat in je template map en wordt automatisch door WordPress uitgelezen. Als het de titel is, zal het niet baten, want dit werkt enkel voor de excerpt (de korte samenvatting).

Voor de titel zal je van de php strlen() moeten gebruik maken. Plaats volgende functie in je functions.php file:

php code - Bekijk de code zonder highlighting - Klap code in

function afgekort($text) {
  $chars_limit = 100; // max. aantal letters
  $chars_text = strlen($text);
  $text = $text." ";
  $text = substr($text,0,$chars_limit);
  $text = substr($text,0,strrpos($text,' '));
  if ($chars_text > $chars_limit)
     { $text = $text."..."; } // Afkorting
     return $text;
}

function afgekort($text) {
  $chars_limit = 100; // max. aantal letters
  $chars_text = strlen($text);
  $text = $text." ";
  $text = substr($text,0,$chars_limit);
  $text = substr($text,0,strrpos($text,' '));
  if ($chars_text > $chars_limit)
     { $text = $text."..."; } // Afkorting
     return $text;
}

En dan roep je je titel aan door volgende code:

php code - Bekijk de code zonder highlighting - Klap code in

<?php echo afgekort(get_the_title()); ?>

<?php echo afgekort(get_the_title()); ?>

antrax - 08/07/2012 21:50
Lid		Thnxx voor je hulp je code's werken perfect heb weer een hoop geleerd over wordpress. Als ik dit effect wil kwa foto pagina's kan ik dan het beste voor elk foto verslag een aparte pagina maken?Dit effect bedoel ik

Pieter - 09/07/2012 11:41
SEO guru		@Antrax, dat doe je inderdaad beter in een post of pagina als je het op die manier wilt. PS: als een post nuttig is, kan je de persoon bedanken door op "Bedank poster!" te klikken bij de persoon die je geholpen heeft. Zo kunnen mensen ook later zien waar het meest nuttige antwoord staat.

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten