I downloaded a HTML template, started modifying some items and first thing I want to do is to change the id attribute for an <article> element.
I only changed that, and so the site appeareance changed to not a desired one. Console shows any CSS issues.
This is original HTML part of code I'm interested:
<!-- Nav -->
<nav id="nav">
<span>Home</span>
<span></span>
<span>Email Me</span>
<span>Twitter</span>
</nav>
<!-- Main -->
<div id="main">
<!-- Me -->
<article id="me" class="panel">
<header>
<h1>Diego BenjamÃn <br><br> Aguilar Aguilar</h1>
<!-- <span class="byline">Senior Astral Projectionist</span> !-->
And just changed:
<span>Home</span>
<article id="start" class="panel">
This are the visual changes:
What's that I'm missing or should fix?
EDIT
Right after comments I went and saw CSS file and found out:
/*********************************************************************************/
/* Panels */
/*********************************************************************************/
#main
{
position: relative;
overflow: hidden;
}
.panel
{
position: relative;
}
/* Me */
#me
{
}
#me .pic
{
position: relative;
display: block;
}
This is because the id me is being styled in the CSS.
Taken from the CSS (I downloaded it):
#me
{
}
#me .pic
{
position: relative;
display: block;
}
#me .pic:before
{
content: '';
position: absolute;
top: 0;
left: 0;
background: url('images/overlay.png');
width: 100%;
height: 100%;
z-index: 1;
}
Basically, if you want to change the #me ID, you have to go into the CSS style sheets and change it there too.
Update
There are various different stylesheets. I took that snippet from style.css, however there is also style-desktop.css that has various different #me styled in. My recommendation is to go through every css file and edit every instance of #me to be what you want.
Like commented by Hamed Ali Khan, the id is probably used in the stylesheet.
In your stylesheet you should change all styles that contain #me to #start.
Or you could add an extra class to the element. For example <article id="start" class="extraStyle panel">. Then you should change all #me to .extraStyle.
You have to change that thing in CSS file too.
The styles applied with id in the CSS, like #article-id .child{some :style; }
What you changed in the HTML may reflect the same in CSS too.
Replacing the ID broke the styles related to your #home element.
Open your CSS file, and rename all #home in #me.
This is probably happening because some elements in your CSS are targetted as shown below
#foo .bar{
}
This means that it affects elements with the class bar inside of the element with ID foo. That's why changing of an element's ID can really mess up it's content's style.
Related
I am trying to make a header that is localized under a div. When you scroll and the header reaches the top of the page it should "stay" there. I am using Angular so I found this solution: Bind class toggle to window scroll event here and I am using it for adding the class fix-header. In the inspector I can see that the class gets added but the styling does not apply when it is added. Here is my CSS for making the header fixed:
.wrapper {
background-color: pink;
height: 100px;
z-index: 1;
}
.wrapper .fix-header{
position: fixed;
top: 10px;
}
The "fix-search" class is added here:
<body ng-app="myApp">
<div ng-controller="MyController">
<div class="banner">
<div class="dummy-container"></div>
<div class="wrapper" change-class-on-scroll offset="200" scroll-
class="fix-header">
</div>
</div>
</div>
</body>
The line change-class-on-scroll offset="200" scroll-class="fix-header" adds the class fix-header to the wrapper div.
Here is some working code: https://codepen.io/Martin36/pen/jmbEgJ
So my question is, why doesn't the class properties get applied when the class is added?
Why don't the styles get applied when the class is added?
Because you are referencing the wrong class, your CSS target should be:
.wrapper.fix-header{
position: fixed;
top: 10px;
}
Note no space between the wrapper class and the fix-header class
I incorporated the comment given by #Ronnie and the answer from #cnorthfield and made an updated pen: https://codepen.io/Martin36/pen/jmbEgJ, for those of you that are interested. The header now sticks to the top of the screen when the "dummy" div is scrolled past. The following changes were made:
/* Since the classes are on the same element there should not be a blank between them */
.wrapper.fix-header{
background-color: pink;
height: 100px;
/* Without the "width" the header disappears */
width: 100%;
z-index: 1;
position: fixed;
top: 0;
left: 0;
}
To elaborate on cnorthfield's answer:
/*Apply style to all elements of both the wrapper class and the fix-header class*/
.wrapper .fix-header
{
}
/*Apply style to all elements which have both the wrapper and fix-header classes*/
.wrapper.fix-header
{
}
Notice how the addition/removal of a single space significantly changes the meaning of the selector.
What's the best and correct way to identify specific sections or contents inside a CSS3 stylesheet.
For example, if I have an image syntax defined like this for all images:
/* Image */
.image {
border: 0;
display: inline-block;
position: relative;
}
And now I want to define different settings for the images inside a specific section, for example here:
<!-- One -->
<section id="one" class="wrapper major-pad">
What's the correct way to do it? Using the Section ID or the Class in the CSS syntax? (please inform the correct syntax I should use).
If you have many sections with same class but want to target an image in a specific one, use id
#one .image { ... }
If you want to target an image within a section with a given class, use class
.wrapper.major-pad .image { ... }
or
.wrapper .image { ... }
or
.major-pad .image { ... }
Updated based on a comment, showing a simple sample
.wrapper .image {
border: 5px dotted red;
}
<section id="one" class="wrapper major-pad">
<img class="image" src="http://placehold.it/300x100/">
</section>
Is it possible to place an Html element outside of a newly generated one?
Well, I have an IONIC2 app that generates a new element <scroll-content>, the issue is that this element has some CSS properties that affects the child elements.
So, what I would like to do it either to place that my div element outside of that <scroll-content> or even better to disable the CSS properties of <scroll-content> on the div
Here is the code, so I can make things clearer:
HTML
<ion-content id="contentPadding">
<div class="header">
</div>
</ion-content>
When Ionic renders the above code, the browser generate something like this:
HTML
<ion-content id="contentPadding">
<scroll-content>
<div class="header">
</div>
<scroll-content>
</ion-content>
CSS:
.top{
background:black;
}
//generated
scroll-content{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
display: block;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
will-change: scroll-position;
}
I guess, it's clearly shown that a new element called <scroll-content> is being created and <div class="header"> inherits all the css properties of <scroll-content> which I would like to avoid in my case.
Your header (child) is inheriting its parent's (scroll-content) CSS styling. You need to clear any unwanted inherited rules by explicitly changing the inherited styles. For example, if you want to reset the css-display, write
.header {
display: initial;
}
Hopefully in the future we can avoid this with the all:initial trick - however, it currently isn't supported enough.
I have a division placed on the bottom of the page. I put an image into this division, but I don't know how to modify the image. The problem may be, that the inline style for <img> is setting modification rules for all images. I have an inline style sheet that has this code and HTML code for <div>.
My CSS code looks like this:
<style type="text/css">
img {
image-align: center;
padding: 10px;
height: 200px;
width: 140px;
}
div {
position: absolute;
right: 10px;
}
</style>
And my HTML code is like that:
<div align="center" >
<img src="images/music_banner.jpg" >
</div>
you can do this:
div img{
}
or give the div a name and do this
#div img{
}
or you give the img an id as below
<div>
<img id="mg"/>
</div>
Use id as #mg in CSS code.
or you can do as define class name in img tag.
<div>
<img class="mg"/>
</div>
Use class as .mg in CSS Code.
You might try learning a little bit more about CSS selectors: these are the rules that tell the browser which element you'd like to apply the following rules to.
I would recommend Code Academy for an easy to follow course. You can skip down to the CSS section if you are already comfortable with HTML.
Note: if you google CSS, you'll get "w3schools" as the first results. That website is generally derided on Stack Overflow. I don't know if it's really that bad, but I tend to skip it just because everyone else has a bad opinion of it. Your call if you find it helpful of course.
I should note that I like to use the W3C (World Wide Web Consortium) website for reference, as they're the ones trying to make everything standard. It is a pretty technical read, though.
Create a div element in your HTML code:
<div class="parent">
<img src="image">
</div>
Than add this to your CSS code:
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}
I'd like to have something that looks and behaves as hyperlink inside larger rectangle (full page wide) which is also hyperlink. Below there is ASCII-art representation of what it should look like:
|-------------------------------------------|
| Some text [_link_] |
|-------------------------------------------|
The whole outer rectangle (block element) is to be hyperlink. Inside this rectangle there should be some text, and at the end of this text there should be another link.
Unfortunately nesting links (A elements) is illegal in (X)HTML:
12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested;
an A element must not contain any other A elements.
(from http://www.w3.org/TR/html401/struct/links.html#h-12.2.2), so the most natural way of implementing above
<a href="xxx" style="display: block">
Some text
link
</a>
is not valid HTML. What is even worse is that some web browsers in some cases enforce this requirement by moving inner link element just outside closing element of outer link element. This of course utterly breaks layout.
So what I'd like to ask is how to arrive at layout presented above using HTML and CSS (but no JavaScript), but without nested link elements in HTML source. It would be nice if behaviour was as close as possible to the one with nested link elements (for browsers which are not overly strict in implementing HTML standard).
Edit (16-01-2009)
Clarification: Solutions which use more than two link elements are perfectly acceptable
<a href="xxx" ...>Some text</a>
<a href="yyy" ...>Link</a>
<a href="xxx" ...>& nbsp;</a>
...
You could try something like this:
div.a {
position: relative;
background-color: #F88;
z-index: 0;
}
a.b {
position: relative;
z-index: 2;
}
a.b:hover {
background-color: #8F8;
}
a.c {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
a.c:hover {
background-color: #88F;
}
a.c span {
display: none;
}
<div class="a">
foo
bar
<span>baz</span>
</div>
Perhaps this would work?
div.parentBox {
position:relative;
height:100px;
}
a.someLink {
position:absolute;
top:0;
left:0;
height:100px;
}
// Now just position the two spans
<div class="parentBox">
<span class="someText">Some Text</span>
<a href="#" class="someLink">
<span class="linkText">Link Text</span>
</a>
</div>
What I have done in the past is use Javascript to attach the proper functionality to the div (assuming that is the parent element) so that when it is clicked, window.location is ran opening the .href attribute of the child link.
Something like this perhaps.
// jQuery Code
$(".parentDivLink").click(function(){
window.location = $(this).find("a.mainLink").attr("href");
});
<div class="parentDivLink">
Click Me
</div>
Just place on onclick event handler on the outer element which when clicked calls "window.location ='yourURLhere';"
You could add a style attribute - "cursor:pointer" to get the hand cursor when mouse over.
You could also have a css hover code block to get the colour changes.
EDIT: just realised no javascript, so in that case, keep the 'a' tag and simply define a style for it in css, that way you can give it height, width, etc.
A float with negative margins should work as well.
Tested (in IE6 only):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Link within link</title>
<style type="text/css">
.Parent {
width: 500px;
background-color: yellow;
}
.sub {
float: left;
margin-left: -300px;
}
.foo {
display:block;
float: left;
text-decoration: none;
}
</style>
</head>
<body>
<div class="Parent">foo </div>
<div class="sub">Link text</div>
</body>
</html>
You do realize the great potential for user confusion.