The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Hover tabs issues, How to fix the layout of the hover tabs and link tabs to images
muwinte
post Dec 6 2020, 04:18 AM
Post #1





Group: Members
Posts: 1
Joined: 6-December 20
Member No.: 27,672
I have created hover tabs but having challenges on the alignment of the tabs on the right side. I wanted the tabs to look like the ones on epaisa.com website. below is the link and codes of what I have doneLink: kalumbila.com/project.html

Code:

<table width="100%" border="0.5">
<tr>
<td><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}

/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}

/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
display: none;
}

/* Clear floats after the tab */
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>

<h2> </h2>
<div class="tab">
<button class="tablinks" onMouseOver="openCity(event, 'London')">
<h4 align="right">Cloud Based Analytics</h4>
<p align="right">Synchronize all devices in real-time with cloud-based software. All sales, payments, and customer data storage is ensured</p>
</button>
<button class="tablinks" onMouseOver="openCity(event, 'Paris')">
<h4 align="right">Cash register</h4>
<p align="right">Make seamless sales and create memorable customer experiences in-store, online or on-the-go. Speed up your checkout by adding products to the sale and sending out email and text receipts</p>
</button>
<button class="tablinks" onMouseOver="openCity(event, 'Tokyo')">
<h4 align="right">Inventory Management</h4>
<p align="right">Maximize profits with a robust inventory management software, and improve cash flow through regular audit and accurate forecasting of your inventory</p>
</button>
</div>


<div id="London" class="tabcontent">
<p><img src="../Desktop/alliance/images/Invetory Management.jpg">.</p>
</div>

<div id="Paris" class="tabcontent">
<p><img src="../Desktop/alliance/images/Adminstrate Sales & Employees.jpg">.</p>
</div>

<div id="Tokyo" class="tabcontent">
<p><img src="../Desktop/alliance/images/cash register.jpg">.</p>
</div>

<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>

;</td>
<td> </td>
<td><div class="tab"><button class="tablinks" onMouseOver="openCity(event, 'London')">
<h4 align="left">Cloud Based Analytics</h4>
<p align="right">Synchronize all devices in real-time with cloud-based software. All sales, payments, and customer data storage is ensured</p>
</button>
<button class="tablinks" onMouseOver="openCity(event, 'Paris')">
<h4 align="left">Cash register</h4>
<p align="left">Make seamless sales and create memorable customer experiences in-store, online or on-the-go. Speed up your checkout by adding products to the sale and sending out email and text receipts</p>
</button>
<button class="tablinks" onMouseOver="openCity(event, 'Tokyo')">
<h4 align="left">Inventory Management</h4>
<p align="left">Maximize profits with a robust inventory management software, and improve cash flow through regular audit and accurate forecasting of your inventory</p>
</button>
</div>

<div id="London" class="tabcontent">
<p><img src="../Desktop/alliance/images/Invetory Management.jpg">.</p>
</div>

<div id="Paris" class="tabcontent">
<p><img src="../Desktop/alliance/images/Adminstrate Sales & Employees.jpg">.</p>
</div>

<div id="Tokyo" class="tabcontent">
<p><img src="../Desktop/alliance/images/cash register.jpg">.</p>
</div>

<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>

</body>
</html>
;</td>
</tr>
</table>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 6 2020, 01:00 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6
Do you mean that the phone isn't centered? That the right column is more narrow than the left? Both? Something else?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 6 2020, 01:08 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6
Regarding the centering, remove the Ps here. They fill no purpose what I can see. I don't think you want the period after the images either?


QUOTE
HTML
<div id="London" class="tabcontent">
<p><img src="../Desktop/alliance/images/Invetory Management.jpg">.</p>
</div>

<div id="Paris" class="tabcontent">
<p><img src="../Desktop/alliance/images/Adminstrate Sales & Employees.jpg">.</p>
</div>

<div id="Tokyo" class="tabcontent">
<p><img src="../Desktop/alliance/images/cash register.jpg">.</p>
</div>


So you get this.

HTML
<div id="London" class="tabcontent">
<img src="https://kalumbila.com/phone1.jpg">
</div>

<div id="Paris" class="tabcontent">
<img src="https://kalumbila.com/phone2.jpg">
</div>

<div id="Tokyo" class="tabcontent">
<img src="https://kalumbila.com/phone3.jpg">
</div>


Then you can center the phone images by adding 'text-align: center' to the .tabcontent rule.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 10:26 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC