Wondering if someone can help.
I'm a beginner learning website development and have been playing around with different styles for a particular project. The one I'm trying at the moment has a background colour, on top of this is a central wrapper of 60% width which contains all the website gumph. on the sides of the wrapper I have text turned 90/270 running down the wrapper with the website name.
When I go to resize the website the text jumps, how do I get the text to stay in it's original position? Also a secondary question, the text I have put as a % in CSS, however it doesn't seem to resize with the screen, even if I try em, here is the css:
*{
background-color:#085C08;
max-width:100%;
max-height:100%;
min-width:200px;
margin:0 auto;
}
.wrapper{
width: 60%;
background-color: #FDF3EC;
margin:0 auto;
margin-top:-1%;
margin-bottom:-1.5%;
}
.artwork-r{
transform:rotate(90deg);
white-space:nowrap;
transform-origin:bottom;
margin-top:-52.5%;
margin-left:78.65%;
position:absolute;
width:0%;
height:0%;
clear:both;
}
.artwork-r p{
padding:0%;
font-size:490%;
font-family:Verdana, Geneva, Tahoma, sans-serif;
color:#FDF3EC;
}
.artwork-l{
transform:rotate(270deg);
white-space:nowrap;
transform-origin:top left;
margin-left:15.1%;
margin-top:0.4%;
position:absolute;
width:0%;
height:0%;
clear:both;
}
.artwork-l p{
padding:0%;
font-size:490%;
font-family:Verdana, Geneva, Tahoma, sans-serif;
color:#FDF3EC;
}
when position the text, don't use margin-left or margin-top, those will change as the screen size changes. You should use top, bottom, left and/or right.
For the font size, em's and % are both based NOT on the screen size, but instead it's parent's font size. Without seeing your markup I am not 100% sure, but you will probably want the position of .artwork-l to be set as right: 100%;
Related
It is easy to absolutely position text relative to a div when the div is aligned with the left side of a browser window. The width of the browser window can change size and the text stays in the correct position. But I have a fixed width web page that is always centered in the browser window. I have a div that is centered on the web page regardless of the width of the browser window. This div contains an image. I need to absolutely position text on top of the image. My code is:
<div id="wrapper">
<div> <img style="max-width:100%; max-height:100%; display:block;" src="../../assets/logos/skitours_title_756w_100h.gif" alt="Website logo">
<div class="tour_title"> <h3>This is the title</h3> </div>
</div>
</div>
#wrapper {
width:756px;
height:auto;
margin: auto auto;
margin-bottom:5px;
}
.tour_title {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
color:#696969;
display:block;
position:absolute;
width:500px;
top:40px;
left:20px;
}
That results in the image being centered on the web page regardless of the width of the browser window.
But the absolute positioning of the text (tour_title) is relative to the left side of the browser window, not the image. How do I correct the code so that the text is relative to the webpage regardless of the width of the browser window?
If I understand correctly, you want to make the text relative to the image.
If that's the case, you should:
Make the wrapper position: relative so the "absolute" text references it instead of the browser/webpage.
Make the text div text-align:center; and width:100%; for it to align at the center of the wrapper.
Make the top: whatever you wish.
Something like this:
#wrapper {
width:756px;
height:auto;
margin: auto auto;
margin-bottom:5px;
border-style:solid;
position:relative;
}
.tour_title {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
color:#ff00ff;
position: absolute;
text-align:center;
width:100%;
top: 50%;
}
I have recently been wanting to make these cool sort of ribbons/labels that sit on a little pricing-plan table kind of thing for my website.
Here is what I want it to look like, nothing simple.
I was able to achieve this:
html{
font-size:16px;
font-family:sans-serif;
}
body{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0;
}
.box{
position:relative;
width:300px;
height:400px;
background-color:orange;
overflow:hidden;
}
.label-referencepoint{
position:absolute;
right:0;
background-color:black;
transform:rotate(45deg);
}
.label{
position:absolute;
transform:translateX(-50%);
padding:1em 3em 0 3em;
background-color:deepskyblue;
}
<div class="box">
<div class="label-referencepoint">
<div class="label">New!</div>
</div>
</div>
It works quite well and you can change the font-size from the HTML class to see it stay proportional and responsive.
Here is my logic behind it:
I have a reference point at the top-right corner of my container, it has a width and height of 0. It is also rotated 45 degrees. Inside it, I have the actual ribbon/label with a top padding of 1em and side padding of 3em to stretch out and fill its width. The container obviously has to be overflow:hidden otherwise the ribbon's background would just stick out.
Anyways, I was wondering if there is a better way to do it, maybe without having to use a reference point?
I'm trying to create a banner featuring some services I provide, the image below is exactly how I want it (desktop view) but when I resize the browser the text gets pushed underneath the image and is hidden by over elements of the page overlapping.
How do I make it so the image and text resize with the browser and looks exactly the same as it does on desktop?
I created an example on here http://jsfiddle.net/b7a8cvLb/4/
And my CSS
.info_banner {
background-color:white;
max-width:1166px;
margin:0 auto;
padding: 5px 5px 0px 5px;
text-align:center;
font-size:1em;
height:65px;
}
.info_block {
display:inline-block;
width:20%;
border-right-style:solid;
border-right-width:2px;
border-right-color:#F8F8F8;
height:65px;
vertical-align: text-top;
}
.info_block img {
max-width:100% !important;
height:auto;
display:inline-block;
float:left;
}
.info_block h5 {
height:100%;
width:100%;
margin:0;
}
If needs be I can set the images to display:none at a certain browser width but I'd prefer to avoid doing this.
I can see your images are already scaling down, if you want to scale down your text too you'll need to step it down using media queries.
Hope that helps!
So I have divs that I have within my webpage .. like header , or div boxes .. they adjust fine on bigger screen sizes so that they dont look too tiny on a big monitor , but the issue is that when I resize the window or browser to make it small , all the elements move along till they reach a point where they all meet and it gets ugly .. How can I make it so the divs I have adjust to bigger screen sizes becoming bigger as well , but then stop them from moving along with the window when resizing the window making it smaller ??? I used percentages from all the elements I want to readjust and make bigger on bigger /wider screens
Below is an example of my code .. my header and other elements with these classes move to the point where they overlap when resizing the window
.header{
position:absolute;
top:0px;
width:100%;
height:100px;
left:0;
background:#EB6A4A;
}
.slogan{
position:absolute;
top:60%;
left:40.5%;
}
.login{
position:absolute;
top:15%;
left:90%;
}
.whitebackground{
background:#FFFFFF;
}
I'm not sure about your question because you didn't post any code but i think that your solution can be using css style:
max-width:50%;
min-width:800px;
max-height:500px;
min-height:21%;
properties in pecentage or pixel as you prefer, so you can tell divs how much expand and how much get smaller.
Hope it helps, if you post your code maybe i can be more useful.
Regards
EDIT 1:
This should resolve your problem:
*{
margin: 0;
padding: 0;
text-decoration: none;
color: inherit;
}
.header{
position:relative;
float:left;
top:0px;
width:100%;
height:100px;
left:0;
background:#EB6A4A;
}
.slogan{
position:relative;
float:left;
top:60%;
left:40.5%;
}
.login{
position:relative;
float:left;
top:15%;
left:90%;
}
.whitebackground{
background:#FFFFFF;
}
Just do the same with the class you didn't poste in css. The idea is having all items with position relative and floated on the left so they don't move. Should work!
So, I'm trying to get divs with background pics to display on my web page. In IE it looks just fine, but in chrome the page looks good when it's not full screen and when you make the window full screen the border on div 2 is about 20 pixels too wide on the right side. The first div should be the size of available screen and the second 75% of that centered.
It also looks as if chrome doesn't see my 100% height on the first div.
Here's my css style sheet:
#charset "utf-8";
/* CSS Document */
#main {
background-repeat:no-repeat;
background-size:cover;
font-size: 24px;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
padding:40px;
height:100%;
width:100%;
position: relative;
background-image: url(../graphics/craig-smith-background.jpg);
}
#body {
min-height:500px;
width:75%;
background-repeat:no-repeat;
background-image: url(../graphics/back2.jpg);
margin: 0 auto;
position:relative;
border:groove;
border-color:#333;
border-width:5px; (edit)
padding:0;
}
I've played with padding and margins on both divs but just cant seem to figure this one out.
(edit) I should specify, there is a 20px space between the border and the picture on the right side where you can see the background pic of div 1.
border:groove;
border-color:#333;
border-width:thick;
Don't use thick, specify the number of pixels you want. "2px", 5px", whatever.
The problem was dreamweaver not updating the local files, I changed a picture file in photoshop and saved it. Dreamweaver didn't see the file update.