I am creating a website in html & css through Django. But I am having some difficulties. Here is my code for the buggy element of the code:
detail.html
<div class="contact-info" style="float: right!important; position: sticky!important; margin-right: 25px!important; margin-left: 750px!important; width: 30%!important; height: 50px!important; padding-bottom: 195px!important; margin-top: -2200px!important;">
<div class="elements" style=" margin-bottom: 200px!important; padding-bottom: 20px!important;">
<div class="address">
<span class="icon-map-marker"></span>
<p> <a style="color:grey!important; border:none!important;" href="{{restraunt.address_link}}">{{restraunt.address}}</a></p>
</div>
<div class="address" >
<span class="icon-mobile-phone"></span>
<p style="color: grey!important; border: none!important;"><a style="color:grey!important; border: none!important;" href="tel:{{restraunt.phone}}" style="color: grey!important;">+{{restraunt.phone|phonenumber}}</a> </p>
</div>
<div class="address">
<span class="icon-link"></span>
<p><a style="color:grey!important; border: none!important;" href="{{restraunt.website}}">{{restraunt.website}}</a></p>
</div>
<div class="address">
<span style="" class="icon-time"></span>
<p>Mon - Sun, {{restraunt.opening_hour}} - {{restraunt.closing_hour}} <br>
</div>
</div>
</div>
The code seems to work fine until I enter a new review. Then, the element jumps down and keeps jumping as a new review is added. I don't know how to fix this as I tried postion: relative, postition: absolute and position: sticky but all seem to have failed. I will put some screenshots to explain it better.
Before new Review:
After a new Review:
I have been unable to solve this problem for a long time now. I would really appreciate any help. Thank you
Related
Essentially, I'm making a tier-based pricing grid and it needs to look like this:
However, when my code is placed onto the web page (through Wordpress)
a random set of tags are above the '10+ Sessions" pricing box, which messes up the spacing. The tag has a 20px top padding.
It looks like this:
So, I inspected the element and found that there's a set of tags above the box with a top padding of 20px.
<div class="rpt_plan rpt_plan_ori rpt_plan_3 " style="
margin-left: 0px;
width: 565px;
margin-top: 0px;
"><p></p>
<div class="rpt_title rpt_title_3">10+ Sessions</div>
<div class="rpt_head rpt_head_3" style="
height: 152px;
"><p></p>
<div class="rpt_recurrence rpt_recurrence_3">Per Hour</div>
<div class="rpt_price rpt_price_3"><span
class="rpt_currency">£</span>20</div>
</div>
<p><a target="_self" href="#" style="background: rgb(243, 167,
6);cursor: pointer;height: 45px;" class="rpt_foot rpt_foot_3 pum-
trigger">Sign Up</a></p>
</div>
The tags after the opening of the div is the problem.
However, the tags aren't there in the original source code, which is this:
<div class="rpt_plan rpt_plan_ori rpt_plan_3 " style="
margin-left: 0px;
width: 565px;
margin-top: 0px;
">
<div class="rpt_title rpt_title_3">10+ Sessions</div>
<div class="rpt_head rpt_head_3" style="
height: 152px;
">
<div class="rpt_recurrence rpt_recurrence_3">Per Hour</div>
<div class="rpt_price rpt_price_3"><span
class="rpt_currency">£</span>20</div>
</div>
<p><a target="_self" href="#" style="background: rgb(243, 167,
6);cursor: pointer;height: 45px;" class="rpt_foot rpt_foot_3 pum-
trigger">Sign Up</a></p></div>
I just can't figure out why the tags are there.
Could anyone help with this?
Thanks
For anyone with a similar problem, install a plugin called Raw HTML for Wordpress. This prevents Wordpress from attempting to format your Raw HTML and adding random paragraph tags.
I have a user managment block on my website and I'm trying to display a bit information there.
I think that nothing is better than example with pictures.
This is how the block looks now:
And this is how I want the block to look like:
Is there any good way to do that? I added those dashes manually, and this is not the way I'm looking for, I want it responsive.
Here is the block code:
<div class="account-box">
Welcome, guess. <br>
<hr>
Coins: <span style="float: right;">0</span> <br>
Points: <span style="float: right;">0</span> <br>
Total Referrals: <span style="float: right;">0</span> <br>
<hr>
Logged as [username] <span style="text-align: right;"><span class="fa fa-sign-out fa-fw"></span>Logout</span>
</div>
I recently had to do something similar. Here's what I came up with:
.entry {
display: flex;
align-items: center;
}
.entry>.spacer {
flex-grow: 1;
border-bottom: 1px dashed currentColor;
margin: 4px;
}
<div class="entry">
Label:
<ins class="spacer"></ins>
123
</div>
Adjust as needed!
I want to change the middle view of the current view when the links are clicked. one link is to view the iphone and the other one is to view the tablet. Default view should be iphone. Other than that anything in the view should not be changed with the click. I don't want to toggle between the views. Just load the view with the click on the link.
Below is the html code which I tried.
<div class="mobile-area">
<p>Mobile App</p>
<a class="mobile-icon current-device" href ng-click="iphoneView= !iphoneView"></a>
<a href ng-click="tabletView = !tabletView" class="tablet-icon"></a>
</div>
<div class="mobile-preview" ng-class="{'iphone': iphoneView}">
<div class="mobile-wrapper">
<div class="mobile-simulator">
<me-iphone tmp-url="{{appTemplateUrl}}"></me-iphone>
</div>
</div>
</div>
<div class="mobile-preview" ng-class="{'tablet': tabletView}">
<div class="mobile-wrapper">
<div class="mobile-simulator">
<me-tablet tmp-url="{{appTemplateUrl}}"></me-tablet>
</div>
</div>
</div>
Below is the css code.
.iphone {
position: relative;
background: url(../../../../images/iphone-bg.png) no-repeat;
width: 100%;
height: 100%;
padding-top: 58%;
border-radius: 1em;
float: none;
}
.tablet {
position: relative;
background: url(../../../../images/tablet.jpg) no-repeat;
width: 200%;
height: 100%;
padding-top: 58%;
border-radius: 1em;
float: none;
}
I tried different methods but nothing is working for me. Please tell me a way to load the views without toggling to the same html page.
Try this:
ng-class="tabletView ? 'tablet' : 'iphone'"
Default will be iphone. You don't need second iphoneView variable at all (if you have just these 2 views).
Try this?
<div class="mobile-area">
<p>Mobile App</p>
<a class="mobile-icon current-device" href ng-click="iphoneView=true;tabletView=false"></a>
<a href ng-click="tabletView=true;iphoneView=false" class="tablet-icon"></a>
</div>
<div class="mobile-preview" ng-class="{'iphone': iphoneView, 'tablet': tabletView}">
<div class="mobile-wrapper">
<div class="mobile-simulator">
<me-iphone ng-show="iphoneView" tmp-url="{{appTemplateUrl}}"></me-iphone>
<me-tablet ng-show="tabletView" tmp-url="{{appTemplateUrl}}"></me-tablet>
</div>
</div>
</div>
EDIT: according to karaxuna's answer, you can use just one variable
<div class="mobile-area">
<p>Mobile App</p>
<a class="mobile-icon current-device" href ng-click="tabletView=false"></a>
<a href ng-click="tabletView=true" class="tablet-icon"></a>
</div>
<div class="mobile-preview" ng-class="tabletView ? 'tablet' : 'iphone'">
<div class="mobile-wrapper">
<div class="mobile-simulator">
<me-iphone ng-show="!tabletView" tmp-url="{{appTemplateUrl}}"></me-iphone>
<me-tablet ng-show="tabletView" tmp-url="{{appTemplateUrl}}"></me-tablet>
</div>
</div>
</div>
I want to render a panel using existing HTML.
The idea is that I have a code like this :
<div id="widget" class="widget">
<div class="widget-content>
<span> blabla </span>
// some content here
</div>
</div>
And the idea is that I want to create a panel using the DIV "widget" and that the content of the panel is the div "widget-content".
To explain a little bit, I receive from an external source an HTML page, and I want to add some interactivity/functionality to this page using ExtJs.
Using renderTo, what I was able to do right now is something like that:
<div id="widget" class="widget">
<div class="widget-content>
<span> blabla </span>
// some content here
</div>
<div id="panel-1152" class="x-panel x-panel-default x-border-box" style="height: 36px;">
<div id="panel-1152_header" class="x-panel-header x-header x-header-horizontal x-docked x-unselectable x-panel-header-default x-horizontal x-panel-header-horizontal x-panel-header-default-horizontal x-top x-panel-header-top x-panel-header-default-top x-horizontal-noborder x-panel-header-horizontal-noborder x-panel-header-default-horizontal-noborder x-docked-top x-panel-header-docked-top x-panel-header-default-docked-top x-noborder-trl" style="width: 1389px; right: auto; left: 0px; top: 0px;"> ... </div>
<div id="panel-1152-body" class="x-panel-body x-panel-body-default x-panel-body-default x-noborder-trbl" style="width: 1389px; left: 0px; top: 36px; height: 0px;"> ... </div>
</div>
Using render to after the load of my page.
But what I want to achieve is something like:
<div id="widget" class="widget x-panel x-panel-default x-border-box">
<div id="panel-1152_header" class="x-panel-header x-header x-header-horizontal x-docked x-unselectable x-panel-header-default x-horizontal x-panel-header-horizontal x-panel-header-default-horizontal x-top x-panel-header-top x-panel-header-default-top x-horizontal-noborder x-panel-header-horizontal-noborder x-panel-header-default-horizontal-noborder x-docked-top x-panel-header-docked-top x-panel-header-default-docked-top x-noborder-trl" style="width: 1389px; right: auto; left: 0px; top: 0px;"> ... </div>
<div id="panel-1152-body" class="x-panel-body x-panel-body-default x-panel-body-default x-noborder-trbl" style="width: 1389px; left: 0px; top: 36px; height: 0px;">
<div class="widget-content>
<span> blabla </span>
// some content here
</div>
</div>
</div>
Thanks in advance
You could do this a couple of different ways.
If all you want is the html inside of the panel, just use the html config option http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.panel.Panel-cfg-html
If you want to dynamically add it use getCmp('selector').body.update(yourhtmlhere) http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.dom.Element-method-update
you could also use contentEl to specify an existing element in the html that you want to move into the panel http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.AbstractComponent-cfg-contentEl
hope this helps.
I am relatively new to HTML/CSS and am having an impossible time making two pics line up with an ASP MVC website. The bookend pic we are using for the menu bar cannot line up with the rest of the background pics. Below is a screenshot of the problem, the HTML and the CSS. The bookend pic that is not adjusted correctly is NAV-Left-Corner, and it's id in the CSS is "#menuLeft." The rest of the nav bar uses a small blue pic repeated horizontally. That portion of the CSS can be found in the "ul#Menu" section. (I'm having the same problem with the right bookend, just wanted to simplify things for the sake of this post)
HTML
<body>
#using Monet.Common
<div class="page">
<header>
<div style="margin: 20px;">
#* Monet *#
<span href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </span>
<span style="color: white; font-size: 18px; "> </span>
</div>
#* </a>*#
#* <div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>*#
<nav>
<ul id="menu">
<img src="../../Content/images/NAV-Left-Corner.gif" id="menuLeft" alt="mLeft"/>
<li id="mTop">#Html.MenuLink("Agents", "Index", "Agent")</li>
<li class="mProducts">#Html.MenuLink("Products", "Index", "Product")</li>
<li class="mPt">#Html.MenuLink("Product Training", "Index", "Course")</li>
<li class="mCe">#Html.MenuLink("Continuing Ed", "Index", "ContEdCourse")</li>
<li id="mBottom">#Html.MenuLink("Help", "About", "Home")</li>
<img src="../../Content/images/NAV-Right-Corner.gif" id="menuRight" alt="mRight"/>
</ul>
</nav>
</header>
<img src="../../Content/images/TEST2body_top.png" id="topPic" alt="tag"/>
<section id="main">
#RenderBody()
</section>
<footer>
<span style="color: Gray;"> Copyright © 2012 For Internal Use Only. </span>
</footer>
</div>
</body>
CSS
ul#menu {
/*border-bottom: 1px #5C87B2 solid;*/
background-image: url('../../Content/Images/Nav-Background.gif');
background-position:center;
background-repeat:repeat-x;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
#menuLeft
{
vertical-align:middle;
}
#menuRight
{
vertical-align:middle;
}
I agree with Nile in comment ("dont do it this way").
Anyway - you can just move anything up or down by adding some padding or margin. You can also use negative padding-top, to move image up, even outside its container.
ul#menu {
/*border-bottom: 1px #5C87B2 solid;*/
background-image: url('../../Content/Images/Nav-Background.gif');
background-position:center;
background-repeat:repeat-x;
/* HERE */
padding: -5 0 2px;
position: relative;
margin: 0;
text-align: right;
}
Im not sure that is recipe for you, but it may be good tip about positioning items.
Edit/added later:
Maybe you should not experiment with CSS in serious app like this. App "for internal use only" dont need fancy effects.
Read good tutorial about CSS and make some exercises (positioning, gradients, browser support) before you use it in work :)
The New Boston is very good website with most professional free courses and tutorials i ever saw.