so I have this little beginning of a site and I want the top menu to stay on top of anything else. I used position:fixed and now it does stay on top of everything except for one div that display a logo... I tried using z-index but that didn't help. How do I force that header to stay on top without using Js if possible...
The "blackBar" passes on top of the heading but it's the only this that does...
<body>
<div id="pageBloc">
<header>
<nav>
<ul>
<li>Stuff1</li>
<li>Stuff2</li>
<li>Stuff3</li>
<li>Stuff4</li>
<li>Stuff5</li>
</ul>
</nav>
</header>
<div id="topBloc">
<div id="blackBar">
<p id="logo"><img src="Images/logoSmall.png" alt="logo"</p>
<h1 id="titrePrincipal">MyTitle</h1>
<h2 id="soustitrePrincipal">SubTitle/h2>
</div>
</div>
<section id="temporatySection">
</section>
</div>
</body>
Here's the CSS
body, html
{
margin: 0px;
padding: 0px;
height:100%;
}
#pageBloc
{
height:100%;
}
/*Header*/
header
{
text-align:center;
background-color: #26292E;
height: 40px;
width: 100%;
position:fixed;
}
nav ul, nav li
{
margin-top:5px;
text-transform:uppercase;
display: inline-block;
list-style-type:none;
}
#topBloc
{
background: url('Images/backgroundBloc12.jpg') fixed center;
background-size:cover;
width: 100%;
height: 100%;
}
#blackBar
{
background: rgba(38,41,46,0.80);
position:absolute;
bottom:15%;
width: 100%;
}
#logo
{
padding: 3px;
text-align: center;
}
#titrePrincipal
{
display:none;
text-align:center;
color: white;
}
#soustitrePrincipal
{
text-align: center;
color:black;
}
#temporarySection
{
height: 1000px;
}
Add position: relative; z-index: -1; to #logo.
Then, make sure that you add z-index: -2 to #blackbar.
See here: http://jsfiddle.net/davidpauljunior/gGMzD/1/
Instead of position fixed, you can try
position: absolute
top: 0
left: 0
right: 0
z-index: 100
but if you must use position fixed, you can disregard this and see the answer above.
Related
Problem is about , it works great on desktop but on mobile fails....
[http://jsfiddle.net/9vv914uL/][1]
i want to make this divider responsive... because it is working very well on higher resolutions , as you can see....
and bonus is to make words inside tag in different colors...
this is css stylesheet:
.divider {
text-align:center;
font-family: 'montserrat';
}
.divider hr {
margin-left:auto;
margin-right:auto;
width:40%;
}
.left {
float:left;
}
.right {
float:right;
}
this is
<div style="padding-top:10px; padding-bottom:20px;"class="divider">
<hr class="left" style="margin-top:12px;"/>BLUE RED<hr class="right" style="margin-top:12px;"/>
</div>
I dont know what to say about this problem, this is just plain text. I must go back to the stars <3
:)
There are other ways that this can be handled that would work better for what you are trying to do. In my example, I am using both a heading element and an empty div. The text in the heading element can be expanded as much as you would like without needing to worry about available space, and the solution is responsive out of the box.
HTML
<h3 class="divider">
<span>Title</span>
</h3>
<div class="divider">
<span></span>
</div>
CSS
.divider {
border-color: #000;
border-style: solid;
border-width: 0 0 1px;
height: 10px;
line-height: 20px;
text-align:center;
overflow: visable;
}
.divider span {
background-color: #FFF;
display: inline-block;
padding: 0 10px;
min-height: 20px;
min-width: 10%;
}
Fiddle: http://jsfiddle.net/6uux0cbn/1/
I'd probably do it like this rather than messing with floats:
.divider {
text-align: center;
}
.divider:after {
content: "";
height: 1px;
background: #000;
display: block;
position: relative;
top: -8px; /* this value depends on the font size */
}
.divider > span {
background: #fff;
padding: 0 10px;
position: relative;
z-index: 1;
}
<div class="divider"><span>BLUE RED</span></div>
HTML:
<div style="padding-top:10px; padding-bottom:20px;"class="divider">
<hr class="left" style="margin-top:12px;"/>
<div class="title">BLUE RED</div>
</div>
CSS:
.divider {
text-align:center;
font-family: 'montserrat';
position:relative;
height: 68px;
}
.div hr {
width:100%;
position: absolute;
z-index: 888;
}
.title {
position: absolute;
left:50%;
width:100px;
margin-left: -50px;
z-index: 9999;
top:15px;
background: white;
}
I don't understand why my links are not the .pushMenu divs (left and right),
html:
<header class="header">
<div class="pushMenu" id="left">
<p>l</p>
</div>
<div class="pushMenu" id="right">
<p>r</p>
</div>
<div>
<span class="myTitle">title</span>
<span class="myBy">(by me)</span>
</div>
css:
header {
text-align: center !important;
line-height: 60px;
font-weight: bold;
position: absolute;
top: 0; left: 0; right: 0;
height: 60px;
color: #ffffff;
}
header div.pushMenu {
position: absolute;
width: 30px;
height: 30px;
top: 10px;
border: 1px solid white;
}
header div.pushMenu#left {left: 10px;}
header div.pushMenu#right {right: 10px;}
header div.pushMenu a {
width: 30px;
height: 30px;
display: block;
}
see in action: http://jsfiddle.net/GDQdU/4/
what's wrong ?
This is happening because the line-height specified for the header is being rendered by the child elements also. Check below to correct this.
Remove the p tag from the a tag and the html will be like this r
and add line-height:30px to the a tag.
header div.pushMenu a{
line-height:30px;
}
DEMO
OR
If you want the p tag to be there then make the following css changes
header div.pushMenu p{
margin:0;
line-height:30px;
}
DEMO
I've the following:
HTML (partial):
<div id="page">
<div id="header">
<div id="logo">
<img src="logo.jpg" alt="Logo" />
</div>
<div id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<!-- how many <li>s as need -->
</ul>
</div>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
CSS:
html, body {
min-height: 100%;
}
#page {
position: absolute;
right: 0;
width: 97%;
height: 100%;
overflow-y: auto;
text-align: center;
}
#header {
position: relative;
height: auto;
min-width: 100%;
margin: 10px auto 0 auto;
display: inline-block;
overflow-x: hidden;
}
#header #logo {
float: left;
}
#header #menu ul {
list-style-type: none;
}
#header #menu ul li {
height: 2em;
line-height: 2em;
}
#content {
position: relative;
margin: 20px auto 0 auto;
width: 95%;
}
#footer {
position: relative;
margin-top: 20px;
width: 100%;
height: 260px;
}
Explaining:
There is a container div (#page). Within it there are #header, #content and #footer.
#header space is split horizontally between #logo and #menu.
The problem:
I need to position #menu at bottom of #header but yet at side of #logo. I'm not getting it without break layout. How can I do this?
When new menu items be added, they should make menu go up, not down, this is why I need to do what I said above. The fist image below illustrates how I want to do and second how it actually is (lighter parts are within the darker and yes, it is a mobile layout):
First Image:
Second Image:
And please, no JavaScript, just pure CSS.
Thanks for attention, bye.
try changing display property of the #header to table, display of the #logo and #menu to 'table-cell' and verticaly align them to the bottom - it should do what you need
#header {
position: relative;
height: auto;
min-width: 100%;
margin: 10px auto 0 auto;
display: table;
overflow-x: hidden;
}
#logo {
display:table-cell;
vertical-align:bottom;
}
#menu {display:table-cell; vertical-align:bottom;}
selector in your css #header #logo is too much because identifiers cannot duplicate so #logo is really enough
here is working example: http://jsfiddle.net/6xBvR/1/
Add position:absolute; and bottom:0px; to #header #logo:
#header #logo {
float: left;
position: absolute;
bottom: 0px;
}
Should fix your problem. You could also truncate #header #logo to just #logo.
I wouldn't use float, I'd use display:inline-block and vertical-align:bottom
#logo {
display: inline-block;
vertical-align:bottom;
}
#menu {
display: inline-block;
vertical-align:bottom;
}
But you will need to set some widths.
I alos needed to remove padding from the ul
#menu ul {margin-bottom:0px}
Example: http://jsfiddle.net/pLeUD/
I am making a basic template for a website. It has div containers of 1 header, a main menu listed horizontally below the header, the main content which is a google maps iframe (variable width) and a sidebar (absolute width, floated right) and a footer.
I am having some trouble with the height of the main content. I would like the iframe and the sidebar to have equal height whilst fitting to the page and leaving a margin for the footer but the main content always sets itself to min-height rather than stretching to the page.
HTML
<body>
<div id="wrapper">
<div id="header"><img src="images/logo.png" width="360" height="127" /> </div><!--header-->
<div id="menu">
<ul><li>Home</li>
<li>About</li>
<li>Network</li>
<li>Help</li>
<li>Contact</li></ul>
</div><!--mrnu-->
<div id="content">
<div id="sidebar">
Sidebar
</div><!--sidebar-->
<div id="main">
<iframe id="map" width="100%" height="auto" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?q=52.988337,3.120117&num=1&ie=UTF8&t=m&z=6&ll=51.206883,7.756348&output=embed"></iframe>
</div><!--main-->
<div class="clear"></div>
</div><!--content-->
<div class="push"></div><!--push-->
<div id="footer" class="footer">
</div><!--footer-->
</div><!--wrapper-->
</body>
</html>
CSS
body {
font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
font-size: 75.00%;
color: #fff;
background: url(images/bg.png);
}
a{
color: #090;
text-decoration:none;
}
a:focus, a:hover, a:active {
color: #FFF;
text-decoration: underline;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
* {
margin: 0;
}
html, body {
height: 100%;
}
/* div tags */
#wrapper {
width: auto;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
}
#header {
position: relative;
width: auto;
height: auto;
background-color: #090;
}
#menu {
width: auto;
height: auto;
border: 2px solid #000;
font-size: 18px;
}
#menu ul {
padding: 0px;
margin: 0px;
text-align: center;
}
#menu li {
display: inline;
padding: 50px;
}
#content {
width: auto;
height: 100%;
}
#main {
width: auto;
margin-right: 125px;
}
#map {
width: 100%;
height: auto;
}
#sidebar {
width: 125px;
height: auto;
float: right;
text-align: center;
background-color: #FC0;
}
#footer {
width: auto;
height: 125px;
background-color:#CC0;
}
/* classes */
.clear {
clear: both;
}
.footer .push {
height:125px;
}
Note: There may be 1 or 2 unused lines of code that I haven't spotted when I've been playing around with it so if anything seems out of place then it probably is.
I have seen solutions to this problem with fixed width containers, but I think the problem lies in my use of the float function. I have read that positioning needs to be absolute for this to work properly, however using float is the only way I have been able to find that allows the map to fill the space using variable width.
It could be something as simple as being incompatible with the browsers I am testing on but I'm not sure.
Thanks in advance and sorry if this post is a bit messy. I'm sure I will learn to keep clean soon enough ;D
Try these style changes-:
#map {
width: 100%;
// height: auto;
}
#content {
width: auto;
//height: 100%;
height: auto;
}
Setting #content to height:auto pushes the #footer div to meet the #content div.
and in <iframe> set height to 100% (or 80% to show footer). It still leaves the issue of the map div now pushing the footer to below screen height. To deal with that, possibly set an absolute height for the iframe, or use an alternative to iframe.
I am trying to align a element center in a div where i am not giving any width to parent div becouse it will spread according to screen size , there is total 3 element in div :
Buttons
Heading
Logo
buttons will always align left and logo will align right whenever screen size will be change and the heading will always align center like this
My code is here
http://jsfiddle.net/7AE7J/1/
please let me know where i am going wrong and what css i should apply for getting the element (heading) align center always.
HTML
<div id="header">
<div id="buttons">
link 1
link 2
</div>
<h1>Heading of the page</h1>
<div id="logo">
<a href="#">
<img src="http://lorempixum.com/60/60" width="178" height="31" alt="logo" />
</a>
</div>
</div>
CSS
#header {
background:green;
height:44px;
width:100% }
#buttons {
float: left;
margin-top: 7px;
}
#buttons a {
display: block;
font-size: 13px;
font-weight: bold;
height: 30px;
text-decoration: none;
color:blue;
float:left}
#buttons a.button_back {
margin-left: 8px;
padding-left:10px;
padding-top: 8px;
padding-right:15px }
#header h1 {
color: #EEEEEE;
font-size: 21px;
padding-top: 9px ;
margin:0 auto}
#logo {
float: right;
padding-top: 9px;
}
You can use inline-block for this:
#header {
text-align: center;
}
#header h1 {
display: inline-block;
}
How about this:
#header {
position: relative;
text-align: center;
}
#header h1 {
display: inline;
}
#header #buttons {
position: absolute;
left: 0;
top: 0;
}
#header #logo {
position: absolute;
right: 0;
top: 0;
}
display: inline is actually a bit more cross-browser than display: inline-block;
Try
.centered {
margin: 0 auto;
}