Right now, if you look at my page on my computer, it will look the way I want it to look. Now if you go on a pc with higher/lower resolution, the images will move, BUT the text will stay in place, why is that?
I have tried messing around with the position: and height/width percentages, but haven't managed to get it to work properly yet.
I'd like to get the images to stay in one place and resize depending on the resolution.
1st:
2nd:
The HTML:
<div id="content">
<div class="pricing">Pricing</div>
<div><img src="images/bracket.png" class="bracket"></div>
<div class="skills">Skills</div>
<div><img src="images/bracket.png" class="bracket_02"></div>
</div>
The CSS:
#content
{
margin: 0% 13% auto;
height: 100%;
width: 65%;
border-style: solid;
border-width: 1px;
color: white;
position: absolute;
}
.pricing
{
font-size: 40;
font-weight: bold;
margin-top: 6%;
margin-left: 20%;
color: #1eb1f5;
position: absolute;
}
.skills
{
font-size: 40;
font-weight: bold;
margin-top: 6%;
margin-left: 70%;
color: #1eb1f5;
position: absolute;
}
.bracket
{
margin-top: 11%;
margin-left: 8%;
position: absolute;
}
.bracket_02
{
margin-top: 11%;
margin-left: 57%;
position: absolute;
}
I usually use px for everything, but I wanted to try using %, as I have heard it can be better for mobile for example.
Is this what your looking for?
JSFIDDLE
I changed your css and html quite a lot.
I put the text and image in a container .head-elem
set text-align: center to center your text in its container
The width of the .head-elem to 50%. so that it takes up 50% of the width of #content.
Made the image take of full size of its container width: .bracket { width: 100%;}
#content {
width: 500px; //Change this to test out diffrent sizes
border-style: solid;
border-width: 1px;
color: white;
}
.head-elem {
width: 50%;
text-align: center;
display: inline-block;
font-size: 1em;
font-weight: bold;
color: #1eb1f5;
}
.bracket {
width: 100%;
}
<div id="content">
<div class="head-elem">
<span>Pricing</span>
<img src="http://www.i2symbol.com/images/symbols/brackets/presentation_form_for_vertical_left_curly_bracket_uFE37_icon_256x256.png" class="bracket" />
</div>
<div class="head-elem">
<span>Skills</span>
<img src="http://www.i2symbol.com/images/symbols/brackets/presentation_form_for_vertical_left_curly_bracket_uFE37_icon_256x256.png" class="bracket" />
</div>
</div>
Try adding the width in % for the class images:
.bracket
{
margin-top: 11%;
margin-left: 8%;
position: absolute;
width: 50%;
}
.bracket_02
{
margin-top: 11%;
margin-left: 57%;
position: absolute;
width: 50%;
}
Related
I'm having a very difficult time getting my image centered and responsive without overlapping my text. How do I fix this.
View the issue here
div.shadow {
position: absolute;
max-width: 45%;
max-height: 45%;
top: 50%;
left:50%;
overflow: visible;
}
img.logo {
position: relative;
max-width: 100%;
max-height: 100%;
margin-top: -50%;
margin-left: -50%;
}
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 0px;
width: 100%;
}
<header>
<h1>Welcome to Nepali Kitchen</h1>
</header>
<div class="shadow"><img class="logo" src="bg3.jpg" /></div>
You have position absolute in your div so you can adjust the top value
div.shadow {
position: absolute;
max-width: 45%;
max-height: 45%;
top: 200px; /* just a sample with a fixed pixel value */
left:50%;
overflow: visible;
}
or try using
position: relative;
That image should probably be a background instead.
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
position: fixed;
top: 0px;
left: 0px;
padding: 40px;
margin: 0px;
width: 100%;
background: url('http://kenwheeler.github.io/slick/img/fonz1.png') center top no-repeat;
background-size: contain;
}
<header>
<h1>Welcome to Nepali Kitchen</h1>
</header>
Or you can move that image behind the text by modifying the z-index.
div.shadow {
position: absolute;
max-width: 45%;
max-height: 45%;
top: 50%;
left: 50%;
overflow: visible;
}
img.logo {
position: relative;
max-width: 100%;
max-height: 100%;
margin-top: -50%;
margin-left: -50%;
z-index: -1;
}
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 0px;
width: 100%;
}
<header>
<h1>Welcome to Nepali Kitchen</h1>
</header>
<div class="shadow"><img class="logo" src="http://kenwheeler.github.io/slick/img/fonz1.png" /></div>
It's because of the positioning of your elements.
If you want to have a fixed header your content needs to be pushed down the height of your header. Do this by wrapping your content in a container, and giving it a margin-top equal to the height of your header.
header {
position: fixed;
height: 100px;
}
.content-container {
position: relative;
margin-top: 100px;
}
And your HTML:
<header></header>
<div class="content-container">
</div>
Give your content-container the position: relative. If you want to center items in the center you can either use flexbox or give it a margin: 0px auto;.
Position relative means it's positioned relative to other elements.
Some other things I noticed in your code which could be done better/cleaner:
Use the units em or rem for font-size
It's not necessary to prefix your classes with the element (div.shadow -> .shadow and img.logo -> .logo)
Also I would recommend ordering your CSS following the CSS Box Model. This opts for much cleaner code and better readability.
This means you will get something like this:
.class {
// Positioning first
position: relative;
top: 0;
right: 0;
z-index: 1;
// It's size
width: 500px;
height: 500px;
// It's margin
margin: 0px auto;
// It's border
border: 1px solid blue;
// It's padding
padding: 2em 0;
// Content styling
color: #676766;
background: blue;
}
I don't know why you have written this complex css. It can be possible by some easy css coding.
<style>
div.shadow {
width: 100%;
float: left;
text-align: center;
}
img.logo {
}
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
width: 100%;
float: left;
}
</style>
I have a div that I am wanting to rotate -20deg. I have gotten it to do just that, the problem I am facing is that it is not displaying it across the whole screen.
It is obviously just displaying a div that is 100% width and 100% height. What I am wanting it to do is cover the whole screen at an angle, so you can not see the left/right corners. If I extend the width above 100% it works but that is only going to push the width of the entire browser out.
Is there any way to get it to display at an angle so that it doesn't show the corners and is across the whole screen?
Fiddle: https://jsfiddle.net/2dhkk03b/
.content {
width: 70%;
margin: 0 auto;
position: relative;
height: 700px;
}
.intro {
width: 60%;
text-align: left;
position: absolute;
top: 50px;
color: black;
font-weight: 300;
font-size: 2em;
}
.para_txt {
padding-top: 40px;
}
.intro p {
font-size: 24px;
}
.slide {
position: relative;
width: 100%;
background-color: red;
height: 400px;
transform: rotate(-20deg);
}
<div class="content">
<div class="intro">
<span>Hi there!</span>
<p class="para_txt">My name</p>
</div>
</div>
<div class="slide"></div>
You can use a pseudo element for the rotated rectangle and set overflow hidden on the parent div to hide the corners and prevent the bottom scrollbar :
.content {
width: 70%;
margin: 0 auto;
position: relative;
height: 700px;
}
.intro {
width: 60%;
text-align: left;
position: absolute;
top: 50px;
color: black;
font-weight: 300;
font-size: 2em;
}
.para_txt {
padding-top: 40px;
}
.intro p {
font-size: 24px;
}
.slide {
position: relative;
height: 1000px;
overflow: hidden;
}
.slide:after {
content: '';
position:absolute;
top:35%;
width:100%; height: 30%;
background: red;
transform: rotate(-20deg);
}
<div class="content">
<div class="intro">
<span>Hi there!</span>
<p class="para_txt">My name</p>
</div>
</div>
<div class="slide">
</div>
The problem is the corners of the div are square so if you rotate a rectangle x degrees you will lose some width.
The ideal solution would be to increase the size and minus the left margin for example.
width: 180%;
margin-left: -40%;
Thanks
I am creating a navbar in my website and I want my logo to show next to my site name within the navigation bar, but it doesn't want to cooperate. In the code below is my html with the image inside of my nav bar.
Below is what my css looks like. I tried all of the different position types and I tried to set the navimage's margin and padding.
.navbar {
width: 100%;
height: 50px;
background-color: #2ecc71;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
#navtitle {
color: white;
font-family: cursive;
font-size: 25px;
position: relative;
top: 20;
margin-top: 10px;
margin-left: 40px;
}
#navimage {
position: absolute;
margin-top: 0px;
margin-left: 140px;
}
<div class="navbar">
<p id="navtitle">Rainforest</p>
<div class="navimage">
<a>
<img src='http://i.imgur.com/Eqbvkgb.png'>
</a>
</div>
</div>
Any ideas?
The simplest way is to put the image inside your paragraph.
<p id="navtitle"><img src='http://i.imgur.com/Eqbvkgb.png'>Rainforest</p>
Size the image as needed.
Your position: absolute prevents the images from appearing as you want, try removing this and adding display:block so that the elements will appear next to each other. You'll probably want to change the css of your image to make it smaller.
Try something like this. Also the image is larger then 50 px so it automatically goes below the nav bar because it can't fit inside. Also, you have navimage title set to class in your html, but its written as an id in your css. ids are with # and class should be .navimage
.navbar {
width: 100%;
height: 50px;
background-color: #2ecc71;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
#navtitle {
float: left;
}
.navimage {
float:left;
}
<div class="navbar">
<div id="navtitle"><p>Rainforest</p></div>
<div class="navimage">
<a>
<img src='http://i.imgur.com/Eqbvkgb.png'width="20" height="20">
</a>
</div>
</div>
Concept:
Use of float property.
The Code:
Use float:left; for navbar and its elements.This will allow them to overlap each other.
Use position to position them.
Note: I gave Id to the img itself. It is always easier to manipulate the image directly
.navbar {
width: 100%;
height: 50px;
background-color: #2ecc71;
z-index: 1;
position: absolute;
top: 0;
left: 0;
float:left;
}
#navtitle {
color: white;
font-family: cursive;
font-size: 25px;
position: relative;
top: 20;
margin-top: 10px;
margin-left: 40px;
float: left;
}
#navimage {
position: absolute;
margin-top: 0px;
margin-left: 140px;
float:left;
}
#logoimg{
height: 50px;
position: absolute;
left: 2px;
}
<div class="navbar">
<p id="navtitle">Rainforest</p>
<div class="navimage">
<a>
<img id="logoimg" src='http://i.imgur.com/Eqbvkgb.png'>
</a>
</div>
</div>
You set an absolute positioning of the continer, so you should do in this way:
.navbar {
width: 100%;
background-color: #2ecc71;
z-index: 1;
position: absolute;top:0;left:0;
}
#navtitle {
color: #FFF;
font-family: cursive;
font-size: 25px;
margin-left: 10px;
position: relative;
margin-top:10px;
}
#navimage, img {
display:inline;
float:left;
width:30px;
height:40px;
padding:10px
}
http://jsfiddle.net/u3upgedx/
I have two video tags which I want to align at bottom corner of the screen. further, the inner video tag should overlap outer video tag, like this image given below:
This is what I could come up with:
<body>
<div class="container">
<div class="widget_contaner">
<div class="widget_head">this is head of widget</div>
<div class="widget_body">
<video class="large_video" src="#"></video>
<video class="mini_video" src="#"></video>
</div>
</div>
</div>
</body>
css
.widget_contaner {
right: 0px;
position: fixed;
bottom: 30px;
z-index: 99999999999999;
}
.widget_header {
background-color: #3fa757;
width: 240px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
border: 1px solid #ccc;
font-size: 12px;
height: 25px;
line-height: 25px;
font-family:'Open Sans', sans-serif;
border-radius: 5px;
}
.widget_body {
width: 240px;
height: 150px;
}
.large_video {
height: 100%;
width: 100%;
}
.mini_video {
position: absolute;
height: 30%;
width: 30%;
bottom: 32px;
right: 4px;
opacity: 0.75;
}
so I was wondering how can I get these video tags to get positioned relative to each other as just given in the image?
Jsfiddle: click here
Like this?
http://jsfiddle.net/EbsaL/3/
I added background colour so it is easier to see
.widget_body {
width: 240px;
height: 150px;
position: relative;
}
.large_video {
height: 100%;
width: 100%;
background: green;
}
.mini_video {
position: absolute;
height: 30%;
width: 30%;
top: 0px;
right: 0px;
opacity: 0.75;
background: purple;
}
The widget body is positioned relatively, and you just need to give the mini video position absolute and top right 0px. If you want the widget positioned at the bottom right corner then do bottom:0; for widget container
See if this is what you are looking for. Note that I changed the background and borders so I could see it. Mainly needed to add absolute positioning to the larger video frame along with some bottom properties set to 0.
.large_video {
height: auto;
width: 100%;
border: 2px solid #000;
position: absolute;
bottom: 0;
}
http://jsfiddle.net/derekstory/EbsaL/2/
I want to place one div over the other. I've already accomplished this with position:absolute;, but the behavior is different on other screen resolutions—specifically, the div on top moves to the left. Can anyone figure out the issue? To better understand my question, see this page.
My CSS:
#flashplayercontainer{
overflow: auto;
}
#flashplayer{
width: 975px;
margin: 0 auto;
background-color:#666666;
border:#CC0000 thick 2px;
}
#adsbox{
background: #222;
width: 930px;
height: 480px;
position: absolute;
top: 350px;
left: 205px;
}
#cpmbox{
margin: 0 auto;
margin-top: 40px;
width: 500px;
text-align: center;
}
#cpmbox h2{
color: #FFF;
margin-bottom: 20px;
}
#cpmbox a {
color: #FC0;
cursor: pointer;
}
</style>
My HTML:
<div id="flashplayercontainer">
<div id="flashplayer">
...
</div>
<div id="adsbox" style="height: 400px;">
<div id="cpmbox">
<h2>Loading.......</h2>
<script type="text/javascript">document.write("<iframe src='http://www.epicgameads.com/ads/banneriframe.php?id=yeA5z58737&t=300x250&channel=2&cb=" + (Math.floor(Math.random()*99999) + new Date().getTime()) + "' style='width:300px;height:250px;' frameborder='0' scrolling='no'></iframe>");</script>
<p><a id="closeads">Close This Ads (<span id="covertimer">20</span>)</a></p>
</div>
</div>
</div>
</div>
Replace your css. we need to make it Position % with two div equally, I think its working perfectly.
#flashplayercontainer{
overflow: auto;
}
#flashplayer{
width: 975px;
margin: 0 auto;
}
#adsbox, #cpmbox {
width: 930px;
height: 480px;
border:#CC0000 thick 2px;
}
#adsbox {
bottom: 50%;
right: 50%;
position: absolute;
}
#cpmbox {
left: 50%;
position: relative;
background-color:#666666;
top: 50%;
margin: 0 auto;
margin-top: 40px;
text-align: center;
}
#cpmbox h2{
color: #FFF;
margin-bottom: 20px;
}
#cpmbox a {
color: #FC0;
cursor: pointer;
}
Three Things you need to change you code.
1) Make it Fixed instead of absolute
2) Left and Top make it % instead of px
like that:
#adsbox{
background: #222;
width: 930px;
height: 480px;
position: fixed;
top: 20%;
left: 15%;
}
3) If you want also minimize and Maximize (window resizing) time. you have to write JS for
position calculation of the Div i mean (left,top)
I hope its use full.
Please add the position:relative to flashplayercontainer div,
example:
#flashplayercontainer{
overflow: auto;
position:relative;
}
And do the some pixels adjust for top and left in ID adsbox.