I am working in Wordpress but am new to PHP. I built a very very simple page using HTML and CSS. It consists of one image to the left and three lines of informational text that are suppose to wrap on the right side. It works and looks perfect before I loaded it to Wordpress and now it is not wrapping.
What am I missing?? Below is the fiddle.
.ciao {
margin-right: 20px;
margin-left: 60px;
margin-top: 30px;
}
.ciaolist {
list-style-type: none;
display: inline-block;
}
<div>
<img src="http://via.placeholder.com/1600X1067" alt="" class="ciao" style="width:55%">
<ul class="ciaolist">
<li>contact#website.com</li>
<br>
<li>+1 234 567 8900</li>
<br>
<li>united states, us</li>
<br>
<br>
</ul>
</div>
Thank you.
You do something like this;
.post-container {
margin: 20px 20px 0 0;
border: 5px solid #333;
overflow: auto
}
.post-thumb img {
float: left;
}
.ciaolist {
list-style-type: none;
display: inline-block;
}
.ciao {
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
<div class="post-container">
<div class="post-thumb"><img class="ciao" src="http://via.placeholder.com/1600X1067" width="55%" /></div>
<div class="post-content">
<ul class="ciaolist">
<li>contact#website.com</li>
<br>
<li>+1 234 567 8900</li>
<br>
<li>united states, us</li>
<br>
<br>
</ul>
</div>
</div>
Related
I am creating a social site and I want to leave three menu dots on the top right corner of each individual post a user makes. But it only works on one post. They show up on all of the posts but when I click it, the dropdown content only shows on the very first post at the top of the page.
I put it in my posts loop so I don't see why it's not working.
$str .= "<div class='status_post'>
<div class='post_profile_pic'>
<img src='$profile_pic' width='50'>
</div>
<!-- three dot menu -->
<div class='dropdownPosts'>
<!-- three dots -->
<ul class='dropdownbtn icons btn-right showLeft' onclick='showDropdown()'>
<li></li>
<li></li>
<li></li>
</ul>
<!-- menu -->
<div id='myDropdown' class='dropdownPost-content'>
<a href='#home'>Home</a>
<a href='#about'>About</a>
<a href='#contact'>Contact</a>
</div>
</div>
<div class='posted_by' style='color:#ACACAC;'>
<a href='$added_by'> $username </a> $user_to $time_message
$delete_button
</div>
<div id='post_body'>
$body
<br>
$imageDiv
<br>
<br>
</div>
<div class='newsfeedPostOptions' onClick='javascript:toggle$id(event)'>
Comments($comments_check_num)
<iframe src='like.php?post_id=$id' scrolling='no'></iframe>
</div>
</div>
<div class='post_comment' id='toggleComment$id' style='display:none;'>
<iframe src='comment_frame.php?post_id=$id' id='comment_iframe' frameborder='0'></iframe>
</div>
<hr>";
.header{
width: 100%;
background-color: #0d77b6 !important;
height: 60px;
}
.showLeft{
color:#000 !important;
padding:10px;
}
.icons li {
background: none repeat scroll 0 0 #000;
height: 7px;
width: 7px;
line-height: 0;
list-style: none outside none;
margin-right: 15px;
margin-top: 3px;
vertical-align: top;
border-radius:50%;
pointer-events: none;
}
.btn-left {
left: 0.4em;
}
.btn-right {
right: 0.4em;
}
.btn-left, .btn-right {
position: absolute;
top: 0.24em;
}
.dropdownbtn {
position: absolute;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
margin-top: 6%;
margin-right: 30%;
}
.dropdownPosts {
position: absolute;
display: inline-block;
right: 0.4em;
}
.dropdownPost-content {
display: none;
position: absolute;
margin-top: 60px;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdownPost-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdownPosts a:hover {background-color: #f1f1f1}
.show {display:block;}
<script>
function changeLanguage(language) {
var element = document.getElementById("url");
element.value = language;
element.innerHTML = language;
}
function showDropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropdownbtn')) {
var dropdowns = document.getElementsByClassName("dropdownPost-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
If you remove any duplicated IDs from the HTML and modify the 3-dots portion like so
<div class='dropdownPosts'>
<!-- three dots -->
<ul class='dropdownbtn icons btn-right showLeft' onclick='showDropdown(event)'>
<li></li>
<li></li>
<li></li>
</ul>
<!-- menu -->
<div class='dropdownPost-content'>
<a href='#home'>Home</a>
<a href='#about'>About</a>
<a href='#contact'>Contact</a>
</div>
</div>
You can then likey modify your showDropdown function like this:
function showDropdown(event) {
event.target.nextElementSibling.classList.toggle("show");
}
The first two elements inside my flexbox container containing my posts from wordpress float around 10px higher than the rest. They all have the same css. I'm using PHP to get the posts from wordpress. Its only on the top row that it does this. As you can see from the photo the same template and post format is used lower on the page and it does not have this issue. Please help.
I have already tried commenting parts of the code like the read more button or the icons to see if maybe margins or padding inside the post container is doing it but its not. I've tried setting a height on the flexbox container to 930px the exact height to stop it floating - that hasnt worked. This is after setting no margins on the posts but that still hasn't worked - they were previously 5px.
This is the html template for each post inside the post loop that has the standard post format. Each post: standard and image follow the css with the 'standard' in the class names and the quote and video post format follow the classes with 'quote' in them.
<article id="grid-post-<?php the_ID(); ?> " <?php post_class(); ?>>
<header class="grid-quote-entry-header">
<div class=" grid-quote-post-container">
<div class="grid-quote-icon-container">
<i class="fas fa-video"></i>
</div>
<div class="grid-standard-title-container">
<h2 class="grid-standard-title"><?php the_title(); ?></h2>
</div>
<div class="grid-standard-date-container">
<h5 class="grid-standard-date"><?php the_time('d/m/y'); ?></h5>
</div>
<div class=" grid-button" id="video-button">
<button><?php _e('Read More');?></button>
</div>
</div>
</header>
</article>
HERE IS THE POST FORMAT TEMPLATE FOR THE VIDEO AND QUOTE POSTS:
<article id="grid-post-<?php the_ID(); ?> " <?php post_class(); ?>>
<header class="grid-quote-entry-header">
<div class=" grid-quote-post-container">
<div class="grid-quote-icon-container">
<i class="fas fa-video"></i>
</div>
<div class="grid-standard-title-container">
<h2 class="grid-standard-title"><?php the_title(); ?></h2>
</div>
<div class="grid-standard-date-container">
<h5 class="grid-standard-date"><?php the_time('d/m/y'); ?></h5>
</div>
<div class=" grid-button" id="video-button">
<button><?php _e('Read More');?></button>
</div>
</div>
</header>
</article>
HERE IS INDEX PAGE
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="grid-post-loop-container exhale-posts-container">
<div class="grid-whole-container">
<?php
if(have_posts() ):
echo '<div class="page-limit" data-page="/'. exhale_check_paged()
.'">';
while( have_posts() ): the_post();
get_template_part('template-parts/gridcontent', get_post_format()
);
endwhile;
echo '</div>';
endif;
?>
</div>
</div>
</main>
</div>
HERE IS THE CSS:
.grid-whole-container{
display: inline;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
}
.grid-standard-post-container {
width: 32%;
flex: 100%;
height: 300px;
-webkit-box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
float: left;
}
.grid-standard-post-container:hover {
}
.grid-standard-title-container {
width: 80%;
margin-left: auto;
margin-right: auto;
}
.grid-standard-title {
font-family: coolvetica;
text-transform: uppercase;
color: white;
text-align: center;
letter-spacing: 3px;
text-shadow: 2.5px 3px black;
font-size: 27px;
position: relative;
top: 80px;
}
.grid-standard-date-container {
width: 30%;
margin-left: auto;
margin-right: auto;
}
.grid-standard-date {
letter-spacing: 6px;
color: black;
font-family: coolvetica;
font-size: 13px;
text-align: center;
position: relative;
top: 60px;
}
.grid-button button {
width: 50%;
margin-left: 25%;
margin-right: 25%;
position: relative;
top: 90px;
background: transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
font-family: coolvetica;
text-transform: uppercase;
color: white;
letter-spacing: 7px;
}
.grid-load-more {
margin-top: 100px;
}
/* INDEX GRID LAYOUT - QUOTE ======================================================================== ============================= */
.grid-quote-post-container {
width: 32%;
flex: 100%;
height: 300px;
-webkit-box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
float: left;
background-color: #aecfd7;
}
.grid-quote-icon-container {
color: white;
font-size: 60px;
text-align: center;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: -70px;
}
Expected that these divs would all act the same as they all have the same css but top row floats up. Please help.
This is what it looks like.The first two should not float up like that
Does anyone know how I can code the round icon along with clickable social media icons in the picture?
The site in question is: http://subwayisgay666.my-free.website/
Thanks for your help
This will be enough for you to start on the structure
header > div {
display: flex;
width: 100%;
max-width: 955px;
margin: 0 auto;
padding: 60px 0 40px;
}
header .logo {
display: block;
width: 170px;
height: 170px;
margin-right: 20px;
border-radius: 100%;
flex-grow: 0;
}
header .introduction .title {
padding: 30px;
}
header .social, header .main-menu {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
header .social li + li,
header .main-menu li + li {
margin-left: 15px;
}
header .main-menu li a {
display: inline-block;
padding: 10px;
text-transform: uppercase;
}
<header>
<div>
<a class="logo"><img alt></a>
<div class="introduction">
<div class="title">
<h1>Name</h1>
<p class="subtitle">Joker, gentleman & student extraordinnaire</p>
</div>
<ul class="social">
<li class="facebook"><a><img></a></li>
<li class="google-plus"><a><img></a></li>
<li class="twitter"><a><img></a></li>
<li class="linkedin"><a><img></a></li>
<li class="youtube"><a><img></a></li>
<li class="behance"><a><img></a></li>
</ul>
</div>
<div class="navigation">
<p>Add your introduction text here. Your homepage should be the first page that visitors to your site see, so make sure you give a concise overview of who you are, what you do and why you are right for them.</p>
<ul class="main-menu">
<li><a>About</a></li>
<li><a>Resume</a></li>
<li><a>Contact</a></li>
</ul>
</div>
</div>
</header>
I'm currently building a site on Wordpress using the html5blank as the parent theme. I've built all the front-end text pages on HTMl/CSS. When I've transferred all the files over a lot of the styling has broken - I've fixed the majority of it but there's one section that I cannot fix. This is how it should look -
And this is how it looks in the Wordpress site -
When I've inspected the site via developer tools it seems as though these rules are not being applied -
.agencyproducts {
position: relative;
display: inline-block;
text-align: center;
}
Also, the row in the front-end site is applying a height rule but not in the wordpress site. I've looked at applying specificity rules and !important but nothing (this also disrupts other styling rules on other parts of the site). I'm really stuck on this and would appreciate any assistance.
Here's the full code for the section -
section#products {
height: 800px;
max-width: 100%
}
.agencyproducts {
position: relative;
display: inline-block;
text-align: center;
}
.agencyproducts p {
text-align: center;
margin: 30px;
}
.agencyproducts img {
width: 70px;
height: 70px;
position: relative;
line-height: 1;
top: 50%;
}
figure {
text-align: center;
display: inline-block;
max-width: 80px;
height: 100px;
vertical-align: top;
margin: 5px;
font-size: 9px;
margin-bottom: 60px;
}
figure img {
padding-bottom: 5px;
}
.four {
padding: 0;
margin: 0;
border: 0;
}
.images {
margin-top: 30px;
border-bottom: 10px;
}
.images img {
margin-left: 20px;
padding: 10px;
}
.chevron {
height: 150px;
}
.chevron figcaption {
margin-top: 20px;
font-size: 13px;
color: #d3d3d3;
}
hr.hragency {
display: block;
width: 250px;
margin-top: 0em;
margin-bottom: 0em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
border-color: #F0F0F0;
}
<section id="products">
<div class="container">
<div class="row">
<div class="twelve columns agencyproducts">
<p>WHAT PRODUCT ARE YOU INTERESTED IN?</p>
<a href="2k4kproduction.html">
<figure>
<img src="images/production.png" alt="Production">
<figcaption>2K / 4K PRODUCTION</figcaption>
</figure>
</a>
<a href="postproduction.html">
<figure>
<img src="images/post-production.png" alt="Post-Production">
<figcaption>POST PRODUCTION</figcaption>
</figure>
</a>
<a href="2d3danimation.html">
<figure>
<img src="images/animation.png" alt="Animation">
<figcaption>2D / 3D ANIMATION</figcaption>
</figure>
</a>
<a href="adhoc.html"><figure>
<img src="images/ADHOC.png" alt="ADHOC">
<figcaption>ADHOC</figcaption>
</figure>
</a>
<a href="interactive.html">
<figure>
<img src="images/interactive.png" alt="Interactive">
<figcaption>INTERACTIVE & PERSONALISED</figcaption>
</figure>
</a>
<a href="tvadverts.html">
<figure>
<img src="images/tv-adverts.png" alt="TV ADVERTS">
<figcaption>TV ADVERTS</figcaption>
</figure>
</a>
<a href="360video.html"><figure>
<img src="images/360.png" alt="360 Video and VR">
<figcaption>360 VIDEO & VIRTUAL REALITY</figcaption>
</figure>
</a>
</div>
</div>
<hr class="hragency">
<div class="row">
<div class="images">
<div class="four columns">
<img src="images/VIDEO.jpg" alt="Video">
<img src="images/blog.jpg" alt="blog">
</div>
<div class="four columns">
<img src="images/faq.jpg" alt="FAQ">
<img src="images/VIDEO.jpg" alt="Video">
</div>
<div class="four columns">
<img src="images/blog.jpg" alt="blog">
<img src="images/faq.jpg" alt="FAQ">
</div>
</div>
</div>
</div>
</section>
<section class="chevron">
<div class="container">
<div class="row">
<figure>
<figcaption>SEE MORE</figcaption>
<i class="fa fa-chevron-circle-down fa-3x" aria-hidden="true"></i>
</figure>
</div>
</div>
</section>
Try this:
.agencyproducts{
width:100%;
text-align:center;
}
.agencyproducts a{
display:inline-block;
}
Because container .agencyproducts need to have text-align:center and first childs of it must be displayed as inline-block ... then they will display properly. You only set child of a tag as display:inline-block but do not tell CSS how it should treat it parent.
With what I understood try appending !important to your custom css properties so as to override any pre-existing style properties.
height: 150px !important;
I want to overlay one image on other using CSS-PHP. Please see the below HTML and CSS snippet and give ur wise suggestions:
The images are present in header part of the division:
j_logo.jpg and MMPHero3.jpg. Of which former should be transparent and in left container while later one should occupy entire header region.
<body>
<div id="container">
<div id="header">
<div id="header-left-container">
<img src="j_logo.jpg" alt="jubilant"/>
</div>
<div id="header-right-container">
<img src="MMPHero3.jpg" alt="drug"/>
</div>
</div>
<div id="content"> Sidebar <p> </p>
<div class="form">
<p>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<p>Enter Drug Name </p>
<input type="text" name="drugName" value="<?php echo (isset($_POST['drugName']) ? $_POST['drugName'] : '') ?>">
<!--To retain search query after click added value="<?php echo (isset($_POST['drugName']) ? $_POST['drugName'] : '') ?>*/-->
<!-- This is commenting style in HTML -->
<p><input type="submit" value="search"></p>
</form>
</div>
</div>
<div id="sidebar"> Body
</div>
<div id="footer"> </div>
</body>
</html>
CSS style-sheet is below:
body {background: #ffffff;}
a {color: #2b2bf6;}
h1 {font-size: 30px;}
#container
{width:1000px;
margin: 0 auto;
background: #dddddd;}
#header
{height: 150px;
margin: 0px;
padding: 0px;
background: #FFFFA3;}
#header-right-container img
{border:none;
width:80%;
height:150px;
float: right;}
#header-left-container
{width:20%;
float: left}
#header-left-container img
{border:none;
width:100%;
height:150px auto;
float: left;}
#sidebar
{
position:relative;
width: 80%;
height: 400px;
float:right;
background: #FFFFA3; ;}
#content
{
position:relative;
width: 20%;
height: 400px;
float: left;
background: #f0e811;;}
#footer
{width: 100%;
height: 70px;
float: left;
background: #000000;
div.result
{
width:88%;
padding:5%;
border:5px solid gray;
margin:5px;
align:center;
}
div.form
{
width:180px;
padding:5%;
border:5px solid gray;
margin:50px;
align:center;
float:right;
}
table, td, th
{
border:0.5px solid blue;
align:center
}
th
{
background-color:#3886FC;
color:white;
}
I believe you should set the style to be something like "position:absolute; left:100px; top:100px; opacity:0.3;" for the image element on top.
Use style="opacity:0.5;" where opacity can be any val from 0.1 to 1
and for overlapping the img onto another you need to specify style="z-index:1;", the higher the z-index more priority will be given to it.