/    Sign up×
Community /Pin to ProfileBookmark

Please help me with this.

Copy linkTweet thisAlerts:
Nov 30.2019

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-11-30/1575076713-296388-div-floating.jpeg]
Text from div id=”main” goes over text from div id=”maintab” on small screens 🙁

[code]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pl” lang=”pl”>
<!– R E A D M E
Similar effect can use a lot less code using bootstrap and jQuery https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse
This was made just only for my usage on https://zoj.me shared over an CDN

–>

<head>
<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<meta http-equiv=”refresh” content=”300″> <!– RELOAD –>

<!– S T Y L E –>
<style>
/* b-dark-purple#5c00e6 dark-green#004d00 */

ul {
list-style-type: none;
margin: 0;
padding: 0;
top: 0;
}

ul.topnav {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
width: 100%;
font-weight: bold;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000000;
}

ul.topnav li {float: left;border-right: 0px solid #004d00;}

ul.topnav li:last-child {border-right: none;}

ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #ffff00;}
ul.topnav li a.active {color: #9900ff;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 599px) {
ul.topnav li.right,
ul.topnav li {float: none;}
}
li a, .dropbtn {
display: inline-block;
color: #ffff00;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}

/* this was deleted cause it does text a align left /li.dropdown {
display: inline-block;
}*/

.dropdown-content {
display: none;
position: absolute;
background-color: #000000;
min-width: 170px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}

.dropdown-content a:hover {background-color: #111;}

.dropdown:hover .dropdown-content {
display: block;
}
</style>
<style>
* {box-sizing: border-box}
body {font-family: “Lato”, sans-serif;}

/* Style the tab */
.tab {
float: left;
border: 0px solid #000000;
background-color: inherit;
width: 40%;
padding: 0 0 10px 0;
text-justify: inter-word;
word-wrap: break-word;
}

/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: #004d00;
color: #ffffff;
padding: 22px 12px ;
width: 100%;
border: none;
outline: none;
text-align: center;
cursor: pointer;
transition: 0.4s;
font-size: 17px;
}

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

/* Create an active/current “tab button” class */
.tab button.active {
background-color: #5b2e9e;
}

/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 0px;
border: 0px solid #000000;
width: 60%;
border-left: none;
height: 500px;
padding: 0 20px 10px 10px;
text-align: justify;
text-justify: inter-word;
word-wrap: break-word;
display: block;
}
</style>

<style>
/*THERE IS THE PADDING COLORS AND BASIC POINTS OF DESIGN STYLES*/
body {
margin: 0;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
background-color: #246b1a;
color: #ffffff;
}

.maintab {
color: #FFFF24;
font-size: 20px;
text-align: center;
text-align: justify;
align: top;
width: 100%;
text-shadow: 1px 1px 9px #f9f91f;
padding: 0 0 1% 0;
text-justify: inter-word;
word-wrap: break-word
clear: both;
}

.main {
color: #FFFF24;
font-size: 20px;
text-align: center;
text-align: justify;
align: top;
width: 100%;
text-shadow: 1px 1px 9px #f9f91f;
padding: 0 1% 1% 1%;
text-justify: inter-word;
word-wrap: break-word
clear: both;
}

.footerty {
background-color: #000000;
color: #ffffff;
text-align: center;
font-weight: bold;
width: 100%;
padding: 4px 0 3px 0;
position: relative;
}
/*img in article*/
.imginart {
float: right;
margin: 0px 0px -5px 4px;
clear: both;
}
</style>

<script>var clicky_site_ids = clicky_site_ids || []; clicky_site_ids.push(101213734);</script>
<script async src=”//static.getclicky.com/js”></script>
</head>
<body>
<!– B O D Y –>

<!– H E A D E R –>
<ul class=”topnav”>
<li><a class=”active” href=”#first”>Home</a></li><!– wstaw w href # id do pierwszego kontentu –>
<li class=”dropdown”>
<a href=”/PROJECTS” onclick=”menu(‘projects’); clicky.log(this.href,this.innerText); return false;” class=”dropbtn”>Projects</a>
<div class=”dropdown-content”>
<a href=”/PROJECTS/#”>#</a>
<a href=”/PROJECTS/#”>#</a>
</div>
</li>
<li><a href=”#x”>Outside link.</a></li> <!– Force is sometimes the only both effective and available tool for changes. –>
<li>
<a><form method=”get” action=”https://www.google.com/custom” target=”google_window”>
<input type=”hidden” name=”domains” value=”zoj.me”>
<input type=”text” name=”q” width=”10vw” placeholder=”Search ” maxlength=”255″ value=””>
<input type=”submit” type=”image” src=”” name=”sa” value=”Search”>
<input type=”hidden” type=”radio” name=”sitesearch” value=””>
<input type=”hidden” type=”radio” name=”sitesearch” value=”zoj.me” checked=”checked”>
</form></a>
</li>
<li class=”right”><a href=”/ABOUT” onclick=”menu(‘about’); clicky.log(this.href,this.innerText); return false;”>About</a></li>
</ul>
<!– FIRST MAINTAB DIV –>
<div id=”first” class=”maintab”>
<div class=”tab”>
<button class=”tablinks” onclick=”openCity(event, ‘1’)” id=”defaultOpen”>G20 WORLD CENTER CHINA CLAIMS USA DOES INSTABILITY OF WORLD ECONOMY</button>
<button class=”tablinks” onclick=”openCity(event, ‘2’)”>G20 WORLD CENTER CHINA CLAIMS USA DOES INSTABILITY OF WORLD ECONOMY</button>
<button class=”tablinks” onclick=”openCity(event, ‘3’)”>G20 WORLD CENTER CHINA CLAIMS USA DOES INSTABILITY OF WORLD ECONOMY</button>
<button class=”tablinks” onclick=”openCity(event, ‘4’)”>G20 WORLD CENTER CHINA CLAIMS USA DOES INSTABILITY OF WORLD ECONOMY</button>
<button class=”tablinks” onclick=”openCity(event, ‘5’)”>G20 WORLD CENTER CHINA CLAIMS USA DOES INSTABILITY OF WORLD ECONOMY</button>
</div>

<div id=”1″ class=”tabcontent”>
<img class=”imginart” width=”280vw” height=”40%” src=”pictures/posts/getmoneroorgdownloads.jpg”>
Someone hacked the official website of the Monero cryptocurrency project [getmonero.org] and replaced legitimate Linux and Windows binaries available for download with malicious versions designed to steal funds from users wallets. The supply-chain cyberattack was revealed on Monday after a Monero user spotted that the cryptographic hash for binaries he downloaded from the official site didn’t match the hashes listed on it Following an immediate investigation, the Monero team today also confirmed that its website, GetMonero.com, was indeed compromised, potentially affecting users who downloaded the CLI wallet between Monday 18th, 2:30 am UTC and 4:30 pm UTC. XMRCoreTeam investigates to find people who stay behind this attack.

</div>
<div id=”2″ class=”tabcontent”>
2XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

</div>
<div id=”3″ class=”tabcontent”>
3XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

</div>
<div id=”4″ class=”tabcontent”>
4XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

</div>
<div id=”5″ class=”tabcontent”>
5XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

</div>

</div>
<!– NEXT MAIN DIV –>
<div style=”padding: 20 0 20 0 ;” class=”main”>

PUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENT
PUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENT
PUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENT
PUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENT
PUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENT
PUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENT
PUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENT
PUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENT
PUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENTPUT SOME RANDOM CONTENT
<input type=”checkbox” id=”toggle”>
<label onclick=”loadDoc()” for=”toggle”>MODAL</label>
<dialog style=””><label for=”toggle”>X</label>
<p><div id=”xhttpget”>
<h1>The XMLHttpRequest Object</h1>

</div>
</p>
</dialog>

</div>

<div class=”footerty”>
All Rights Reserved ©2019/2020 Jeremi ErtY’wek
</div>
<!– S C R I P T –>

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“xhttpget”).innerHTML =
this.responseText;
}
};
xhttp.open(“GET”, “https://raw.githubusercontent.com/ngosang/trackerslist/master/trackers_best.txt”, true);
xhttp.send();
}
</script>
<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”;
}

