I'm trying to center elements inside a div. Here is an example:
I made a wrapper for the number inputs and trying to apply text-center property on them but it's not working. I also changed the display to block, but that doesn't solve it either. What am I missing?
<!doctype html>
<html>
<head>
<title>Learning Ajax</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"> </script>
<!-- Or source it to http://code.jquery.com/jquery-1.11.2.min.js
This will be faster as jquery website will be faster than mine. -->
<style type="text/css">
h1,h2
{
text-align:center;
}
.num1,.num2
{
text-align:center;
}
.inputs
{
text-align:center;
display:block;
}
</style>
</head>
<body>
<div id="container">
<h1>Calculator</h1>
<h2>Enter two numbers and select an operation</h2>
<div id="inputs">
<input id="num1">Number 1</input>
<input id="num2">Number 2</input>
</div>
</div>
</body>
</html>
try giving your #inputs a width and set left/right margins to auto.
#inputs {
width: 50%;
margin: 0 auto;
}
Related
So I have a probably really dumb question but I'm very new to coding.
I want to be able to resize and center my logo image (which is currently taking up the whole page on preview) but I've tried so many different ways of resizing in CSS and nothing at all happens. What am I missing??
Besides the standard beginning of HTML file this is all I have in my HTML file:
<div class="header">
<img class="logo" src="images/logo.png" alt="\Stuff logo">
</div>
These are the only lines I have in my CSS file:
body {
margin: 0 auto;
}
.logo {
max-width: 20%;
max-height: 20%;
}
img{
display:block;
margin:0 auto;
width:10%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="header">
<img src="https://images.unsplash.com/photo-1575881875475-31023242e3f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<link rel="stylesheet" href="movie.css">
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img src="images/rancidbanner.png" alt="Rancid Tomatoes">
</div>
</body>
</html>
so far i have succeeded with
img{
width: 100%;
}
but i want to it make it so only this image fits and not the other ones.
i tried doing it with
img.fit
on my css file, but this just returns it back to normal.
.fit img{
width: 100%;
}
should do it for you. The div's class name is fit, not the image's. Therefore img.fit won't work.
If your image had the class .fit then you could just do
.fit {
width: 100%:
}
If you remove class="fit" from div and add it to img then the effect will be the same for this image as you had for all images before.
You can Go little easier!
Just add width="100%" in <img> tag.
<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img width="100%" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR8g4PCYI2ssAVPKlJmC9q4T_k84PE7zOHqAWultSDb-BbSy5YfK-5P0I1f" alt="Rancid Tomatoes" >
</div>
</body>
</html>
I created a test html page using Twitter Bootstrap 4 Alpha 2. As shown below I have three divs with col-md-4 each. The first div has text wrapped in p. The problem is the text extends beyond it's container occupying the space of the other 2 divs. How do you keep the text in its own column?
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
<style>
div {
border-style: solid;
border-color: #0000ff;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4"><p>Box 1 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p></div>
<div class="col-md-4"><p>Box 2</p></div>
<div class="col-md-4"><p>Box 3</p></div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.mi1n.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
</body>
</html>
This is 100% work for you:
p{word-break: break-all;}
Just Add 'overflow:auto;' to your Style code.
border-style: solid;
border-color: #0000ff;
overflow:auto;
HTML:
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<h1>Hello World!</h1>
<h2>A few facts about the world we live in</h2>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/640px-The_Earth_seen_from_Apollo_17.jpg" />
</body>
</html>
CSS:
img {
width: 300;
}
h1 {
font-family: Georgia;
background-color: red;
}
I have saved my html and css in the same folder. My css file is named as stylesheet.css.
I am able to edit but not through my css file which means my css file and html are linked but I somehow can't seem to edit images. Somebody help me!
the issue is your units. 300 of what? You need to add a % or px or em.
img{
width:300px;
}
Fiddle with 300px
https://jsfiddle.net/jL7Lqfv8/
Are you sure your CSS is being pulled in? Check your network tab in your browser to ensure it is. Also, try giving some units to the image width:
img {
width: 300px;
}
I want to achieve this: two decoration elements (sort of waves) on both sides of the screen. Here's what I've got so far. If more elegant solution is possible (like styling with CSS only body element), then please advise.
Below solution would be fine, if both < img > elements would not be visible.
You can check this in action.
Here's the working FIDDLE.
Can you help?
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="styles/style.css" >
<style type="text/css">
.background_left {
background-image:url("http://www.destadesign.com/destacms/images/background_border_left.png");
background-repeat:repeat-y;
background-position:left;
position:absolute;
left:0;
}
.background_right {
background-image:url("http://www.destadesign.com/destacms/images/background_border_right.png");
background-repeat:repeat-y;
background-position:right;
position:absolute;
right:0;
}
.background_left, .background_right {
height:100%;
}
</style>
</head>
<body>
<div class="background_left">
<img src="http://www.destadesign.com/destacms/images/background_border_left.png">
</div>
<div class="background_right">
<img src="http://www.destadesign.com/destacms/images/background_border_right.png">
</div>
<div class="content" style="height:500px;"> <!-- content -->
</div>
</body>
</html>
Just do it like this:
body {
background:url("http://www.destadesign.com/destacms/images/background_border_left.png") left repeat-y,url("http://www.destadesign.com/destacms/images/background_border_right.png") right repeat-y;
}
This CSS adds two background images to body, positions them right or left respectively, and sets the repeat-y, so it doesn't fill the screen.
JSFiddle Demo