html - How can I float an image left outside of the container when dealing with Jinja templating? -

-

i'm working on project using flask takes advantage of jinja templates. layout.html file contains grey colored container extended other child pages. 1 of pages extends layout.html, have image float left outside of container. tried setting css position absolute no avail. there else besides making page seperate layout.html? keep container.

here's layout.html:

<!doctype html> <html>   <head>     <link rel="icon" type="{{url_for('static',filename ='img/favicon-32x32.png')}}" sizes="32x32" />     <title>foodie</title>     {% messages = get_flashed_messages() %}         {% if messages %}          <ul class=flashes>         {% message in messages %}           <li>{{ message }}</li>         {% endfor %}         </ul>       {% endif %}       {% endwith %}  <link rel="stylesheet" href="{{url_for('static', f   ilename='css/main.css') }}">    <link rel="stylesheet" href="{{url_for('static', filename='css/style.css') }}">   </head>   <body>     <header>       <div class="container">         <h1 class="logo"><a href="{{ url_for('home') }}">test1</a></h1>     <ul class ="about" style= "list-style: none">       <li><a href="{{ url_for('demo') }}" target="_blank">test2</a></li>     </ul>       </div>     </header>     <div class="container">       {% block content %}       {% endblock %}     </div>   </body> </html>

here's home.html containing image float left [the div id of footer.

 {% extends "layout.html" %}     {% block content %}  {% if error %}   <p class="flash">error:{{ error }}  {% endif %}  <div id="home_city" class="jumbo">     <div class="search-form" align="center">       <h1> welcome, tell from: </h1>         <form class="form-container" action="/home_city" method="post" autocomplete="on">          <input type="text" class="search-field" name="city" required placeholder="enter home city" />      <div class="submit-container">            <input type="submit" value="" class="submit"/>          </div>       </form>      </div>     <div align="center">          <ul id="random">           <li>#coffee</li>           <li>#omg</li>           <li>#latte</li>           <li>#starbucks</li>           <li>#chocolate</li>           <li>#yummy</li>           <li>#lunch</li>           <li>#thatplate</li>           <li>#foodie</li>           <li>#roots</li>           <li>#finedining</li>           <li>#veglife</li>           <li>#nomsnoms</li>           <li>#breakfast</li>           <li>#don'tbitethehandthatfeedsyou</li>           <li>#sweets</li>           <li>#tapas</li>           <li>#rice</li>          </ul>     </div>  </div>  <div id = "footer">     <img src ="{{url_for('static',filename ='img/powered_by_yelp_black 2.png')}}" alt="powered yelp">     <div id="beta">         <h1>beta</h1> </div> </div> {% endblock %}

last not least, here css file:

