Look at the image below, and you'll see that part of one image is cut off.
Details
If you take a look at my HTML/CSS, you'll notice something strange upon resizing the page. It cuts off one image at a time, always the same distance from the top of the window. I've narrowed one part of the problem, which seems to lie in the last piece of the CSS (margin-bottom:-35.35%). Changing that value will change how the "set1" images get cut off in relation to the "mag1" images. I'm using Safari, and everything works how it should in Dreamweaver Live View. It only gives this error in the browser.
I have no clue what is causing this problem. Please help!
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="tester.css" rel="stylesheet" type="text/css">
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="pic1"><img id="set1" src="http://i61.tinypic.com/nv64aq.png"><img id="mag1" src="http://i61.tinypic.com/1tndhc.png"></div>
<div id="pic2"><img id="set2" src="http://i60.tinypic.com/2n87k3t.png"><img id="mag2" src="http://i57.tinypic.com/zixi8j.png"></div>
<div id="pic3"><img id="set3" src="http://i59.tinypic.com/30204fb.png"><img id="mag3" src="http://i61.tinypic.com/25f0lyv.png"></div>
</body>
</html>
CSS
#pic1 {
margin-top: 8%;
}
#pic1, #pic2, #pic3 {
float: right;
width: 68%;
margin-left: 6%;
margin-right: 6%;
margin-bottom:-50px;
position:relative;
}
#pic1 {
z-index:2;
}
#pic2 {
z-index:1;
}
#pic3 {
margin-bottom:0;
}
#mag1, #set1, #mag2, #set2, #mag3, #set3 {
width: 100%;
}
#set1,#set2,#set3 {
margin-bottom:-35.35%;
}
Related
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 1 year ago.
body {
font-family: Avenir;
}
img {
width: 70%;
height: 75%;
float: left;
margin-right: 10px;
cursor: pointer;
}
a {
color: grey;
}
a:hover {
color: black;
}
.title {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>☕️Arrexi's Cafe☕️</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>☕️Arrexi's Cafe☕️</h1>
<div id="body">
<h1 class="title">About Us
<hr>
</h1>
<img src="https://dummyimage.com/600x400/000/fff" alt="Arrexi's Cafe!">
<article id="description">Hello! Welcome to the website of <b>Arrexi's Cafe</b>!<br><br>We are a friendly community which is with many fun bots and an active chat. You can surely chill in our server! Join us now!</article>
<h1 class="title">Feedback</h1>
<hr>
<h3>Have joined our server, and want to give some feedback?</h3>
Enter your suggestion in the following box then press "Submit"!
<br>
<textarea id="feedback"></textarea>
<button onclick="submit()">Submit</button>
</div>
<script src="script.js"></script>
</body>
</html>
I used these HTML codes to try to make a website, but I want the section of the feedback be under the image.
I want the result be
instead of
Can anyone tell me how to do it?
I currently used some <br>s and a character to simulate the result that I want
What youre looking for is a so called clearfix:
What is a clearfix?
Whats happening?
By using float:left youre actually changing the text float - beginning at the point where you set float.
To restore the regular blockish behaviour you need to clear the float again.
body {
font-family: Avenir;
}
img {
width: 70%;
height: 75%;
float: left;
margin-right: 10px;
cursor: pointer;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
a {
color: grey;
}
a:hover {
color: black;
}
.title {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>☕️Arrexi's Cafe☕️</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>☕️Arrexi's Cafe☕️</h1>
<div id="body">
<div class="clearfix">
<h1 class="title">About Us
<hr>
</h1>
<img src="https://dummyimage.com/300x200/000/fff" alt="Arrexi's Cafe!">
<article id="description">Hello! Welcome to the website of <b>Arrexi's Cafe</b>!<br><br>We are a friendly community which is with many fun bots and an active chat. You can surely chill in our server! Join us now!</article>
</div>
<h1 class="title">Feedback</h1>
<hr>
<h3>Have joined our server, and want to give some feedback?</h3>
Enter your suggestion in the following box then press "Submit"!
<br>
<textarea id="feedback"></textarea>
<button onclick="submit()">Submit</button>
</div>
<script src="script.js"></script>
</body>
</html>
I wrapped your whole upper part into a div with the clearfix class.
Inside that div you change the float behaviour by using float:left on the image.
By adding the clearfix to the div, there will be a after Element which sets clear:both which basically restores regular behaviour so everything after that doesnt float anymore.
Fore more information and some live examples see https://www.w3schools.com/css/css_float.asp, https://www.w3schools.com/css/css_float_clear.asp and https://www.w3schools.com/css/css_float_examples.asp.
I've got the following css file :
.h_bg{
padding:22.4% 0;
background-size:100% auto;
background-position:center top;
background-repeat:no-repeat;
position:relative;
height: 2em;
}
.h_bg h1{
width: 100%;
position:absolute;
line-height:1;
top: 23%;
color:#fff;
font-size:500%;
text-align: center;
padding-bottom: 15%;
background-size:89px 183px;
}
#media screen and (min-width:1001px)
{
.h_bg{
background-image:url(/images/bg1-desktop.png);
}
}
#media screen and (min-width:1001px) and (max-width:1300px)
{
.h_bg h1{
background-size:7% auto;
padding-bottom: 16%;
}
}
And the following html page :
<!doctype html>
<html>
<head>
<title>Beauty app</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="h_bg">
<h1>text</h1>
</div>
</body>
</html>
css link extactly to the place, where css file is. Unfortunately, text string is invisible and this code shows blank page. What can be a problem? Any help would be appreciated.
the problem is here:
color:#fff;
The #fff is forcing your H1 text in h_bg class to be white color, therefore it is invisible
Just incase you hit similar issues in future. This is how you can debug it.
Open your browser (i was using chrome) then right click on the element, for your instance its kind of difficult because you can't see it then click on inspect element.
On the bottom right corner you should see your CSS properties, try play around with it till you found your problem.
Good morning everyone,
I have a quick question about some background images in MapBox. For those who don't know MapBox, it is a online provider of custom maps that quickly create beautiful interactive maps and data visualizations. I created a map project, and wanted to put that map as a background image. I am given an embed option and here is my code so far:
<!DOCTYPE html>
<html>
<head></head>
<body>
<iframe width='100%' height='800px' frameBorder='0' src='https://a.tiles.mapbox.com/v4/ericpark.k8ehofdl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA'></iframe>
</body>
</html>
However, I want the Mapbox html to take the entire background.I have tried placing the url provided into a background-image: url() in css, but it does not function.
body {
background-image: url("https://a.tiles.mapbox.com/v4/ericpark.k8ehofdl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA");
}
Does anyone know how I might do this?
Thanks,
Eric
Jon here from Stack - I actually do most of the geo stuff here.
If you want to do this the proper way, you're going to have to embed it in a div and put the content that you want over it in its own container div. You can see a pretty straightforward implementation of what you want in the API docs on Mapbox. You can adjust the settings of the map using the JavaScript API (hiding the controls, setting the center, etc.).
L.mapbox.accessToken = 'pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA';
var map = L.mapbox.map('map-container', 'ericpark.k8ehofdl');
html,
body {
height: 100%;
margin: 0px;
padding: 0px
}
#map-background,
#map-container,
#map-overlay,
#content {
width: 100%;
min-height: 100%;
position: absolute;
}
#map-background {
z-index: -1;
}
#map-container {
z-index: 0;
}
#map-overlay {
z-index: 1;
background: none;
}
#content {
z-index: 0;
}
<html>
<head>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
</head>
<body>
<div id="map-background">
<div id="map-container">
</div>
<div id="map-overlay">
</div>
</div>
<div id="content">
<!-- This is where your regular content should be -->
<p style="color: #fff; text-align: center; font-family: Helvetica; font-size: 2.0em;">This is where your foreground code should be.</p>
</div>
</body>
</html>
Good luck Eric :)
EDIT: Restoring interactivity
I've changed the code to get rid of the overlay and some of the blocking styles. Try that.
L.mapbox.accessToken = 'pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA';
var map = L.mapbox.map('map-container', 'ericpark.k8ehofdl');
html,
body {
height: 100%;
margin: 0px;
padding: 0px
}
#map-container {
width: 100%;
min-height: 100%;
position: absolute;
}
#content {
position: absolute;
}
<html>
<head>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
</head>
<body>
<div id="map-container">
</div>
<div id="content">
<!-- This is where your regular content should be -->
<p style="color: #fff; text-align: center; font-family: Helvetica; font-size: 2.0em;">This is where your foreground code should be.</p>
</div>
</body>
</html>
To mimic a "background-image" effect with mapbox you could do something like the following:
<!DOCTYPE html>
<html>
<head>
#map_bg {
position:relative;
width:100%;
height:800px;
}
#map_bg iframe {
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
}
.content {
z-index:1;
position:relative;
}
</head>
<body>
<div id="map_bg">
<iframe class="mapbox" frameBorder='0' src='https://a.tiles.mapbox.com/v4/ericpark.k8ehofdl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA'></iframe>
<div class="content">
This is other content on the page.
</div>
</div>
</body>
</html>
You position the map absolutely relative to it's parent which allows content to overlap it (much like a background image). By adding a z-index:1 to the other content you can ensure it appears on top of the map;
I dont think just putting link as background image will work. Mapbox might be rendering map in canvas.
I just found this. Try this. I am not much familiar with mapbox
I am trying to place a solid color banner that stretches across the top of the screen like on this website, facebook, and others. For some reason I am encountering difficulties doing this
I created a div tag in my HTML file for the banner and tried to apply CSS to the div tag but nothing is working.
<!DOCTYPE html>
<html>
<head>
<style>
#banner {
background-color: #333FF;
font-family: Arial;
position: absolute;
left: 0;
right: 0;
padding:15px;
height:800px;
background-size:100%;
}
</style>
<title>Random Password Generator</title>
</head>
<body>
<div id="banner"><h1>fdsfdsfdsfds</h1></div>
</body>
</html>
I also tried linking to an external CSS file but that isn't working either.
How can I make a simple, solid color banner at the top of the page, on every page?
#333FF is an incorrect color. It should be like this: #333FFF. See the W3C Specification for more info on the length of hex codes (hint: they need to be six characters long).
Working example : http://jsfiddle.net/ntim/SKnxP/
position:absolute; also doesn't seem necessary in your case.
You don't actually need to use position absolute unless you want it to be over the top of anything. Instead, you can just use the following:
<style>
#banner {
background-color: #333FFF;
font-family: Arial;
padding:15px;
height:800px;
background-size:100% 100%;
}
</style>
here is something based on a template I use:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="CSS-STYLE-SHEET.css">
<style type="text/css">
body
{
background-color: #E7E7E7;
text-align: center;
font-family: Arial, Helvetica;
font-size: 15px;
color: #000000;
border-spacing: 0;
border-collapse:collapse;
padding: 0;
margin: 0;
}
#Banner {
background-color: #333FFF;
top: 0; /* Probably not necessary... */
height: 40px;
width: 100%; /* Also probably not necessary */
}
#ContentMain
{
background-color: #FFFFFF;
height: 100%;
}
</style>
</head>
<body>
<div id="ContentMain">
<div id="Banner">Banner goes here</div>
Content goes here
</div>
</body>
</html>
should work.. the grey bit at the back is because the html and body tags dont fill the entire screen - something like this should fix it (I would use min-height), but I have not included it here as then if you want a page taller than the browser window and works in Internet Explorer things get annoying...
Jsfiddle here
I am playing around with webdesign, I always assumed that div's that are positioned relative, always are ordered in the way they are coded. But now I have a div that jumps above another although they are both relative.
A screenshot of the problem:
Here is the code of my index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/layout.css">
<link rel="stylesheet" type="text/css" href="CSS/nav.css">
<meta name="description" content="Website template 1">
<meta name="keywords" content="template">
<meta name="author" content="">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="MainContainer">
<div id="HeaderContainer">
<div id="NavigatieContainer">
<ul id="nav">
<!-- LVL 1 -->
<li>
Home
</li>
<li>
About
</li>
</ul>
</div>
</div>
<div id="BodyContainer">
<p>test</p>
</div>
</div>
</body>
</html>
And here is the code of my layout css:
/*Basic tags*/
body {
background-color: #efebdf;
}
/*DIV ID's*/
div#MainContainer {
width: 60%;
margin-left:auto;
margin-right:auto;
}
div#HeaderContainer {
position: relative;
}
div#NavigatieContainer {
float: right;
}
div#BodyContainer {
position: relative;
background-color: brown;
}
and the code of my navigation css so far, although I don't think the problem is here:
a {
color:#333333;
}
#nav {
/*-webkit-box-shadow:rgba(0, 0, 0, 0.4) 0 1px 3px;*/
border-radius: 0.3em;
position: relative;
z-index: 5;
}
#nav li {
margin-right: 10px; /*spacing tussen de list items*/
float:left;/*zorgt voor naast elkaar te plaatsen*/
list-style:none;/*Haalt list bolletjes weg*/
position:relative;
border-radius: 0.3em;
background-color: #e2e0d3;
}
#nav a {
color:black;
display:block;
font-weight:bold;
margin:0;
padding:8px 20px;
text-decoration: none;
}
#Adrift almost got it right, but he mentioned the wrong div. The overflow property should be on the HeaderContainer.
div#HeaderContainer {
position: relative;
overflow: auto;
}
I've created a jsfiddle for you with the result. You might want to add it to any following questions as it allows us to easier detect the problem.
http://jsfiddle.net/7Kx9g/
A little more background informations; once an image floats it is no longer in the document and therefor does not reserve it's own height. A trick called clearfix can be used to prevent it, but it's an advanced way of using overflow: auto; or overflow: hidden;
Do you know how to use inline-block? IMO, it's much easier to organize things with display:inline-block; than to use floats, because float makes it ignore several CSS rules, and the larger your project becomes, the more troublesome this "rule-ignoring" has the POTENTIAL to become.
The problem is caused by the float. Put clear:both; in the css for div#BodyContainer.
Look here. http://jsfiddle.net/aKy67/
Total agree #HC_