CSS | Footer with Logo -

-

hey started learn html @ work. so, started make website fake company.i made navigation logo , side navigation. footer got problem, cause not in row.

html code:

<div id="footer">  <ul class="footer">   <li class="fuss"><a href="#">agb</a></li>   <li class="fuss"><a href="#">impressum</a></li>     <div class="wortmarke">      caf&eacute; villa bernstein       <p class="copyright">         &copy; caf&eacute; villa bernstein. rights reserved.          </p>     </div>   <li class="fuss"><a href="#">datenschutz</a></li>   <li class="fuss"><a href="#">pressenews</a></li>  </ul> </div>

css:

/* footer */ ul.footer {  list-style-type: none;  margin: 0;  padding: 0;  overflow: hidden;  background-color: #333;  position: fixed;  bottom: 0;  width: 100%;  }  li.fuss {   float: left;   width: 10% }  li.fuss {   display: block;   color: white;   text-align: center;   padding: 14px 16px;   text-decoration: none; }  .wortmarke {   color: #ffc995;   font-size: 150%;   text-align: center;   width: 40%;  }  p.copyright {  font-size: 40%;  margin: -4%;  color: white; }

as can see have 4 links (agb, impressum, datenschutz , pressenews), between impressum , datenschutz want add logo text "café villa bernstein" , below " © café villa bernstein. rights reserved.". problem when remove "logo text" in row. when add "logo text" - 2 links "datenschutz" , "pressenews" jumps next row

here can see problem

now there 1 little thing forgot ask. want white border between 2 links ( agb & impressum , datenschutz & pressenews). when add border-right: 1px solid white on left side of datenschutz there missing white border. so, add border left: 1px solid white. border between agb & impressum , datenschutz & pressenews getting fat. question is: how between elements same border

fat border between 2 navigation

what did is:

li.fuss {   float: left;   width: 15% }

now li , middle div can 'cover' whole footer (4*15% + 40% = 100% width).

i added float:left in .wortmarke :

.wortmarke {   color: #ffc995;   font-size: 150%;   text-align: center;   width: 40%;    display:inline-block;   float:left; }

so floating rest of li.

finally, remove block completely:

ul li:nth-child(4), ul li:nth-child(5) {   float:right;   margin-right: 20px; }

as unnecessary, not-responsive , not support cross-browser compatibility


Comments

Post a Comment

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

-
i have spring project , try make use spring boot , run @ embadded tomcat following : https://spring.io/guides/gs/rest-service/ this application //@configuration //@enableaspectjautoproxy @springbootapplication @componentscan(basepackages = "gux.prome") public class application { public static void main(string[] args) { springapplication.run(application.class, args); } } if use maven command: mvn spring-boot:run , project starts fine, need debug , run main method @ intelij, exception occurs: exception in thread "main" java.lang.illegalargumentexception: cannot instantiate interface org.springframework.context.applicationlistener : org.springframework.boot.logging.classpathloggingapplicationlistener @ org.springframework.boot.springapplication.createspringfactoriesinstances(springapplication.java:414) @ org.springframework.boot.springapplication.getspringfactoriesinstances(springapplication.java:394) @ org.springframework.bo...
Read more

reactjs - React router and this.props.children - how to pass state to this.props.children -

-
i'm using react-router first time , don't know how think in yet. here's how i'm loading components in nested routes. entry point .js reactdom.render( <router history={hashhistory} > <route path="/" component={app}> <route path="models" component={content}> </route> </router>, document.getelementbyid('app') ); app.js render: function() { return ( <div> <header /> {this.props.children} </div> ); } so child of app content component sent in. i'm using flux , app.js has state , listens changes, don't know how pass state down this.props.children. before using react-router app.js defines children explicitly, passing state natural don't see how now. using couple of react helper methods can add state, props , whatever else this.props.children render: function() { var children = react.ch...
Read more

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -

-
i have excel workbook used generate quotations customers. there main page user inputs data, , there buttons generate various pdfs , send them customer. however, 1 user consistently getting error preventing generating , sending pdfs. i beleive "microsoft windows common controls 6.0 (sp6)". it's installed on users' computers. on mine, location "c:\windows\syswow64\mscomctl.ocx" on others "c:\windows\system32\mscomctl.ocx" the user experiencing issues on 32-bit machine, "mscomctl.ocx" file should in system32. have manually put in there, , pointed common controls reference in vba it. issue seems keep reverting looking in syswow64. since folder doesn't exist, can't find it, , can't produce pdfs. i thought perhaps issue user running older version of office (2007) there users on 2013 , 2016. thought perhaps mixture of 64-bit , 32-bit users. user gets sent workbook other users (as quotation process goes further, gets passed ...
Read more