All my html elements are being positioned where I want them, except one, and I can't see why it should be the exception. The css snipped to exclude non relevant parts is:
body {
position:relative;
}
ul {
position:absolute;
list-style:none;
margin:0px;
padding:0px;
}
li: {
position: relative;
top: 90px;
display: block;
height: 80px;
}
#track_title {
position:absolute;
top: 1px;
left: 80px;
font-size: 15px;
font-weight: bold;
}
<ul>
<li>
<img src="image.png">
<h2 id = "track_title">Title</h2>
<h3 id = "artist_name">Name</h3>
However as you can see from the screenshot the Title is appearing more than 1px from the top of its parent li. What am I doing incorrectly?
There are default margins and padding for h2 & h3 element. You should set it with your fixed values.
Related
I have this HTML code that I should NOT edit.
I need a solution from css to have something like in this image,
https://imgur.com/DbPheOW
where a black rectangle is added, which contains the texts of: "Colombia" and "South america". I know that the solution is done using pseudo-elements like :after, but I'm new to this CSS topic and I don't know how to do it.
I appreciate your help, and I will be happy to learn.
img{
width:300px;
height:300px;
}
li{
list-style:none;
}
li:after{
content:'';
position:absolute;
width:100%;
height:100%;
background:black;
}
<ul class="offers">
<li>
<img src="https://upload.wikimedia.org/wikipedia/commons/2/21/Flag_of_Colombia.svg" alt="">
<h3 class="country">colombia</h3>
<div class="continent_ubication">south <span class="text_continent" >america</span></div>
</li>
</ul>
First off, the list-style: none declaration you have on the list element <li> doesn't have any effect. It should added to the unordered list <ul> style block.
As the picture doesn't include the red color, I assume you wanted to keep that. Here is a solution using pseudo elements. Specifically, using the ::after element and positioning the black box right underneath the flag <img>. Then positioning the "colombia" and "south america" text using position: relative to move them into the alignment you wanted in the image.
Since your using a heading element <h3> for the "colombia" text it will have a larger font-size and font-weight than the <div> with text "south america". You could give them both similar font sizes and font weights to make them look "alike" unless you were going for a mismatched size appearance.
img{
width:300px;
height:300px;
}
ul {
list-style: none;
}
/* Make <h3> and child <div> have same font-size and weight (remove this if you want them to be different size) */
ul li h3,
ul li div {
font-size: 1.25rem;
font-weight: 400;
}
ul li .country {
position: relative;
color: #fff;
z-index: 99;
top: -5rem;
left: 4.5rem;
}
ul li .continent_ubication {
position: relative;
color: #2E86C1;
z-index: 99;
left: 7.5rem;
bottom: 4.5rem;
}
li:after{
content: "";
position: absolute;
top: 15rem;
width: 300px;
height: 110px;
z-index: 5;
background-color: black;
}
<ul class="offers">
<li>
<img src="https://upload.wikimedia.org/wikipedia/commons/2/21/Flag_of_Colombia.svg" alt="Flag of Colombia">
<h3 class="country">colombia</h3>
<div class="continent_ubication">south <span class="text_continent" >america</span></div>
</li>
</ul>
That was quite a challenge to accomplish this without changing the html, but I think I did it (at least in codepen it works). I wasn't able to make it work with li::after, but I added the black background to the "South America" text and that worked fine. Here is the CSS:
img{
width:300px;
height:300px;
}
h3 {
color: white;
position: absolute;
z-index: 2;
top: 180px;
left: 60px;
}
li{
list-style:none;
position: relative;
}
.continent_ubication,
.text-continent {
color: lightblue;
position: absolute;
z-index: 1;
background: black;
width: 160px;
height: 60px;
padding-left: 140px;
padding-top: 80px;
top: 170px;
}
I have a few links on one line next to each other, and I would like to have dividing dashes between them. I chose to make this happen with the use of the ::before pseudo element, and it works nicely.
However, hovering over the dividers also triggers the hover over the element I have the ::before on.
This is a fiddle showing the issue. If you hover over the dashes, the underline appears under the a.
In my search as to how to prevent this from happening, I ran into this stackoverflow question. Together with the documentation on developer.mozilla.org and the caniusethis page on the pointer-events property I was sure this would fix it. But it didn't.
What am I missing here?
You need to make changes in css
.wrap a::before {
content: '----';
padding: 0 15px;
position: absolute;
left: -50px;
pointer-events: none;
}
.wrap a {
text-decoration: none;
position: relative;
margin-left: 50px;
display: inline-block;
}
You will need to use position:absolute for the ---- to make it out of the <a> flow and also position:relative to the parent <a> element.
Stack Snippet
.wrap a {
text-decoration: none;
margin: 0 30px;
position: relative;
}
.wrap p {
margin: 0;
}
.wrap {
font-family: sans-serif;
border: 1px solid green;
padding: 5px;
margin-bottom: 20px;
}
.wrap a:nth-of-type(1) {
margin-left: 50px;
}
.wrap a::before {
content: '----';
position: absolute;
pointer-events: none;
left: -30px;
transform: translateX(-50%);
}
.wrap a:hover {
text-decoration: underline;
}
<div class="wrap">
<p>These links do not have the pointer-events: none; property</p>
<br>
link text one
link text two
link text three
</div>
<div class="wrap">
<p>These do have pointer-events: none; yet their behaviour is the same as with the block above.</p>
<br>
link text one
link text two
link text three
</div>
I have the following breadcrumb code.
#breadcrumb{
margin-bottom: 10px;
margin-top: 10px;
display: block;}
#breadcrumb a{background:#FFFFFF;
padding:4px;
margin-right:10px;}
<div id="breadcrumb">
HomeParent CatagoryChild Catagory
</div>
I have styled the 'Home' and 'Parent Catagory' links to have solid colour backgrounds. I would like to style the 'Child Catagory' text with a slightly different colour solid background from the two links. All three elements of the breadcrumb should have gaps between them and should not be touching.
The 'Child Catagory' text is not surrounded by <span> so I am unsure how to achieve this.
If I add styling to the surrounding 'breadcrumb' div, the space between the links is affected.
I need to style just the text in the 'breadcrumb' div, not the div itself and not the links.
This is a terrible hacky approach and should not be used. I strongly recommend wrapping the last bit of the breadcrumb in a span and styling the span.
#breadcrumb {
background:red;
display:inline-block;
}
#breadcrumb a {
background:green;
display:inline-block;
position:relative;
}
#breadcrumb a:after {
content: "";
background: white;
height: 1.5em;
position: absolute;
top: 0;
right: -5px;
width: 5px;
}
<div id="breadcrumb">
Home
Parent Catagory
Child Catagory
</div>
Edit
If you know the width of the last element, you can do the following:
#breadcrumb:after {
background: red;
content: "";
height: 1.5em;
width: 99px;
display: inline-block;
position: absolute;
top: 0;
right: 0;
z-index: -1;
}
#breadcrumb {
overflow: hidden;
display: inline-block;
position: relative;
margin-bottom: 10px;
margin-top: 10px;
}
#breadcrumb a{
background:#ccc;
padding:4px;
margin-right:10px;
}
<div id="breadcrumb">
HomeParent CatagoryChild Catagory
</div>
Option 1 - Edit the HTML
The question is: Can you edit the HTML?
The best thing to do would be to edit the HTML and add a surrounding div to the "Child Category" item, then style it.
<div id="breadcrumb">
Home
Parent Catagory
<div class="child">Child Category</div>
</div>
SCSS
#breadcrumb{
a,
.child{
background: #f5f5f5;
padding: 4px 7px;
margin: 0 5px;
&:first-child {
margin-left: 0;
}
}
.child{
display: inline-block;
background: #222;
color: #fff;
}
}
CSS Output
#breadcrumb a, #breadcrumb .child {
background: #f5f5f5;
padding: 4px 7px;
margin: 0 5px;
}
#breadcrumb a:first-child, #breadcrumb .child:first-child {
margin-left: 0;
}
#breadcrumb .child {
display: inline-block;
background: #222;
color: #fff;
}
Example:
http://codepen.io/anon/pen/vEaPqx
Option 2 -- Javascript workaround
Of course there are other ways using javascript like getting the value from another div and appending it to the breadcrumb div. The issue is that this is could eventually break if the HTML changes. It also depends on the content already on the page.
<div id="existing-child-category-text">Child Category</div>
<div id="breadcrumb">
Home
Parent Catagory
</div>
Javascript:
// Create the child element
var child_cat = document.createElement('div');
// Add a class name to the child element
child_cat.className = 'child';
// Add the text from the existing child category to the child div
child_cat.innerHTML = document.getElementById('existing-child-category-text').innerHTML;
// Add the new div to the breadcrumbs
document.getElementById('breadcrumb').appendChild(child_cat);
Example:
http://codepen.io/anon/pen/vEaPqx
Ultimately I would assume that if you are able to edit javascript then you could also change the HTML which would be a way more robust solution.
Option 3 -- Use Pseudo Elements
Try to avoid this but you could have a similar approach using css pseudo elements. but you would need to set the value via javascript or hardcode the value on css which is not the best solution.
I'm trying to get the "item" links inside the "menu" to stay inside the "navWrapper"/"navContent" when the browser is resized.....yet when I decrease the width of the browser window they keep staying off to the right outside these divs....any ideas on how to keep them all contained inside the nav area?
<div id="navWrapper">
<div id="navContent">
<div id="logo"><img src="assets/logo.png"></div>
<div id="menu">
<div class="item">dadada</div>
<div class="item">dadada</div>
</div>
</div>
#navWrapper {
background-color:#3f3f3f;
margin-left: 20px;
margin-right: 20px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin-top:0 auto;
}
#navContent {
width:950px;
height:65px;
}
#navContent #logo {
width:200px;
float:left;
display:inline;
margin-left:30px;
margin-top:15px;
}
#navContent #menu {
width:466px;
height:25px;
float:right;
display:inline;
border: 1px solid #ffffff;
margin-right:30px;
margin-top:15px;
}
Hopefully this is what you are looking for:
http://jsfiddle.net/disinfor/7XFsH/
HTML
<div id="navWrapper">
<div id="navContent">
<div id="logo">
<img src="assets/logo.png" />
</div>
<!-- #logo -->
<div id="menu">
<div class="item">dadada
</div>
<div class="item">dadada
</div>
</div>
<!-- #menu -->
</div>
<!-- #navContent -->
</div>
<!-- #navWrapper -->
CSS
#navWrapper {
background-color:#3f3f3f;
margin-left: 20px;
margin-right: 20px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin-top:0 auto;
}
#navContent {
width:100%;
height:65px;
}
#navContent #logo {
width:200px;
float:left;
display:inline;
margin-left:30px;
margin-top:15px;
}
#navContent #menu {
height:25px;
float:right;
display:inline;
border: 1px solid #ffffff;
margin-right:30px;
margin-top:15px;
}
.item {
float:left;
position:relative;
padding-left:10px;
}
.item a {
color:white;
}
It also makes the navContent responsive.
if you keep the menu with a fixed width that is going to happen always.
I suggest you to dig into mediaqueries so, depeding on the screen resolution, are the styles you might set.
Also you can try by setting the navContent like this:
#navContent {max-width:950px;} /* instead of width */
And remove the width in the #menu, is not required if is floated.
This way the nav is not going to be wider than its containers (be sure there are no containers with a fixed with).
I insist, if you want to be very accurate on the result, try by appliying mediaqueries.
Here some documentation and a cool tool to detect what resolution you are viewing [link]
This method is only recommended if your header does not have an expanding height (ie, if the navigation isn't supposed to wrap
Give the container a min/max width, but let it use "auto" as the actual width. The minimum will allow users on small screens/devices to scroll over and use your navigation, rather than letting it spill off screen and potentially out of the box. It still goes off-screen, but in an expected way. (tip: use an #media query to change the menu layout on those small screens)
#navWrapper {
width: auto;
max-width: 960px;
min-width: 560px;
}
Position the #navContent so that it is relative and does not have a width. This will let you position children elements relative to this div. Note that you must specify a height for this container as well, but you have already done that in your CSS
#navContent {
position: relative;
width: auto;
}
Now position the elements that should appear in the menu. Don't bother with margin or padding for the original elements. Use absolute positioning. Get it perfect.
The magic, you can attach this to the right of the menu.
#navContent #logo {
position: absolute;
top: 15px;
left: 30px;
/* Used to reset your CSS */
margin: 0;
}
#navContent #menu {
position: absolute;
top: 15px;
right: 30px;
/* Used to reset your CSS */
display: block;
float: none;
margin: 0;
}
For the navigation, I suggest the .item classes be inline, and the links be floated blocks. This means the "items" won't be much more than a wrapper, and the links can be given a background or borders without the strange "deadzone" between them. Padding on navigation links is great for usability & touch devices.
#navContent #menu .item {
display: inline;
}
#navContent #menu .item a {
display: block;
float: left;
/* padding, background, border... go nuts */
}
You don't need to clear the navigation in this case, since the #menu is positioned absolutely it won't affect other elements to begin with.
try this
html
<div id="navWrapper">
<div id="navContent">
<div id="logo"><img src="assets/doityourweb-logo.png"/></div></div>
<div id="menu">
<div class="item">dadada</div>
<div class="item">dadada</div>
</div>
</div>
css
#navWrapper {
background-color:#3f3f3f;
margin-left: 20px;
margin-right: 20px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin-top:0 auto;
}
#navContent {
width:950px;
height:65px;
}
#navContent #logo {
width:200px;
float:left;
display:inline;
margin-left:30px;
margin-top:15px;
}
#navContent #menu {
width:466px;
height:25px;
float:left;
padding-left:8%;
display:inline-block;
border: 1px solid #ffffff;
margin-right:50px;
margin-top:15px;
}
.item{
display:inline-block;
}
http://jsfiddle.net/U6B8x/
P.S i dont know where you want to close your #navContent so check and tell
I am designing a website for a school and I want the header of site to be fixed just like facebook has. I tried the fix provided by this question on stackoverflow but it was hardly of any use in the header. I have an image, basically the logo of the school, where I do position: fixed, but
the header hides behind the page.
HTML:
<body>
<div id="header" > <img src="images/iesheader_nnew1.jpg" /></div>
<div id="menu">
<ul>
<li><abbr title="Home">Home </abbr></li>
<li> <abbr title="About Us">About Us </abbr> </li>
<li><abbr title="Academics">Academics</abbr></li>
<li><abbr title="Administration">Administration</abbr></li>
<li><abbr title="News">News</abbr></li>
<li><abbr title="Contact Us">Contact Us</abbr> </li>
<li><abbr title="Photo Gallery">Photo Gallery</abbr> </li>
</ul>
<div class="cleaner"></div>
</div>
CSS:
#header {
margin-left: 0px;
width: auto;
height: 90px;
padding: 0px;
padding-left:185px;
font-size: 35px; color:#FFFFFF;
background-color: #f6c491;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#menu {
position: relative;
clear: both;
width: auto;
height: 38px;
padding: 0;
padding-left:185px;
background-color:#FFFFFF;
margin-bottom: 10px;
margin-left:0px;
}
#menu ul {
float: left;
width: 960px;
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}
#menu a {
float: left;
display: block;
padding: 8px 20px;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #000;
outline: none;
border: none;
border-top: 3px solid black;
}
I tried a number of solutions to that, but whatever I do, the header goes behind the page. I want the menu bar also to be fixed but it also is the same...
Add z-index:1000 to the #header css, and add padding-top to the body css which should be a bit more than header's height. For example, if the header's height is 40px, put the padding-top: 50px to the body css and it should work.
When you add position fixed and/or absolute to a element, it means that the element will leave the natural flow and now it belongs to "layer" that is not related to the layer where all the elements are with the natural flow of the document.
This is a great feature as now you can position those elements anywhere without worring about the rest of the page.
So, about your case. You picked the right position, fixed. Now the elements above it doesn't see it and you have to manually add the height of this header element as a margin and/or padding to the top of the next element.
For example, if you had the following:
<div class="header"></div>
<div class="content"></div>
Repeating what you did add a position fixed to header and considering that it's height is 50 px the content element would get a padding-top:50px and it should do the trick.
<style>
.header{position:fixed;top:0;height:50px;}
.content{padding-top:50px;}
</style>
You can use z-index
Which element that you want to be in front of other elements, give the z-index value higher.
Like this:
z-index: 300;//navbars
z-index: 0;//contents
When you set the an element to have a fixed positioning, It assumes the other neighbouring elements don't exist. Give the element you want to be fixed a larger z-index. Then to prevent the overlapping, give the element preceded by the fixed element the same padding-top as the height of the fixed element. Hope it helps.
CSS Z-index might be your solution
http://www.w3schools.com/cssref/pr_pos_z-index.asp
#header {
margin-top:-38px; //solution
margin-left: 0px;
width: auto;
height: 90px;
padding: 0px;
padding-left:185px;
font-size: 35px;
color:#FFFFFF;
background-color: #f6c491;
position: fixed;
top: 0;
left: 0;
right: 0;
}