I am having trouble with placing my div's in the right position. I made some changes, but it does not work. I would like to put all elements in one row, but title is not aligning properly with the logo. I thought that the problem is in grid, but it is not.
Here is my code.
<body <?php body_class('compass_theme'); ?>>
<div class="container_24">
<div class="grid_24">
<div class="page_content_wrapper">
<div class="header animated">
<div class="grid_10 alpha">
<div class="logo grid_10 alpha" id="logomob">
<img src="<?php if (compass_get_option('compass_logo') != '') { ?><?php echo compass_get_option('compass_logo'); ?><?php } else { ?><?php echo get_template_directory_uri(); ?>/images/logo.png<?php } ?>" alt="<?php bloginfo('name'); ?> logo"/>
</div>
<div class="titleText grid_14 alpha">
<h1 id="title">
<span id="title-top">Adriatic Yacht</span></br>
<span id="title-bottom">Professionals</span>
</h1>
<h2 id="slogan">We can repair everything, except human lives!</h2>
</div>
</div>
<div class="grid_14 alpha contactIcons" id="desktop">
<div class="grid_6 alpha" id="phone">
<i class="fa fa-phone-square" aria-hidden="true"></i>
<p class="contact">+382-67-507-234</p>
</div>
<div class="grid_6 alpha contactIcons" id="email">
<i class="fa fa-envelope-square" aria-hidden="true"></i>
<p class="contact">info#adriatic-yacht.pro</p>
</div>
<div class="grid_6 alpha contactIcons" id="skype">
<i class="fa fa-skype" aria-hidden="true"></i>
<p class="contact">ID: adriaticyacht</p>
</div>
</div>
<div class="grid_14 alpha1" id="mobile">
<section class="deskContact">
<i class="fa fa-skype" aria-hidden="true"></i>
<p class="contact">ID: adriaticyacht</p>
</section>
<section class="deskContact">
<i class="fa fa-envelope-square" aria-hidden="true"></i>
<p class="contact">info#adriatic-yacht.pro</p>
</section>
<section class="deskContact">
<i class="fa fa-phone-square" aria-hidden="true"></i>
<p class="contact">+382-67-507-234</p>
</section>
</div>
<div class="clear"></div>
</div>
Related
I want to add an animation for the navbar. I tried many ways but it didn't work. I deleted some CSS code because it wasn't important for the code.
<div class="navbar" style="position: sticky; top: 0;">
<div class="logo">
<a href="../index.php">
<img src="../assets/icon/logo.png" />
<div class="title">Nexton</div>
</a>
</div>
<div class="right">
<div class="directory-open">
<a href="../user/index.php?user">
<i class="bi bi-person-gear"></i>
<?php echo $_SESSION['username']; ?>
</a>
<a href="../pages/logout.php">
<i class="bi bi-box-arrow-left"> Kijelentkezés</i>
</a>
</div>
<div class="directory-collapsed">
<div class="btn">
<i class="bi bi-person-gear" style="color: white;"></i>
</div>
<div class="dropdown" style="z-index: 2;">
<div class="directory-drop-down">
<a href="../user/index.php?user">
<?php echo $_SESSION['username']; ?>
</a>
Kijelentkezés
</div>
</div>
</div>
</div>
</div>
My full code can be found here
I tried to add an animation but it didn't work. Can somebody help me?
Any help will be appreciated.
I have a component named admin.component, in this component, I have a menu and a header.
In fact, when I create a new page, for example: the currency page.
The title is at the bottom of the la page, I don't understand why?
Normally, the title must be at the top...
I think that the component admin.component.html isnt't correct?
<div class="sidebar">
<div class="logo-details">
<i class="bx bxl-c-plus-plus"></i>
<span class="logo_name">Menu</span>
</div>
<ul class="nav-links">
<li>
<a routerLink="value" class="active">
<i class="bx bx-grid-alt"></i>
<span class="links_name">Value</span>
</a>
</li>
<li>
<a routerLink="currency">
<i class="bx bx-box"></i>
<span class="links_name">Currency</span>
</a>
</li>
</ul>
</div>
<section class="home-section">
<nav>
<div class="sidebar-button">
<i class="bx bx-menu sidebarBtn"></i>
<span class="dashboard">Dashboard</span>
</div>
<div class="search-box">
<input type="text" placeholder="Search..." />
<i class="bx bx-search"></i>
</div>
<div class="profile-details">
<span class="admin_name">Prem Shahi</span>
<i class="bx bx-chevron-down"></i>
</div>
</nav>
</section>
For the currency.component.html page, I have this:
<div class="home-content">
<h1 style="text-align: center">Currency Page</h1>
</div>
The code is available here, if you wish.
It's working now need to change in admin.component.html with below stracture and resolved issue easily
<router-outlet>
<div class="sidebar">
<div class="logo-details">
<i class="bx bxl-c-plus-plus"></i>
<span class="logo_name">Menu</span>
</div>
<ul class="nav-links">
<li>
<a routerLink="value" class="active">
<i class="bx bx-grid-alt"></i>
<span class="links_name">Value</span>
</a>
</li>
<li>
<a routerLink="currency">
<i class="bx bx-box"></i>
<span class="links_name">Currency</span>
</a>
</li>
</ul>
</div>
<section class="home-section">
<nav>
<div class="sidebar-button">
<i class="bx bx-menu sidebarBtn"></i>
<span class="dashboard">Dashboard</span>
</div>
<div class="search-box">
<input type="text" placeholder="Search..." />
<i class="bx bx-search"></i>
</div>
<div class="profile-details">
<span class="admin_name">Prem Shahi</span>
<i class="bx bx-chevron-down"></i>
</div>
</nav>
<router-outlet></router-outlet>
</section>
</router-outlet>
only add <router-outlet></router-outlet> after </nav> tag and check upper code so you will get idea how to implement
Top Header is now fixed and only content will be change like below ss
I made my frontend for a ecommerce site project and wanted to insert my made html code into my React project. When copy and pasting my code into App.js i got multiple problems and errors which are actually really simple problems but the normal fix won't do it.
My tag connects with my closing div tag and so my open div tag has no closing tag no more.
Ive added some pictures with their errors to make it easier to see.
function App() {
return (
<div className="header">
<div className="container">
<div className="navbar">
<a href="index.html" class="logo">
<h1 style="font-size: 30px;">FLOWERPOWER!<br/>WWW.FLOWERPOWER.NL</h1>
</a>
<nav>
<ul id="MenuItems">
<li>Home</li>
<li>Producten</li>
<li>Tips</li>
<li>Over ons</li>
<li>Contact</li>
<li>Account</li>
</ul>
</nav>
<img src="images/cart.png" width="30px" height="30px"/>
<img src="images/menu.png" class="menu-icon" onclick="menutoggle()"/>
</div>
<div className="row">
<div className="col-2">
<h1>Koop uw feestboeketten hier!</h1>
<p>Ma-za voor 14 uur besteld? Zelfde dag bezorgd,<br/>
Bezorging in heel Nederland<p/>
Kies uit! →
</div>
<div className="col-2">
<img src="images/banner.png"/>
</div>
</div>
</div>
</div>
<div className="categorieen">
<div className="small-container">
<h2 className="title" style="font-size: 50px"> Boeket van de maand</h2>
<div className="row">
<div className="col-3">
<img src="images/featuredbloem.jpg"/>
</div>
</div>
</div>
</div>
<div className="small-container">
<h2 className="title" style="font-size: 50px">Featured product</h2>
<div className="row">
<div className="col-4">
<a href="producten/passievol-details.html">
<img src="images/bloem1.png"/></a>
<h4>Passievol</h4>
<div className="rating">
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="far fa-star"></i>
</div>
<p>vanaf $ 79,95</p>
</div>
<div className="col-4">
<a href="producten/welkompasen-details.html">
<img src="images/bloem2.png"/></a>
<h4>Welkom Pasen</h4>
<div className="rating">
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="far fa-star"></i>
</div>
<p>vanaf $ 19,95</p>
</div>
<div className="col-4">
<a href="producten/vrolijkpasen-details.html">
<img src="images/bloem3.png"/></a>
<h4>Vrolijk Pasen</h4>
<div className="rating">
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="far fa-star"></i>
</div>
<p>vanaf $ 29,95</p>
</div>
<div className="col-4">
<a href="producten/eindelijkvoorjaar-details.html">
<img src="images/bloem4.jpg"/></a>
<h4>Eindelijk voorjaar</h4>
<div class="rating">
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="far fa-star"></i>
</div>
<p>vanaf $ 24,95</p>
</div>
</div>
</div>
<div className="footer">
<div className="container">
<div className="row">
<div className="footer-col-1">
<h3>FLOWERPOWER</h3>
<ul>
<li>Over Ons</li>
<li>Contact</li>
<li>Tips</li>
<li>Lorum</li>
<li>Lorum</li>
<li>Lorum</li>
</ul>
</div>
<div className="footer-col-2">
<h3>Zakelijk</h3>
<ul>
<li>Lorum</li>
<li>Lorum</li>
<li>Lorum</li>
</ul>
</div>
</div>
</div>
</div>
<div className="brands">
<div className="small-container">
<div className="row">
<div className="col-5">
<img src="images/logo-ideal.png"/>
</div>
<div className="col-5">
<img src="images/logo-paypal.png"/>
</div>
<div className="col-5">
<img src="images/logo-americanexpress.png"/>
</div>
<div className="col-5">
<img src="images/logo-visa.png"/>
</div>
</div>
<p className="copyright">Copyright © 2021 FLOWERPOWER! - flowerpower.nl Alle rechten voorbehouden.</p>
</div>
</div>
</div>
);
}
export default App;
Your screenshots shows 1 potential error.
You Misplaced closing tag for p element on line 28 screenshot 1
<p> .... <p/>
It should read
<p> .... </p>
Edit:
Your code has 2 issues,
unbalanced div tags,
style props
1st Issue:: Replace this block of code
<div className="col-2">
<h1>Koop uw feestboeketten hier!</h1>
<p>Ma-za voor 14 uur besteld? Zelfde dag bezorgd,<br />
Bezorging in heel Nederland<p />
Kies uit! →
</div>
<div className="col-2">
<img src="images/banner.png" />
</div>
</div>
</div>
with this
<div className="col-2">
<h1>Koop uw feestboeketten hier!</h1>
<p>Ma-za voor 14 uur besteld? Zelfde dag bezorgd,<br />
Bezorging in heel Nederland</p>
Kies uit! →
<div className="col-2">
<img src="images/banner.png" />
</div>
</div>
</div>
2nd Issue:: React style tags acceps an object, and not string
<div style={{fontSize:'20px}}></div>
I think the problem is coming from the fact that, the <div className="header"> ... </div> and <div className="brands"> ... </div> are not all wrapped within a single fragment in the return function. If you correct your code to:
...
function App() {
return(
<>
<div className="header"> ... </div>
<div className="brands"> ... </div>
</>
);
}
export default App;
The error will disappear. Also note that, I have replaced class="" attribute with className="".
Hope the answer is helpful.
React intellisense is getting mad due to you having "class". You need to rename it to className. (this is true for all JSX elements, such as div, a, p, etc...)
I have created a accordion and its in a loop but i want only one accordion open at a time not multiple one. I have used data parent attribute of bootstrap but its not working. Any kind of help would be highly appreciated.
I want only one accordion open at one time. How to achieve it. I think i'm having this problem because of for each loop. Is there any way to solve it ?
Here is my code :
<?php if(!empty($tickets)) : ?>
<?php foreach($tickets as $ticket) : ?>
<div class="panel-group-custom" id="#panels">
<div class="panel panel-default mb-0 no-border">
<div class="panel-heading.panel-heading-custom" >
<h4 class="panel-title">
<div data-toggle="collapse" data-parent="#panels" data-target="#collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="accordion-title">
<div class="row">
<div class="overflow-hidden">
<div class="col-md-2">
<span class="ticket-heading1" title="Ticket ID"><i class="fa fa-ticket" aria-hidden="true"></i> <?php echo $ticket['SupportTicket']['ticket_id']; ?> </span>
</div>
<div class="col-md-7"><span class="ticket-title"><?php echo $ticket['SupportTicket']['title'] ?></span></div>
<div class="col-md-2">
<span class="ticket-heading2" title="Ticket created on"><i class="fa fa-calendar" aria-hidden="true"></i>
<?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>
<?php echo date_format($bdate,"d-M-Y") ?>
</span>
</div>
<div class="col-md-1">
<span class="accordion-down">
<i class="fa fa-chevron-down dropdown-toggle down-arrow2" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
</h4>
</div>
<div id="collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="panel-collapse collapse">
<div class="panel-body">
<div class="hidden-overflow ticket">
<div class="full-width hidden-overflow ticket-chat">
<p class="color-4 ticket-content">
<?php echo $ticket['SupportTicket']['description'] ?>
</p>
<?php if($ticket['SupportTicket']['status']>1) : ?>
<p class="color-1 pull-right ticket-content"> <span class="resolution">Feedback</span>
<?php echo $ticket['SupportTicket']['resolution_text']; ?>
<span class="ticket-updated"><span class="bolder"><i class="fa fa-clock-o" aria-hidden="true"></i>
<?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>
<?php echo date_format($bdate,"d-M-Y") ?>
</span></span>
</p>
<?php endif ?>
</div>
<div class="full-width hidden-overflow mt-5">
<!-- <p class="ticket-close"><i class="fa fa-window-close" aria-hidden="true"></i> Closed on <span class="bolder">17-Aug-2017 </span></p>-->
</div>
</div>
</div>
</div>
</div>
</div>
<?php endforeach ?>
<?php else : ?>
No Records
<?php endif ?>
Try putting your #panels div outside the foreach loop - that way they are all in the same group.
Also, your #panels div should not have the "#" sign in its id.
<?php if(!empty($tickets)) : ?>
<div class="panel-group-custom" id="panels"><!-- Remove the '#' from here. -->
<?php foreach($tickets as $ticket) : ?>
<div class="panel panel-default mb-0 no-border">
<div class="panel-heading panel-heading-custom" ><!-- and remove the . from here. -->
<h4 class="panel-title">
<div data-toggle="collapse" data-parent="#panels" data-target="#collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="accordion-title">
<div class="row">
<div class="overflow-hidden">
<div class="col-md-2">
<span class="ticket-heading1" title="Ticket ID"><i class="fa fa-ticket" aria-hidden="true"></i> <?php echo $ticket['SupportTicket']['ticket_id']; ?> </span>
</div>
<div class="col-md-7"><span class="ticket-title"><?php echo $ticket['SupportTicket']['title'] ?></span></div>
<div class="col-md-2">
<span class="ticket-heading2" title="Ticket created on"><i class="fa fa-calendar" aria-hidden="true"></i>
<?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>
<?php echo date_format($bdate,"d-M-Y") ?>
</span>
</div>
<div class="col-md-1">
<span class="accordion-down">
<i class="fa fa-chevron-down dropdown-toggle down-arrow2" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
</h4>
</div>
<div id="collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="panel-collapse collapse">
<div class="panel-body">
<div class="hidden-overflow ticket">
<div class="full-width hidden-overflow ticket-chat">
<p class="color-4 ticket-content">
<?php echo $ticket['SupportTicket']['description'] ?>
</p>
<?php if($ticket['SupportTicket']['status']>1) : ?>
<p class="color-1 pull-right ticket-content"> <span class="resolution">Feedback</span>
<?php echo $ticket['SupportTicket']['resolution_text']; ?>
<span class="ticket-updated"><span class="bolder"><i class="fa fa-clock-o" aria-hidden="true"></i>
<?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>
<?php echo date_format($bdate,"d-M-Y") ?>
</span></span>
</p>
<?php endif ?>
</div>
<div class="full-width hidden-overflow mt-5">
<!-- <p class="ticket-close"><i class="fa fa-window-close" aria-hidden="true"></i> Closed on <span class="bolder">17-Aug-2017 </span></p>-->
</div>
</div>
</div>
</div>
</div>
<?php endforeach ?>
</div><!-- end #panels (moved to after the foreach) -->
<?php else : ?>
No Records
<?php endif ?>
Here is the working version with the PHP stripped out: https://jsfiddle.net/ytcw2sot/
I've spent three hours trying to reproduce the image above, however I am unable to make the texts remain on the side and centered with facebook-pile and icons. Can anyone help me?
Code:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<section class="social-media">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="fb-pile">
<h2> no Facebook:</h2>
<div class="fb-facepile" data-href="https://www.facebook.com/facebookdevelopers" data-max-rows="1" data-colorscheme="light" data-size="small" data-show-count="true"></div>
</div>
</div>
<div class="col-md-4">
<div class="social-icons">
<h2>Compartilhar:</h2>
<a target="_blank" href="" title="Ir para página do facebook">
<span class="fa fa-facebook fa-2x"></span>
</a>
<a target="_blank" href="" title="Ir para página do twitter">
<span class="fa fa-twitter fa-2x"></span>
</a>
<a target="_blank" href="" title="Ir para página do instagram">
<span class="fa fa-instagram fa-2x"></span>
</a>
</div>
</div>
<div class="col-md-2">
<div class="trip-advisor">
<img class="trip-advisor-img" title="Recomende o Pub Crawl no Trip Advisor" src="http://upload.wikimedia.org/wikipedia/fr/1/1d/TripAdvisor-logo.png"/>
</div>
</div>
</div>
</div>
</section>
Try changing the .social-media h2 style to include display: inline-block instead of floating it:
http://codepen.io/a_double/pen/EayaOa