I am pretty new to web designing and upon doing some exercises, I encountered this problem: My nav tag was also hidden when I set header tag display to none. I tried adding display:block and clear: display to nav tag but did nothing. I read that position: fixed is hiding nav tag but as much as possible I do not want to remove it. I have not studied javascript yet, but let us say I did it with javascript, will the same problem occur or not? Please help me with this and suggest better ways to do it. Pardon my ignorance.
Here's my code for reference:
#header{
padding: 1.5px 0px;
font-size: 30px;
margin-top: -3%;
margin-bottom: -4%;
display: none;
}
#nav{
display: inline-block;
text-align: right;
position: fixed;
background: red;
width: 100%;
height: auto;
display: show;
}
Try to add this CSS style :
#header{ position:relative;}
#nav {display: block;}
Related
Here is my codepen: Codepen
.sidebar{
width: 100%;
position: static;
display: block;
padding: 50px;
margin: 0px;
height: 562px;
border: none;
border-top: 1px solid black;
margin-bottom: 5%;
}
I set a media query to change the styles of the page when under 700px. I want all of the :hover styles to go away on the top navigation, but I cannot get them to go away.
Also, I'm having a problem with the .sidebar element and the fixed footer overlapping at the bottom. I added margin to the bottom of the body and that didn't fix it.
Any suggestions please?
Just put the :hover rules into queries like this:
http://codepen.io/anon/pen/pjNRam
#media (min-width: 700px){
nav ul li:hover{
background: #e92121;
color: #fff;
padding: 10px;
font-size: 22px;
}
}
All you need to do is add the:
nav ul li:hover
inside the media query.
The selector is a bit too specific, you should avoid it or you're going to have problem in override stuff later in the project. As well try to use class.
I am creating a simple blog template. In the right corner of the template there is a search box in the header. The search box should appear there, but at some moments it appears under the header.
This happens every now and then, if I refresh the page a few times the box will somethimes jump positions. I have used Google Chrome for the developent The html of this page is purely static, so I don't have a clue why this is happening. Could anyone find out why this box is jumping up and down.
The affected page can be found here.
I can't re-create your problem, but I'm sure adding position:relative to either nav or .wrapper
.wrapper {
width: 800px;
margin: 0 auto;
position: relative;
}
and position:absolute to the searchbox will prevent any jumping.
header#top #searchBox {
position:absolute;
top: 0;
right: 0;
display: block;
width: 240px;
height: 45px;
// line-height, any other styles
}
Try the following
header#top #searchBox{
float: right;
display: inline-block;
line-height: 45px;
width: 63%;
text-align: right;}
The solution is quite simple,
just ad float: left; to the menu element ( header#top nav ul)
header#top nav ul {
list-style: none;
height: 45px;
display: inline-block;
float: left;
}
than you will only need to add height to the wrapper
.wrapper {
width: 800px;
margin: 0 auto;
height: 46px;
}
I'm entirely new at this, so if I have stated an unclear question, please ask for clarification.
I have difficulties with placing a ul block at the bottom of a div block. I have researched the answers to the questions that are very similar to mine, but for some reasons, their suggestions and approaches do not work on my codes. I'll provide the following link: http://jsfiddle.net/bKh5L/
HTML
<div id='tabs'>
<ul>
<li>Home</li>
<li>About Me</li>
</ul>
</div>
CSS
#tabs{
position: relative;
}
#tabs > ul{
height: 100px;
position: absolute;
bottom; 0;
}
li{
display: inline-block;
padding-left: 50px;
padding-right: 50px;
margin-right: 25px;
margin-left: 25px;
background-color: blue;
color: red;
}
*{
margin: 0px;
border: 1px dashed lightblue;
}
Please, tell me where have I gone wrong and provide the elaborative explanation if you are feeling generous, so I can understand not just how the code work but the concept of vertical alignment itself.
Just remove the height from the ul and set it on the #tabs div:
#tabs{
position: relative;
height: 100px;
}
#tabs > ul{
position: absolute;
bottom: 0;
}
Also you have a typo error on bottom:. Check this Demo
Another option to keep the height on ul but without position:absolute :
#tabs > ul:before {
display:inline-block;
content:" ";
height:100%;
}
li{
vertical-align:bottom;
display: inline-block;
}
Another Demo
There's a typo in bottom;0;
Give the parent an absolute height as well.
Fixed fiddle.
I guess you want something like this seeing bottom:0px; which actually in your fiddle was written wrongly as bottom;0;:
See this fiddle
Please look at the following jsFiddle and alter appropriately. I basically want the text to be perfectly in the middle of the images height.
http://jsfiddle.net/e7AV9/1/
You could set it as a background image and center it there and then add a bit of left padding like this http://jsfiddle.net/e7AV9/5/
I'm partial to absolute positioning.
CSS
* {
font-family: Verdana;
font-size: 10px;
}
nav > ul li:nth-child(2) a:before {
position: absolute;
top: 9px;
left: -2px;
content: url(http://s2.postimage.org/1waex5o10/9j41t1.png) " ";
}
nav a {
color: #626262;
padding: 10px;
margin-left: 10px;
margin-right: 10px;
width: 150px;
display: inline-block;
}
nav ul li {
position: relative;
display: inline-block;
list-style: none;
}
HTML
<nav>
<ul>
<li>Home</li>
<li>Community</li>
</ul>
</nav>
You could also put the image directly in the HTML and style it that way: http://jsfiddle.net/e7AV9/10/
Here's the problem with CSS:content:
I feel that we shouldn't use the content declaration at all. It adds
content to the page, and CSS is meant for adding presentation to the
page, and not content. Therefore I feel that you should use JavaScript
if you want to dynamically generate content. CSS is the wrong tool for
this job.
Another solution can be just to add vertical-align: top such as this example: http://jsfiddle.net/Vh6wP/.
Also here's a link on vertical-align: http://css-tricks.com/what-is-vertical-align/ for other values.
I inserted this code to build a thumb gallery but it messed up my left and right border of my wrapper (it disappear). You can see it here http://blog.howtodjango.com/temp/template/
below is the code that causes it.
.gallery li {
display: inline;
list-style: none;
width: 126px;
min-height: 175px;
float: left;
margin: 15px 15px 1px 15px;
text-align: center;
}
Any help would be great!
this is related to floating elements to left, add this css:
#page-wrap {
overflow: hidden;
}
#main-content {
background: none repeat scroll 0 0 white;
overflow: hidden;
padding-left: 250px;
padding-top: 5px;
}
If you wanna figure out why, read this
You need to set overflow:auto and remove the left padding on #main-content
#main-content {
background: none;
overflow: auto;
padding-top: 5px;
}
That works for me.
You need to remove an extra div tag that exists in your code. Delete one of them at the end and see if this works. Or you could be missing an open tag. Since you did not post your code I cannot figure this out.