text (instagram and shop) moves downwards into black area as you can see in the following pictures
https://imgur.com/a/zevB8Op
heres the code:
HTML
<div id="rightBlock">
<a target="_blank" href="http://instagram.com/pierrebassene.world" style="text-decoration: none; color: black; font-weight: bold; font-family: Helvetica ;font-size: 2vw ;">INSTAGRAM</a>
</div>
<div id="mid">
<a style="font-family: Helvetica ; font-weight: bold; font-size: 2vw;">SIGN UP </a>
</div>
CSS
#rightBlock {
position: fixed;
top: 90%;
left: 45.2%;
bottom: 0;
right: 0;
z-index: 1;
}
#mid{
position: fixed;
top: 82%;
left: 47%;
bottom: 0;
right: 0;
z-index: 1;
}
I've already tried several methods including absolute and fixed positioning but nothing seems to be working :/
The cause is almost certainly due to the use of percentage values in the 'top' property (can't confirm without more contextual code). Try instead to re-write/re-structure your code so that you are not using percentage values which will change relative to the devices screen size.
You could try switching to pixel values. EG:
margin-top: 200px; //replace with desired px value
Also, it is a good habit to enforce the 'separations of concerns' concept with your code.
HTML is the markup language which describes the structure and contains the actual contents of the page. CSS is used for styling the pages content.
I recommend you move all the style attributes into your CSS. This keeps your HTML clean and easier to read/maintain for the future, whilst also making it clear where to modify style changes as all the styles are defined in one place (the CSS stylesheet - and not the CSS stylesheet and/or the HTML style attributes).
Related
I am writing a web to print application, and trying to understand how the browser is rendering text within a paragraph. The link below was very valuable in understanding the relationship between line-height, font metrics and vertical-align:
https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
However, as my codepen below demonstrates, the browser renders the overall height of paragraphs differently when its text nodes inherit from one font-family (Allura in this example), but are styled inline with another (Pt Serif in this example), as opposed to the paragraph itself simply having a font-family of "PT Serif".
https://codepen.io/itozer/pen/LzOoxp
<style>
p {
text-align: center;
width: 500px;
font-size: 50px;
line-height: 1.4em;
}
</style>
<p id="paragraph1" style="position: absolute; top: 0; left: 0; font-family: PT Serif;">
The lamp once out<br>
Cool stars enter<br>
The window frame.
</p>
<p id="paragraph2" style="position: absolute; top: 0; left: 550px; font-family: Allura;">
<span style="font-family: PT Serif;">
The lamp once out<br>
Cool stars enter<br>
The window frame.
</span>
</p>
(Note: I know that changing the vertical-align of the span of paragraph2 to top will render the paragraphs the same, but this ultimately does not solve my problem)
Can someone provide information about why the overall height of paragraph2 in the codepen above is greater than the overall height of paragraph1?
I'm building a very simple site using HTML and CSS. It consists of a headline, a paragraph of text, and an image.
When I view the site on Chrome, the placement of all three objects works perfectly. But in Firefox and Safari, they're scrambled. When I then optimize for one of those two, the Chrome version looks off. Etc.
Here's the CSS:
img {
position: fixed;
bottom: 280px;
right: 800px;
}
and the HTML:
<img src="bob.jpg" height="50%" width="20%">
Is there a relatively simple way to fix this? Can I specify the positioning depending on the browser -- something like so?
img {
position: fixed;
/* Chrome
bottom: 350px;
right: 925px;
/* Firefox
bottom: 200px;
right: 800px;
}
etc.
And a second question: What property can I assign the image so that text always wraps around the image, rather than rendering in front of or behind it?
Thank you!
If you want the image to be centered and aligned with the page's content, there is no need to add any additional CSS since you have text-align: center added to the body.
The image will be centered since it is an inline element. Also, your code has many issues, consider a simplified version:
body {
background-color: white;
text-align: center;
font-family: "Courier New", Courier, monospace;
}
p {
text-align: left;
font-size: 12px;
max-width: 50%;
margin: 0 auto;
}
hr {
width: 50%;
margin: 3em auto;
}
<div class="marquee">
<h3>THE X-FILES EPISODE GENERATOR</h3>
<hr>
<p>Make your own episode!</p>
<p>The X-Files generator mixes people, places and plots from different episodes to create new adventures.</p>
<hr>
<div class="wrap">
<button onclick="sentenceLoad()">Generate</button>
</div>
<div class="container">
<h5></h5>
</div>
<img src="https://bobbyfestgenerator.github.io/X.jpg" alt="">
</div>
Use CSS margin instead of repetitive <br> tags
No need to redefine the font since it is inherited from body
Add CSS rules to external file instead of inline (for <hr> for example)
Use margin: 0 auto to center block-level elements like <p>
jsFiddle: https://jsfiddle.net/azizn/d1xmv65m/
Here is my site: http://bankloan.com-credit.info/freescore/limitedtime/lp1/001.php
If you make the browser window smaller (around 750x550) you will see that the pop up image is cluttered over the main text. What I need is for that pop up to not be cluttered.
I don't know much about code. I just used a WYSIWYG editor. I've been messing with it for hours and can't fix it.
I'm pretty sure it has something to do with the absolute positioning code that my program uses.
If you need the #message popup to always be on top, you can set a high z-index value on the div e.g. z-index: 9999
In the case of your site you seem to be using inline stlyes, so you would need to add it as shown below.
<div id="message" style="z-index:9999; font-family: arial; position: absolute; top: 16px; left: 318px; margin-left: -300px; background-image: url('images/alert.jpg'); background-repeat: no-repeat; margin-top: -15px; margin-bottom: 4px; width: 562px; height: 131px; font-size: 12px;" onclick="javascript: document.getElementById('message').style.display = 'none';" onmouseover="document.body.style.cursor='pointer'" onmouseout="document.body.style.cursor='default'">
I have some problems with CSS and z-index. Let me show you an example
Suppose that on a first moment it only appears the tag pointers. Then, when I click one of this pointers appears a tag globe. I want that the tag pointers appears always under the tag globes, and I want too that every time I open a tag globe it appears over all other tag globes opened.
My div structure is:
<div id="t01" class="tag">
<div class="small">
<div class="globe">
<div class="in-globe">
<!--tag globe content-->
</div>
</div>
<div class="globe-arrow"></div>
</div>
</div>
And the related CSS code is this:
.tag {
z-index: 3;
position: absolute;
left: 0; /*JavaScript modified*/
top: 0; /*JavaScript modified*/
width: 19px;
height: 26px;
padding: 0 11px 10px 15px;
background: url('../../images/zoom/tag.png') no-repeat center;
}
.small {
cursor: pointer;
width: 19px;
height: 26px;
}
.globe-arrow {
position: absolute;
left: 23px;
bottom: 30px;
width: 8px;
height: 6px;
background: url(../../images/zoom/tag_arrow_UR.gif) no-repeat;
z-index: 5;
}
.globe {
position: absolute;
left: 23px;
bottom: 30px;
z-index: 4;
}
.in-globe {
font-size: 11px;
margin: 0 0 3px 3px;
padding: 3px;
background: #FFF;
border: 1px solid #000;
}
The 'tag' is all the conglomerate, and its background is the tag pointer image. However, this image has some shadows and I only want that a certain zone can be clicked. Then, the 'small' div has this function. The 'globe' and 'in-globe' divs are where the content of the globe is written (it could be an only div, there are two for historical reasons), and the 'globe-arrow' div is basically a little image to show this small arrow over the globe.
With this structure it doesn't work. In a same conglomerate, a globe is always over a tag, but an entire conglomerate defined before in the html code appears entirely under a newer one. In the same way, although a globe is inserted by JavaScript always after an older one (logically) the tag conglomerate is inserted when the page is loaded and then the overlapping works like I said.
Can you propose an smart way to reach my objective? Think that I'm interested on positioning the globe respective to the tag, because when I drag a pointer with a globe opened I want that the globe moves with it by CSS, not by JavaScript.
give .globe-arrow a z-index of 3
I solved the problem. There's no magic way to do it. I had to change the way I structure tags. It seems that z-index inherits from the container div, then like the parent has less z-index, a son of another parent with the same z-index appears under the first although this son has a bigger z-index. It's very confusing, yes.
In few words, I define a tag-container (to positionate the tag), into it I define a pointer and a tag globe. The first with less z-index than the second. Now, as all the divs with z-index has the same level all tag globes appear over all tag pointers.
I want that every time I open a new tag globe it appears over the opened globes. Against my desires, I had to use JavaScript for this because with a same z-index the browser show over the last defined div. This is ugly. I build a stack of z-index's that increases with more globes and decreases when I close them. Then I simply edit the css dinamicaly to put this new z-index to the new globe.
Thank you for your attention and help :) I hope this could be useful for somebody.
I’m reading some Html code for a web page, where author essentially wanted to create a page with header, footer and content area. The content area would be divided into three columns with center column having the right and left margins set to 200px, and these two margins are to be filled by two other DIVs docked on the page border with absolute positioning.
Here is author’s code for content area ( for the sake of clarity I’ve omitted the header and footer code ):
<div id="container">
<div id="container2">
<div id="centercol">
</div>
<div id="rightcol">
</div>
</div>
<div id="leftcol">
</div>
</div>
CSS file:
body
{
margin: 0px;
font-family: Verdana, Arial, Serif;
font-size: 12px;
}
#container
{
background-color: #818689;
}
#container2
{
background-color: #bcbfc0;
margin-right: 200px;
}
#leftcol
{
position: absolute;
top: 184px;
left: 0px;
width: 200px;
background-color: #bcbfc0;
font-size: 10px;
}
#centercol
{
position: relative;
margin-left: 200px;
padding: 0px;
background-color: white;
}
#rightcol
{
position: absolute;
top: 184px;
right: 0px;
width: 198px;
color: White;
background-color: #818689;
font-size: 10px;
}
Any idea why author decided to put both the center column and the right column inside container2? I see no advantages in doing that and in fact it just complicates the logical structure of the page?!
thanx
It looks like this was so he could have position effectively determined by the width and position of the centercol while allowing for a particular source order for the content. There are a few different ways to do this. Id guess he did it this way to avoid using floats (and the various "fixes" for IE6 compat that entails).
Not the way i would have done it i dont think but i assume it worked well for this site in the grand scheme of things.
Overall though sometimes you have to do some interesting things to match a comp with markup/css. Depending on what the designer has thrown at you and the level of abstraction needed within the system (assuming its built on some sort of dynamic content) you can end up doing something that cant possibly be construed as straight-forward. Nature of the beast until CSS and the browser implementations of it catch up to graphic designers :-)
Usually people adjust their markup due to having their layout and design in mind. That's probably what the author in that article was doing when he put those two sections together. It's not what I would have done, but at the same time you don't want to get yourself worked up about semantic debates on the internet :)
I would rather see someone author web-pages for the content and then design them in CSS (How To: Pure CSS Design)
If the author wants for search-engine purposes the main content to come first then that would be a reason. I'm not sure why he'd use absolutes though as you can't clear them and that would cause problems for a footer.