Hi i would like to extract all the amenities in the html file bellow that have tag alt="Has amenity / Allowed",like for example TV,Internet ...
I did a following code :
var descriptionNode = htmlDocument.DocumentNode.SelectSingleNode("//div[#id='amenities']//li//");
but it does not filter the alt="...." in the <img> ,it just shows all the text (amenities in my case).If i add in the ("//div[#id='amenities']//li//img") it does not show anything.I also tried with contains but without result.
<div id="amenities" style="display:none" class="details_content">
<ul>
<li>
<img alt="Doesn't have amenity / Not allowed" class="amenity-icon" height="17" src="//a1.muscache.com/airbnb/static/page3/v3/no_amenity-7229ab239bb2e3d81da7aa5034c265d4.png" title="Doesn't have amenity / Not allowed" width="17" />
<p>Smoking Allowed </p>
</li>
<li>
<img alt="Doesn't have amenity / Not allowed" class="amenity-icon" height="17" src="//a1.muscache.com/airbnb/static/page3/v3/no_amenity-7229ab239bb2e3d81da7aa5034c265d4.png" title="Doesn't have amenity / Not allowed" width="17" />
<p>Pets Allowed </p>
</li>
<li>
<img alt="Has amenity / Allowed" class="amenity-icon" height="17" src="//a2.muscache.com/airbnb/static/page3/v3/has_amenity-3f3ba6d898588b24e37211888d98713f.png" title="Has amenity / Allowed" width="17" />
<p>TV </p>
</li>
<li>
<img alt="Doesn't have amenity / Not allowed" class="amenity-icon" height="17" src="//a1.muscache.com/airbnb/static/page3/v3/no_amenity-7229ab239bb2e3d81da7aa5034c265d4.png" title="Doesn't have amenity / Not allowed" width="17" />
<p>Cable TV </p>
</li>
<li>
<img alt="Has amenity / Allowed" class="amenity-icon" height="17" src="//a2.muscache.com/airbnb/static/page3/v3/has_amenity-3f3ba6d898588b24e37211888d98713f.png" title="Has amenity / Allowed" width="17" />
<p>Internet <a class="tooltip" title="Internet (wired or wireless)"><img alt="Questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3" src="//a2.muscache.com/airbnb/static/icons/questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3.png" style="width:12px; height:12px;" /></a></p>
</li>
<li>
<img alt="Has amenity / Allowed" class="amenity-icon" height="17" src="//a2.muscache.com/airbnb/static/page3/v3/has_amenity-3f3ba6d898588b24e37211888d98713f.png" title="Has amenity / Allowed" width="17" />
<p>Wireless Internet <a class="tooltip" title="A wireless router that guests can access 24/7."><img alt="Questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3" src="//a2.muscache.com/airbnb/static/icons/questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3.png" style="width:12px; height:12px;" /></a></p>
</li>
<li>
<img alt="Has amenity / Allowed" class="amenity-icon" height="17" src="//a2.muscache.com/airbnb/static/page3/v3/has_amenity-3f3ba6d898588b24e37211888d98713f.png" title="Has amenity / Allowed" width="17" />
<p>Air Conditioning </p>
</li>
<li>
<img alt="Has amenity / Allowed" class="amenity-icon" height="17" src="//a2.muscache.com/airbnb/static/page3/v3/has_amenity-3f3ba6d898588b24e37211888d98713f.png" title="Has amenity / Allowed" width="17" />
<p>Heating </p>
</li>
</ul>
<ul>
<li>
<img alt="Has amenity / Allowed" class="amenity-icon" height="17" src="//a2.muscache.com/airbnb/static/page3/v3/has_amenity-3f3ba6d898588b24e37211888d98713f.png" title="Has amenity / Allowed" width="17" />
<p>Elevator in Building </p>
</li>
<li>
<img alt="Has amenity / Allowed" class="amenity-icon" height="17" src="//a2.muscache.com/airbnb/static/page3/v3/has_amenity-3f3ba6d898588b24e37211888d98713f.png" title="Has amenity / Allowed" width="17" />
<p>Handicap Accessible <a class="tooltip" title="The property is easily accessible. Guests should communicate about individual needs."><img alt="Questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3" src="//a2.muscache.com/airbnb/static/icons/questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3.png" style="width:12px; height:12px;" /></a></p>
</li>
<li>
<img alt="Doesn't have amenity / Not allowed" class="amenity-icon" height="17" src="//a1.muscache.com/airbnb/static/page3/v3/no_amenity-7229ab239bb2e3d81da7aa5034c265d4.png" title="Doesn't have amenity / Not allowed" width="17" />
<p>Pool <a class="tooltip" title="A private swimming pool"><img alt="Questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3" src="//a2.muscache.com/airbnb/static/icons/questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3.png" style="width:12px; height:12px;" /></a></p>
</li>
<li>
<img alt="Has amenity / Allowed" class="amenity-icon" height="17" src="//a2.muscache.com/airbnb/static/page3/v3/has_amenity-3f3ba6d898588b24e37211888d98713f.png" title="Has amenity / Allowed" width="17" />
<p>Kitchen <a class="tooltip" title="Kitchen is available for guest use"><img alt="Questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3" src="//a2.muscache.com/airbnb/static/icons/questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3.png" style="width:12px; height:12px;" /></a></p>
</li>
<li>
<img alt="Doesn't have amenity / Not allowed" class="amenity-icon" height="17" src="//a1.muscache.com/airbnb/static/page3/v3/no_amenity-7229ab239bb2e3d81da7aa5034c265d4.png" title="Doesn't have amenity / Not allowed" width="17" />
<p>Parking Included </p>
</li>
<li>
<img alt="Doesn't have amenity / Not allowed" class="amenity-icon" height="17" src="//a1.muscache.com/airbnb/static/page3/v3/no_amenity-7229ab239bb2e3d81da7aa5034c265d4.png" title="Doesn't have amenity / Not allowed" width="17" />
<p>Doorman </p>
</li>
<li>
<img alt="Doesn't have amenity / Not allowed" class="amenity-icon" height="17" src="//a1.muscache.com/airbnb/static/page3/v3/no_amenity-7229ab239bb2e3d81da7aa5034c265d4.png" title="Doesn't have amenity / Not allowed" width="17" />
<p>Gym <a class="tooltip" title="Guests have free access to a gym"><img alt="Questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3" src="//a2.muscache.com/airbnb/static/icons/questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3.png" style="width:12px; height:12px;" /></a></p>
</li>
<li>
<img alt="Doesn't have amenity / Not allowed" class="amenity-icon" height="17" src="//a1.muscache.com/airbnb/static/page3/v3/no_amenity-7229ab239bb2e3d81da7aa5034c265d4.png" title="Doesn't have amenity / Not allowed" width="17" />
<p>Hot Tub </p>
</li>
</ul>
<ul>
<li>
<img alt="Doesn't have amenity / Not allowed" class="amenity-icon" height="17" src="//a1.muscache.com/airbnb/static/page3/v3/no_amenity-7229ab239bb2e3d81da7aa5034c265d4.png" title="Doesn't have amenity / Not allowed" width="17" />
<p>Indoor Fireplace </p>
</li>
<li>
<img alt="Has amenity / Allowed" class="amenity-icon" height="17" src="//a2.muscache.com/airbnb/static/page3/v3/has_amenity-3f3ba6d898588b24e37211888d98713f.png" title="Has amenity / Allowed" width="17" />
<p>Buzzer/Wireless Intercom </p>
</li>
<li>
<img alt="Doesn't have amenity / Not allowed" class="amenity-icon" height="17" src="//a1.muscache.com/airbnb/static/page3/v3/no_amenity-7229ab239bb2e3d81da7aa5034c265d4.png" title="Doesn't have amenity / Not allowed" width="17" />
<p>Breakfast <a class="tooltip" title="Breakfast is provided."><img alt="Questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3" src="//a2.muscache.com/airbnb/static/icons/questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3.png" style="width:12px; height:12px;" /></a></p>
</li>
<li>
<img alt="Doesn't have amenity / Not allowed" class="amenity-icon" height="17" src="//a1.muscache.com/airbnb/static/page3/v3/no_amenity-7229ab239bb2e3d81da7aa5034c265d4.png" title="Doesn't have amenity / Not allowed" width="17" />
<p>Family/Kid Friendly <a class="tooltip" title="The property is suitable for hosting families with children."><img alt="Questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3" src="//a2.muscache.com/airbnb/static/icons/questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3.png" style="width:12px; height:12px;" /></a></p>
</li>
<li>
<img alt="Doesn't have amenity / Not allowed" class="amenity-icon" height="17" src="//a1.muscache.com/airbnb/static/page3/v3/no_amenity-7229ab239bb2e3d81da7aa5034c265d4.png" title="Doesn't have amenity / Not allowed" width="17" />
<p>Suitable for Events <a class="tooltip" title="The property can accommodate a gathering of 25 or more attendees."><img alt="Questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3" src="//a2.muscache.com/airbnb/static/icons/questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3.png" style="width:12px; height:12px;" /></a></p>
</li>
<li>
<img alt="Has amenity / Allowed" class="amenity-icon" height="17" src="//a2.muscache.com/airbnb/static/page3/v3/has_amenity-3f3ba6d898588b24e37211888d98713f.png" title="Has amenity / Allowed" width="17" />
<p>Washer <a class="tooltip" title="Paid or Free, in building"><img alt="Questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3" src="//a2.muscache.com/airbnb/static/icons/questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3.png" style="width:12px; height:12px;" /></a></p>
</li>
<li>
<img alt="Has amenity / Allowed" class="amenity-icon" height="17" src="//a2.muscache.com/airbnb/static/page3/v3/has_amenity-3f3ba6d898588b24e37211888d98713f.png" title="Has amenity / Allowed" width="17" />
<p>Dryer <a class="tooltip" title="Paid or Free, in building"><img alt="Questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3" src="//a2.muscache.com/airbnb/static/icons/questionmark_hover-aaf1c7ee20bcff9b9ed6e8e5ef1af8e3.png" style="width:12px; height:12px;" /></a></p>
</li>
It's not filtering by alt attribute because you haven't told it to. You need to apply a predicate, like you currently are for id:
//div[#id='amenities']//li[img/#alt='Has amenity / Allowed']
That selects only those li tags whose inner image has the required alt attribute.
Related
I'm trying to use the jquery-bootgrid plugin, but running into some issues using a simple initialization.
The button pagination isn't styled properly and the pageSize/column selection button throws an error in the console when you click on the button:
a.default is not a constructor
This is my markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Dashboard </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.css" />
</head>
<body>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">BRANDING</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search" />
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap"> <a class="nav-link" href="#">Sign out</a> </li>
</ul>
</nav>
<div id="content-container" class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="sidebar-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item"> <a class="nav-link active" href="#">Menu Item 1 <span class="sr-only">(current)</span> </a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Menu Item 2</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Menu Item 3</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Menu Item 4</a> </li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
<h1 class="h2 pt-3 pb-2 mb-3 border-bottom">Users</h1>
<!-- jquery-bootgrid starts here -->
<table id="grid-basic" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="id" data-type="numeric">ID</th>
<th data-column-id="email">Sender</th>
<th data-column-id="firstName">First Name</th>
<th data-column-id="lastName" data-order="desc">Last Name</th>
<th data-column-id="deactivated">Deactivated</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>user#domain.com</td>
<td>John</td>
<td>Smith</td>
<td>true</td>
</tr>
</tbody>
</table>
</main>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.fa.min.js"></script>
<script>
$(document).ready(function() {
$("#grid-basic").bootgrid();
});
</script>
</body>
</html>
I don't feel like I'm doing anything overly complicated here and I'm following the example in the documentation.
This leads me to believe it is a version conflict with bootstrap 4.5.
On my site some of my products picture are not shown.
When i right click to inspect element and click my pictures url there is written
410 GONE
When i refresh the site image is shown.
I have lots of products so pictures too on my site and thats a big problem for me.
Thanks for helping.
<div class="productGallery"> <img id="product" width="450" height="405" src="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_1b.jpg" data-zoom-image="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_1b.jpg" />
<c:if test="${prdDemo != ''}"><a onclick="OpenTv();" class="watch"></a></c:if>
<div id="productGallery">
<img onerror="this.src='assets/images/nophoto-140x125.jpg'" id="img_01" src="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_1b.jpg" width="70" height="70" />
<img onerror="this.src='assets/images/nophoto-140x125.jpg'" id="img_01" src="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_2b.jpg" width="70" height="70" />
<img onerror="this.src='assets/images/nophoto-140x125.jpg'" id="img_01" src="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_3b.jpg" width="70" height="70" />
<a href="#" data-image="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_4b.jpg" data-zoom-image="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_4b.jpg"> <img onerror="this.src='assets/images/nophoto-140x125.jpg'" id="img_01" src="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_4b.jpg" width="70" height="70" />
<a onclick="OpenTv();" class="tv_icon"></a></a>
</div>
</div>
I'm quite new to coding and I have a question. I have checked out several forums already, but none of them helped me out.
I have a image gallery (I used this one to get started: http://startbootstrap.com/thumbnail-gallery) and I want to get a popup with the image on full size when a viewer clicks on one of the thumbnails. Does anyone know how I can implent this function?
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="">
<meta name="description" content="">
<title></title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300' rel='stylesheet'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- HEADER -->
<div class="top-header section-content align-center">
<header>
<img class="logo" src="images/logo.png">
<ul class="inline">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
</div>
<!-- CONTENT -->
<section>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/2.png" class="grayscale" alt="Portfolio Item 1">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/1.png" class="grayscale" alt="Portfolio Item 2">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/3.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/5.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/4.png" class="grayscale" alt="Portfolio Item 1">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/6.png" class="grayscale" alt="Portfolio Item 2">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/8.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/7.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/1.png" class="grayscale" alt="Portfolio Item 1">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/4.png" class="grayscale" alt="Portfolio Item 2">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/3.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/6.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
</div>
</div>
</section>
<hr />
<!-- QUOTE AREA -->
<section>
<div class="quote-container section-content align-center">
<h2 class="interested">Interested?</h2>
<p>Do you like my work? Do you want more information about me and the services I provide? Feel free to shoot me a message!</p>
Contact
</div>
</section>
<!-- FOOTER -->
<div id="footer">
<div class="copyright">
© Copyright 2014 Distinction Portfolio Theme.
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You can use LightBox for this. It is not included in the bootstrap framework but i'm sure there are extensions made for it.
For example, you can try Bootstrap 3 lightbox : http://ashleydw.github.io/lightbox/
Use this HTML code to implement simple image pop up on click of thumbnail and have an image close option:
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-toggle="modal" data-target=".bs-example1-modal-lg">
<img class="img-responsive" src="img/clinic1.jpg" alt="">
</a>
<div class="modal fade bs-example1-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<!-- /.modal-dialog -->
<div class="modal-content">
<!-- /.modal-content -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myLargeModalLabel">Image-1</h4>
</div>
<div class="modal-body">
<img src="img/clinic1.jpg" class="img-responsive img-rounded center-block" alt="">
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
I want two 'menus' on my page, but when I add a div next to my leftmenu (where I didn't use div but pictures) I get ugly space between my pictures.
My current code is:
<html>
<head>
<title>Welcome to Nielyboyken</title>
</head>
<body bgcolor="grey">
<br>
<a href="http://zeldauniverse.net">
<img src="http://i1.minus.com/jbg3tjE57KYsx1.png" />
</a>
<a href="">
<img src="http://i.minus.com/ip2vEndNDv7vj.png" />
</a><text-align:"right">
<iframe src="http://free.timeanddate.com/clock/i3qoeq8q/n48/szw135/szh135/hoc000/hbw12/hfc000/cf100/hgr0/hcw1/fas20/facfff/fdi88/mqc0033cd/mqs3/mql5/mqw2/mqd74/mhc0033cd/mhs4/mhl4/mhw2/mhd76/mmcf90/mml4/mmw1/mmd74/hhc666/hmc666" frameborder="0" width="137" height="137"></iframe>
</font>
<div style="width:1340px; height:20px; background-color:black;">
Contact
[Register]
[Login]</font>
</div>
<center>
<font style="font-family: Fixedsys;font-size: 35px;color:blue">Welcome to my personal site!</font>
</center>
<center><font style="font-family:Fixedsys,;color:white">Welcome! Notice that this is not a forum site but just a personal site.</font></center>
<div id="LeftMenu">
<table>
<img src="http://i5.minus.com/iI7VEHhLP3WyV.png" /> <br>
<a target="_blank" href="http://minus.com/lJMgzKG1FFv2v">
<img src="http://i.minus.com/jJMgzKG1FFv2v.png" border="0"/>
</a>
<div style="width:50px; height:50px; color:red;" </div> <br>
<a href="http://zeldauniverse.net">
<img src="http://i.minus.com/ibfBWr7hEsMtsT.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://youtube.com">
<img src="http://i.minus.com/ib0OadHbWfnpew.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://twitter.com">
<img src="http://i.minus.com/iMNcGJ5Bjwvx4.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://facebook.com">
<img src="http://i.minus.com/ibhDDFKmGlL4rk.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<img src="http://i4.minus.com/i6nJ7Pg8kUfqo.png" /> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="page2test.html" >
<img src="http://i.minus.com/iFNcJv4UvSdye.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="aboutzu.html">
<img src="http://i.minus.com/ishbphpEbNRi2.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://twitter.com/nielyboyken">
<img src="http://i.minus.com/ihJnSHKv3vAco.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://www.zeldauniverse.net/forums/members/5390370-nielyboyken.html">
<img src="http://i.minus.com/ibdZgDlK1H5NLP.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="youtube.com/nielyboyken">
<img src="http://i.minus.com/iGZahFuxuc349.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" />
</table>
</div>
</body>
</html>
Does someone know how to fix it?
You should use CSS. HTML is going to leave white space unless you explicitely define where you want them in your DIVs. Much easier to use a CSS template, and format with that. You will have ability to "stick" things in place with CSS.
http://www.w3schools.com/css/
OR
You could use a 1x 2 table. and then insert each element inside the table. Then they would be side by side. Define Column properties, etc...
You should really Google the formatting of this stuff before you ask on here...
My Layout page Menu Heading to set an Image...My Default Page Displayed on Correctly ,But click into another page to display a menu icon only Displayed...
MY Layout Page is as Follow:
<li><span><img src="Images/menu-home.png" width="30" height="11" alt="home" border="0" /></span> </li>
<li><span><img src="Images/menu-aboutus.png" width="52" height="11" alt="about us" border="0" /></span> </li>
<li><span><img src="Images/menu-iamnew.png" alt="iam new" border="0" /></span> </li>
<li><span><img src="Images/menu-comingsoon.png" width="75" height="11" alt="coming soon" border="0" /></span> </li>
<li><span><img src="Images/menu-past-favorites.png" width="81" height="11" alt="past favorites" border="0" /></span> </li>
<li><span><img src="Images/menu-sitemap.png" width="44" height="11" alt="sitemap" border="0" /></span> </li>
<li><span><img src="Images/menu-contactus.png" width="63" height="11" alt="contact us" border="0" /></span> </li>