I have been working on a new homepage for my website, but
I can't figure out why text moves up and down when I resize
my browser.
My CSS Code:
.welcome {
width: 100%;
height: 60px;
background-color: #4CAF50;
margin-top: -4px;
}
.welcome h1 {
font-family: 'Lato', sans-serif;
color: white;
font-size: 40px;
margin-bottom: 20px;
margin-top: 5px;
margin-left: 15px;
}
.welcome p {
color: white;
overflow: hidden;
float: left;
position: relative;
top: -50em;
}
#welcome-background {
width: 100%;
height: auto;
max-height: 1000px;
margin-top: -16px;
min-height: 500px;
}
If you see any other CSS error's please let me know
My HTML:
<div class="welcome">
<h1 style="float:left;">About Us</h1>
<img id="welcome-background" style="" src="/new_homepage/img/black-bg.png">
<p style="color: white; position: relative; top: -50em;">Hardwire Studios' is a gaming community that has servers am a variety of games, such as Minecraft, Garry's Mod, Counter-Strike: Global Offensive, Rust, and many more coming in the future. We try to provide the best "Lag-Free" experience on all of our server, yet also make them as fun and enjoyable as they can be, by only using the best of the best host companies. You can also see our future plan's by simply scrolling down a little more, until you find the "Future Plan's" Section.</p>
</div>
Your paragraph uses relative positioning, which means it is still in the flow of the document. Because it comes after an image, its vertical position changes as the height of the image changes.
Instead. put the image and paragraph inside of a wrapper element that is positioned relatively, then position the paragraph with absolute positioning.
This could look something like this:
HTML:
<div id="welcome-wrapper">
<img id="welcome-background" src="...">
<p>Hardwire Studios' is...</p>
</div>
CSS:
#welcome-wrapper {
position: relative;
}
#welcome-wrapper p {
position: absolute;
top: 10em;
}
Related
I'm fairly new to coding, have been at it for a few hours for a month now. For the past few hours I've been stuck with the problem that can be seen in the two pictures I attached. I've tried searching for answers and various methods such as min-width, display:flex, adjusting the font-size from autoscaling with vw and using rem. I just want my text to stay inside of the laptop screen no matter what screen size I'm viewing it on. I know I could use the easy way and just photoshop the photo with the text but I want to learn how to do it with coding for future projects as well. I do want the picture to scale a bit so it can be viewed on for example a phone in an ok size. Can you help me please?
body {
margin: 0;
text-align: center;
}
h1 {
color: #66BFBF;
font-family: "Dancing Script", Verdana, Geneva, Tahoma, sans-serif;
font-size: 5vw;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.top-container {
background-color: #ccf2f4;
padding-top: 50px;
position: relative;
}
.laptop {
width: 50%;
height: 50%;
}
<section>
<div class="top-container">
<img class="laptop" src="img/laptop.png" alt="cloud-img">
<img class="top-cloud" src="img/cloud.png" alt="cloud-img">
<h1>I'm Nhien</h1>
<h2 class="dreamer">just a gamer with big dreams.</h2>
</div>
</section>
You can also access the website from www.nhienweb.com
You should add the image to the background of the section or the div.
For this answer, I am adding it to the section background.
<section>
<div class="top-container">
<img class="top-cloud" src="img/cloud.png" alt="cloud-img">
<h1>I'm Nhien</h1>
<h2 class="dreamer">just a gamer with big dreams.</h2>
</div>
</section>
In the HTML, I have removed the laptop img from html and will add it in the css. I will position the cloud as absolute.
And here is the css for this code
body {
margin: 0;
text-align: center;
}
h1 {
color: #66BFBF;
font-family: "Dancing Script", Verdana, Geneva, Tahoma, sans-serif;
font-size: 5vw;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.top-container {
background-color: #ccf2f4;
padding-top: 50px;
position: relative;
}
.top-cloud {
position: absolute;
top: 0;
left: 0;
/* Positioned it relative to the top-container */
}
section {
background-image: url([your path to img relative to the css file]);
background-size: cover;
/* bg size to cover makes it what you want gives it full width at any screen */
}
If this doesn't help comment and ask me.
I applied this code to the CSS so it is working now. Don't think that this is the correct way to solve the problem but it seems fine when I tested my website on my mobile. Thanks for your trouble and time!
#media (max-width: 591px){
h1{
top:30%;
}
}
Can someone please help me how to overlay my globe logo over my blue horizontal bar? Thanks! I have attached a photo of how it looks. I do not want to lose the positioning or anything.
CSS
.logo {
display: inline-block;
width: 100px;
margin-left: 100px;
margin-top: 20px;
max-height: 100%;
}
.title {
display: inline-block;
font-size: 40px;
vertical-align: top;
margin-top: 50px;
font-family: arial;
}
#bannerTitle {
background: steelblue;
height: 60px;
position: relative;
margin-top: -50px;
background: linear-gradient(steelblue, steelblue, white);
}
h2 {
color: white;
padding-left: 120px;
padding-top: 11px;
font-size: 30px;
}
HTML
<img class="logo" src="img/globe.png" alt="">
<h1 class="title">The Inter<span>net</span></h1>
<div id="bannerTitle">
<h2>The World Wide Web</h2>
</div>
https://www.w3schools.com/cssref/pr_pos_z-index.asp
You need to add z-index
#bannerTitle{
background: steelblue;
height: 60px;
position: relative;
margin-top: -50px;
background: linear-gradient(steelblue,
steelblue, white);
z-index: -1;
}
It's as matti said; you need to consider the z-index variable. What z-index does is relayer elements within the same stacking context.
From your HTML markup, I can see that your <img> and <div id="bannerTitle"> are sibling elements, so they are within the same stacking context. Therefore, whoever has a higher z-index will display on top of the other.
One way to do that is to demote the "bannerTitle" div, as matti did: z-index:-1.
An alternative way is to promote the <img>: .logo { z-index:99; }.
It's good to know that z-index only applies to block elements, and img is inline by default, but you're already made it a block element with inline-block.
When I try to use the top word in CSS on a link it does not work.
I want my links to be lower on the page so I would use top: 10%;. That does not work though because my links seem to not move no matter what. I can however get them to move sideways with text-align:center;.
My HTML
<div id="pythonfilelistfiles">
<a href="http://localhost/project1/pythonfiles-calcuator.html">
<div class="pythonfilelistboxs" id="file1">
<h1> Simple Calculator </h1>
</div>
</a>
My CSS
#pythonfilelistfiles {
width: 78%;
height: 92%;
margin-left: 20%;
margin-top: -2%;
max-width: 78%;
max-height: 92%;
overflow-y: scroll;
}
#file1 {
top: 0%;
}
.pythonfilelistboxs {
width: 96%;
height: 12%;
background-color: black;
margin-left: 2%;
z-index: 5;
position: relative;
border-radius: 8px;
border: 2px solid red;
color: red;
text-align: center;
line-height: 80%;
}
There are a number of ways you could accomplish this, most of which are probably a little more maintainable than using positioning properties -
Add padding to the top of the containing div.
Increase the line-height for those links.
Use margin-top to move it down a relative amount (you'll need to set it to display: block as well, which will change how they behave in the page flow).
It is probably easier to use a unit other than percentages in any case - it would better practice to use a type-related unit like em or rem.
So I have a menu and on it there is a button with text and I want behind the text to be an image that shows that you are on the page and this is the code:
HTML:
<div id="menu">
<div id="about">About Us</div>
</div>
CSS:
a {
text-decoration:none;
color: white;
background: url(images/hover.png);
width: 100%;
height: 38px;
}
#about {
background: url(images/button.png);
width: 168px;
height: 51px;
font-family: Anivers;
font-size: 20pt;
text-align: center;
color: white;
line-height: 50px;
vertical-align: middle;
margin-top: 1%;
}
So far, so good, except that the image will only show the height and width that coresponds to the size of the text. For instance if I make the text 24pt, the image behind it will grow larger, but if I make it smaller, the image will become smaller and I don't want that. So how do I stop it from happening. I already searched all over the place, sadly I couldn't find similar topic. I hope you can help me :).
If I understand your question correctly you need to add display: block to the <a> element and set height: auto; instead. As for the image it should not scale anymore and I centered an image for demo purposes.
DEMO
You can accomplish this by displaying your "a" element as a "block". This will allow you to specify the size of the element independent from the size of the font. You can then inherit the width and height of the "#about" css styling if that's the size of "hover.png", or specify your own size based on the actual size of "hover.png" if its different than that stated in "#about", it sounds like 38px for hover.png is what you want as opposed to the 51px height of the #about parent. Without setting "a" as a block, the font size of the text in "#about", the parent element, would rule the overall size of the a element and styling, and your background "images/hover.png" will only provide a background for that size.
Here's what your a element in css would look like with the 38px height, you could also say "inherit" for the height if desired. I tested this and it works:
a {
text-decoration:none;
color: white;
background: url(images/hover.png);
display: block;
width: inherit;
height: 38px;
}
I hope this helps.
<div id="menu">
<img src="images/4.png" />
About Us
</div>
#menu {
position: relative;
width: 168px;
height: 51px;
}
img {
width: 100%;
height: auto;
}
img:hover {
background: blue;
}
a {
position: absolute;
z-index: 100;
/* top: 0; PLACE LINK CORRESPOMNDING TO IMG
left: 0; PLACE LINK CORRESPOMNDING TO IMG */
background: red;
font-family: Anivers;
font-size: 23pt;
color: white;
line-height: 1.2;
}
I'm trying to make this page but as soon as the screen is smaller it wont make me scroll down to see more of my text.
Here is the link fiddle
<html>
<div class="container_12 container clearfix">
<div class="grid_12 clearfix main_content">
<div class="content">
<div><img src="http://placehold.it/780x150"></div>
<div class="text">
<h1>title</h1>
<p> text<p>
<p> text<p>
<p> text<p>
<p> text<p>
</p>
</div>
</div>
</div>
</div>
</html>
<style>
.content{
width: 780px;
padding: 20px;
position: fixed;
left: 50%;
top: 50%;
color: #000000;
font-family: Lora BoldItalic, Lora;
margin-top: -312px;
margin-left: -390px;
}
.text {
background: gray;
opacity: 0.6;
padding: 20px;
}
</style>
Thank you so much in advance!
I removed a few things from your CSS:
position: fixed;
left: 50%;
top: 50%;
margin-top: -312px;
margin-left: -390px;
In general (unless you really know what are you doing) using margin (especially negative values), position fixed, left and top is a bad idea because you are forcing elements to stay in a fixed position so your page will not work in all screen sizes.
I saw in your code that you are trying something with a background (is not visible in the demo) try to add the background to body not to html. I don't know what you are trying but I have a feeling that you want the page content to scroll without moving the background you will need to check this out http://jsfiddle.net/gF7Af/31/
I have the following:
.myimg{
margin: auto;
}
.content{
margin: auto;
width: 780px;
color: #000000;
font-family: Lora BoldItalic, Lora;
}
i dont see any of your text.. i dont understand why you put fixed position to the content nor those negative margins, so i removed those odd rules and at least i can see the text now.
Modify .content like this:
.content{
width: 780px;
padding: 20px;
/*margin: auto;*/
color: #000;
font-family: Lora BoldItalic, Lora;
}