// Get the element with id=”defaultOpen” and click on it
document.getElementById(“defaultOpen”).click();
</script>

</body>
</html>[/code]

Edited by site staff: Inserted code tags

to post a comment

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@VITSUSANov 30.2019 — What do you want exactly? Because here nobody have to more time to read multiple lines of code.
Copy linkTweet thisAlerts:
@ErtYwekauthorNov 30.2019 — @VITSUSA#1611315 As I wrote, the problem is that one div with text goes over another div with text (on small screens). And I need to fix that. One class is **.maintab** [inside also **.tabcontent**] and the second **.main** what I should change to fix that text float over another.
Copy linkTweet thisAlerts:
@SempervivumNov 30.2019 — Overlapping texts are a common issue when using float layout. Make yourself familiar with flex layout instead and use it for you page.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Copy linkTweet thisAlerts:
@ErtYwekauthorDec 05.2019 — @Sempervivum#1611332 Thanks for your reply. I solved my problem with classes for divs:

.divTable{<br/>
display: table;<br/>
width: 100%;<br/>
}<br/>
.divTableRow {<br/>
display: table-row;<br/>
}<br/>
.divTableHeading {<br/>
display: table-header-group;<br/>
}<br/>
.divTableCell, .divTableHead {<br/>
border: 0px solid #999999;<br/>
display: table-cell;<br/>
}<br/>
.divTableHeading {<br/>
display: table-header-group;<br/>
}<br/>
.divTableFoot {<br/>
display: table-footer-group;<br/>
}<br/>
.divTableBody {<br/>
display: table-row-group;<br/>
}
Copy linkTweet thisAlerts:
@BarbaraGonzalezDec 08.2019 — It looks like they are doing pretty good from that perspective. And they are pretty innovative on their software part. I think part of Steve Jobs vision was to make powerful technology accessible to even the most non-tech people on the planet. It feels like they continue to be performing pretty well in that

Links removed by Site Staff so it doesn't look like you're spamming us. Please don't post them again.
×

Success!

Help @ErtYwek spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...