body {     margin: auto 0;     padding: 0;     font-family: "helvetica neue", helvetica, arial, sans-serif;     color: #444;       }   header {   background-color: #2b2b2b;   height: 35px;   width: 100%;   margin-top: -21px;   padding: 0;    }   header h1.logo > {   margin: 0;   font-size: 30px;   color: #fff;   text-transform: uppercase;   float: left;   text-decoration: none;  }  header h1.logo:hover > {   color: #fff;   text-decoration: none;    } .container {   width: 940px;   margin: 0 auto;  }  header ul.about li{    margin:10px 0;   font-size: 20px;   float: right;   display: inline-block;   padding-right: 20px;  } li > {  color: #fff;  text-decoration: none; }  div.jumbo {   padding: 30px 0 90px 0;   background-color: #eeeeee;   -webkit-border-radius: 6px;      -moz-border-radius: 6px;       border-radius: 6px;       margin: 33px;  } h3 {   font-size: 1.7em;   font-weight: 100;   margin-top: 31px;   text-align: center;   letter-spacing: -1px;   color: #999;  } div > h2{  font-size: 2em; margin-top: 40px; text-align: center; letter-spacing: -2px; }   div > p { font-size: 1.5em; margin-top: 40px; text-align: center; letter-spacing: -2px; } h1 > p { font-size: 3em; margin-top: 40px; text-align: center; letter-spacing: -2px; }  #random {    font-size: 45px;    height: 100px;    width: 33%;    float: center;    text-align: center;    font-family: "helvetica neue", helvetica, arial, sans-serif; } #random li {     text-decoration: none;     list-style-image: none;     list-style-type: none; } /* message flashing */ .flash {   background-color: #fbb0b0;   padding: 10px;   width: 400px;   font-style: normal;   font-family: "times new roman", times, serif;   }  .footer {     position:fixed;     left:; }  .footer > #beta {     bottom : 0;     font-size: 70px;     font-family:"trebuchet ms", helvetica, sans-serif;     text-align: center; }  ul .rest_result {     font-size: 30px;     font-family: "times new roman", times, serif;     text-align: center;     text-transform: capitalize;   } .food_choice li {    display: none;    text-align: center;   } .food_choice .active {     display: block;  } .about {     font-family: ff-clan-web-pro-wide,sans-serif;     font-weight: 400;  }

add css:

#footer > img { margin-left: -3em; }

adjust value width of image.

also seems in css have class footer - .footer, in html have id - id = "footer".


Comments

Post a Comment

Popular posts from this blog

qt - Using float or double for own QML classes -

-
i've created components , helper methods using c++ , qt used in qml gui. of methods calculate gui elements (size, transformations, scene graph items creation). target arm 32 bit using opengl / eglfs render output. opengl using float , qml using real (defined double ). what should use in c++ do not lose precision? if use qreal ( double ) shouldn't lose precision. if git grep float in qtbase.git , can find out bit more: dist/changes-5.2.0-**************************************************************************** dist/changes-5.2.0-* important behavior changes * dist/changes-5.2.0-**************************************************************************** dist/changes-5.2.0- dist/changes-5.2.0- - qt compiled qreal typedef'ed double on dist/changes-5.2.0: platforms. qreal float on arm chipsets before. guarantees more dist/changes-5.2.0- consistent behavior between platforms qt supports, binary dist/chan...
Read more

Create Outlook appointment via C# .Net -

-
i need create outlook appointment using microsoft.office.interop.outlook , while can work locally on own workstation , works if run web application via server's browser, not work when connect server externally. hence, think might permission issue. i changed application pool identity " localsystem " don't access denied error. unfortunately, doesn't work. the app behaves if appointment created, appointment doesn't appear in outlook. here include file on top of aspx.cs page using outlook = microsoft.office.interop.outlook; here code using pop appointment. outlook.application apptapp = new outlook.application(); outlook.appointmentitem appt = apptapp.createitem(outlook.olitemtype.olappointmentitem) outlook.appointmentitem; appt.subject = txtfirstname.text + " " + txtlastname.text; appt.body = txtcomment.text; appt.alldayevent = false; appt.start = datetime.parse(txtreminderdate.text + " 8:00 am"); appt.end = datetime.p...
Read more

ios - Swift Array Resetting Itself -

-
i have 2 arrays: pointhistory , datehistory . have nstimer , , when timer runs out, action called. in action appending int pointhistory , , current date string datehistory . here timer action: func timeraction() { let steppervalue = int(stepper.value) employee.numberofpoints = steppervalue networking.saveemployee(employee, completion: { (error) -> void in if error != nil { let alert = uialertcontroller(title: "error", message: "there error updating \(self.employee.name)'s points", preferredstyle: .alert) let alertaction = uialertaction(title: "ok", style: .cancel, handler: nil) alert.addaction(alertaction) self.presentviewcontroller(alert, animated: true, completion: nil) } }) var dateformatter = nsdateformatter() dateformatter.dateformat = "mm-dd-yyyy" dateformatter.timezone = nstimezone.localtimezone() var date = nsdate() var ...
Read more