Seems a very strange problem to me, but the links on this site (www.dartsocialmedia.co.uk/bird) are disabled in internet explorer. It seems to work fine on all the other browsers I've tested. The problem seems to be that internet explorer doesn't recognise them as links.
Any ideas what the problem is?
Edit: also, form inputs are not recognised as such.
Here's the HTML header:
<!DOCTYPE html>
<html>
<head>
<title>bird</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<link href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/style.css" rel="stylesheet">
<link href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/css/font-awesome.min.css" rel="stylesheet">
<link href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/css/custom-responsive.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/ico" href="http://www.dartsocialmedia.co.uk/bird/wp-content/themes/birdtheme/img/favicon.ico">
<meta name='robots' content='noindex,nofollow' />
<link rel='stylesheet' id='admin-bar-css' href='http://www.dartsocialmedia.co.uk/bird/wp-includes/css/admin-bar.min.css?ver=3.5.2' type='text/css' media='all' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.dartsocialmedia.co.uk/bird/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.dartsocialmedia.co.uk/bird/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 3.5.2" />
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
html { margin-top: 28px !important; }
* html body { margin-top: 28px !important; }
</style>
</head>
It seams that z-index: 999 in your css file at line 5 cause the problem.
I suggest you change your CSS bacause body:before overlap the whole window:
1) Implements the border into the body element, add:
body {
border: 5px solid #dd127b;
width: auto;
margin: 10px;
}
2) Use the body:before to place the top border with fixed position to hide overflow when scrolling:
body:before {
border-bottom: 5px solid #dd127b;
display: block;
content: '';
position: fixed;
top: 0;
left: 10px;
right: 10px;
background: #111;
padding-top: 10px;
z-index: 999;
}
3) Use the body:after to place the bottom border:
body:after {
border-top: 5px solid #dd127b;
display: block;
content: '';
position: fixed;
bottom: 0;
left: 10px;
right: 10px;
background: #111;
padding-bottom: 10px;
z-index: 999;
}
Related
I want to use an HTML tooltip and also import some features from bootstrap. The problem is that when I add:
<link rel="stylesheet" type="text/css" href="$shared/resources/css/bootstrap-3.0.3.min.css"/>
Tooltips are not working anymore. I'm working in eXist-db and using exide, here is my HTML code:
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8"/>
<title data-template="config:app-title"> ...</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta data-template="config:app-meta"/>
<link rel="shortcut icon" href="$shared/resources/images/exist_icon_16x16.ico"/>
<link rel="stylesheet" type="text/css" href="$shared/resources/css/bootstrap-3.0.3.min.css"/>
<link rel="stylesheet" type="text/css" href="resources/css/style.css"/>
<script type="text/javascript" src="$shared/resources/scripts/jquery/jquery-1.7.1.min.js"/>
<script type="text/javascript" src="$shared/resources/scripts/loadsource.js"/>
<script type="text/javascript" src="$shared/resources/scripts/bootstrap-3.0.3.min.js"/>
<html>
<head>
<style>
.tooltip {
position: relative;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: white;
color: black;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
width: 240px;
bottom: 110%;
left: 20%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
visibility: visible;
}
</style>
</head>
<body id="body">
<div style="width: 20%; height: 90px; float: left; margin:10px">
<h4>Original Text:</h4>
<div data-template="letter:text_orig"/>
</div>
</body>
</html>
</html>
Here is my letter.xql where I use tooltip:
declare function letter:text_orig($node as node(), $model as map())
{
let $resource := collection('/db/apps/Tobi-oshki/data')
let $xml_id := letter:text_people('/db/apps/Tobi-oshki/data')
for $rs in $resource//tei:rs
for $id in $xml_id
return
if (data($rs/#key) eq $id)
then
<html>
<div class="tooltip">{$rs}
<span class="tooltiptext">{letter:text_lem(data($rs/#key))}</span>
</div>
</html>
else
("")
};
I'd recommend not relying on the bootstrap version that ships with shared-resources (which is deprecated since exist v 5.3.0) its outdated and unmaintained.
I would suggest packaging you own preferred dependencies and css. As a last resort you can experiment with replacing the js and css files inside shared resources with later versions, to see if that fixes your problem.
css causes some red boxes that cannot be understood.
Chrome/80.0.3987.149 Linux x86_64
code:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flow</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="assets/css/b.css">
<style>
/* aaaaaaaaaa */
</style>
</head>
<body>
<style>
*:not(body):not(p) {
color: red;
font: 18px serif;
height: 100px;
width: 100px;
overflow: auto;
display: block;
border: 1px red solid;
}
</style>
</body>
</html>
demo:
https://stackblitz.com/edit/js-z6wf15?file=index.html
Is this a bug?
"special" doesn't have any defined meaning in HTML or CSS terms.
*:not(body):not(p) will select all elements that aren't the body or a p including html, head meta, etc.
I am new with HTML and I am trying to center the H1 using css class but it is not working. I
My HTML is the following :
<!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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class='title'>
<h1>Technologies</h1>
</div>
</body>
</html>
and my CSS is the following :
multi-input {
display: inline-block;
margin: 0 20px 20px 0;
}
button {
background-color: #eee;
border: 1px solid #ddd;
font-size: 16px;
height: 30px;
margin: 0 10px 20px 0;
}
body > div {
align-items: center;
display: flex;
justify-content: center;
}
label {
display: block;
margin: 0 20px 20px 0;
}
div.title {
text-align: center;
}
I inspired myself from this tutorial : https://www.w3schools.com/cssref/pr_text_text-align.ASP
I also tried adding this h1 {text-align: center;} in my css so that all H1s would be centered but it is still not working.
Can anyone help? Thanks!
You have to delete the Slash (/) from <link rel="stylesheet" href="/style.css">
like this : <link rel="stylesheet" href="style.css">
<!--not this but u can delete u slice and u css will work again-->
<link type="stylesheet" href="/style.css">
<!--NOT .div title but u can try this in u html-->
<div class="title">
<h1>This Title</h1>
<style>
.title h1{
text-align:center;
}
</style>
</div>
<!--THANKS,greetings from Indonesia-->
Try this if you want to center your h1:
<style>
h1 {text-align: center;}
</style>
I'm trying to create a hero image for a website, and I'm receiving a random white bar the bottom of my website.
This is the HTML
* {
margin: 0;
padding: 0;
box-sizing: padding-box;
}
img {
width: 100%;
overflow: hidden;
}
body {
margin: 0px 0px;
}
<img src='https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg' />
img element is by default display:inline-block; vertical-align:baseline;
That baseline alignment is what you see.
So either display:block; or vertical-align:top;:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel='stylesheet' type="text/css" href="styles.css"/>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<img style="display:block" src='https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg'/>
</body>
</html
Another option - to set your image to background:
body {
background: no-repeat url(https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg);
background-size:cover;
}
<body>test</body>
So, my friend and I are working on a mod for a game called Minecraft and I had the duty to make a website where we publish this mod and tell every one what this mod is about.
The problem that I'm currently facing is that I can't get my objects to shrink/grow to fit any browser resolution/window resolution. Currently, I have it so it is formatted to my screen resolution (1920 x 1080) and it seems to be fine, but when I make the window smaller, I have to use the horizontal scrolling bar to get to different areas on the html page.
When I shrink the window, I want it to fit that window.
Same goes with screen monitors. If it isn't my screen resolution, you have to use the horizontal scrolling bar.
How do I make it so my page objects will change size depending on window size/resolution size?
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"</meta>
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="MOPM-ico/favicon-144.png">
<meta name="msapplication-config" content="MOPM-ico/browserconfig.xml">
<link rel="shortcut icon" href="MOPM-ico/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="MOPM-ico/favicon.ico">
<link rel="icon" type="image/png" sizes="310x310" href="MOPM-ico/favicon-310.png">
<link rel="icon" type="image/png" sizes="196x196" href="MOPM-ico/favicon-196.png">
<link rel="icon" type="image/png" sizes="160x160" href="MOPM-ico/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="MOPM-ico/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="MOPM-ico/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="MOPM-ico/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="MOPM-ico/favicon-16.png">
<link rel="apple-touch-icon" sizes="152x152" href="MOPM-ico/favicon-152.png">
<link rel="apple-touch-icon" sizes="144x144" href="MOPM-ico/favicon-144.png">
<link rel="apple-touch-icon" sizes="120x120" href="MOPM-ico/favicon-120.png">
<link rel="apple-touch-icon" sizes="114x114" href="MOPM-ico/favicon-114.png">
<link rel="apple-touch-icon" sizes="76x76" href="MOPM-ico/favicon-76.png">
<link rel="apple-touch-icon" sizes="72x72" href="MOPM-ico/favicon-72.png">
<link rel="apple-touch-icon" href="MOPM-ico/favicon-57.png">
<link type="text/css" rel="stylesheet" href="styles.css" />
<title>
MOPM~
</title>
</head>
<body>
<header>
<!--header-->
<div class="topHead">
<img id="headertxt" src="pictures/header.png" width="1919px" height="120px"/>
</div>
<!--header buttons-->
<div class="headButtonSeperator">
<div class="headButton">home</div>
<div class="headButton">about</div>
<div class="headButton">mod info</div>
<div class="headButton">downloads</div>
<div class="headButton">videos</div>
<div class="headButton">links</div>
<div class="headButton">dev team</div>
</div>
</header>
<!--content-->
<div id="home">
</div>
</body>
</html>
CSS:
body
{
background-image: url('pictures/background.png');
}
/*--Classes--*/
.topHead
{
width: 1919px;
height: 120px;
background-color: #272B30;
float: middle;
position: absolute;
margin: auto;
top: 0px;
left: 0px;
right: 0px;
display: block;
border-bottom: 4px dashed #1EC20B;
}
.headButtonSeperator
{
width: 980px;
height: 40px;
background-color: none;
position: absolute;
top: 125px;
left: 509px;
}
.headButton
{
width: 120px;
height: 10px;
background-color: #313A3D;
margin-left: 5px;
display: inline-block;
float: left;
font-size: 0px;
border-left: 3px solid #282E30;
border-bottom: 3px solid #282E30;
border-bottom-left-radius: 20px;
}
.headButton:hover
{
width: 140px;
height: 35px;
background-color: #313A3D;
margin-left: 10px;
position: relative;
display: inline-block;
color: #DB481B;
font-size: 20px;
text-align: center;
line-height: 35px;
font-family: minecraft;
text-shadow: 2px 2px #7A5E55;
border-left: 3px solid #282E30;
border-bottom: 3px solid #282E30;
border-bottom-left-radius: 20px;
}
/*--ID's--*/
#home
{
display: block;
width: 918px;
height: 1000px;
background-color: white;
position: absolute;
top: 500px;
left: 500px;
float: middle;
z-index: -1;
}
/*--Fonts--*/
#font-face
{
font-family: minecraft;
src: url(fonts/minecraft.ttf);
}
#font-face
{
font-family: McBold;
src: url(fonts/ARCADEPI.ttf);
}
#font-face
{
font-family: McBlock;
src: url(fonts/Square.ttf);
}
#font-face
{
font-family: MccBlock;
src: url(fonts/Squareo.ttf);
}
Edit:
I am not getting any answers and I really want to get this done so I can work on the other aspects of the page.
Do I need to use percentages?
What am I doing wrong that wont make it position according to resolution/window size?
Edit:
So I understand now that I have to make my page responsive by not using px
How exactly do I make it responsive and what measurements can I use?
Edit:
I did a little bit of testing with percentages and it didn't seem to work.
In this picture, i am testing the head banners width with a width: 100%
I made the window smaller and the top wording (which is an image) doesn't
shrink down to the size of the window.
http://prntscr.com/47v2ub <---image
Edit:
Update on the above edit:
I figured out that i had to make >.topHead also have a >width: 100
The problem i am facing now is that if the browser gets too small, all of my buttons bunch up
To make a page responsive you need to keep two things in mind:
Don't use fixed quantities for width and other dimensions on your page (like px).
If you do, control things with Media Queries which let you change the styles on your page according to the changes in the screen size.
See More