i'm trying to make a div have a width using the absolute positioning and it work fine in google chrome but in fierfox it doesnt. why is there a conflict ? i tried the exact same code in both browser and on fierfox doesnt reconize it.
<!DOCTYPE HTML>
<html >
<head>
<meta charset="utf-8"/>
<title>Kelma</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input type="text" id="center" />
</body>
</html>
and this is the css file
#center{
position: absolute;
left:50px;
right: 50px;
}
Take a look at this:
<!DOCTYPE HTML>
<html >
<head>
<meta charset="utf-8"/>
<title>Kelma</title>
<link rel="stylesheet" href="style.css" />
<style>
#wrapper
{
position: absolute;
left:50px;
right: 50px;
}
#center
{
width:100%;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="text" id="center" value="test" />
</div>
</body>
</html>
i wrapper the input with a div, and i applied the styling to the div, and 100% width to the input.
I've gotten it to work with inline css
here is an example from my personal website
<div style="position:absolute; top:60px; bottom:5%; left:5%; right:5%; width:90%; text-align:center;"> SOME TEXT </div>
I personally like to use the percent as it can look better on some sites. Let me know if this works for you! To see it live: http://cbogausch.com/portal It works in both firefox and chrome
Try this:
#center{
position: absolute;
left:0px;
width: 100%;
}
Isn't this what you mean?
body{padding: 0 50px;}
input{width:100%;
Use this on your css:
#center {
margin: 0 auto;
width: 90%;
}
Hgs,
Vinicius =)
Related
I am learning the basics of web development.
I would like to make the position of a div depend on the dimensions of the browser window. I would also like this div to scale.
The easiest way to demonstrate this would be with images (it's all about the 'radio panel'):
Intended appearance
Scaled down the browser window
The code I have written so far:
'panel' is the object I want to manipulate.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<div id="panel">
</div>
</div>
</body>
</html>
CSS:
#main{
background-image: url('tlo.jpg');
background-size:cover;
background-position:center;
width:100%;
height:100%
}
#panel{
background-image: url('radio.png');
position:relative;
width: 49.7%;
height: 30vh;
/*border: 5px solid red; */
top:35.1%;
left:23.9%;
}
Panel with red border should fit in the green border
I've tried to find solutions on the Internet, but I don't even know quite how I'm supposed to describe it in a specialized way.
You could try this: (put it in head)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And if it will not work as you expected it to work, then you can read something about media queries.
Change the height of the #main div to 100vh.
#main{
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Zinnia_elegans_with_Bombus_01.JPG/1200px-Zinnia_elegans_with_Bombus_01.JPG?20070924151254');
background-size:cover;
background-position:center;
width:100%;
height:100vh;
}
#panel{
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Halictus_bee_on_flower-2.jpg/1200px-Halictus_bee_on_flower-2.jpg?20070515152433');
position:relative;
width: 49.7%;
height: 30vh;
/*border: 5px solid red; */
top:35.1%;
left:23.9%;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<div id="panel">
</div>
</div>
</body>
</html>
I am having a problem that has wasted a lot of time already, I have to ask people for help, Please see the image and the code for clarity
Code page index (parent):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="divParentIframeChatbox" style="
width:700px;
height:5px;
position:fixed;
right:400px;
bottom:5px;
background-color:rebeccapurple;
">
<iframe id="iframeChatBox"
src="http://localhost:53398/chatbox.html"
style="
height:100%;
width:100%;
"></iframe>
</div>
</body>
</html>
Code page iframe(child):
<html>
<head>
</head>
<body>
<div style="
width: 300px;
height: 500px;
position: fixed;
right: 0px;
bottom: 5px;
background-color: red;">
</div>
</body>
</html>
NOTE: For a number of reasons i can't set increase height of divParentIframeChatbox ,
Thanks so much
You need to set the z-index of divParentIframeChatbox to some higher value say:
.divParentIframeChatbox{
z-index: 2147483000;
}
I made a simple page using html and ccs only, it contains two colored div blocks which isn't rendered on a page: there should be yellow and green div's appear on a page, but instead blank page.
I checked for an errors - browser shows no errors.
HTML:
<html>
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title>Keyboard Test</title>
</head>
<body>
<div class="field"></div>
<div class="key" id="a key"></div>
</body>
</html>
CSS:
.field {
background-color:yellow;
}
.key {
background-color: green;
}
They both in the same folder, name of files containing html and css are index.html and styles.css.
Add some padding or content
.field {
background-color:yellow;
padding:20px;
}
.key {
background-color: green;
padding:20px;
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title>Keyboard Test</title>
</head>
<body>
<div class="field">test</div>
<div class="key" id="a key">test</div>
</body>
</html>
the divs are empty so their computed height is 0.
Use a min-height or add a character like a
Because they're empty.
<div class="field">text</div>
<div class="key" id="a key">text</div>
put something in them and youll see them
The divs are empty, ie they have no children and have no height assigned. If you add content to the divs, such as images or text or give them some sort of height property, you will see them.
You don`t have any dimensions.
Add them like this:
.field {
background-color:yellow;
height: 50px;
}
.key {
background-color: green;
height: 50px;
}
Div is a block element and when you use it it expect some content from you.
You can make the divs visible in following ways:
div{
min-height:27px;
}
.heights-a{
background-color:green;
}
.heights-b{
background-color:yellow;
}
.space-div{
background-color:orange;
}
.content-div{
background-color:white;
position:relative;
text-align:center;
}
.chakar{
border-radius:50%;
border:1px solid blue;
width:25px;
height:24px;
position:absolute;
left:44%;
top:0%
}
<!-- Using Space-->
<div class="space-div"> </div>
<!-- Using Content-->
<div class="content-div">
<div class="chakar">
</div>
</div>
<!-- Using Height-->
<div class="heights-a"></div>
<div class="content-div"> INDIA!!!</div>
i have a logo called gif.gif, what i am trying to do is position it on the top left corner. At the moment there is a gap, i want no padding or margins.
This is my html and css
CSS
#header, .img
margin:0px;
padding:0px;
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="foo.css" type="text/css" /><!-- Footer Stylings -->
</head>
<body>
<div id="header">
<div class="logo">
<a href="https://www.google.co.uk"/><img src="gif.gif"/></a>
</div>
</div>
</body>
</html>
Try this:
body
{
margin:0px;
padding:0px;
}
Consider approaching it purely in CSS, like so;
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="foo.css" type="text/css" /><!-- Footer Stylings -->
<style>
html, body {
margin: 0px;
padding: 0px;
}
#header {
margin: 0px auto;
width: 960px;
}
.logo {
display: block;
width: 200px;
height: 200px;
background-image: url('gif.gif');
}
.logo:hover {
/* Some hover styling here */
}
</style>
</head>
<body>
<div id="header">
</div>
</body>
</html>
You would make your a tag a block (non-inline). I assumed the size to be 200x200 pixels. You can change that to your liking. The a tag will still maintain it's hyperlink properties, but display differently.
Try reset your css before your start do anything.
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
vertical-align:baseline;
}
</style>
I make a simple test with css reset above and works fine. Just paste before all css in your html file.
Add to the body:
body{margin:0px; padding:0px;}
You can eliminate this kind of problems if you use reset.css or normalize.css
Sorry if I can't explain with code, I'm newbie with CSS. How can I do this?:
HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS DIV issue</title>
</head>
<body>
<div id="div1">
<img src="image-800x216.gif" />
</div>
<div id="div2">
<img src="image-567x43.gif" />
</div>
</body>
</html>
Is intended to work with IE (all), Opera, Safari, Chrome and FF. Is possible or I'm dreamer?
http://jsfiddle.net/XTkA2/30/
#div1 {
position: absolute;
top: 38%;
right: 1em;
width: 62%;
max-width: 50em;
outline:#999 solid 1px;
}
#div2 {
position: absolute;
bottom: 0.63em;
right: 1em;
width: 46%;
max-width: 35.44em;
outline:#999 solid 1px;
}
I've added outline for you to make divs visible. You may delete them.
Uhm...i don't understand what is your intention...but...do you want to align two images, one above another on the page center or one beside another or both images on right-bottom?
If you want to align elements in page, try this:
/* Both images aligned side-by-side at page center */
div.div1, div.div2
{
float: left;
margin: 0 auto;
}
/* One images at right, another at left */
div.div1
{
float: left;
}
div.div2
{
float: right;
}
Page bottom alignment is not possible...i guess.
Put you can use margin-top css property to do the trick.
Hope it helps.
After applying and mixing your all helpful answers and hours and hours of reading and trying css/html code from different sites... I have what I want; well, almost in 95% due to browsers compatibility. Here's the code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS DIVs alignment issue</title>
<style type="text/css">
#div1 {
width:62%;
min-width:16em;
max-width:50em;
right:1em;
top:38%;
margin-right:1em;
height:auto;
z-index:0;
position:absolute;
}
#div2 {
width:46%;
min-width:10em;
max-width:35.44em;
right:1em;
bottom:6%;
margin-right:1em;
height:auto;
z-index:0;
position:absolute;
}
.stretch {
width:100%;
height:auto;
min-width:10em;
}
</style>
</head>
<body>
<div id="div1">
<img src="http://placekitten.com/800/216" class="stretch" />
</div>
<div id="div2">
<img src="http://placekitten.com/567/43" class="stretch" />
</div>
</body>
</html>
By the way, although I prefer placehold.it to placekitten.com I use the last because the images must resize while screen does too.
You can check the result here. (Thanks to ted)