The following html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body class="w3-red">
<div class="w3-main w3-content w3-padding">
<div class="w3-row w3-blue">
<div class="w3-quarter">
<img src="http://www.w3schools.com/w3images/girl_mountain.jpg" style="width:100%">
</div>
<div class="w3-threequarter">
<p>Hello World</p>
</div>
</div>
</div>
</body>
</html>
gives the following result. As you can see there is an extra pixel of padding below the image. Is this by design? An error on my part? A bug? Either way I find it very annoying and would love to know how to get rid of it. Thanks.
Credit here to Mats at bugzilla.
img{margin-bottom:-5px}
should be
img{vertical-align:bottom}
in w3.css
Related
I looked through the official Bootstrap grid layout page and there are many examples of alignment. I am looking forward to a class that will make the layout like
Every content of the first column will start with right alignment and every content of the second column will start with left alignment. If we use justify-content-center class then every content starts with the center. I know how to do it using CSS but I don't want to do this for every content.
Do you have any class that class will set every content in the right alignment?
I hope this is what you're looking for:
Source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md text-right">
<img src="https://via.placeholder.com/200x150/000000/FFFFFF/" />
<h1>Hello World</h1>
<p>Bootstrap grid</p>
</div>
<div class="col-md">
<img src="https://via.placeholder.com/200x150/000000/FFFFFF/" />
<h1>Hello World</h1>
<p>Bootstrap grid</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<!-- bootstrap -->
<link href="../css/lib/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div style="padding:2mm;border-bottom:2px solid blue;">
</div>
</body>
</html>
I don't have any idea about the negative height of div.
Any advice would be usefull.
Edit:
console.log($("#1").outerHeight());
console.log($("#2").outerHeight());
console.log($("#3").outerHeight());
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<style type="text/css">
</style>
</head>
<body>
<div id="1">
<div id="2">
<hr>
</div>
<div id="3">
<p>Text</p>
</div>
</div>
</body>
</html>
If You Mean The Margin Using Negative Value Then We Can Use
<div style="padding:5mm;margin-top:-40px;border-bottom:2px solid blue;">
</div>
Here Margin Holds Negative Value To Displace The Object Towards The Direction Opposite to The Normal Movement Path Simply Margin-top If It Holds Negative Value Then It Moves Towards The Top Instead Of Going Down. Did This Fulfill Your Request?
Hi im kind of new to coding, but eager to learn, im trying to make a new website from scratch and wanted to set up a picture on the left and then next to it on the right something like this...This is the closest i could find.
i can get the image on the left and the icons and text on the right, just not the text to the right of the icons... and cant seem to find any examples. If someone could give me a hand i would be very appreciated.
https://www.w3schools.com/css/css_float.asp
I think this is what you want. In other words, just add text and img link in the html and in css style sheet, use float: left and padding.
Is this what you are trying to implement ? Lookup Bootstrap grid for more help https://getbootstrap.com/docs/3.4/css/
Also you can show your code to make your question more clear.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Bootstrap grid system</h1>
<p>select from 12</p>
<br>
<div class="row">
<div class="col-md-4">
<img src="img.png" class="img-responsive">
</div>
<div class="col-md-8">
GG
<h1>GLHF</h1>
</div>
</div>
</div>
</body>
</html>
I am attempting to create an image gallery using w3.css. I am constructing it with w3-cell-row and w3-cell elements. When I place images of varying size in these w3-cell elements the images will display with unequal heights, contrary to how you would believe they would from reading this:
https://www.w3schools.com/w3css/w3css_layout.asp
I will put some code here that shows the problem:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- link css -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<head>
<title> test </title>
</head>
<body>
<div class="w3-cell-row">
<div class="w3-cell">
<img src="http://shashgrewal.com/wp-content/uploads/2015/05/default-placeholder-300x300.png" style="width:100%;" >
</div>
<div class="w3-cell">
<img src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder.png" style="width:100%;" >
</div>
<div class="w3-cell">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4zIFE2vpdnB_b_qmWEa2NBKd_vFa_7f5XQpZUcyKs6vNNN85G" style="width:100%;" >
</div>
</div>
</body>
</html>
As you can see the images are displayed with varying heights. My expectation would be that the widths of the images would change to create a uniform cell height across the row.
Andrew, you are missing another concept of 'Layout cells Adjust to equal heights', please refer to that section.
In your example I added cell colors to be red green and blue and you can see whats happening. width wont impact height but height impacts other cells height.
Also you can refer to Images URL for responsive images.
Hope this helps!!
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- link css -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<head>
<title> test </title>
</head>
<body>
<div class="w3-cell-row">
<div class="w3-cell w3-red">
<img src="http://shashgrewal.com/wp-content/uploads/2015/05/default-placeholder-300x300.png" style="width:100%;" >
</div>
<div class="w3-cell w3-green">
<img src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder.png" style="width:100%;" >
</div>
<div class="w3-cell w3-blue">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4zIFE2vpdnB_b_qmWEa2NBKd_vFa_7f5XQpZUcyKs6vNNN85G" style="width:100%;" >
</div>
</div>
</body>
Hello friends i have created two page one is index.html and second is about.html . I just want to add back button on about.html using jQuery mobile . i have tried it but back button is not working in my code i dont know what is the problem
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="data-add-back-btn ">Back</div>
<div><h1>Page title</h1>
About us</div>
</div>
</body>
</html>
Please help me. Thanks in advance...
You may try creating your back button by using data-rel="back" as follows:
<a data-role="button" data-rel="back">Back</a>
Full HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<a data-role="button" data-rel="back">Back</a>
<div>
<h1>Page title</h1>
About us
</div>
</div>
</body>
</html>
Check the section "Back" button links of the online doc for more information: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html