i was going smooth with my html and css codes until this problem i am facing now and i don't know what is happening.
my html patterns is like this.
in the top is <div id="header"> which does not have any fixed width. i have used an image and used the repeat-x property. and in the header i have navigation menu wrapped in the container of 940px;
in middle is the <div id="content"> which is wrapped with container of the same 940px;
till the content div my codes are fine. now i am facing the problem in positioning the footer correctly. my footer should not have any fixed width and should not be wrapped in the container. so i defined the footer div outside of the content and container div that is right before the closing of body and html tag.
when i do this the footer image which have the dimension of 50px X 290px; goes upward and is placed from the content div. it does not come to the bottom. i am using temporarily margin-top:1600px; to position it correctly which is wrong.
why is it not inheriting the position, i tried giving every position attribute. it is not working :(,
what am i missing?
P.S: the code was lil lengthy so i didnt post it here, instead i explained what is happening. if you still want to see my code i can try and put the minimal code.
thank you
EDIT : Here is the link to jsfiddle and my code. http://jsfiddle.net/32ShZ/
The problem seems to have been that the #footer wasn't clearing the floated divs (and gosh, you do like your divs don't you? 70? In one document?). So, adding:
#footer {
clear: both;
width:940px; /* copied from your other divs */
}
seems to have worked. I'm not sure, as yet, why the #footer isn't respecting margin: 0 auto; but still, it seems to be moving on the right tracks. Have a look at: jsfiddle.net/32ShZ/3/ (you'll note I've used some jQuery to populate all the divs, so I could see what was where. And added a background-color to #footer to make it more visible, these are, clearly, optional).
Edited in response to comment:
i am confused about the jQuery code. what is it exactly.?
jQuery is a JavaScript library, written to provide a cross-browser compatible abstraction, so that, for the most part, one set of code should produce consistent results cross-browser, from IE to Chrome. Its api is available to review online, over at: jQuery.com.
$('div').each(
function(i) {
$(this).append('<p>Div (' + i + ') ' + $(this).attr('id') +'</p>');
}
);
The code I used, step by step:
found all the div elements on the page, $('div')
iterated over each of those elements, and applied a function. The i is an iterator .each(function(i){...})
worked on the current element, $(this)
appended a <p> to the element, with text contents `.append('Div (' + i + ') ' + $(this).attr('id') +'')
the $(this).attr('id') section looks at the current element and finds its 'id' attribute, inserting that into the string.
Related
HTML fragments using links to pages using /#page-section to link to a specific section of a page is loading too low down the element for me.
For example I set up a <div id="engagment"> and then link to site.com/#engagement but instead of it linking to the top of the section like this:
what I want to happen
I get this: What actually happens
Is there anything I can do to fix this?
Thanks in advance. I'm new to html/web development.
That's because you have a fixed header which overlaps that section (which is actually positioned at the top of the window). So you need to create an offset.
A common way is to add an invisible pseudo element to the original target element of the link via CSS, like this:
#page-section::before {
display: block;
content: " ";
margin-top: -150px;
height: 150px;
visibility: hidden;
}
This will "extend" the element with that ID in a way that causes the anchor to be 150px above the main element, without any other visible changes. Adjust that value as you need it (i.e. to the height of your fixed header)
(A padding-top or margin-top would do something similar, but it would create an empty space in there, which you might not necessarily want)
I wonder if anyone has a genius idea for why my internal links are not working on a webpage.
I've set the html with the standard
<button>Some Text</button>
....
bunch of content
....
<div id="link"></div>
Here is the codepen link
http://codepen.io/Cornucopia/pen/vyrPWw?editors=1100#0
This was not working for unknown reasons until I greyed out enough bits of code and isolated the line that caused the problem. In one of the linked css files was a float:left for the li elements. The command is not associated with the button link, and so I can't fathom why it would keep the hyperlink from working. But when the " .grid .tile {float: left;} " is greyed out then the link works again.
the result you getting is absolutely correct.
Case 1:
/*.grid .tile {float: left;} */
<div id="link" style="width:100%;height:30px;background:yellow;"></div>
Result:
And, on click of your button you come to this location.
Case 2:
.grid .tile {float: left;}
<div id="link" style="width:100%;height:30px;background:yellow;"></div>
Result:
See, the location of div now (yellow background)
So, the anchor is working correctly. There is no issue in browser rendering, html or JavaScript.
Reason of Mishap in 2nd Case
You do not completely understand of float. It renders an item like some mixed behavior of (display:inline + Position absolute), which means, first ---> it is no longer eligible to take height and then give space to next item. Second, this is no longer going to effect the location of other items in Y-axis, ie, height.
So now all your li's (which are all float:left) are having no effect on taking space on Y-axis or taking space in height. So Div, has shifted up (like position:absolute items do not effect on other items).
So, removing same you get your desired result.
Hope, this helps!
The problem is that everything is floated left except for your <div id="link"></div>. I tested the following and it seems to work.
.grid .tile { float: left;} /*cuase of problem*/
#link { clear:left;} /* add this */
The clear:left; breaks the float and puts the div back into the position it would be in. Then the floats start back up again. :)
One potential issue is that you may not want a break in the pictures. I.e., if you still want everything to line up against each other, the dude pics and the car pics, then just put #link { float:left; } but in my opinion since the pictures are of different types the break seems appropriate.
I'm using jekyll to generate my pages and as anyone knows that uses jekyll, the anchor tags on h-tags are automatically generated.
Solutions I am not looking for:
Add padding — my h-tags are using margins because I'm a normal person. Also, my sticky header is 50px tall which means that all my h-tags would need a miniumum of 55(ish)px padding. This causes there to be too much spacing.
Create your own anchor in a span tag — this defeats the point of the autogenerated tags and I'm trying to live a D.R.Y. lifestyle.
Summary: I need to offset the anchor's position without changing the location of the h-tag.
If this has already been answered, I apologize for creating a duplicate question. I could not find the answer to this that was not 'solved' with the previous mentioned 'solutions'.
You may want to use the :target pseudo selector, which matches when the hash in the URL and the id of an element are the same. Therefore, the style will only apply to the h-tag which has been navigated to rather than all of them.
For example, you can use :target::before to add a margin to the top of the selected tag:
:target::before {
content: "";
display: block;
margin-top: -75px;
height: 75px;
}
Here, this technique was used along with an animation which removes the margin after one second so that the margin no longer exists if/when the user scrolls up the page.
Adding this solved my problem.
html {
scroll-padding-top: 70px; /* height of sticky header */
}
I've created a codepen for this, but the issue is basically beneath my YouTube embed there's a margin (Seperating the footer from the page) and I don't understand why, I'm still learning when it comes to web development, so I'll be grateful for any explanations.
http://codepen.io/anon/pen/yyjaVJ
Links to codepen must be accompanied by code,
but it's all on codepen, considering there's not much.
It's because an iframe element is inline by default. The reason you are seeing whitespace below the iframe is because inline elements are aligned this way so that there is reserved space below the element for letters such as p, y, q.
You could either change the display of the iframe element to block: (example)
iframe {
display: block;
}
..or you could change the value of the vertical-align property to something other than the default value of baseline. In this case, a value of top would work: (example)
iframe {
vertical-align: top;
}
You can still use what you have, if you edit your CSS and change this code:
#body_wrapper footer {
margin-top: -6px;
}
Not exactly a professional way to do things as you will see the comments i shall get for it but it does fix your problem at hand.
So first of all let me admit I'm not the best at coding, I'm a graphic designer but I 'm trying to teach myself HTML5. I have managed to troubleshoot most of my problemsbut I'm stumped now.
Essentially my problem is when you click a thumbnail within the iframe, it aligns the thumbnail at the very top of the screen. I tried adding translateY to the "page" class, and I also tried it inside the iframe pages but that caused the main picture to be misaligned.
My testpage is online at http://www.brodylahd.com/index2
In reply to Cat Chen
yes i think that is what i need to do... but will it still have the same horizontal movement?
Thumbnail links aligning the it's container at the very top of the screen on click because you are using anchors (Uri Fragments) like #a1 #a2 #a3 in href attributes.
You can try to remove that fragments or prevent in-page movement using a small javascript workaround like this:
$('#thumbs').find('a').bind('click', function() {
return false;
})
This is an issue with going to anchors in iframe, so that browsers tend to center on the content in them if you're targeting them.
The simplest solution in your case (but not ideal) is to control where the scroll would be, so if you'll add
#a1 { position:relative; top: -186px; }
#wrapper { position:relative; top: 186px; }
The page would be centered more visually correct, but still would scroll.
If you want to still use CSS, you can try to change your links+#aN:target .page{…} behavior to a one, that would use labels and radio-buttons that would go before .page blocks: #aN:checked+.page{…}, but I'm not sure if browsers would or wouldn't scroll the page when you're using radios instead of links.