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;
}
Related
I am trying to do a project for my uni.
I would like to make a padding on my anchor to make them clickable.
#windows is a div that contains everything (maybe it could be substitute with a *?)
I chose the padding just with trying, but I'm not satisfied.
As you can see the logo is not centered because the padding changed the height of the banner (the grey part)
body {
margin: 0;
background-image: url("../img/background.png");
background-repeat: repeat;
}
#windows {
width: auto;
height: auto;
width: auto;
}
#banner {
height: 100%;
width: 100%;
background-image: url("../img/banner-background.png");
display: flex;
}
/*#banner p {
font-weight: bolder;
color: #1ea2c4;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
} */
#logo {
height: 50px;
width: 50px;
margin-left: 50%;
height: auto;
}
#logoutandcart {
margin-top: 1px;
margin-right: 30px;
margin-left: auto;
}
#logout,
#cart {
width: 50px;
margin-right: 5px;
width: fit-content;
float: right;
display: inline;
padding: 20px 5px 20px 5px;
}
<div id="window">
<div id="banner">
<div id="logo">
<a class="forwarder" href="home.php">
<img src=" ../img/nftlogo.png " alt="banner logo ">
</a>
</div>
<div id="logoutandcart">
<a class="conteiner" href="./login.php ">
<div id="logout">Log out
</div>
</a>
<a class="conteiner" href="./cart.php ">
<div id="cart">Carrello </div>
</a>
</div>
</div>
First lets discuss a few issues. If you use an ID of window then a selector of #windows your css will not work. Ensure that your ID and selectors always match. In this case it is ok because the width and height auto are not needed. Next there is no need to place a div inside of an a tag to contain your text. If you need to separate text in an a tag use a span. In this case it is not needed so Ill just remove it.
Next lets talk about a solution. You can use the header tag with a div inside that acts as a container. Place your banner background on the header tag and use the container to keep your banner centered when your screen becomes larger you can place a width on the container then use margin 0 auto to make it stay in the center and not go edge to edge. We can also make that container have a position of relative and a display of flex and control the space around the objects inside using the height. Align the items to the center and justify the content to the end of the flex object. This will only affect to two end links because we will do something different with the logo.
Since we always want the logo in the center we will give it a position of absolute. This will take it out of the "normal flow" of the document and allow us to place it where we want. In this case it will be to the top and left 50% of its closes relative parent the header-container. Then we will translate the object -50% of its height and width to center it within its parent.
Padding can then be added to the links on the right to separate them and make them a bit taller making them easier to click on.
Now you can change the height of your banner as you see fit and the objects inside will respond to their parents height and width.
body {
margin: 0;
}
.app-header {
background-color: #e6e6e6;
}
.header-container {
position: relative;
height: 50px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.link-container a {
padding: 20px 5px;
}
#media only screen and (min-width: 800px) {
.header-container {
width: 800px;
margin: 0 auto;
}
}
<header class="app-header">
<div class="header-container">
<a class="logo" href="home.php">
<img src="https://via.placeholder.com/50" alt="banner logo ">
</a>
<div class="link-container">
Log out
Carrello
</div>
</div>
</header>
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>
My header image is overlapping my text and it is very much annoying me. Another thing that is buggy is how my logo text leans right of the center of the image. If someone could help me with both that would be awesome.
Here is my code:
https://jsfiddle.net/c2bom0cc/1/
Here are my tags that are probably the most relevant to this:
#index_header {
position: block;
z-index: 0;
left: 0;
top: 0;
height: 100%;
width: 100%;
text-align: center;
vertical-align: middle;
}
#index_header img {
position: block;
float: left;
width: 100%;
height: 100%;
}
.background_title {
position: absolute;
font-family: 'Montserrat', sans-serif;
color: #FFF;
font-size: 64px;
left: 50%;
top: 50%;
}
<div class="page_container">
<div id="index_header">
<a href="#">
<img alt="slider" id="index_headerimg" src="http://www.bakeryandsnacks.com/var/plain_site/storage/images/publications/food-beverage-nutrition/bakeryandsnacks.com/regulation-safety/coles-freshly-baked-claims-false-rules-federal-court-australia/9101085-1-eng-GB/Coles-freshly-baked-claims-false-rules-Federal-Court-Australia.jpg"
/>
<p class="background_title">G.F. Bakery</p>
</a>
</div>
</div>
I let myself hold a few assumptions on your code:
First, by the full height and width of the image, I figured that you want the image as a stretched background image. So I replaced the <img> with background-image (background shorthand) in CSS Backgrounds.
From your question I see that you want the title in the center of the bakery background.
I did not get what text is overlapped by the image.
If you want text below the image, please put it in an element after <div id="index_header">...</div>, as the background is all over that <div>.
I had to add display:inline-block to .background_title class, so that the vertical-align:middle; would take effect.
I removed all the absolute positioning to handle better with all the alignments.
Absolute positioning make you manually set all the top and left, and it's really difficult to do when your code gets bigger.
Here's you new HTML:
<div class="page_container">
<div id="index_header">
<a href="#">
<p class="background_title">G.F. Bakery</p>
</a>
</div>
<p>Some other content...</p> // this text will not be overlapped by
// #index_header as long as #index_header
// isn't absolutely positioned
</div>
Here's your new CSS:
html, body{ // this is instead of having top:0 and left:0 in #index_header
padding: 0;
margin: 0;
}
.page_container {
height: 100%;
width: 100%;
}
#index_header {
height: 200px;
width: 100%;
text-align: center;
vertical-align: middle;
background: url('http://www.bakeryandsnacks.com/var/plain_site/storage/images/publications/food-beverage-nutrition/bakeryandsnacks.com/regulation-safety/coles-freshly-baked-claims-false-rules-federal-court-australia/9101085-1-eng-GB/Coles-freshly-baked-claims-false-rules-Federal-Court-Australia.jpg') no-repeat center center;
background-size: 100% 100%; // this does the stretching
}
.background_title {
display:inline-block; // this is to apply the vertical-align of parent
font-family: 'Montserrat', sans-serif;
color: #FFF;
font-size: 64px;
}
Here's a JSFiddle
Hope this helps.
If you want your text to be under your image and centered, remove the following code:
.background_title {
position: absolute;
}
Just removing the position will move your text under your image and centered.
I've been looking at this question and I'm having trouble getting my progress bar to work exactly the way it should.
HTML:
<div id="progress_bar">
<div id="bar_color1">
<div class="upload_status"></div>
</div>
<div id="bar_color2">
<div class="upload_status"></div>
</div>
</div>
CSS:
#progress_bar {
border: solid 1px #000;
height: 20px;
width: 300px;
display: block;
position: relative;
text-align: center;
}
#bar_color1 {
background-color: #FFFFFF;
color: #000000;
width: 100%;
}
#bar_color2 {
background-color: #000000;
color: #FFFFFF;
width: 0px;
}
#bar_color1, #bar_color2 {
height: 20px;
position: absolute;
top: 0;
left: 0;
}
As I dynamically increase the percent of #bar_color2 and update .upload_status, I end up with something like this:
Whereas I want the text to remain centered one on top of the other, so when the progress reaches half way the text appears to change color... I've tried various things, swapping divs around, adding another parent, but I just can't seem to figure it out. Any ideas?
I know that this doesn't really help your question, but using the native HTML <progress> element will save you a lot of headaches when interacting with it using JavaScript if you're targeting relatively modern browsers.
edit: The stuff I posted earlier doesn't work, but this does:
http://jsfiddle.net/mYEM3/8/
Just copy from there.
You can just change the color of the text that is on the progresive loading bar(not the middle one/the white one) to black and the annoying percentage should dissapear.
And about when the progress reaches half way the text is supposed to change color problem, i think you can do this as well with the change color thing.
Here's a rough idea that will work:
HTML:
<div id="progress_bar">
<div id="bar_color1">
<div class="progress_text1">50%</div>
</div>
<div id="bar_color2">
<div class="progress_text2">50%</div>
</div>
</div>
CSS:
#progress_bar {
border: solid 1px #000;
height: 20px;
width: 300px;
display: block;
position: relative;
text-align: center;
overflow:hidden;
}
#bar_color2 {
background-color: #FFFFFF;
color: #000000;
width: 50%;
}
#bar_color1 {
background-color: #000000;
color: #FFFFFF;
width: 50%;
}
#bar_color1, #bar_color2 {
height: 20px;
position: relative;
float:left;
overflow:hidden;
}
.progress_text1{
position: absolute;
left:100px;
width:100px;
text-align:center;
}
.progress_text2{
position: absolute;
right:100px;
width:100px;
text-align:center;
}
I Think its only possible with javascript.
Its not complete, and only a little example with changing the "color" after 50%, but the trick is to using special "layers" for that: http://jsfiddle.net/J92Bv/
<div id="progress_bar">
<div class="progress_left" style="width: 50%;"></div>
<div class="progress_right" style="width: 50%;"></div>
<div class="text_1">50%</div>
<div class="text_2">50%</div>
</div>
You must change the z-index if the "white" text overlaps with the first progress-bar layer. In combination and a little more time you can create an progressbar, there change the color correctly when the bar appears to the text. I think here you must use a little helper layer there is positioned after 50%.
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;
}