fotos netjes in de rij?

Status
Niet open voor verdere reacties.

plintjes

Gebruiker
Lid geworden
20 sep 2016
Berichten
51
Wederom een vraag van mijn hand, ik ben al de hele dag bezig maar sommige dingen willen gewoon niet lukken.

Als je op deze link kijkt zie je dat de afbeeldingen nogal uit elkaar staan, ik wil ze netjes naast elkaar hebben maar wat ik ook probeer en verander, hoe blijft min of meer er zo uit zien

http://stuntenmetplinten.nl/assortiment.html

hier staat de boosdoener

en dit is de code

Code:
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
	<meta name="viewport" content="width=device-width" />
	<title>stuntenmetplinten.nl</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
	<META Name="keywords" Content="Eric Salomons, plinten, montage, stuntenmetplinten.nl, goedkope plinten, plint montage, plinten inclusief montage,MDF plinten, vochtwerende plinten, vochtwerende mdf plinten, strakke plinten, blokplinten, monteren plinten, plinten lijmen, verstekzagen, kitten, werkspot,">
	<META Name="description" Content="Scherp geprijsde MDF plinten inclusief montage vanaf € 9,95 (p/m). [url]http://www.stuntenmetplinten.nl[/url] , ">
	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <META NAME="Author" CONTENT="stuntenmetplinten.nl">
	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<!-- Custom styles for this template -->
	<link href="css/justified-nav.css" rel="stylesheet" type="text/css">
	<link href="css/templatemo_style.css" rel="stylesheet" type="text/css">

	<!-- HTML 5 shim for IE backwards compatibility -->
		<!-- [if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
		</script>
		<![endif]-->
</head>
<body>
	<div id="main_container">
		<div class="container" id="preview">
			<div class="header">
				<div class="navbar-header">
		          	<a href="#"><img src="images/pms.jpg" alt="stuntenmetplinten.nl" class="templatemo-logo"></a>
		        </div>
      			<form  action="#" method="get" class="navbar-form navbar-right" role="search">
      				<div class="form-group">
      					<input type="text" class="form-control" placeholder="Search" id="keyword" name="keyword">
      				</div>
      				<button type="submit" class="btn btn-default" name="Search">Go</button>
      			</form>
			</div>
			<div class="cleaner"></div>
			<div class="navbar templatemo-nav" id="navbar">
				<div class="navbar-header">		          	
		          	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
		        </div>
      			<div class="navbar-collapse collapse">
			        <ul class="nav nav-justified">
			          <li class="active"><a href="index.html">Home</a></li>
	                  <li><a href="wiezijnwij.html">Wat doen wij</a></li>
			          <li><a href="montage.html">Montage</a></li>
			          <li><a href="materiaal.html">Materiaal</a></li>
			          <li><a href="plintkeuze.html">Plintkeuze</a></li>
                      <li><a href="projecten.html">Projecten</a></li>
                      <li><a href="tarieven.html">Tarieven</a></li>
                      <li><a href="assortiment.html">Assortiment</a></li>
                      <li><a href="contact.html">Contact</a></li>
                      <li><a href="webshop.html">webshop</a></li>
		      	</div> <!-- nav -->
	      	</div>
            <h3>Deel van ons assortiment</h3>
				</div>
                
				<div class="row">
					<div class="col-xs-6 col-sm-3 col-md-3"><a href="moderneplint assorti.html" class="thumbnail"><img src="images/moderne plint.jpg" alt="Moderne plint" class="img-responsive"><p>Moderne plint</p></a></div>
					<div class="col-xs-6 col-sm-3 col-md-3"><a href="koloniale assorti.html" class="thumbnail"><img src="images/Koloniale plint.jpg" alt="Koloniale plint" class="img-responsive"><p>Koloniale plint</p></a></div>
					<div class="col-xs-6 col-sm-3 col-md-3"><a href="eigentijdse assorti.html" class="thumbnail"><img src="images/eigentijdse plint.jpg" alt="eigentijdse plint" class="img-responsive"><p>Eigentijdse plint</p></a></div>
					<div class="col-xs-6 col-sm-3 col-md-3"><a href="tijdloze assorti.html" class="thumbnail"><img src="images/Tijdloze plint.jpg" alt="Tijdloze plint" class="img-responsive"><p>Tijdloze plint</p></a></div>
				</div>
                
				<div class="row">
					<div class="col-xs-6 col-sm-3 col-md-3"><a href="Renasaissance assorti.html" class="thumbnail"><img src="images/Renasaissance plint.jpg" alt="Renasaissance plint" class="img-responsive"><p>Renasaissance plint</p></a></div>
					<div class="col-xs-6 col-sm-3 col-md-3"><a href="Renovatie plint assorti.html" class="thumbnail"><img src="images/Renovatie plint klassiek.jpg" alt="Renovatie plint klassiek" class="img-responsive"><p>Renovatie plint klassiek</p></a></div>
					<div class="col-xs-6 col-sm-3 col-md-3"><a href="retro assorti.html" class="thumbnail"><img src="images/retro plint.jpg" alt="Retro plint" class="img-responsive"><p>Retro plint</p></a></div>
					<div class="col-xs-6 col-sm-3 col-md-3"><a href="Romantische assorti.html" class="thumbnail"><img src="images/Romantische plint.jpg" alt="Romantische plint" class="img-responsive"><p>Romantische plint</p></a></div>
				</div>
                <div class="row">
					<div class="col-xs-6 col-sm-3 col-md-3"><a href="barok assorti.html" class="thumbnail"><img src="images/Renasaissance plint.jpg" alt="Renasaissance plint" class="img-responsive"><p>Barok plint</p></a></div>
					<div class="col-xs-6 col-sm-3 col-md-3"><a href="flexibele plint assorti.html" class="thumbnail"><img src="images/flexibele plint.jpg" alt="Renovatie plint klassiek" class="img-responsive">
					  <p>Flexibele plint</p>
					</a></div>
					<div class="col-xs-6 col-sm-3 col-md-3"><a href="retro assorti.html" class="thumbnail"><img src="images/bij tip lak.jpg" alt="Retro plint" class="img-responsive"><p>Bij tip lak</p></a></div>
					<div class="col-xs-6 col-sm-3 col-md-3"><a href="Romantische assorti.html" class="thumbnail"><img src="images/Romantische plint.jpg" alt="Romantische plint" class="img-responsive"><p>leeg</p></a></div>
				</div>
                <div class="row">
					<div class="col-xs-6 col-sm-3 col-md-3"><a href="Renasaissance assorti.html" class="thumbnail"><img src="images/Renasaissance plint.jpg" alt="Renasaissance plint" class="img-responsive"><p>leeg</p></a></div>
					<div class="col-xs-6 col-sm-3 col-md-3"><a href="Renovatie plint assorti.html" class="thumbnail"><img src="images/Renovatie plint klassiek.jpg" alt="Renovatie plint klassiek" class="img-responsive"><p>leeg</p></a></div>
					<div class="col-xs-6 col-sm-3 col-md-3"><a href="retro assorti.html" class="thumbnail"><img src="images/retro plint.jpg" alt="Retro plint" class="img-responsive"><p>leeg</p></a></div>
					<div class="col-xs-6 col-sm-3 col-md-3"><a href="Romantische assorti.html" class="thumbnail"><img src="images/Romantische plint.jpg" alt="Romantische plint" class="img-responsive"><p>leeg</p></a></div>
				</div>
				
			<div class="row" id="img_preview"> <!-- [url]http://stackoverflow.com/questions/20471467/bootstrap-vertical-positioning-to-horizontal-in-smaller-screen[/url] -->			</div>

</div>
		</div>
		<footer class="container">
			<div class="credit row">
				<div class="col-md-6 col-md-offset-3">
					<div id="templatemo_footer"> Copyright © 2016 Stumtenmetplinten.nl</div>
				</div>
				<div class="col-md-3">
					<div style="text-align: right">
						<a rel="nofollow" href="http://www.facebook.com/templatemo" target="_parent">
                        	<img src="images/facebook.png" alt="Like us on Facebook">
                        </a>
						<a href="#"><img src="images/instagram.png" alt="Follow us on Twitter"></a>
						<a href="#"><img src="images/werkspot.png" alt="RSS feeds"></a>
					</div>
				</div>				
			</div>
		</footer>	
	</div>
	<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/templatemo_script.js"></script>
    <!-- Hiding text overflow: [url]http://stackoverflow.com/questions/15308061/how-to-avoid-text-overflow-in-twitter-bootstrap[/url] -->
    <!-- templatemo 393 fantasy -->
<!-- 

Fantasy Template

[url]http://www.templatemo.com/tm-393-fantasy[/url]

-->
</body>
</html>
 
Laatst bewerkt door een moderator:
Hoi,
Ik heb de code tags er maar even omheen gezet.
Dit is voor de helpers overzichtelijker.
 
Probeer het eens met het volgende:
1. Vervang je id main-container door class container
2. Geef de class thumbnail een breedte van 100% mee.

Nu staan ze dichter bij elkaar, is alles beter uitgelijnd en is ook wat netter.
 
class container heb ik gevonden,

class container heb ik gevonden, maar waar zet ik die 100% neer dat kan ik nergens vinden, nogmaals sorry hoor, maar ben maar eenvoudige ZZP-er:cool:
 
Die 100% width kan je in CSS definieren.
 
pls heb je daar een voorbeeld van hoe ik dat moet doen, ik ben er bijna volgens mij, bijna alles werkt nu alleen fine tunen.

dit staat er onder andere nu in
Code:
body>
	<div id="class_container">
		<div class="container" id="preview">
			<div class="header">
				<div class="navbar-header">
		          	<a href="#"><img src="images/pms.jpg" alt="stuntenmetplinten.nl" class="templatemo-logo"></a>
		        </div>
      			<form  action="#" method="get" class="navbar-form navbar-right" role="search">
      				<div class="form-group">
      					<input type="text" class="form-control" placeholder="Search" id="keyword" name="keyword">
      				</div>
      				<button type="submit" class="btn btn-default" name="Search">Go</button>
      			</form>
<img src="images/slider1.png" alt="header image" class="img-responsive cleaner">
			<div class="navbar templatemo-nav" id="navbar">
				<div class="navbar-header">		          	
		          	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
			</div>
			<div class="cleaner"></div>
			<div class="navbar templatemo-nav" id="navbar">
				<div class="navbar-header">		          	
		          	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
</div>
      			<div class="navbar-collapse collapse">
			        <ul class="nav nav-justified">
			          <li class="active"><a href="index.html">Home</a></li>
	                  <li><a href="wiezijnwij.html">Diensten</a></li>
			          <li><a href="montage.html">Montage</a></li>
			          <li><a href="materiaal.html">Materiaal</a></li>
			          <li><a href="plintkeuze.html">Plintkeuze</a></li>
                      <li><a href="projecten.html">Projecten</a></li>
                      <li><a href="tarieven.html">Tarieven</a></li>
                      <li><a href="assortiment.html">Assortiment</a></li>
                      <li><a href="contact.php">Contact</a></li>
                      <li><a href="webshop.html">webshop</a></li>
		      	</div> <!-- nav -->
	      	</div>
 
Laatst bewerkt door een moderator:
Hallo plintjes,
Als je doce plaatst zou je dan zo vriendelijk willen zijn om de code tags er omheen te zetten.
Dit is voor de helpers en mijn muis wieltje prettiger.
 
Ik raad aan om een nieuwe css-stylesheet te maken, met bijv. de naam main_style.css.
Deze laad je in NA die van templatemo_style.css

Code:
<link href="css/main_style.css" rel="stylesheet" type="text/css">

Daarin zet je dan neer:

Code:
.thumbnail {
width: 100px;
}


Verder raad ik aan om ook eens HTML en CSS te leren. Daarmee kan je verfijnder websites bouwen, zonder dat je de beperkte trukendoos van Dreamweaver hoeft te gebruiken, en met het voordeel dat je de HTML-code leert begrijpen.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan