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;
}
Related
I'm actually trying to fix an image to a div with text on it regardless of the screen resolution the user may have.
So the image doesn't move and stays fixed in that div.. forever
On Html:
<div class="config">
<img id="uC1"></img>
<div class="config-title">Settings</div>
</div>
On Css:
.config-title {
transform: rotate(-10deg);
text-align: center;
margin: 20px 0px 0px 0px;
position: relative; }
#uC1 {
background-image: url(/images/tinta2.png);
width: 32px;
height: 23px;
position: absolute;
top: 5%;
left: 60%; }
The problem is, when neither using % nor px on top and left, other screen resolutions moves the image.
I've already tried to play with the #media (min-width: 575px) {} options and thats working but then will need to fix the position in all the widths, and maybe there's a better and much simple solution that i don't know
I'm aware that creating an image with the div's content plus image will do the thing but i want to be able to change the text eventually
And sorry if i type like yoda, but remember:
In a dark place we find ourselves, and a little more knowledge lights our way.
From the comments, it looks like you are just wanting your icon before your text. In this case, I would use a pseudo element before the actual text:
.config-title {
transform: rotate(-10deg);
text-align: center;
margin: 20px 0px 0px 0px;
position: relative;
line-height: 23px; /* same height as your image (unless your font size is larger, then make it the same size as your font */
}
.config-title:before { /* this will place a pseudo element at the beginning of the config title div */
content: '';
display: inline-block; /* make it inline block so it appears before the element and is centred with it */
background: url(/images/tinta2.png) top left no-repeat;
background-size: contain;
width: 32px;
height: 23px;
margin-right: 10px; /* spacing to your text */
vertical-align: middle;
}
<div class="config">
<div class="config-title">Settings</div>
</div>
If I understand the question correctly, you can achieve this with the position attribute.
position: absolute will be positioned relatively to the container div with position: relative. If you want to place in the top left corner, you can use top: 0; left: 0.
Working JSFiddle
.container {
position: relative;
display: inline-block;
margin: 15px;
height: 200px;
width: 200px;
border: 2px solid red;
}
.container--image {
position: absolute;
left: 0;
top: 0;
}
<div class="container">
<img src="https://placekitten.com/g/50/50" class="container--image">
<p>Content</p>
</div>
<div class="container">
<img src="https://placekitten.com/g/50/50" class="container--image">
<p>Content</p>
</div>
<div class="container">
<img src="https://placekitten.com/g/50/50" class="container--image">
<p>Content</p>
</div>
Can seem to be able to move the image around, I need the image and the text side-by-side and it is, but I would like to be able to move the image done just a little bit so that the middle part or the image is lined up with the text. Right now it is the bottom and no matter what I do it wont move up or down, here is the html for the div and then the css
<div class="img">
<img src="/image/file/location">
<div class="imgwording">
<img src="/image/file/location" class="logoimage">
Test Text
</div>
<div class="sub">
<img src="/image/file/location" class="mail">
Test Text
</div>
<div class="imagelinks1">
Training &</br>Events
</div>
<div class="imagelinks2">
Trauma & Gender</br>Projects
</div>
<div class="imagelinks3">
Behavioral Health</br>Resources
</div>
</div>
CSS:
.imgwording {
text-decoration: none !important;
line-height: 1.28;
letter-spacing: 1.5px;
text-align: center;
font-size: 48px;
padding: 0px 60px !important;
position: absolute;
top: 65px;
width: 100%;
font-family: eb garamond,serif;
color: #fff;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
left: -110px;
display: inline-block;
}
.logoimage {
width: 50px;
height: 100px;
}
From what I understand, you have an image and text side by side but the image is lower than it should be. What you could do is add padding-bottom to the image CSS to change its position. How many pixels you would want to move would depends on how much higher you want the image to go.
Basically doing:
.logoimage {
width: 50px;
height: 100px;
padding-bottom: 5px; /* this could be any value depending */
}
Believe after some digging I got it, just need to add
position: relative;
to the .logoimage css
Add vertical-align:middle; to your logoimage class:
.logoimage {
width: 50px;
height: 100px;
vertical-align:middle;
}
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;
}
I'm making a div that I want to say "Banner" with a larger "BANNER" in grey behind it. Kind of like a water-mark. But the positioning is wrong and the browser is rendering the 'water-mark' on top of the banner text.
.banner {
position: absolute;
height: 10%;
width: 100%;
background-color: black;
color: red;
vertical-align: top;
overflow: hidden;
z-index: -1;
}
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.foreground {
width: 100%;
height: 100%;
font-size: 2em;
margin: 0;
padding: 0;
top: 0;
text-align: center;
z-index: 2;
}
.background {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top: 0;
text-align: center;
vertical-align: center;
color: lightgrey;
font-size: 7em;
z-index: 1;
}
<div class="banner">
<div class="wrapper">
<div style="position:absolute; width:100%">
<p class="foreground">Banner!</p>
</div>
<div style="position:absolute; width:100%">
<p class="background">BANNER!</p>
</div>
</div>
</div>
For reasons I don't want to go into here, banner needs to keep it's position: absolute (Sorry if that's too restrictive)
Otherwise we're free to play around with it. I would like the water mark to be slightly overflowing from the top and bottom of the banner div or at least flush with the top.
But most importantly I need the water-mark behind the foreground divs content.
Thank for any help! I prefer a CSS solution but JS would be appreciated too. PS here's a jsfiddle if you prefer that.
EDIT I fixed the height issue by putting margin-top:-5% which I tried before, but with a percentage WAY too high. Apparently it goes of the height of the page not it's parent. Perhaps because it's position:absolute. Thanks for your help!
If you want it to appear in a different order, change the order of your html. You can then also get rid of the z-indexes. So:
<div class="banner">
<div class="wrapper">
<div style="position:absolute; width:100%">
<p class="background">BANNER!</p>
</div>
<div style="position:absolute; width:100%">
<p class="foreground">Banner!</p>
</div>
</div>
Alternatively / additionally:
If you need it to be a watermark, why not add some opacity of like 0.3 to .background? That does not actually put it behind the text, but makes it appear like a watermark.
Working in this fiddle: https://jsfiddle.net/0srj5hus/1/
I've created a long scrolling website composed of different sections which fill up the whole screen. One Section contains some pretty lengthy text but the top and bottom parts of the text are cut off. Basically my div won't stretch all the way to accommodate the text. I would like my div to be able to stretch to at least 200% down.
fiddle
I've tried
overflow:auto;
min-height:100%;
This is what it looks like, as you can see at the bottom...the text is cut off.
If I remove Position: absolute; The whole text moves to the left and the bottom text is still cut off.
This is part of my html:
<section id="slide-15" class="homeSlide">
<div class="bcg">
<div class="hsContainer">
<h1>CV GUIDE</h1>
<br>
<h2>
//lengthy text goes here
//lengthy text goes here
//lengthy text goes here
</h2>
</div>
</div>
</section>
and part of style.css
#slide-15 .bcg {
/*position: relative;*/
background-color: #1C1C1C;
min-height: 100%;
overflow: auto;
/*padding:150px;*/
}
slide-15 .hsContent {
position: relative;
}
slide-15 .hscontainer {
width-100%
min-height: 100%;
overflow: auto;
/* position:relative;*/
}
#slide-15 h1 {
margin: 70px;
color: #ffffff;
font-size: 30px;
line-height: 20px;
position: relative;
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
#slide-15 h2 {
color: #ffffff;
font-size: 14px;
line-height: 150%;
position: absolute;
line-spacing: 1px;
text-align: justify;
width: 700px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
with position:absolute it gets cut out of the workflow ,so you need to remove it with you want the parent div to adjust to height;
also set it to display:inline-block ,
check fiddle
You've got a lot of syntax errors in CSS,
I cleaned it up a little here's an updated fiddle
Try creating a class in css like this:
.test {
white-space: nowrap;
}
and apply it to your h2:
<h2 class="test">
//lengthy text goes here
//lengthy text goes here
//lengthy text goes here
</h2>