I am new to Programming in general. Hence this 'repeated question' as I don't understand the answers given on other posts. (Just incase, I have tried command-shift-R, but it won't work. It just displays a grey screen. I would genuinely appreciate if you guys could direct me towards the right way as I've spent a good whole day trying to figure out why my main.css file won't update the webpage. Everything else is working. Apart from when trying to update the stylesheet of the webpage.
My project is to create a website through Flask. I have created my necessary #app.route(...)'s.
I am importing the following on my app.py file: from flask import Flask, render_template, url_for. Everything within my app.py file and templates folder works. The output of a basic webpage with a few bullet points and header is displayed.
My templates folder which includes layout.html consists of the following code:
`
<!--Stylesheet is linking to main.css file within static folder.
'url_for' function is taking care to find the exact location.-->
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/main.css') }}">
<!--The following 'if' statement determine what is displayed on the browser Tab.
The Default title is 'Intellectus' which is in the 'else'.-->
{% if title %}
<title>Intellectus - {{ title }}</title>
{% else %}
<title>Intellectus</title>
{% endif %}
</head>
<body>
<!--Top Navigation Bar-->
<!--Intellectus text-Homepage-->
<nav class="navbar-full">
<div class="navbar">
<ul class="nav navbar-nav"></ul>
<a class="navbar-brand" href="#">Intellectus</a>
<li class="active">User Profile</li>
<li><span class="sign-up"></span> Sign Up</li>
<li><span class="log-in"></span> Login</li>
</ul>
</div>
</nav>
<div class="container">
{% block content %}{% endblock %}
</div>
</body>
</html>`
My static folder includes a css folder which includes a main.css folder. It's basic stuff for now just to get something working. The code within main.css is below:
.navbar-full {
background-color: #00BFFF;
overflow: hidden;
}
.container-fluid a {
float: left;
color: #00BFFF;
text-align: center;
padding-top: 0px;
text-decoration: none;
font-size: 17px;
}
.container-fluid a:hover {
background-color: #f2f2f2;
color: forestgreen;
}
.body {
background-color: fuchsia;
}
Found the problem. I was using Safari browser instead of Chrome. Worked like a charm in Chrome.
Not sure what exactly was causing the problem with the Safari browser.
In django easy to generate an iterated list of titles from context received by template:
{% for instance in object_list %}
<li>{{instance.international_title}} </li>
{% endfor %}
And in css easy to create a popup overlay:
#overlay
{
height:300px;
width:300px;
margin:0 auto;
position:relative;
z-index:10;
display:none;
border:5px solid #cccccc;
border-radius:10px;
}
<div align="center">
Click Title for Detail
</div>
<div id="overlay">
<p> Here is the text giving more detail<p>
</div>
Would like to be able to associate a unique text with each unique title {{instance.international_short_description}} for the purposes of the overlay popup. However do not see how to do this. Is it necessary to somehow create a series of css classes: #overlay1, #overlay2 with custom href to each one? Is it possible to use a single class, pass a variable to it and then select the correct text? Have not been able to find examples.
You can alter the id, for example by adding the primary key of the instance, like:
{% for instance in object_list %}
<div align="center">
{{ instance.international_title }}
</div>
<div id="overlay{{ instance.pk }}">
<p>{{ instance.international_short_description }}<p>
</div>
{% endfor %}
I'm currently designing a new website and I added a dropdown which works perfectly fine when clicked. I basically want it to show that dropdown when hovered.
What I tried was:
{% include 'currency-picker' %}
<style>
.currency-picker {
background-color: transparent;
font-size: 12pt;
font:Montserrat;
letter-spacing: 2px;
color: black;
}
.currency-picker:hover {
display: block;
}
.currency-picker:hover {
background-color: white;
This is the dropdown itself:
<label class="currency-picker__wrapper">
<span class="currency-picker__label"></span>
<select class="currency-picker" name="currencies" style="display: inline; width: auto; vertical-align: inherit;">
{% assign codes = 'USD,EUR,GBP,CAD,ARS,AUD,BBD,BDT,BSD,BHD,BRL,BOB,BND,BGN,ILS,MMK,KYD,CLP,CNY,COP,CRC,HRK,CZK,DKK,DOP,XCD,EGP,XPF,FJD,GHS,GTQ,GYD,GEL,HKD,HUF,ISK,INR,IDR,NIS,JMD,JPY,JOD,KZT,KES,KWD,LVL,LTL,MXN,MYR,MUR,MDL,MAD,MNT,MZN,ANG,NZD,NGN,NOK,OMR,PKR,PYG,PEN,PHP,PLN,QAR,RON,RUB,SAR,RSD,SCR,SGD,SYP,ZAR,KRW,LKR,SEK,CHF,TWD,THB,TZS,TTD,TRY,UAH,AED,UYU,VEB,VND,ZMK' | split: ',' %}
{% assign supported_codes = settings.supported_currencies | split: ' ' %}
<option value="{{ shop.currency }}" selected="selected">{{ shop.currency }}</option>
{% for code in supported_codes %}
{% if code != shop.currency and codes contains code %}
<option value="{{ code }}">{{ code }}</option>
{% endif %}
{% endfor %}
</select>
</label>
The strange thing is, that the .currency-picker:hover {
background-color: white; works and it does indeed show the white background when hovered.
Is there anyone knowing a solutions of my problem?
Have a nice day and best regards,
Ismael
After looking at your code, is there any reason why you don't just use the same markup as the other dropdowns? Consistency is always key.
What you are trying to do does not work or is not allowed in the browser. Instead of using an actual "select" box, I would use the actual markup they are using on the other dropdowns which give you the exact functionality that you are looking for.
This code (taken from your site) should give you a clue on how to handle this. Also You ave an extra starting script tag on your page where you dropped that new test code..
Please note I changed the below code a bit to give you better reference. If you were to drop this code into your site, it would work, but you need to refactor it to make it dynamic.
<li class="site-nav__item site-nav__expanded-item site-nav--has-dropdown" aria-haspopup="true">
USD <span class="icon icon-arrow-down" aria-hidden="true"></span>
<ul class="site-nav__dropdown text-left">
<li>
EUR
</li>
<li>
CHF
</li>
</ul>
After my change...
The first image and the file label are on the same line, but the last image is on a second line.
I would like the three items to be on the same line.
Here is my code:
HTML:
<div>
<img src="{{asset('bundles/cramifaccueil/images/pdfdocument.png')}}"
title="{% trans %}dialog.pdf.file{% endtrans %}"
class="smallImagesFloatLeft"
/>
<div class="fileLabel">{% trans %}file.note.service.2584{% endtrans %}</div>
<img src="{{asset('bundles/cramifaccueil/images/download.png')}}"
title="{% trans %}download{% endtrans %}"
class="smallImagesFloatRight"
/>
</div>
<div>
<img src="{{asset('bundles/cramifaccueil/images/pdfdocument.png')}}"
title="{% trans %}dialog.pdf.file{% endtrans %}"
class="smallImagesFloatLeft"
/>
<div class="fileLabel">{% trans %}file.mode.operatoire{% endtrans %}</div>
<img src="{{asset('bundles/cramifaccueil/images/download.png')}}"
title="{% trans %}download{% endtrans %}"
class="smallImagesFloatRight"
/>
</div>
CSS:
.smallImagesFloatLeft {
float:left;
margin-right:5px;
cursor: default;
}
.smallImagesFloatRight{
float:right;
}
.fileLabel {
max-width: 75%;
}
Assuming there is room on one line, you simply need to re-order your elements so that the floats come before the non-floated element:
<div>
<img src="{{asset('bundles/cramifaccueil/images/pdfdocument.png')}}"
title="{% trans %}dialog.pdf.file{% endtrans %}"
class="smallImagesFloatLeft"
/>
<img src="{{asset('bundles/cramifaccueil/images/download.png')}}"
title="{% trans %}download{% endtrans %}"
class="smallImagesFloatRight"
/>
<div class="fileLabel">{% trans %}file.note.service.2584{% endtrans %}</div>
</div>
http://jsfiddle.net/o0ksu724/
It seems that you forgot to float:left your .fileLabel.
just remember to use a clear:both after your floated elements.
<span style='clear:both'></span>
just add this inside the parent div after all your floated elements.
Well, It would be a lot better if you provided us a fiddle to understand in a better way that what are you actually getting from the code and what do you expect from it.
I believe there can be 2 reasons for the images not appearing on the same line are:
Images are too big to fit the size of the page so they are forced to move on the second line. If that is the case, then, obviously you'll have to reduce the size of images.
There may be coding issues and for that I think you should use
position: absolute
the following line of code first in the desired image and property first and then check if its working or not.
Also, I would like to tell you what I do usually to solve these kinds of problems. Choose some background color of the div tags background: redto see where and how much spaces these divs are taking on the page and then move further with that.
In fact, I realized the only thing to do is to add :
display: inline
on the fileLabel class
I have this code currently does not work, is there any alternative to it?
<ul class="sub">
{% for key, c in categori %}
<style>
#nav.{{c.id}}:hover
{
background-color: #{{c.color}};
}
</style>
<li class="{{c.id}}">
<a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}
....
I have the problem as in # nav. {{c.id}}
ow.ly/i/3vwNp this is the example
Thanks!
The way your CSS is written, it expects the element with the class {{ c.id }} (as interpreted by the Twig parser) to be on the same element with the id nav, e.g.
<li id="nav" class="{{ c.id }}">...</li>
You really shouldn't have more than one element on a page with the same id attribute, strange things happen with JavaScript particularly when you do.
Instead of trying to programmatically define your {{ c.id }} in the style though, why not do something like this?
<style>
#nav .item:hover
{
background-color: #{{c.color}};
}
</style>
...
<ul id="nav" class="sub">
{% for key, c in categori %}
<li class="item {{c.id}}"><a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}</li>
{% endfor %}
</ul>
You really should only be placing CSS in <style> tags at the top of the document any way, or as better practice teasing them out to .css resource files to include.
This would definitely work:
<ul class="sub">
{% for c in categori %}
<style>
.element{{c.id}} a:hover { background-color: #{{c.color}}; }
</style>
<li class="element{{c.id}}">
<a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}
...
But it's recommended to separate your CSS rules from HTML and move all your predefined element classes to external CSS asset.