I have two divs within my header - one for a nav (.site-navitation) bar and the other for my header image (.side-branding). .site-navigation is set to 50px high and .site-branding is set to 400px. When placed one after the other, theoretically, the .site-branding div should start 50px from the top of the screen, but for some reason, it's starting at 0,0, hiding 50px of .site-branding behind the .site-navigation div.
If anyone could help me figure out why this might be happening, it would be greatly appreciated. To see the issue in action, visit http://www.noellesnotes.com .
Here's the relevant code:
HTML
<nav id="site-navigation" class="main-navigation" role="navigation">
<h1 class="menu-toggle"><?php _e( 'Menu', 'portfolio' ); ?></h1>
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', '_s' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #site-navigation -->
<div class="site-branding">
<h1 class="site-title">Noelle Devoe</h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>
CSS
#site-navigation {
width: 100%;
height: 50px;
background-color: rgb(255, 255, 255);
}
.main-navigation {
clear: both;
display: block;
float: left;
width: 100%;
}
.site-branding {
width: 100%;
height: 400px;
}
.site-title {
width: 55%;
font-family: 'Playfair Display SC', serif;
text-transform: uppercase;
font-size: 4.5em;
background-color: rgba(199,101,56, 0.6);
line-height: 1em;
text-align: center;
color: rgb(255,255,255);
}
Remove float: left in main-navigation class, this will solve your problem
Related
I'm trying to display my posts horizontally, but I have not managed to get it, it only shows vertically, I see that parts of the html code are repeated.
My code:
<div id="content" class="container-fluid">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="four-columns" class="grid-container" style="display:block;">
<ul class="rig columns-4">
<li itemscope="">
<a href="<?php the_permalink(); ?>"><img src="<?php
$feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
echo $feat_image;?>" class="attachment-single-post-thumbnail size-single-post-thumbnail wp-post-image" alt="" width="300" height="188">
<h3 itemprop="headline"><?php the_title_attribute(); ?></h3></a></li></ul>
</div>
<?php endwhile; endif; ?>
</div>
My css:
<style>
ul.rig li img {
border-radius: 6px;
}
.mg-breadcrumb-section .overlay {
display: none;
}
img, ul.rig li img {
max-width: 100%;
height: auto;
}
ul.rig li h3 {
margin: 0 0 5px;
text-align: center;
}
#front-list ul li {
list-style: square;
}
#front-list ul, ul.rig li {
margin-bottom: 15px;
}
ul.rig.columns-4 li {
width: 16%;
}
ul.rig li {
margin-right: 10px;
background: #ddd;
font-size: 16px;
border-radius: 6px;
}
.footer3, ul.rig li {
display: inline-block;
}
</style>
This is how it shows up in the browser
what am I doing wrong?
I apply the rules of bootstrap but my buttons seems to go out of its alignment. my "Buy Now" and "View More" buttons should be place at the right side of the each sections. But i can seems to make it with bootstrap. I do not want to use Css to align it because i wanted it to be responsive. Can anyone enlighten me to help me out with my issues?
below here are my codes
<div class="container">
<div class="row" id="myDIV">
<?php
$sql = "SELECT * FROM products";
$query = $conn->query($sql);
if (!mysqli_num_rows($query)) {
echo '
<div class="col-12">
<div class="badge badge-danger">No Products Found</div>
</div>
';
} else {
while ($row = $query->fetch_assoc()) {
?>
<section id="product-display" style="z-index: 1;background: linear-gradient(180deg, <?php echo $row['product_section_colour']; ?> 25.52%, rgba(42, 86, 147, 0) 100%);">
<div class="container-fluid">
<div class="row">
<div class="col-2" style="top:-15px; left:-20px;">
<img style="height: 160px;width: 105px;left: -2px;top: -15px;border-radius: 0px;" loading="lazy" loading="lazy" id="product_img" src="images/product-main/<?php echo $row['product_photo']; ?>" alt="">
</div>
<div class="col-6 text-justify" style="position: absolute;height: 68px;left: 22%;right: 27.05%;">
<p style="color:<?php echo $row['product_dec_colour']; ?>;font-size:20px; padding-bottom:2px;font-weight: 600;"><?php echo $row['product_title']; ?></p>
<ul>
<li style="color:<?php echo $row['product_dec_colour']; ?>;font-size:7px;position: absolute;height: 68px;top: 35px;line-height: 8px;font-weight: 400;"><?php echo $row['product_desc']; ?></li>
</ul>
</div>
<div class="col-4">
Buy Now
View More
</div>
</div>
</div>
</section>
<?php
}
}
?>
</div>
this are my css
.buynow {
min-height: 32px;
background: #ffffff;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
border-radius: 5px;
font-family: Inter;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 15px;
text-align: center;
width: 90px;
position: absolute;
top: 17px;
}
.viewmore {
min-height: 32px;
background: #ffffff;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
border-radius: 5px;
font-family: Inter;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 15px;
text-align: center;
width: 90px;
position: absolute;
top: 58px;
}
section {
height: 107px;
width: 100%;
left: 0px;
top: 0px;
border-radius: 0px;
display: inline-block;
}
* {
padding: 0px;
margin: 0px;
}
ul li {
list-style-position: outside;
margin-left: 1em;
}
Why did you made "col-6" class as position:absolute? it will work if you remove that. you have used col-2,col-6,col-4 this is enough no need of position: absolute
I cannot run your code, but you can try with flex. Here is an example
<div class="d-flex">
<div class="col-4 mf-auto">
Buy Now
View More
</div>
</div>
You need to add mf-auto to your css file too.
This will help to align your content to the right side
.mf-auto {
margin-left: auto;
}
my get_bloginfo ( It is wordpress code which calls the text of "My WordPress Blog" ) doesnt be centered.Here is the codes:
<!-- header -->
<header class="header clear" role="banner">
<!-- logo -->
<div class="logo">
<a href="<?php echo home_url(); ?>">
<!-- svg logo - toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script -->
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.svg" alt="Logo" class="logo-img">
</a>
</div>
<div class="strip"></div>
<div class="slogan"><?php echo get_bloginfo($show='description'); ?></div>
<!-- /logo -->
<!-- nav -->
<nav class="nav" role="navigation">
<?php html5blank_nav(); ?>
</nav>
<!-- /nav -->
</header>
.logo-img {
display:block;
margin-left: auto;
margin-right: auto;
}
.strip {
margin-top:-30px;
background-image: linear-gradient(0deg, #cf9008 50%, #cf9008 50%, #cf9008 100%);
height: 20px;
width: 100%;
z-index: 100;
background-size: 100%;
}
.slogan {
display:inline-block;
margin-left: auto;
margin-right: auto;
text-align: center;
the link:
http://www.themeforest-deneme2.deniz-tasarim.site/2020/01/03/fhhfh/
.slogan {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
this is your css code. Change display:inline-block property to display:block
Change:
.slogan {
display:inline-block;
margin-left: auto;
margin-right: auto;
text-align: center
}
To:
.slogan {
text-align: center
}
Currently trying to display 8 of the most popular items in from my shop on the home page in a list (ul, li) form. Problem is, it's not displaying inline. Looks horrible and I can seem to get any of the CSS to change it or rearranging the php code isn't working either. Was wonder if anyone had an insight into what I'm missing here.
Here's the php code:
<div id="popular-items" class="site-content">
<div id="popular-links" class="site-content">
<ul class="popular-list">
<li>
<div class="popular-im">
<?php
$args = array( 'post_type' => 'product', 'stock' => 4, 'posts_per_page' => 8, 'orderby' =>'date','order' => 'DESC' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product;
?>
<a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="65px" height="115px" />'; ?>
<h5><?php the_title(); ?></h5>
<span class="price"><?php echo $product->get_price_html(); ?></span></a><?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
<?php endwhile; ?>
</div>
</li><!-- /span3 -->
</ul><!-- /row-fluid -->
</div>
</div>
And here's the css:
#popular-items {
height: 520px;
background-color: transparent;
border: 1px solid #fd0e35;
position: relative;}
ul.popular-list {
display: inline-block;
list-style-type: none !important;
padding: 0;}
#popular-links {
height: 400px;
width: 1102px;
background-color: transparent;
border: 2px solid lightgreen;
position: relative;
top: 50px;
margin: 0 auto;
padding: 0;}
.popular-im {
left: 400px;
height: 350px;
width: 150px;
margin: 0 0 0 0;
border: 2px solid black;
display: inline-block;
vertical-align: top;
position: relative;
text-transform: none;}
Remove Inline-block from UL and apply it to LI, Below should be ideal code for your problem, with explanation, change height / width as per your layout.
First you may want to highlight area what is popular items and let me guess it is about 600px width.
#popular-list {padding:10px; box-sizing:border-box; width:600px;}
Now let us define UL
ul.popular-list {list-style:none}
Finally Li setup in columns. (with 10px gutter between them)
ul.popular-list li {display:inline-block; width:142.5px; margin-right:10px}
ul.popular-list li:nth-child(4n+4) {margin-right:0}
And right after last li (just before ) put clear class.
Thanks & Regards
Manoj Soni
Something like that will help:
.popular-list{
list-style-type: none;
overflow:hidden;
}
.popular-list li{
display:inline-block;
float:left;
height: 350px;
width: 150px;
}
I'm having problems implementing this code onto my site http://www.some-things.net/category/work/
http://www.sohtanaka.com/web-design/css-on-hover-image-captions/
Can anyone see where I'm going wrong?
I've got it working in coda - but when I try implement it into wordpress, something breaks.
<div style="clear:both"></div>
<div class="gallery">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="portfolioItem">
<?php the_post_thumbnail(); ?>
<span class="desctitle"><h2><?php the_title(); ?></h2>
</span> </div>
<?php endwhile; ?>
</div>
And here is the CSS:
.portfolio {overflow:hidden;}
.gallery {
margin-top:10px;
padding-left:22px;
margin-left:-22px;
margin-bottom:20px;
width:982px;
}
/* .portfolioItem {
float:left;
width:300px;
margin-right:25px;
overflow:hidden;
margin-bottom:5px;
} */
.portfolioItem {
float: left;
overflow: hidden;
position: relative;
margin-right: 25px;
margin-bottom: 5px;
}
.portfolioItem a {
text-decoration: none;
float: left;
}
.portfolioItem a:hover {
cursor: pointer;
}
/* .portfolioItem img {
border:2px;
border-color:000;
border-style:solid; */
/* border:none; */
/* opacity:0.6;filter:alpha(opacity=60);} */
/* .gallery .portfolioItem img:hover {
opacity:1;filter:alpha(opacity=100);}
*/
.portfolioItem a img {
float: left;
margin: 0;
border: none;
}
/* boxes for portfolio item descriptions */
.portfolioItem a:hover .desctitle {
display: block;
font-size: 1.2em;
padding: 0px 0;
background: #111;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
color: #fff;
position: absolute;
bottom: 0px;
margin: 0;
width: 300px;
border-top: 1px solid #999;
}
/* .desctitle a {
color:white;
padding-left:12px;
}
*/
.portfolioItem a .desctitle { display: none; }
It turned out to be a formatting error - the / linking was all wrong. This is the correct code for anyone else with a similar problem...
<div style="clear:both"></div>
<div class="gallery">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="portfolioItem">
<a href="<?php the_permalink() ?>" class="desctitle" title="<?php the_title();?>"><?php the_post_thumbnail(); ?>
<span class="desctitle"><?php the_title(); ?></a>
</span>
</div>
<?php endwhile; ?>
</div>