So I am working to make a change on this site. http://www.kbduct.com . One the site there is a png file of a transparent united states logo on the front. I had to add a small awfs logo banner to it and have the viewer be able to click on it so that it can lead to a different site. I added the anchor tags to these items but nothing happens wen you click on it. Heres the index file and the external file for the image.
BTW, I didn't build this site. Im helping to maintain it for the time being.
INDEX:
<?php include('inc/default.php');
$pageTitle = "The Nations Source For Industrial Ducting, Ducts and Ductwork Components - KB Duct";
$pageDisc = "KB Duct is the Nation's source for industrial duct, ducting components and ductwork fittings and supplies. We offer custom built solutions for your industrial needs.";
$pageKeys = "duct, ductwork, ducting, duct work, commercial ducting, industrial ducting, custom ductwork, ductwork supplies, ducting accessories, duct fittings";
?>
<!doctype html>
<html>
<?php include('inc/head.php'); ?>
<body>
<div id="sb-site">
<?php include('inc/maximage.php'); ?>
<?php include('inc/header.php'); ?>
<div class="mainarea">
<a href="http://awfsfair.org/">
<div id="eBanner" style=" position: absolute; right: 380px; top: 310px;">
<?php /*?> <script type='text/javascript' src='http://libs.a2zinc.net/Common/JS/10.6.0.0/a2zWidget.js'></script><script type='text/javascript' id='exWidget'>new a2z.Widget('dGbJ%2fQfPqUA4s%2fDNrIc%2fzt5xiq%2fL4ZoFjVXmdUEcJutOcD9ggxZSCZyU8MZ6cQu6',40297,'http://libs.a2zinc.net/Common/Widgets/ExhibitorBadge.aspx',31,201133,330,200).render();</script>
<?php */?>
</a>
</div>
<div class="wrapper">
<?php include('inc/industry.php'); ?>
<?php include('inc/catatypes.php'); ?>
<div id="mob-only">
<?php include('inc/mobslideup.php'); ?>
</div>
</div>
</div>
<?php include('inc/footer.php'); ?>
</div>
<?php include('inc/mob-menu.php'); ?>
</body>
</html>
MAXIMAGE.PHP:
<div id="maximage">
<div>
<img src="img/Custom-Ductwork-Clamp-Together-Ducting-Shiny-Ducts-BG.jpg" alt="KB Duct is the nation's source for clamp together and flanged industrial ducting and duct parts." />
<div class="in-slide-content" style="display:none;">
<img src="img/nations-source-for-industrial-ducting.png" alt="KB Duct offers custom fabricated industrial ducting solutions.">
</div>
</div>
<div>
<img src="img/shinyduct.jpg" alt="" />
<div class="in-slide-content" style="display:none;">
<img src="img/awfs-nations-source.png">
</div>
</div>
<!-- <div>
<img src="img/kbduct-production.jpg" alt="" />
<div class="in-slide-content" style="display:none;">
<img src="img/nations-source-for-industrial-ducting.png">
</div>
</div>-->
<div>
<img src="img/plasma.jpg" alt="" />
<div class="in-slide-content" style="display:none;">
<img src="img/awfs-nations-source.png">
</div>
</div>
<div>
<img src="img/welding.jpg" alt="" />
<div class="in-slide-content" style="display:none;">
<img src="img/awfs-nations-source.png">
</div>
</div>
<!-- <div>
<img src="img/clamp.jpg" alt="" />
<div class="in-slide-content" style="display:none;">
<img src="img/nations-source-for-industrial-ducting.png">
</div>
</div>-->
<div>
<img src="img/tunnel.jpg" alt="" />
<div class="in-slide-content" style="display:none;">
<img src="img/awfs-nations-source.png">
</div>
</div>
MAXIMAGE CSS ID:
#maximage {
display:block;/* Only use this if you fade it in again after the images load */
position:fixed !important;
z-index:-1;
CSS IN SLIDE CONTENT:
.in-slide-content {
color:#333;
float:right;
font-family:'Helvetica Neue', helvetica;
font-size:60px;
font-weight:bold;
right:20px;
margin:40px;
padding:20px;
position:absolute;
top:20px;
width:700px;
z-index:9999; /* Show above .gradient */
text-shadow: 0 1px 0 #fff;
-webkit-font-smoothing:antialiased;
}
I did some R&D got some thing. May be this help you
There is a id eBanner change inline styling to
position: absolute;
right: 269px;
top: 141px;
z-index: 9999;
height: 100px;
width: 185px;
border: 2px solid red;
Inside this div there is and anchor tag add folloing style
display: block;
width: 181px;
height: 100px;
Once you check it works then you can remove red border
Related
I'm trying to write a page with different size images but can't figure out how to align them properly.
This is how the web-page looks:
https://i.imgur.com/Li17CMl.jpg
I have added bootstrap img-fluid for responsiveness. If i set fixed height images wont scale down properly on smaller screens.
I cleaned some non related data with '...' just to make code look cleaner.
My current code:
foreach(row...) : ?>
<div class="col-md-6" style="padding...">
<div class="card">
<div class="card-body" style="padding...">
<a href="">
<div>
<img class="img-fluid" style="width: 100%;" src="row->image..." alt="">
</div>
<div>
<h5> title </h1>
<h6> date </h6>
</div>
</a>
</div> <!-- /card body -->
</div> <!-- /card -->
</div> <!-- /col-6 -->
<?php endforeach; ?>
I'm hoping that images will scale down on smaller screens.
TL:DR object-fit: cover; will do the trick.
Solution 1 - FIXED HEIGHT
with this solution you have to set value for the height of the images: the photos won't stretch but the ratio will be different for each screen
.img-fluid {
height: 200px; /* insert here your desired height*/
object-fit:cover;
}
Solution 2 - REAL FLUID
this solution is a little trickier but the photos will have always the ratio you will choose.
.card-body a div:first-child {
position: relative;
width: 100%;
height: 0;
padding-top: 60%; /*insert value for the desired ratio. ie: 60% -> 10/6 image*/
}
.img-fluid {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Please use below code:
.img-card img{width:100%;height:300px;object-fit:cover;}
.img-card{margin-bottom:15px;margin-top:15px;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-6">
<div class="img-card">
<img src="https://i.ytimg.com/vi/VDNd4KjELkU/maxresdefault.jpg" />
</div>
</div>
<div class="col-6">
<div class="img-card">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0f/5e/fc/f5/inkaya-cinari.jpg" />
</div>
</div>
<div class="col-6">
<div class="img-card">
<img src="https://thumbs.dreamstime.com/z/scenery-5680647.jpg" />
</div>
</div>
<div class="col-6">
<div class="img-card">
<img src="https://cdn.pixabay.com/photo/2015/11/11/03/47/evening-1038148__340.jpg" />
</div>
</div>
</div>
</div>
Hi I want to align two rows of div under each other no matter the height of the divs in the row above. I'm using display:inline-block; so that the divs will inline next to each other.
Here is what I'm getting
Photo 1
Notice that div #2 is slightly shorter than div one
and here is what i want to accomplish
enter image description here
Notice that in the second picture no matter the height of the div above it the second row still aligns as it should.
here is my css
.post-set{
max-width:445px;
margin:0px 1px 15px 0px;
padding:0;
display:inline-block;
border-bottom:1px solid #e1e1e1;
vertical-align:top;
}
i'm using this in my wordpress theme. Here is the html along with the php.
<div class="medium-8 column post-set" style="padding:0;">
<a href="<?php the_permalink(); ?>" title="<?php printf(__( 'Read %s', 'wpbx' ), wp_specialchars(get_the_title(), 1)) ?>">
<?php the_post_thumbnail('fifth-post'); ?>
</a>
<div class="row column" style="padding:0">
<h1 class="fifth-post-title"><?php the_title(); ?><h1>
<div class="fifth-ex">
<?php echo excerpt(18); ?>
</div>
<span class="fifth-by-line"> BY: <?php the_author_posts_link(); ?></span>
</div>
</div>
You can visit GetVersed.us to see a live example. It's the section under the "Get Your Voice Heard Banner"
is there a way to accomplish this without suggesting masonry?
I don't see HTML you are using. But here is solution with my html code and yours CSS class. Notice that in CSS I set width instead of max-width.
Different height of div blocks I set using inline style. It can be set in class or auto.
.post-set{
width:60px;
margin:0px 1px 15px 0px;
padding:0;
display:inline-block;
border-bottom:1px solid #e1e1e1;
vertical-align:top;
background-color:black;
}
<div>
<div class="post-set" style="height:20px;">
</div>
<div class="post-set" style="height:35px;">
</div>
</div>
<div>
<div class="post-set" style="height:15px;">
</div>
<div class="post-set" style="height:30px;">
</div>
</div>
You can create a simple table and place your divs as follows:
<table>
<tbody>
<tr>
<td>
<div 1...>
</td>
<td>
<div 2...>
</td>
</tr>
<tr>
<td>
<div 3...>
</td>
<td>
<div 4...>
</td>
</tr>
</tbody>
</table>
This will make sure that the alignment is as you wish. You can then add some styles if you wish.
You should look into flexbox.
HTML:
<div class="item_container">
<div class="item">
</div>
<div class="item">
</div>
</div>
<div class="item_container">
<div class="item">
</div>
<div class="item">
</div>
</div>
CSS:
.item_container {
display:flex; align-items:stretch;
}
.item { float:left; }
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Ok so I made my website in html, but theres some sort of white line bars located on the top and im not sure why they are there i think i made an error in my source code, if someone could please help figure out why they are there thatd be great (im new at html, only know the basics)
Heres a picture of it
<font size="4" color="white">
<h1>This Website Was Created By The One And Only SaucyFam
</font>
</div>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="http://www.silvergames.com/slitherio">
<link rel="alternate" href="http://www.silvergames.com/slitherio" hreflang="en">
<link rel="alternate" href="http://de.silvergames.com/slitherio" hreflang="de">
<link rel="alternate" href="http://ru.silvergames.com/slitherio" hreflang="ru">
<title>Slither.io | Game 2 Play Online</title>
<link href="http://i2.silvergames.com/css/n7.css" rel="stylesheet" type="text/css">
<link href="http://i2.silvergames.com/l-switch/css/polyglot-language-switcher-2.css" rel="stylesheet">
<link rel="alternate" type="application/rss+xml" title="New Games" href="/feed/rss.xml" />
<script type="text/javascript" src="http://i1.silvergames.com/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://i1.silvergames.com/l-switch/js/jquery/jquery-polyglot.language.switcher.js"></script>
<script type="text/javascript" src="http://i2.silvergames.com/js/advertisement.js"></script>
<script type="text/javascript" src="http://i1.silvergames.com/js/vote.js"></script>
<script type="text/javascript" src="http://i2.silvergames.com/js/swfobject.js"></script>
<script type="text/javascript" src="http://i3.silvergames.com/js/fullscreen_full.js"></script>
</form>
<div class="clear_both"></div>
</div>
<div class="polyglot-language-switcher" data-grid-columns="1" data-anim-effect="fade" data-open-mode="click">
<ul style="display:none">
<li>
<a href="http://www.silvergames.com/slitherio" title="English" data-lang-id="en">
<img src="http://i1.silvergames.com/l-switch/images/flags/us.png" alt="English">English
</a>
</li>
<li>
<a href="http://de.silvergames.com/slitherio" title="Deutsch" data-lang-id="de">
<img src="http://i2.silvergames.com/l-switch/images/flags/de.png" alt="Deutsch">Deutsch
</a>
</li>
<li>
<a href="http://ru.silvergames.com/slitherio" title="Русский" data-lang-id="ru">
<img src="http://i3.silvergames.com/l-switch/images/flags/ru.png" alt="Русский">Русский
</a>
</li>
</ul>
<div class="clear_both"></div>
</div></div>
<div id="menu_2" style="display:none;">
<div id="items_2"></div> <div class="clear_both">
</div>
</div></div>
<div id="content">
<div id="container" style="width:1260px;">
<div id="game-box" style="">
<div id="game" >
<div id="game_embed" style="width:700px;height:500px;">
<iframe src="http://slither.io/" id="swf" allowfullscreen frameborder="0" scrolling="no" style="background-color:#000000;border:nvone;" width="700" height="500"></iframe>
</div >
</div>
<div id="game-features">
<div id="vote-buttons">
</button>
<span id="voted"></span>
</div>
<div id="zoom-button">
<div style="cursor:pointer;" id="fullscreen">
<img src="http://i1.silvergames.com/i/fullscreen.png" title="Fullscreen" alt="fullscreen">
</div>
</div>
<div id="walkthrough-button">
<div style="" id="walkthrough">
<a href="/slitherio/walkthrough" target="" title="Slither.io Walkthrough">
<img src="http://i1.silvergames.com/i/walkthrough.png" alt="walkthrough">
</a>
</div>
</div>
<div class="clear_both"></div>
</div>
</div>
<div id="game-related-box">
<div class="hot_box">
<div id="dynamic-editorial">
<ul>
<li>
<a href="/goodgame-empire" target="">
<img src="http://agar.io/img/1200x630.png " width="110" height="70" alt=":D"/>
</a>
</li>
<li>
Unblocked Agario
</li>
</ul>
</div>
<div id="dynamic-editorial-2">
<ul>
<li>
</div>
<div style="position: absolute; top: 530px; right: 220px; width: 250px; height: 150px; background-color: ">
<font size="4" color="white">
<h1>
<< Click Here To Go Into FullScreen Mode
</div>
<div style="position: absolute; top: 200px; right: 233px; width: 240px; height: 150px; background-color: ;">
<font size="4" color="white">
<h1>SaucyFams Very Own Server IP Mods, Coming Soon:
<IMG STYLE="position:absolute; TOP:70px; LEFT:10px; WIDTH:300px; HEIGHT:200px" SRC="http://slitheriogameplay.com/wp-content/uploads/2016/04/slither-io-mods-300x167.png">
</p>
</body>
</html>
<html>
<body background="http://slither.io/s/bg45.jpg">
The issue is the 10px padding-bottom.
In file n7.css , line 31, you'll see the following:
#content {
background-color: #ffffff;
padding-bottom: 10px;
}
Change by:
#content {
background-color: #ffffff;
padding-bottom: 0px;
}
Let me know how it goes.
The reason of problem here;
#content {
background-color: #ffffff;
padding-bottom: 10px;
}
But I see, "you are not very familiar with css" so this code is in a file of your server (http://i2.silvergames.com/css/n7.css). Please go there, find the code above and change:
#content {
background-color: #ffffff;
padding-bottom: 0px;
}
That's all.
I use the following code:
.contain {
max-width: 960px;
text-align: center;
}
.category {
position: relative;
display: inline-block;
float: left;
padding: 10px;
}
<div align="center" class="category">
<img src="img/Tariffs-Booking-Icon.png" style="width:100; height:60px;margin-right: 124px;" />
</div>
<div align="center" class="category">
<img src="img/driver_icon.jpg" style="width:100; height:100px;margin-right:124px;" />
</div>
<div align="center" class="category">
<img src="img/user.png" style="width:100; height:100px" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;margin-left:58px;" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;" />
</div>
I am unable to display three images in one rows and in second row next three images.
but i got the images in one rows. so there is any possibility to show images like as in one
row 1 2 3 and second row 4 5 6 images.
Thanks and regards
Add clear: left; to .category:nth-child(4)
JSFiddle - DEMO
.category:nth-child(4) {
clear: left;
}
The clear CSS property specifies whether an element can be next to
floating elements that precede it or must be moved down (cleared)
below them. - by Mozilla MDN
The easiest way would be to have one div for each row and each div having just those 3 images inside them.
<div align="center" class="category">
<img src="img/Tariffs-Booking-Icon.png" />
<img src="img/driver_icon.jpg" />
<img src="img/user.png" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" />
<img src="img/abuse.jpg" />
<img src="img/abuse.jpg" />
</div>
See it here: http://jsfiddle.net/vj4kLdjh/1/
A slightly better approach would be to wrap each row into another div what would have display set to block (default) and the inside divs should either lose the float, or you need to add a clear:both element to the end of each row.
<div class="row>
<div align="center" class="category">
<img src="img/Tariffs-Booking-Icon.png" />
</div>
<div align="center" class="category">
<img src="img/driver_icon.jpg" />
</div>
<div align="center" class="category">
<img src="img/user.png" />
</div>
</div>
<div class="row>
<div align="center" class="category">
<img src="img/abuse.jpg" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" />
</div>
</div>
See it here: http://jsfiddle.net/vj4kLdjh/2/
I've marked the rows with a red border in both cases. I've also removed the inline styling in my answer, and I suggest you do the same in your code. Define classes for those elements and avoid inline styling whenever possible.
This will do exactly what you need - 2 rows containing 3 pictures each to 960px (Which you can of course modify). Don't forget that the child element (category) is width + padding(x2) for actual width - in this case, 320px each.
CSS:
div.contain {
width:960px;
}
# Each div takes 320px (times 3 is 960px)
div.category {
display: inline-block;
padding:5px;
width: 310px;
}
Then
<div class="contain">
<div class="category"># image 1</div>
<div class="category"># image 2</div>
<div class="category"># image 3</div>
</div>
<div class="contain">
<div class="category"># image 4</div>
<div class="category"># image 5</div>
<div class="category"># image 6</div>
</div>
You have to add a wrapper div to each row as:
.row_wrap {
width: 100%;
display: inline-block;
}
.contain {
max-width: 960px;
text-align: center;
}
.category {
position: relative;
display: inline-block;
float: left;
padding: 10px;
}
<div class="row_wrap">
<div align="center" class="category">
<img src="img/Tariffs-Booking-Icon.png" style="width:100; height:60px;margin-right: 124px;" />
</div>
<div align="center" class="category">
<img src="img/driver_icon.jpg" style="width:100; height:100px;margin-right:124px;" />
</div>
<div align="center" class="category">
<img src="img/user.png" style="width:100; height:100px" />
</div>
</div>
<div class="row_wrap">
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;margin-left:58px;" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;" />
</div>
</div>
Hope this helps
div{
width: 400px;
}
div>img{
width: 100px;
float: left;
}
div>img:nth-child(3n+1){
clear: left;
}
<div>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
</div>
I am trying to find and change a string found before an other string.
<div class="item" ....>
<img scr="rambo" />
This code repeats for every movie. I have to set the item class for any chosen movie to
<div class="item active" ....>
<img scr="rambo" />
So I am looking for the first class before any given movietitle and then set it to active.
(In the code, where i placed the dots, there is a lot of code that keeps changing (like coordinates) so I can't count backwards to that position.)
Can someone help me with this? Thnx.
This is the actual code for 2 movies wich is created by a javascript coverflow script:
<div class="item " href="cover.php?film=Terminator 2" style="display: block; left: 452.383126009628px; top: 176.25px; height: 264.375px; width: 117.666903409091px; font-size: 50%; z-index: 32765; visibility: visible;">
<canvas class="content portray" src="films/Terminator 2/cover.jpg" origproportion="0.6676136363636364" width="235" height="528"></canvas>
<div class="caption">Terminator 2 Judgment Day
<div class="cover_beschrijving">
<div class="cover_left">
<ul>
<li><h1>jaar:</h1>1991</li>
<li><h1>genre:</h1>Actie</li>
<li><h1>speelduur:</h1>137 minuten</li>
</ul>
</div>
<div class="clearer"></div>
<div class="cover_right">--Movie discription--</div>
</div>
</div>
</div>
<div class="item active" href="cover.php?film=The Fast and the Furious" style="display: block; left: 727.832386363636px; top: 0px; height: 528.75px; width: 236.335227272727px; font-size: 100%; z-index: 32768; visibility: visible;">
<canvas class="content portray" src="films/The Fast and the Furious/cover.jpg" origproportion="0.6704545454545454" width="236" height="528"></canvas>
<div class="caption">The Fast and the Furious
<div class="cover_beschrijving">
<div class="cover_left">
<ul>
<li><h1>jaar:</h1>2001</li>
<li><h1>genre:</h1>Actie</li>
<li><h1>speelduur:</h1>107 minuten</li>
</ul>
</div>
<div class="clearer"></div>
<div class="cover_right">---Movie discription---</div>
</div>
</div>
</div>
You can use preg_replace to find the strings and replace them. This regex <div\sclass=\"item\".*> will match <div class="item" ....> If you want to include the img tag in the match, you have to modify the regex accordingly, but I don't see why you care for that, if it was me I would stop at <div class="item"
Then it's just a matter of providing the replacement string.