I just have a quick question as I've run into a problem I am unable to solve. I just need a logo to be on the left of the container and navigation links (top-bar) on the left. Where is the problem in my code?
HTML:
<header>
<div class="container">
<?php
$custom_logo_id = get_theme_mod('custom_logo');
$logo = wp_get_attachment_image_src($custom_logo_id, 'full');
if (has_custom_logo()) {
echo ' <img class="site-logo" src="' . esc_url($logo[0]) . '" alt="' . get_bloginfo('name') . '"> ';
} else {
echo '<h1 class="site-logo">' . get_bloginfo('name') . '</h1>';
}
?>
<?php
wp_nav_menu(
array(
'theme_location' => 'top-menu',
'menu_class' => 'top-bar'
)
);
?>
</div>
</header>
CSS:
header .container {
height: 20%;
z-index: 99;
display: flex;
align-items: center;
}
header .container .site-logo {
align-items: flex-start;
}
header .container .top-bar {
list-style-type: none;
display: flex;
align-self: flex-end;
}
When there is a logo image, it is wrapped in an <a> tag. So the margin needs to be applied to the <a>. When there is no logo image, the margin should be applied to the <h1>.
Try:
.site-link, .site-logo {
margin-right: auto;
}
Related
So I want to put the two divs next to each other and the one below in the code gets put into the one above and I have no idea why.
HTML:
<body>
<div id="links">
<h1 id="title">Webcam</h1>
<?php
$dateinamen = 'pictures/Live.jpg';
$timestamp = filemtime($dateinamen);
$time = time();
$diff = $time -$timestamp;
// Wenn Bild jünger als 10sec
if ($diff < 10){
echo "<img src='pictures/Live.jpg'";
}
else {
echo "<img src='pictures/oops.jpg'";
}
?>
</div>
<div id="rechts">
<h2>Ping</h2>
<?php
$host1="192.168.1.1";
exec("ping -c 1 -w 1 " . $host1, $output1, $result1);
if ($result1 == 0) {
echo "<h3 id='sw1'style='background-color: green';>Router</h3></br>";
}else {
echo "<h3 id='sw1'style='background-color: red';>Router</h3></br>";
}
?>
</div>
</body>
CSS:
#links{
float: left;
width: 50%;
}
#rechts{
float: right;
width: 50%;
margin-top: 7%;
}
Haven't found any cases like these so I don't know if it's a problem with xampp or something else.
EDIT
Photo in inspection mode in Google Chrome
You didn't close the img tag used in the PHP code.
use <img src='pictures/Live.jpg'>
Try to check by removing margin-top:7%; form this class
#rechts {
float: right;
width: 50%;
// margin-top: 7%; remove this line
}
Try using flexbox instead.
#container {
display: flex;
}
#links{
flex: 1;
background-color: blue;
height: 500px;
}
#rechts{
flex: 1;
background-color: red;
height: 500px;
}
<body>
<div id="container">
<div id="links">
<h1 id="title">Webcam</h1>
</div>
<div id="rechts">
<h2>Ping</h2>
</div>
</div>
</body>
Seems like I just got trolled...
I just switched the two divs around (using the Flexbox solution proposed by Michał Drabik) and it worked...
I have a sticky menu on my wordpress site which is just a header with css position fixed but it's overlaying over the top of each of my sections. You can see what I mean if you view the test site here
if you click on the menu icon and click on a section it will navigate to each section but I need the sticky menu to rest above each section instead of it overlaying at the top.
In my header.php I have
<div id="header-wrap">
<div class="poweredby">POWERED BY bluesource<p class="mobile-phone">0845 319 2100</p></div>
<div class="headerphone">0845 319 2100</div>
<button class="toggle-menu menu-right push-body"><i class="fa fa-bars"></i></button>
<!-- Right menu element-->
<?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?>
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav id="site-navigation" class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav>
<?php endif; ?>
<?php endif; ?>
</div><!-- end header wrap -->
In my stylesheet I have
.site-header {
background: #333 none repeat scroll 0 0;
height: 98px;
padding: 27px 0;
text-align: right;
}
.site-header-main {
text-align: right;
right: 0;
display: block;
padding-right: 27px;
}
#header-wrap {
background: #333;
position: fixed;
top: 0;
z-index: 100;
height: 98px;
padding-top: 27px;
padding-right: 27px;
opacity: 0.9;
}
This code will do it
$('#header-wrap ul li a').click(function(){
href=$(this).attr('href');
$('html, body').animate({
scrollTop: $(href).offset().top-98 // since the height of your nav is 98px
}, 500);
});
For external links
$(document).ready(function(){
var urlHash = window.location.href.split("#")[1];
$('html,body').animate({
scrollTop: $('#' + urlHash).offset().top-98
}, 500);
});
This should do the job. I increased the position right so you get the white bar along the side, I applied an important tag otherwise it gets overwritten.
nav#site-navigation {
top: 98px;
}
.cbp-spmenu-right.menu-open {
right: 23px !important;
}
I am trying to create two columns. One column is on the left and the other column is on the right. These two columns have an image and text to go along with it. Instead of having each image and text turn into a block of its own on a separate line, the images and text stack up on top of each other for both columns. How can I solve this?
PHP/HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="test.css"?parameter="3"/>
</head>
<?php
$resultSet = $db->query("SELECT * FROM Articles");
if ($resultSet->num_rows != 0)
{
while ($rows = $resultSet->fetch_assoc())
{
$id = $rows["id"];
$images = $rows["image"];
$text = $rows["text"];
echo "<div id=body>";
if ($id > 3 && $id < 8)
{
echo "<div id=left>";
echo "<img src=$images>";
echo "<p>$text</p>";
echo "</div>";
}
if ($id > 8)
{
echo "<div id=right>";
echo "<img src=$images>";
echo "<p>$text</p>";
echo "</div>";
}
echo "</div>";
}
}
?>
CSS
#body{
position: relative;
margin: 0 auto;
width: 85%;
height: auto;
}
#left{
position: absolute;
left: 0%;
width: 28.33%;
display: block;
}
#left img{
width: 100%;
}
#right{
position: absolute;
right: 0%;
width: 28.33%;
}
#right img{
width: 100%;
}
First off there are a lot of things are added that don't need to be. That said, try this:
#left{
width: 28.33%;
display: inline-block;
float: left;
}
#right{
width: 28.33%;
display: inline-block;
float: left;
}
1.) Add singular ' quotes around you attribute values in the echo statements.
echo "<img src='path-to-img'>";
2.) If its only 2 columns, then the css for left box should be
`{position:relative; float:left;width:50%} ,
{position:relative; float:right;width:50%}`
for right box. From there you can choose to absolute position the images or text-align:center the boxes or whatever you want from there.
3.) Naming a id='body' is bad practice, you should rename it.
4.) Set CSS to display:block for both, not just one of those divs (left/right)
I have a Wordpress widget and inside the widget I am displaying profile information. Some times the text for the 2nd row is too long and it overflows past the widget container.
What would be a good way to deal with this, and how could I implement it in css or html or whatever?
My css
#profileContainer {
float: left;
position: relative;
width: 400px;
display:block;
padding: 5px;
}
#avatarContainer {
width: 55px;
float: left;
padding: 5 5 5 5;
}
#dataContainer {
float: left;
vertical-align: text-top;
word-wrap: break-word;
}
#dataList {
display: inline-block;
}
My html for the output
?>
<div id="profileContainer">
<?php
$img = bp_core_fetch_avatar( 'html=false&item_id=' . $author->getId() );
$img_html = '<img src="' . $img . '"></img>';
?>
<div id="avatarContainer">
<?php
if ($author->getUrl() != null) {
echo "<a href='" . $author->getUrl() . "'>" . $img_html . "</a>";
} else {
echo $img_html;
}
?>
</div> <!--closing avatar container div -->
<div class="overflow-hidden">
<?php
if ($author->getName() != null) {
echo "<b>" . $author->getName() . "</b>";
}
if ($author->getJobTitle() != null) {
echo "<br/>" . $author->getJobTitle();
}
if ($author->getUserName() != null) {
if ($author->getUrl() != null) {
echo "<br/><a href='" . $author->getUrl() . "'>#" . $author->getUserName() . "</a>";
} else {
echo "<br/>#" . $author->getUserName();
}
}
if ($author->getEmail() != null) {
echo '<br/>' . $author->getEmail() . "";
}
if ($author->getPhone() != null) {
echo "<br/> " . $author->getPhone();
}
echo "<br/>";
?>
</div> <!--closing data container div -->
</div> <!--closing container div-->
<?php
in css do this to wrap text in elipsis mode (three dots)
.overflow-hidden{
max-width:400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
In my custom template file, which i made for youtube videos-creating problem with my sidebar, it is showing the sidebar at bottom, below is the code i am using..
Can anyone help me, it should stick at right, as it..
<?php
/**
Template Name: gallery
*/
get_header();
?>
<style>
/* some basic styling */
h1 {font-size:20px; line-height:95%;}
#galvidcontainer {
width:1100px;
margin-left:50px;
height:1250px;
}
.galvidpre {
width:300px;
height:300px;
float:left;
margin:5px;
background-color:#00A0DA;
}
.galvidprevid {
width:300px;
}
.galvidpretext {
width:280px;
padding-top:2px;
margin-top:2px;
}
</style>
<div id="galvidcontainer">
<h1>Videos</h1>
<?php /* Loop the stuff from the videos post type */
$args = array( 'post_type' => 'videos', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();?>
<div class="galvidpre">
<div class="galvidprevid">
<?php
/* Set variables and create if stament */
$videosite = get_post_meta($post->ID, 'Video Site', single);
$videoid = get_post_meta($post->ID, "Video ID", single);
if ($videosite == vimeo) {
echo '<iframe src="http://player.vimeo.com/video/'.$videoid.'" width="300" height="190" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
} else if ($videosite == youtube) {
echo '<iframe width="300" height="190" src="http://www.youtube.com/embed/'.$videoid.'" frameborder="0" allowfullscreen></iframe>';
} else {
echo 'Please Select Video Site Via the CMS';
}
?>
</div>
<div class="galvidpretext">
<h1><?php the_title() ?></h1>
<p>
<?php /* this is just a limit on characters displayed */
$words = explode(" ",strip_tags(get_the_content()));
$content = implode(" ",array_splice($words,0,20));
echo $content; ?>
</p>
</div>
</div>
<?php endwhile;?>
</div>
<?php get_sidebar() ?>
<?php get_footer() ?>
The thing happening with the sidebar>>http://i.imgur.com/wm82twJ.png
Looks like you have to clear the floats. Use clearfix or clear:both
<div id="container" class="clearfix"></div>
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}