I have been playing with a responsive site, and when all the menus and logos worked well in Coda, sliding nicely into place I tried the site in Chrome, and the logo seems to be hiding behind the header - any help gratefully received!
HTML
<div id="menu">
<div class="menu">
<ul>
<li>Prices</li>
<li>About</li>
<li>Contact</li>
<li class="contact"><span>✆</span> 0783 448 5449</li>
</ul>
</div>
</div>
<div class="container">
<div class="sixteen columns">
<div id="track">
<div class="logo"><img src="images/logo-120.png"></div>
</div>
</div>
CSS:
#menu {
position: fixed;
top: 50px;
height: 50px;
background-color: rgba(255,255,255,0.9);
width: 100%;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
text-align: center;
z-index: 3000;
}
.menu ul li {
display: inline-block;
margin-left: auto;
margin-right: auto;
margin-top: 12px;
text-align: center;
vertical-align: middle;
padding: 2px 4px 2px 4px;
background-color: #fff;
font-size: 130%;
}
#track {
position: fixed;
top: 1px;
}
.logo {
position: relative;
height: 120px;
width: 153;
top: 20px;
left: 0px;
z-index: 3500;
}
Not sure if this should be called a "bug" per-se.... it's just the way the browser handles the relationships between parent/child elements and the z-index property.
The problem is the #menu is a sibling to the .container element, not the .logo.
It doesn't matter how high you put the z-index on .logo it won't go in front of the #menu because the .logo's parent (.container) will always be behind the #menu....
.container has no position or z-index
If that makes no sense, I understand. You might get a better idea from this jsFiddle http://jsfiddle.net/EpgxK/1/ and check this out as well http://css-tricks.com/almanac/properties/z/z-index/.
Oh, and you'll probably have to recode your html if you want the menu to appear in front of the logo at smaller screen sizes.
The position: fixed header needs to have a z-index of 0 (or negative) for the logo to appear above it. I think you may be missing some styles to see this problem based on what you have given us, though.
http://jsfiddle.net/ExplosionPIlls/MaDe2/1/
I Had a same issue I solve by just giving position:static instead position:relative.
In your case just change this class.
`
.logo {
position: static;
height: 120px;
width: 153;
top: 20px;
left: 0px;
z-index: 3500;
}`
Related
I'm creating a small shop in simple html. Each buyable item has its own box where I will later insert the item's name and picture.
My problem however, is when I enter an item name that takes 2 rows or more to fit, because then all other boxes get pushed down as well:
I have some 500 rows of code so I will just paste what I think is relevant to the problem:
CSS:
.packitem{
background-image: url("");
position: relative;
width: 200px;
height: 200px;
border: 1px solid;
border-radius: 10px;
padding: 4px;
margin: 12px 3px 0 3px;
display: inline-block;
}
.packitem a.boxlink{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none; /* No underlines on the link */
z-index: 10; /* Places the link above everything else in the div */
background-color: #FFF; /* Fix to make div clickable in IE */
opacity: 0; /* Fix to make div clickable in IE */
filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
.boxtext{
font-size: 16px;
font-family: verdana;
color: #fff;
vertical-align: top;
}
HTML:
<div class="packages1">
<div><font class="packfont">Packages</font></div>
<div class="packitem">
<div id="pack1" class="white_content">
<font class="descriptiontitle">Item 1</font>
<p class="descriptiontext">Dummy text</p>
<a href="javascript:void(0)" onclick="document.getElementById('pack1').style.display='none';document.getElementById('fade').style.display='none'">
<p class="closelink">Close</p>
</a>
</div>
<font class="boxtext">Item 1</font>
</div>
I managed to fix the issue by having display: inline-flex instead of display: inline-block, but that messed text-alignment up.
Any ideas of what's wrong?
Thanks.
You are close but vertical-align: top; should be applied to the items that are to align.
In your case this should be the boxes
.packitem{
background-image: url("http://www.dedicatedrejects.com/pics/blockblue.jpg");
position: relative;
width: 200px;
height: 200px;
border: 1px solid;
border-radius: 10px;
padding: 4px;
margin: 12px 3px 0 3px;
display: inline-block;
vertical-align: top;
}
BTW: <font class="descriptiontitle">Item 1</font> should not be used...it's invalid HTML
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font
CSS/HTML styled codes only. Jquery and the like will not work for my page.
I am trying to make it so each box responds to the circle shaped tab above it.
I want the boxes to start out as being invisible/faded but to appear when the corresponding circle tab is clicked.
Likewise, I would like the option for the boxes to be able to disappear after clicking the button a second time, reverting to its original invisible/faded out state.
I am not sure whether I should be using a fadeout/fadein element or an onclick one as I am new to this idea.
I've read some pages about it but I can't seem to incorporate it into my own codes, and the ones that I thought might have been useful ended up being Jquery.
I've seen it done before similarly to how I wish to use them and I would like to understand it better.
I apologize if something of this nature has been asked already, but I couldn't find any examples to help me and I've been searching for quite some time now. All I know about coding is what I've taught myself which is a struggle on its own. I'd appreciate any feedback.
CSS:
body {
background-color: #666;
overflow-x: hidden;
}
#profile {
border: 0px;
background-color:transparent;
}
/*--Content--*/
#container {
position: absolute;
top: 80px;
left: 420px;
height: 500px;
width: 1170px;
}
.textbox {
position: relative;
float: left;
top: 120px;
height: 200px;
width: 200px;
margin: 3px;
padding: 10px;
border: 2px solid #fff;
background: rgba(0, 0, 0, .6);
overflow: auto;
}
/*--Navigation--*/
#nav {
top: 200px;
display: inline-block;
width: 100%;
}
#nav li {
float: left;
margin: 0 90px;
}
#nav a {
display: inline-block;
width: 100px;
padding: 3px 0;
}
/*--Nav Tabs--*/
#circle {
position: fixed;
width: 30px;
height: 30px;
overflow: auto;
background-color: #000;
border-radius: 50px;
box-shadow: 0 0 15px #fff, inset 0 0 10px #6699cc;
margin: 3px 0 0 30px;
}
#circle:hover {
background-color: #ccc;
}
HTML:
<div id="container">
<div id="navbox">
<ul id="nav">
<li><div id="circle"></div>
</li>
<li><div id="circle"></div>
</li>
<li><div id="circle"></div>
</li>
</ul>
</div>
<a name="1"></a>
<div class="textbox">Info 1.</div>
<a name="2"></a>
<div class="textbox">Info 2.</div>
<a name="3"></a>
<div class="textbox">Info 3.</div>
</div>
One way of doing this is using labels, inputs with input:checked and an adjacent child selector.
Here's a demo demonstrating:
http://jsfiddle.net/7DUFS/
I have a facebook app and I am working on the front-end now. I am just getting started with css and html, so this might be a silly question- sorry for that.
What I am trying to do is to divide the page in two sections. I've created two divs for that, but the problem is the way they are positioned. My code is the following:
<style>
.choose_div{
width: 20%;
height: auto;
padding: 1px;
left: 0px;
border: 2px;
}
.frame_div{
right:0px;
height: auto;
width: 80%;
border: 2px 2px 2px 2px;
position: relative;
}
</style>
<div id="choose_div">
<ul>
<li class="li_choose">
<div class="li_div">
<p>Save</p>
<img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%">
<hr>
</div>
</li>
</ul>
</div>
<div id="frame_div">
<iframe id="frame_opened">
</div>
I thought that right:0px; for one and left:0px;for the other would position them properly, but they are just one at the bottom of the other.
Can anyone please help with this?
This is the normal way to do what you ask, using float:left;. There were a few other issues with your styles though:
You were targetting .choose_div the class (.), not the id (#)
You need to use box-sizing:border-box when you're doing this otherwise the padding and border is added on top of width:20% making the width larger than 20%.
jsFiddle
#choose_div {
width: 20%;
height: auto;
padding: 1px;
border: 2px;
float:left;
box-sizing:border-box;
}
#frame_div {
height: auto;
width: 80%;
border: 2px 2px 2px 2px;
float:left;
box-sizing:border-box;
}
As for left and right, they can be used to align to a particular side of the screen if using position:absolute. position:relative simply shifts the element a particular amount, for example left:2px would shift the element 2 pixels to the left.
position:absolute positions the element on its closest ancestor that has a position of non-static. Then left/right/top/bottom can be used to indicate the sides of the ancestor.
for the div which to be shown write:
float:left
And for the right one:
float:right
<style>
#choose_div{
width: 20%;
height: auto;
padding: 1px;
left: 0px;
border: 2px;
float:left;
}
#frame_div{
float:right;
right:0px;
height: auto;
width: 80%;
border: 2px 2px 2px 2px;
position: relative;
}
</style>
If you add borders you must shrink your divs' witdh. Or they overflows the parent section and seen top-bottom.
<style>
html,body{margin:0;}
#choose_div{
display:block;
float:left;
width: auto;
height: 100%;
padding: 1px;
}
#frame_div{
float:right;
height: auto;
width: 80%;
height: 100%;
border: 2px 2px 2px 2px;
border-left:solid 2px #000000;
padding:10px;
overflow:hidden;
}
</style>
<body>
<div id="choose_div">
<ul>
<li class="li_choose">
<div class="li_div">
<p>Save</p>
<img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%">
</div>
</li>
</ul>
</div>
<div id="frame_div">
<iframe id="frame_opened">
</div>
Hi I'm just wondering if anyone can help me out. I'm new enough to web design, and I'm having some problems with my CSS.
Basically I cant figure out how to correctly nest my divs/boxes without having overflow issues! I have tried using overflow: hidden; but this still hasn't worked, I've also tried floating the child elements either left or right to see if it would help but still no luck!
My css looks like this:
#customerReg {
width: 47%;
height: 480px;
float: left;
background: #FFF;
padding: 10px 10px 10px 10px;
display: inline;
margin-top: 10px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
overflow: hidden;
}
#customerInfo {
width: 95%;
height: 120px;
background: #414141;
padding: 10px;
margin-bottom: 10px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
overflow: hidden;
}
#participantReg {
width: 47%;
height: 480px;
float: right;
background: #FFF;
padding: 10px;
margin-top: 10px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
overflow: hidden;
}
#participantInfo {
width: 95%;
height: 120px;
background: #414141;
padding: 10px;
margin-bottom: 10px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
overflow: hidden;
}
My HTML Is as follows:
<div class="contentbody" style="border:#FF0066 solid 2px;">
<div id="customerReg" style="border:#33CC00 solid 2px">
<div id="customerInfo">
<p>Customer Registration
</p>
</div>
<!-- End of customerReg --></div>
<div id="participantReg" style="border:#33CC00 solid 2px">
<div id="participantInfo">
<p>Participant Sign Up</p>
<p> </p>
</div>
<!-- End of participantReg --></div>
<!-- end .contentbody --></div>
What im aiming for is so have two rounded boxes side by side with two smaller boxes inside these boxes. I tried to post an image but it wouldnt let me! What im getting is that the two inner boxes are both spilling out on the right side of the outer boxes if that makes sense??
Can anyone tell me where im going wrong and what i can do to correct this as ive spent hours trying to find an answer and cant figure it out!
The parent div set:
overflow: hidden;
OR
#customerReg, #participantReg{
float:left;
}
.contentbody:after{
content: '.';
clear:both;
visibility: hidden;
*zoom:1;
height:0;
display:block;
}
if you set the width of the first div the boxes ar side by side:
look this fiddle
.contentbody{
width:990px;
border:#FF0066 solid 2px;
}
I've got three div elements within one class, which in html document it looks like that:
<div class="content">
<div id="content_head">
<!--CONTENT HEAD CODE-->
</div>
<div id="between_ads">
<!-- ADS HERE -->
</div>
<div id="content_middle">
<!--CONTENT MIDDLE CODE-->
</div>
</div>
And css code for these:
.content
{
position: relative;
width: 75%;
float: left;
left: -52px;
margin: 5px 0 10px 0;
border-right: 1px solid #D9D9D9;
}
.content #content_head
{
/*position: relative;*/
width: 100%;
float: left;
border-bottom: 1px solid #D9D9D9;
}
.content #content_middle
{
/*position: relative;*/
width: 100%;
float: left;
margin: 5px 0 0 0;
border-top: 1px solid #D9D9D9;
border-bottom: 1px solid #D9D9D9;
}
/*BETWEEN ADVERTS*/
.content #between_ads
{
position: static;
width: 100%;/*737px;*/
height: 10px;
/*margin: 302px 0 0 -17px;*/
margin: auto;
padding: 0;
background: #000;
}
/*BETWEEN ADVERTS*/
The problem is, that resulted code for BETWEEN ADVERTS looks like this:
http://i.stack.imgur.com/ZU2FD.png - black bar over window "Polecane" that's highlighted in blue - but this div element should be placed here:
http://i.stack.imgur.com/ww0Ko.png - where is the yellow highlight.
Setting .content to position: absolute and rest to relative brakes totally the layout of .content class.
I'm quite new to html and css and still not everything understand.
Cheers
Try taking out the position and float of all your divs. Divs naturally like to be sitting one on top of another so adding positioning css disrupts it I would think.