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
}
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 am trying to get 4 images to line up with text centered under them. I have been able to get them close but they are still aligning slightly off. I am still trying to get the hang of HTML 5, and have tried to find some others that have had the same issue but have not had much luck. Any advice would be great since I have hit a brick wall. I will attach a screen shot of my page.
#navigation {
height: 40px;
font-size: 20px;
font-family: Verdana;
font-weight: bold;
text-align: center;
background-color: #000000;
}
main {
margin: 0 210px 0 160px;
padding: 1px 10px 20px 10px;
background-color: #FFFFFF;
display: block;
color: #000000
}
body {
background-color: #FFFFFF;
margin: 0;
}
header {
background-color: #000000;
color: #FFFFFF;
text-align: right;
box-sizing: border-box;
display: block;
height: 120px;
padding: 0 20px;
border-bottom: 2px solid;
}
aside {
display: block;
box-sizing: border-box;
float: right;
width: 150px;
}
footer {
display: block;
box-sizing: boreder-box;
font-size: .70em;
color: #FFFFFF;
background-color: #000000 padding-top: 10px;
clear: both;
}
#container {
background-color: #969696;
color: #000000;
min-width: 960px;
font-family: Verdana, Arial, sans-serif;
}
#navigation ul {
height: auto;
padding: 5px 20px;
margin: 1px;
}
#navigation li {
display: inline;
padding: 50px;
}
#navigation a {
text-decoration: none;
color: #FFFFFF;
}
body {
background-color: #969696;
}
side {
display: block;
box-sizing: border-box;
float: right;
width: 150px;
}
#rose {
overflow: hidden;
}
.imageContainer {
float: left;
margin-right: 250px;
margin-left: 20px;
}
p {
text-align: center;
}
.imageContainer2 {
float: center;
margin-right: 250px;
margin-left: 20px;
}
p {
text-align: center;
}
<!DOCTYPE html >
<html lang="en">
<head>
<title>St. Pete Flower Market</title>
<meta charset="utf-8">
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="container">
<header role="banner">
<span>Search</span>
<h1>St. Pete Flower Market</h1>
</header>
<nav>
<div id="navigation">
<ul>
<li><a class="navigation" href="index.html">Home</a></li>
<li><a class="navigation" href="contact.html">Contact Us</a></li>
<li><a class="navigation" href="occasions.html">Occasions</a></li>
<li><a class="navigation" href="flowers.html">Flowers</a></li>
<li><a class="navigation" href="giftbaskets.html">Gift Baskets</a></li>
<li><a class="navigation" href="deals.html">Deals</a></li>
<li><a class="navigation" href="aboutus.html">About Us</a></li>
</ul>
</div>
</nav>
<section id="side">
</section>
<aside role="complementary">
</aside>
<main>
<div id="rose">
<h1><img src="roses.jpg" width="100%" height="300px">
</div>
</h1>
<div class="image123">
<div class="imageContainer">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</div>
< <div class="image1234">
<div class="imageContainer2">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer2">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</main>
<footer> fjiefjwiofjewfjiewofjewo</footer>
</div>
</body>
</html>
There are some errors in your code:
the h1 tag inside the div #rose is actually closing outside it. consider getting rid of the h1 tag in the first place, unless you need a title with the top image.
A similar error is div class="image1234" closing outside the main tag.
My solutions (which seems to work fine) is to get rid of the css for both the image containers, add an outer div and set its css to display:flex; and justify-content: space-around;
that worked for me
<div id="newDiv">
<div class="image123">
<div class="imageContainer">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</div>
<div class="image1234">
<div class="imageContainer2">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer2">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</div>
</div>
the css:
#newDiv {
display:flex;
content: space-around;
}
have a look here for more info:
https://www.w3schools.com/css/css3_flexbox.asp
I have element on page, where I need to set height: auto, but it doesn't work the way I want to. Only min-height works, but when it's bigger that this, text goes over to the next element. Important thing to say, that I am reworking downloaded template. Everywhere else height: auto worked, but not here. I'm including the code below. I've already tried overflow: auto; but it just added scrollbar in the size of min-height value...
HTML:
<section id="dates" class="full-wrapper parallax-wrapper dates"> <!-- Tour Dates -->
<div class="parallax" data-velocity="-.3" data-fit="0">
<div class="front-content dates">
<h1>Koncerty</h1>
<div class="spacer"></div>
<div class="dates-wrapper">
<ul>
<li> <!-- List #2 --> <!-- max 5 Date Info elements per li -->
<div class="date-box"> <!-- Date Info 1 -->
<div class="info date">
<div class="day">15</div>
<div class="month">zář</div>
<div class="year">2015</div>
</div>
<div class="info">
<div class="city">Mladá Boleslav</div>
<div class="place"><div class="ico"></div>Nádvoří hradu</div>
</div>
<div class="info">
<div class="time"><div class="ico"></div>19:00 - 20:00</div>
<div class="buy"><div class="ico"></div>FB událost</div>
</div>
<div class="clear"></div>
</div> <!-- end Date Info 1 -->
<div class="date-box"> <!-- Date Info 2 -->
<div class="info date">
<div class="day">11</div>
<div class="month">úno</div>
<div class="year">2016</div>
</div>
<div class="info">
<div class="city">Plzeň</div>
<div class="place"><div class="ico"></div>
Pod Lampou</div>
</div>
<div class="info">
<div class="time"><div class="ico"></div>20:30 - 21:30</div>
<div class="buy"><div class="ico"></div>FB událost</div>
</div>
<div class="clear"></div>
</div> <!-- end Date Info 2 -->
<div class="date-box"> <!-- Date Info 3 -->
<div class="info date">
<div class="day">24</div>
<div class="month">úno</div>
<div class="year">2016</div>
</div>
<div class="info">
<div class="city">Praha</div>
<div class="place"><div class="ico"></div>Vagon</div>
</div>
<div class="info">
<div class="time"><div class="ico"></div>21:00 - 22:00</div>
<div class="buy"><div class="ico"></div>FB událost</div>
</div>
<div class="clear"></div>
</div> <!-- end Date Info 3 -->
</li>
</ul>
</div>
</div>
<div class="overlay"></div>
</div>
</section><!-- end Tour Dates -->
CSS:
#dates>div:nth-of-type(1) {
background: url(../img/parallax/01.jpg) 50% 0% repeat-y fixed;
background-color: #333333;
margin: 0;
height: auto !important;
min-height: 200px;
position: relative;
width: 100%;
text-align: center;
/* background-size: 100%;*/
-moz-background-size: cover !important;
-o-background-size: cover !important;
-webkit-background-size: cover !important;
-khtml-background-size: cover !important;
}
.parallax-wrapper.dates {
height: auto;
min-height: 200px;
position: static;
width: 100% !important;
/*min-width: 1000px;*/
margin: 0;
padding: 0;
}
.parallax-wrapper.dates h1 {
color: white;
}
.front-content.dates{
width: 500px;
margin-left: -250px;
}
.dates-wrapper{
width: 600px;
height: auto;
min-height: 200px;
position: relative;
overflow: hidden;
margin-left: 10px;
}
.dates-wrapper ul li{
float: left;
width: 600px;
}
.date-box{margin-bottom: 12px;}
.date-box:last-child{margin-bottom: 0;}
.date-box .info{
float: left;
text-align: left;
padding-left: 10px;
color: #bbb;
max-width: 170px;
overflow: hidden;
font-size: 14px;
}
.date-box .info div{position: relative;}
.date-box .info.date{
width: 65px;
height: 80px;
background: #ee6c00;
color: #fff;
text-align: center;
padding-left: 0;
}
Solved! I had to add exception for .front-content class, because there was only this:
.front-content{
position: absolute;
left: 50%;
z-index: 5;
}
So I had to edit it for .dates block:
.front-content.dates{
position: relative;
z-index: 5;
padding: 5px 10px 25px 10px;
}
Been scratching the old noggin for a while on this one. I've tried many things but I cant get the sign-in div to sit properly aligned to the top. It's getting pushed underneath the main article div for some reason. I feel like I have too many nested divs. Please help a noobie out.
My site is www.project-paleo.co.uk
Here is the code for the main indec wrapper :
div.indexcontent {
vertical-align: top;
width: 970px;
}
div.newsext {
text-align: left;
clear: none;
width: 680px;
float: left;
border-width: 7px 7px 7px 7px;
border-image: url("images/boxborder3.png") 7 7 7 7 round;
}
div.indexforumext {
text-align: left;
width: 680px;
float: left;
border-width: 7px 7px 7px 7px;
border-image: url("images/boxborder3.png") 7 7 7 7 round;
}
div.newshead{
background-image: url("images/divhead.png");
background-color: #0e141f;
background-repeat: no-repeat;
padding-left: 5px;
display: inline;
}
div.newscontent {
background-image: url("images/cbox.png");
background-color: #0e141f;
background-repeat: no-repeat;
padding: 10px;
}
div.rightbox {
width: 250px;
float: left;
border-width: 7px 7px 7px 7px;
border-image: url("images/boxborder3.png") 7 7 7 7 round;
}
<div class="indexcontent">
<div class ="newsext">
<div class ="newsint">
<article class ="post">
<div class ="newshead">
<div>
<img id="Project Paleo" src="<?php echo get_bloginfo('template_directory');?>/images/note.png" alt="" height="35" width="30"/>
</div>
<div class="newstitle">
<h2> <?php the_title() ;?></h2>
</div>
</div>
<div class ="newscontent">
<?php the_content(); ?>
</div>
</article>
</div> <!-- Newsint -->
</div> <!-- Newsext -->
<div class ="indexforumext">
<div class ="indexforumint">
<?php echo do_shortcode("[bbp-forum-index]"); ?>
</div> <!-- indexforumint -->
</div> <!-- indexforumext -->
<div class ="rightbox">
<div class ="rbhead">
<h2> Server Map </h2>
</div>
<div class ="login">
<?php echo do_shortcode("[login_widget]"); ?>
</div>
</div>
</div> <!-- IndexContent -->
The problem is caused by the <div class ="indexforumint"> element. You should wrap <div class ="indexforumint"> and <div class ="newsint"> in a <div> and then float the wrapping div.
See this:
HTML
<div class="indexcontent">
<div class="left-wrapper"> <!-- added this div as a wrapper !-->
<div class ="newsext">
<div class ="newsint">
<article class ="post">
<div class ="newshead">
<div>
<img id="Project Paleo" src="<?php echo get_bloginfo('template_directory');?>/images/note.png" alt="" height="35" width="30"/>
</div>
<div class="newstitle">
<h2> <?php the_title() ;?></h2>
</div>
</div>
<div class ="newscontent">
<?php the_content(); ?>
</div>
</article>
</div> <!-- Newsint -->
</div> <!-- Newsext -->
<div class ="indexforumext">
<div class ="indexforumint">
<?php echo do_shortcode("[bbp-forum-index]"); ?>
</div> <!-- indexforumint -->
</div> <!-- indexforumext -->
</div> <!-- left-wrapper -->
<div class ="rightbox">
<div class ="rbhead">
<h2> Server Map </h2>
</div>
<div class ="login">
<?php echo do_shortcode("[login_widget]"); ?>
</div>
</div>
CSS
div.indexcontent {
vertical-align: top;
width: 970px;
}
// Added these styles
div.left-wrapper {
float:left;
width:660px;
}
// Change width to 100%
div.newsext {
text-align: left;
clear: none;
width: 100%;
float: left;
border-width: 7px 7px 7px 7px;
border-image: url("images/boxborder3.png") 7 7 7 7 round;
}
// Change width to 100%
div.indexforumext {
text-align: left;
width: 100%;
float: left;
border-width: 7px 7px 7px 7px;
border-image: url("images/boxborder3.png") 7 7 7 7 round;
}
div.newshead{
background-image: url("images/divhead.png");
background-color: #0e141f;
background-repeat: no-repeat;
padding-left: 5px;
display: inline;
}
div.newscontent {
background-image: url("images/cbox.png");
background-color: #0e141f;
background-repeat: no-repeat;
padding: 10px;
}
div.rightbox {
width: 250px;
float: left;
border-width: 7px 7px 7px 7px;
border-image: url("images/boxborder3.png") 7 7 7 7 round;
}
Hope that helps!
Add
position:absolute;
top:5px;
right:5px;
to div.rightbox in your CSS
As i see your main container/holder/wrapper (.indexcontent) don't have position:relative, using position:absolute on '.rightbox' won't bring the box to right position. So try this codes
.indexcontent{
position:relative;
}
.rightbox{
float: none;
position: absolute;
right: 0px;
}
I am trying to do 3 columns page and I have problem.
My html:
<?php
$this->headMeta()
->setIndent(8)
->appendHttpEquiv('Content-Type', 'text/html;charset=utf-8')
->appendName('keywords', 'story')
;
$this->headTitle()
->setIndent(8)
->setSeparator(' - ')
->headTitle('Your Story')
;
echo $this->doctype();
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<base href="<?php echo $this->baseUrl(); ?>" />
<link rel="stylesheet" type="text/css"
href="<?php echo $this->baseUrl('/styles/site.css'); ?>" />
<?php
echo "{$this->headMeta()}
{$this->headTitle()}
{$this->headLink()}"
?>
</head>
<body>
<div id="BODY">
<div id="HEADER">
<div id="headerLogin">
<div id="logged-in-as">
<?php echo $this->loggedInAs(); ?>
</div>
</div>
<div id="IMAGE">
<img src="../images/write.png" alt="" height="20%" width="90%" />
</div>
<div id="LOGO">
<img src="../images/logo.png" alt="Your true Story..." height="30%" width="160%"/>
</div>
<div id="USER">
</div>
</div>
<div id="MENU">Menu:
<div id="MENU_IN">
<div id="LIST">
<ul>
<?php
echo $this->menuLinks();
?>
</ul>
</div>
</div>
</div>
<div id="CONTENT">
<img src="../images/ScG.png" alt="" height="10%"/>
<div id="CONTENT_IN">
<?php echo $this->layout()->content ?>
<img src="../images/ScD.png" alt="" height="10%" />
</div>
</div>
<div id="INFORMATIONS">
<?php
$auth = Zend_Auth::getInstance();
if ($auth->hasIdentity()) {
?>
Your profile:
<div id="INFORMATIONS_IN"
<div id="LIST">
<ul>
<?php
echo $this->usersProfilLinks();
?>
</ul>
</div>
</div>
<?php } ?>
</div>
<div id="FOOT">Iwona Jamroz</div>
</div>
</body>
My CSS:
body
{
background-image: url(../images/back.png);
background-repeat: repeat;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
overflow: visible;
height: 100%;
}
#IMAGE {
margin-top: 15px;
margin-left: 8%;
float: left;
}
#LOGO{
margin-top: 5px;
margin-right: 25%;
float: right;
}
#HEADER{
margin-bottom: 15%;
}
#MENU {
width: 20%;
height: 10%;
background-image: url(../images/texMenuBack.png);
margin-right: 5px;
float: left;
}
#MENU_IN
{
margin-top:10%;
height: 10%;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
background-image: url(../images/texMenuMid.png);
}
#CONTENT{
margin-left: 21%;
margin-right: 21%;
float: left;
}
#CONTENT_IN {
padding-left: 8px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
background-image: url(../images/texM.png);
background-repeat: repeat;
min-height: 150px;
}
#INFORMATIONS {
width: 18%;
background-image: url(../images/texMenuBack.png);
margin-left: 5px;
float: right;
}
#INFORMATIONS_IN{
margin-top: 14%;
margin-bottom: 4px;
margin-left: 3px;
margin-right: 3px;
background-image: url(../images/texMenuMid.png);
}
#FOOT {
clear: both;
vertical-align: middle;
}
#headerLogin a{ color: white;
text-align: left;
word-spacing: 3px;
font-family: fantasy;
font-size: 24px;
}
#headerLogin {
color: whitesmoke;
font-family: monospace;
font-size: 24px;
}
#LIST {
}
And I have 3 columns but one after another and I can not understand it as I have read that to do 3 columns layout is enought to write in CSS float: left, float: left, float: right but I all the time have one after another not in one row :/ Why?
It looks like this:
aaa
.......aaaaaa
...................aaa
Floats are tricky and you should try to test it with different browsers. However, I did notice this
#CONTENT{
margin-left: 21%;
margin-right: 21%;
float: left;
}
Try to remove the margin-left and margin-right, because it probably causes the effect you are describing.
Try this instead:
#CONTENT{
width: 20%;
float: left;
}
I would consider using a CSS Framework such as 960 or Blueprint CSS, it will make columned layouts incredibly easy and cross-browser compliant. With CSS frameworks there is no need to write layout CSS, eliminating a great deal of browser compatibility testing and it helps keep your presentational CSS clean and tidy.
Your html will end up looking something like this (example is in 960)
<div class="container_24">
<div class="grid_8"></div>
<div class="grid_8"></div>
<div class="grid_8"></div>
</div>
Explanation: A 24 column container, where each column is 8 columns wide, will result in a 3 column layout.