I want to have a fixed navigation bar on a mobile website. So far, I'm trying to do so by setting position: fixed to the navigation bar. PLUS My navigation bar is expandable, so the div below has to react to the height of the navigation bar. I want the div below to stay scrollable.
1) #bar{position: fixed} and #content{}
2) #bar{position: fixed} and #content{position: relative; top:58px;}
EDIT Here's some of my code.
<div id="navigation">
<div id="icons" class="mobile">
<img alt="Logo Header" src="res/logo_small_w.png"/>
<img id="menu_icon" alt="Menu Logo" onclick="menu()" style="float:right;" src="res/menu_icon.png"/>
</div>
<div class="menu_items">
<h2>
Nächster Hotspot
Termine
Berichte
Feedback
</h2>
</div>
</div>
<div id="content">
<div id="load_container"></div>
</div>
CSS:
#navigation {
box-shadow: 0px 2px 2px #005b00;
position: fixed;
left: 0px;
right: 0px;
}
#content {
position: relative;
top: 58px;
}
.menu_items {
display: none;
width: 100%;
}
.menu_items a {
border-top: 1px solid grey;
color: inherit;
display: block;
padding-bottom: 5px;
padding-top: 5px;
text-align: center;
text-decoration: none;
}
Related
I've a problem with image overlay.
Code is here: https://codepen.io/r-smal/pen/BOBdmX
<section class="team">
<h2 class="team__title">team</h2>
<div class="team__wrapper container__team ">
<div>
<div class="team__card ">
<div class="team__overlay"></div>
<img class="team__img" src="https://i.imgur.com/vWIuUtd.jpg" alt="mako">
</div>
<h3 class="team__description">lorem</h3>
<p class="team__span">ipsum</p>
</div>
<div>
<div class="team__card ">
<div class="team__overlay"></div>
<img class="team__img" src="https://i.imgur.com/vWIuUtd.jpg" alt="mako">
</div>
<h3 class="team__description">lorem</h3>
<p class="team__span">ipsum</p>
</div>
<div>
<div class="team__card ">
<div class="team__overlay"></div>
<img class="team__img" src="https://i.imgur.com/vWIuUtd.jpg" alt="mako">
</div>
<h3 class="team__description">lorem</h3>
<p class="team__span">ipsum</p>
</div>
</section>
.container__team {
max-width: 1700px;
margin: 0 auto;
}
.team {
&__title {
margin: 100px;
text-align: center;
font-size: 30px;
text-transform: uppercase;
position: relative;
&::after{
content: "";
position: absolute;
width: 85px;
border-bottom: solid 3px #5dc6e8;
left: 48.5%;
top: 50px;
}
}
&__wrapper {
display: grid;
grid-template-columns: 33.33% auto auto;
text-align: center
}
&__description {
margin: 50px 0 20px;
text-align: center;
font-size: 35px;
}
&__span{
font-size: 35px;
text-align: center;
}
&__card {
position: relative;
}
&__overlay {
position: absolute;
background: rgba(0,0,0,0.6);
width: 100%;
height: 100%;
display: none;
}
&__img{
}
}
.team__card:hover .team__overlay{
display: block;
transition: 0.3s;
}
As you can see on codepen overlay on top of image is bigger than my image and I can't figure out why. I made it 'fit" but I have to use static margins so in resoult in mobile version it doesn't look right.
And one last question how do I position ::after element center under my text that will stay here even in mobile?Without using static margin like in my code.
Right now I have a footer that is always at the bottom of the page. This is fine until I have more content than can fit on the page, which means when you scroll down, the footer scrolls up as if its fixed..
Here is my CSS:
.footerWrap{
clear: both;
position:absolute;
width:100%;
bottom:0;
}
.footer {
position: relative;
margin-bottom: 0px;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #000000;
color: #FFFFFF;
}
.footerLinks{
padding-left: 150px;
text-align: left;
}
.footerLinks p {
display: inline;
}
.footerLinks a {
color: #169e98;
}
.footerSocial{
text-align: right;
}
And my HTML:
<!--Footer-->
<div class="footerWrap">
<div class="footer">
<div class="footerLinks">
Privacy Policy<p> |</p>
Sitemap<p> |</p>
<p>© 2017</p>
</div>
<div class="footerSocial">
<img src="image/findfb.png" alt="Find us on Facebook">
</div>
</div>
</div>
Essentially, I want to put the footer Div below the text content.
it is very easy :
wrap your html code in
<div class="page">
...
</div>
and just add css
.page{
position:relative;
}
that is all
I am trying to center two divs (#about and #testimonial-snippets) within the larger black div. How can I do this?
JS Fiddle: http://jsfiddle.net/DgtqM/
HTML
<footer>
<div id="footer-section">
<section id="about">
<img class="profile-photo" src="http://dummyimage.com/42x42/000/fff" alt="profile" height="44" width="44">
<p>Lorem ipsum dolor sit amet. Find him on Twitter and Instagram. <a id="slide-toggle" href="#">Contact</a> | Archive</p>
</section>
<section id="testimonial-snippets">
<img class="profile-photo" src="http://dummyimage.com/42x42/000/fff" alt="profile" height="44" width="44">
<div class="snippet">
<p>This is a testimonial.</p>
<a class="read-testimonial" href="/testimonials">read more</a>
</div>
</section>
</div>
</footer>
CSS
footer {
background: #222;
clear: both;
color: #f4f3f1;
float: left;
padding: 50px 0;
width: 100%;
}
#footer-section {
margin: 0 auto;
overflow: hidden;
position: relative;
width: 940px;
}
footer section {
float: left;
width: 300px;
}
#about {
margin-right: 20px;
}
footer a {
border-bottom: 1px dotted #f4f3f1;
color: #f4f3f1;
}
.profile-photo {
border: 1px solid #f4f3f1;
float: left;
margin: 4px 10px 10px 0;
}
p {
margin: 0 0 1em;
}
I allowed myself to reduce that problem to a minimum of markup. Everything else is not relevant to the question and only makes it harder to understand.
<footer>
<section id="about">About</section>
<section id="testimonial-snippets">Testimonial</section>
</footer>
One solution would be to make these sections inline-block elements and have them centered in the footer:
footer {
background: #222;
padding: 50px 0;
width: 100%;
text-align: center;
}
footer section {
width: 300px;
height: 50px;
display: inline-block;
text-align: left;
}
/* Just coloring the different divs */
#about { background: red; }
#testimonial-snippets { background: green; }
http://jsfiddle.net/DgtqM/6/
Wrap the elements within a new div. Then give the new div a fixed width and use margin: 0px auto for styling.
HTML
<div id="footer-section">
<div class="wrap">
<section id="about">
<!--Content -->
</section>
<section id="testimonial-snippets">
<!--Content-->
</section>
</div>
</div>
CSS
.wrap{
width: 620px;
margin: 0px auto;
overflow: auto;
}
Example http://jsfiddle.net/DgtqM/5/
I just have a silly issue (I think...) with a div tag in html.
I want to positionate a background relative image at top left corner, half image outside its container.
Issue is that container doesn't fill to all Its content. I try to use "overflow: auto" property but left corner image turns hidden.
My html:
<div class="content">
content of the page
</div>
<footer id="footer">
<div class="column" id="footer-izda">
<span id="logo-sup"> </span>
<span>conecta con nosotros</span>
<ul>
<li class="twitter">outside of box </li>
<li class="facebook">outside of box</li>
</ul>
</div>
<div class="column" id="footer-dcha">
<div class="module widget_nav_menu deepest">Copyright © 2013</div>
</div>
</footer>
My CSS:
.content{
margin-bottom: 2%;
}
footer{
background-color: #333333;
color: #EDEDED;
padding: 1%;
display: block;
/*overflow: auto;*/
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.column #logo-sup{
background: url('http://formate21.es/wp-content/themes/master/images/footer.png') left top no-repeat;
width: 26px;
height: 26px;
top: -25px;
left: 0;
float: left;
position: absolute;
}
#footer-izda {
float: left;
width: 50%;
position: relative;
text-align: left;
}
I wrote this on jsfiddle: http://jsfiddle.net/ecXba/10/
Any suggestion?
Put below code just before </footer> tag.
<div style="clear:both;"></div>
Hope this helps!
i have a page with 3 parent divs , now im having problems positioning the divs inside the header div.
my code is something like this:
divs layout:
<div id="layout">
<div id="header" class="body">
header
<div id="logo">logo</div>
<div id="menu">menu</div>
</div>
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
<div id="body">body</div>
<div id="clear"></div>
</div>
<div id="footer">footer</div>
</div>
css is something like this:
.body {
background-color: #ffffff;
margin: 0px;
background-repeat: repeat-x;
background-image: url(imgs/back.png);
}
#layout {
margin:auto;
width: 1024px;
background-color: #ffffff;
}
#main {
background-color: #ffffff;
}
#header {
background-color:#0F0;
height: 300px;
}
#body {
margin-left: 180px;
margin-right: 180px;
padding: 5px;
background-color: #ffffff;
}
#footer {
margin-left: 180px;
margin-right: 180px;
padding: 0px;
background-color: #ffffff;
}
#right {
float: right;
width: 180px;
padding: 0px;
margin: 0px;
right: 0px;
background-color: #ffffff;
}
#left {
float: left;
width: 180px;
padding: 0px;
margin: 0px;
left: 0px;
background-color: #ffffff;
}
#clear {
clear:both;
}
i want to put in a position of header div (e.g. vertical: center , horizontal: 0 px (0 pixels of the header div not of the total page) on left side) and menu in other position (e.g. vertial: top , horizontal: between the center and right side (center and right side of header div only again).
i would appreciate a solution.
thanks to all.
I could be more helpful if you could clarify your question.
I am not sure of what your are asking for in terms of the location for the header.
Here is an approach to move the menu between the center and the right column. Nest the menu and the right hand column in another right aligned div. For the purposes of example I have called it right-container.
Here is the HTML
<div id="layout">
<div id="header" class="body">
header
<div id="logo">logo</div>
</div>
<div id="main">
<div id="left">left</div>
<div id="right-container">
<div id="menu">menu</div>
<div id="right">right</div>
</div>
<div id="body">body</div>
<div id="clear"></div>
</div>
<div id="footer">footer</div>
</div>
And here are the css statements I added:
#right-container {
float: right;
width: 360px;
padding: 0px;
margin: 0px;
right: 0px;
background-color: #ffffff;
}
#menu {
float: left;
width: 180px;
padding: 0px;
margin: 0px;
left: 0px;
background-color: #ffffff;
}
You can see the fiddle here:
http://jsfiddle.net/SkLvX/