EDIT: The background is simply an image & the section where I place the image is the one I have given
My webpage currently looks like this and I have indicated where I want the button, however I'm very new to coding in general and not sure how to achieve this.
Picture of website page:
This is my html code, very simple just needed to add the button
<section class="slide kenBurns">
<div class="content">
<div class="container">
<div><p class="ae-2">
</p></div>
<div class="wrap">
<div class="fix-7-12">
<!-- <h1 class="ae-1">Messes Make Memories</h1> -->
</div>
</div>
</div>
</div>
<img
src="assets/img/background/flood2.png"
width="1450"
height="850"
></img>
</section>
well, try this one code
<!DOCTYPE html>
<html>
<head>
<style>
.img {
width:100%;
height: auto;
top:0;
left:0;
position: relative;
z-index: 1;
}
.anybutton {
top:11%;
left:55%;
width:100px;
height:40px;
position: absolute;
z-index: 2;
background: orange;
}
</style>
</head>
<body style="text-align:center; margin: 0px;">
<div class="mycenter" id="">
<img src="assets/img/background/flood2.png" class="img" id="img" />
<input type="button" class="anybutton" id="myab" value="Right Here" />
</div>
</body>
</html>
There 2 types of a buttons
There the real button. Its used to fire an event for JavaScript. It works as in the example below and can by styled like below. You can insert it whereever you want.
button {
background-color: blue;
width: 200px;
font-size: 20px;
padding: 10px;
border-radius: 5px;
border: 3px solid yellow;
color: white;
cursor: pointer;
}
<button id="ID">I'm a Button</button>
Then there is the Pseudo-Button. Its not a real button. It is just a div box to style a link like a button:
.button {
background-color: blue;
width: 200px;
font-size: 20px;
padding: 10px;
border-radius: 5px;
border: 3px solid yellow;
color: white;
text-align: center;
}
<div class="button">I'm a Button</div>
Insert a <button> tag in the same parent div which has code for this particular section
Set the css property of the parent element to position: relative
Set the css property for the <button> to position: absolute
Lastly, use
top : 40px;
right : 100px;
for the css property of button tag
Note: Change the value of top and right property as per convenience.
.button {
border: none;
padding: 15px 42px;
border-radius: 15px;
color: magenta;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 8px 10px;
cursor: pointer;
}
.button3 {
background-color: pink;
left: 50%;
position: absolute;
}
<button class="button button3">Button 3</button>
.button {
border: none;
padding: 15px 42px;
border-radius: 15px;
color: magenta;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 8px 10px;
cursor: pointer;
}
.button3 {
background-color: pink;
left: 50%;
position: absolute;
}
Related
I am having issues with my styling for a landing page on SharePoint.
SharePoint loves to write over HTML with its own which makes the styling a bit funky.
There are a few table elements that appear with the element selector in the developer tools on the page, but I do not believe those are interfering with my custom HTML. There are two s that appear and I believe is messing with my HTML/CSS. They are both #s4-bodyContainer & #contentRow. The more I look at it it seems that the #s4-bodyContainer is the one it will not fill. I have changed the margin of it to 0, as well as the width to 100% and the content still will not cover the whole width/height of the containing div?
Here is my relevant HTML/CSS:
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#s4-workspace{
overflow: hidden;
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
}
.troopers {
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
.flexbox-container {
margin-top: 0px;
width: 100%;
}
html, body {margin: 0; height: 100%; overflow: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Example Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Projects Site</h1>
<h1 class="gold">Insert Sample Text</h1>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 1
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
</div>
</div>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 2
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
Sub 4
Sub 5
</div>
</div>
</div>
</div>
<footer>
<img src="" class="logo"/>
</footer>
</body>
</html>
Here is what they look like on page:
If I'm not mistaken, the CSS rules for the #s4-bodyContainer on SharePoint are not inline (from external file: corev15.css). Meaning you should be able to override them if you attach your CSS at the end of the master-page body. If it doesn't work you can resort to the !important tag to give your CSS properties precedence. checkout CSS Specificity.
Using ! important doesn't always fixes the issue. The problem basically with ! important is perhaps your styling library might also be using it. So try checking whether your margin and width property is being applied to that specific section through Google inspector or any other browser inspector. Try checking whether your styling software has made a property called max-width and whether it is being applied. And most of all if a little modification and fidlling with ! important doesn't work. Go for inline css..
That is an issue with space if image is used as original inline-element like an text element. Solution:
Just add
display:block; to .troopers
See example!
(Alternative: set line-height: 0; font-size: 0 to wrapper of image div.tst. That avoid unwhanted space from text effects as well.)
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#s4-workspace{
overflow: hidden;
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
}
.troopers {
/* ADD ... */
display: block;
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
.flexbox-container {
margin-top: 0px;
width: 100%;
}
html, body {margin: 0; height: 100%; overflow: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Example Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Projects Site</h1>
<h1 class="gold">Insert Sample Text</h1>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 1
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
</div>
</div>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 2
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
Sub 4
Sub 5
</div>
</div>
</div>
</div>
<footer>
<img src="" class="logo"/>
</footer>
</body>
</html>
After a deep swipe of anything on the internet that could remotely helpful to this issue, I finally came across a similar topic on the MSDN :
The solution says to implement this:
.ms-webpartPage-root{
border-spacing:0px!important;
}
And it works!
I have this login page made from HTML5 and CSS3 and I'm having trouble adjusting the Login Button. Every time I try to align it with the margin: attribute, it affects the "Welcome" text as well. How can I move the button only without affecting the text?
<!DOCTYPE html>
<head>
<style>
html {
background-image: url('http://image.downloadwap.co.uk/wallpapers/wp/18/nature/maligne-st_pJi7nPeU.jpg');
background-repeat: no-repeat;
min-height: 100%;
background-size: cover;
}
h1{
color: #ffffff;
font-size: 40px;
margin-top: 20px;
}
#Login{
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
background-color: #0095f0;
display: inline-block;
border: none;
color: #ffffff;
font-weight: bold;
border-radius: 4px;
size: 15px;
}
</style>
</head>
<body>
<form action="oof">
<button id="Login" >
Login
</button>
</form>
<h1 align="center">Hello<br /> Welcome!</h1>
<img src="http://image.downloadwap.co.uk/wallpapers/wp/18/nature/maligne-st_pJi7nPeU.jpg"
width="100%" height="100%" size=">
</body>
Where would you like to put the button? You could try in the button css:
position: absolute;
top: 20px;
right: 20px;
Also have a look at this css-tricks article on position
Use of absolute defines how an element is positioned in a document.
you can use left and right for their respective position
html {
background-image: url('http://image.downloadwap.co.uk/wallpapers/wp/18/nature/maligne-st_pJi7nPeU.jpg');
background-repeat: no-repeat;
min-height: 100%;
background-size: cover;
position: relative;
}
h1{
color: #ffffff;
font-size: 40px;
margin-top: 20px;
}
#Login{
position: absolute;
padding: 10px 20px;
text-align: center;
background-color: #0095f0;
display: inline-block;
border: none;
color: #ffffff;
font-weight: bold;
border-radius: 4px;
size: 15px;
left: 50px
}
<form action="#">
<button id="Login" >
Login
</button>
</form>
<h1 align="center">Hello<br /> Welcome!</h1>
<img src="http://image.downloadwap.co.uk/wallpapers/wp/18/nature/maligne-st_pJi7nPeU.jpg"
width="100%" height="100%" size=">
I am making a website with a navigation menu on the top. I have multiple buttons with dropdown menus. I want to make the buttons in all in a row at the same height and I want the buttons to be in the middle. Here is my code:
/* Links CSS */
a,
a:visited,
a:active {
text-decoration: underline;
color: white;
}
a:hover {
color: red;
text-decoration: underline;
}
/* Element CSS */
html,
body {
margin: 0px;
background-color: white;
}
html {
height: 100%;
width: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
padding-bottom: 6rem;
min-height: 100%;
}
.button,
.games,
.programs,
.apps,
.misc {
font-family: 'Arsenal';
font-size: 18px;
text-decoration: underline;
background: transparent;
padding-top: 1%;
padding-bottom: 1%;
padding-left: 1.5%;
padding-right: 1.5%;
cursor: pointer;
border: 0px;
}
.content {
font-family: 'Arsenal';
font-size: 15px;
text-decoration: none;
background-color: white;
border: 0px;
cursor: pointer;
}
.button:hover,
.content:hover,
.games:hover,
.programs:hover,
.apps:hover,
.misc:hover {
background-color: #f0efef;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
padding: 0.5%;
}
.games-dropdown {
position: relative;
display: inline-block;
}
.progams-dropdown {
position: relative;
display: inline-block;
}
.apps-dropdown {
position: relative;
display: inline-block;
}
.misc-dropdown {
position: relative;
display: inline-block;
}
.show {
display: block;
}
/* Div CSS */
#page {
margin-top: 0px;
}
#title {
font-family: 'Arsenal';
font-size: 37px;
padding-top: 0.5%;
color: black;
display: inline-block;
cursor: pointer;
}
#links {
margin: auto;
display: inline-block;
overflow: auto;
}
#content {
background-color: white;
border: 1px solid black;
border-radius: 3px;
margin-left: 10%;
margin-right: 10%;
box-shadow: 1px 1.5px #8f8f8f;
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #f0efef;
text-align: center;
border-top: 1px solid black;
font-family: 'Arsenal';
font-size: 15px;
}
<!-- HTML -->
<center>
<div id="links">
<!-- Code For Dropdown Menus | Code From http://www.w3schools.com/ | Thanks To Them!-->
<!-- Games Dropdown Menu: Browser and Downloadable-->
<div class="programs-dropdown">
<button class="programs" onclick="games()" title="Games">Games</button>
<div id="gamesDropdown" class="dropdown-content">
<button class="content" onclick="download()">Download</button>
<button class="content" onclick="online()">Online</button>
</div>
</div>
<!-- Programs Dropdown Menu: Windows and Max OS X-->
<div class="programs-dropdown">
<button class="programs" onclick="programs()" title="Programs">Programs</button>
<div id="programsDropdown" class="dropdown-content">
<button class="content" onclick="windows()">Windows</button>
<button class="content" onclick="mac()">Mac OS X</button>
</div>
</div>
<button class="button" onclick="websites()" title="Websites">Websites</button>
<button class="button" onclick="home()" title="Home">Home</button>
<!-- Apps Dropdown Menu: IOS and Android -->
<div id="apps-dropdown">
<button class="apps" onclick="apps()" title="Apps">Apps</button>
<div id="appsDropdown" class="dropdown-content">
<button class="content" onclick="ios()">IOS</button>
<button class="content" onclick="android()">Android</button>
</div>
</div>
<button class="button" onclick="blog()" title="Blog">Blog</button>
<!-- Misc. Dropdown Menu: Chrome Extensions, GitHub, Etc.-->
<div id="misc-dropdown">
<button class="misc" onclick="misc()" title="Misc.">Misc.</button>
<div id="miscDropdown" class="dropdown-content">
<button class="content" onclick="chrome()">Chrome Extensions</button>
<button class="content" onclick="github()">GitHub</button>
</div>
</div>
</div>
</center>
The easiest way to center elements is to use flexbox.
You can learn about it more at: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Using flexbox to center elements is actually quite simple. Assuming you have set of elements:
<div class="elements">
<div class="element__item">Element one</div>
<div class="element__item">Element two</div>
<div class="element__item">Some other element</div>
</div>
You can center them horizontally & vertically using css like this:
.elements {
display: flex;
justify-content: center;
align-items: center;
}
You can check this on JSfiddle: https://jsfiddle.net/kf405784/
I have a case I am not sure how to figure it out.
I am trying to do a design to put a button over a textbox, to make my layout looks nice, but when users start typing information in textbox, it hides behind the button. I know I have 1 of 2 solutions, but I don't know how to do it:
1- either to find another way to do the layout.
2- limit the number of lines for the user to enter, but this way I am going to have a restriction for long data.
Below is my HTML and CSS:
body{
background: #000;
}
.nl-main{
width: 300px;
border: 1px solid white;
border-radius: 6px;
padding: 10px;
}
.header{
padding: 3px;
}
.header span{
color: white;
}
.nl-txt-main, .nl-btn-main{
display: inline-block;
}
.nl-btn-main .nl-btn{
border-radius: 5px;
background: blue;
color: white;
left: -50px;
position: relative;
}
.nl-txt-main .nl-txt {
width: 200px;
border-radius: 5px;
}
<div class="header">
<span>Search our database</span>
</div>
<div class="nl-controls">
<div class="nl-txt-main">
<input type="text" class="nl-txt"/>
</div>
<div class="nl-btn-main">
<input type="button" value="Send" class="nl-btn"/>
</div>
</div>
I want the button to be like part of the textbox itself, When you try to run the code, and write a long sentence in the textbox, it will hide under the button. How do I solve it?
Thank you.
Remove left:-50px; from you button
body{
background: #000;
}
.nl-main{
width: 300px;
border: 1px solid white;
border-radius: 6px;
padding: 10px;
}
.header{
padding: 3px;
}
.header span{
color: white;
}
.nl-txt-main, .nl-btn-main{
display: inline-block;
margin:0;
}
.nl-btn-main .nl-btn{
background: blue;
color: white;
left: -4px;
position: relative;
border-bottom-right-radius: 5px;
margin:0;
border-top-right-radius: 5px;
}
.nl-txt-main .nl-txt {
width: 200px;
border-bottom-left-radius: 5px;
margin:0;
border-top-left-radius: 5px;
}
<div class="header">
<span>Search our database</span>
</div>
<div class="nl-controls">
<div class="nl-txt-main">
<input type="text" class="nl-txt"/>
</div>
<div class="nl-btn-main">
<input type="button" value="Send" class="nl-btn"/>
</div>
</div>
On my site, matprichardson.co.uk, when you click the 'help' button in the dialog in the center of the screen, another dialog pops up containing some content.
For some reason, when this happens, the first two lines of the first paragraph element are strangely indented, as well as the header, which is normally centered.
I've looked at my markup and css a number of times now and I'm really struggling to see why this is happening. Could somebody please point me in the right direction?
CSS
body {
margin: 0;
padding: 0;
}
#maincontainer {
font-family: arial;
margin-bottom: 20px;
}
.dialog {
border: 5px solid black;
display: inline-block;
background-color: white;
}
.dialog p, .dialog ul {
font-family: "Courier New";
font-size: 12px;
}
.dialogtitle h2 {
margin: 0;
padding: 1px 0;
font-family: "courier new";
font-size: 12px;
background-color: black;
color: white;
text-align: center;
}
.dialogtitle {
cursor: move;
}
.dialogcontent {
margin: 10px;
}
.windowsbutton{
width: 70px;
height: 22px;
font-family: "courier new";
font-weight: bold;
font-size: 12px;
border-width:2px;
border-top: 2px solid white;
border-left: 2px solid white;
}
.buttonsurround {
border: 1px solid black;
max-width: 70px;
border-radius:3px;
display: inline-block;
margin: 0 10px;
}
.buttonselected {
border-width: 2px;
}
.windowsbutton:focus {
outline: none;
}
#maindialog {
position: absolute;
top: 220px;
left: 50%;
margin-left: -150px;
}
#helpdialog {
display: none;
width: 500px;
top: 70px;
left: 110px;
}
#helpClose {
margin:0 200px;
}
/*Menu*/
#menu {
margin: 0 0 20px 0;
padding: 0;
height: 30px;
background-color: black;
width: 100%;
}
/*Icons*/
.iconcontainer {
width: 80px;
float: left;
}
.iconcontainer:hover {
cursor:pointer;
}
.foldericon {
height: 40px;
width: 40px;
border: 2px solid black;
border-radius: 0 0 10px 0;
text-align: center;
margin: 0 auto;
background-color: white;
}
.iconhead {
height: 10px;
border-bottom: 2px solid black;
background-color:black;
}
.foldertext {
margin-top: 5px;
}
.iconcontainer h1 {
font-family: "Courier New";
font-size: 12px;
text-align: center;
margin: 0;
padding: 0;
}
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mat Richardson</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="maincontainer">
<div id="menu">
</div>
<!--an icon. Lovely, isn't it?-->
<div class="iconcontainer" id="blog">
<div class="foldericon">
<div class="iconhead">
</div>
<div class="iconmain">
</div>
</div>
<div class="foldertext">
<h1>blog</h1>
</div>
</div>
<div class="iconcontainer" id="pictures">
<div class="foldericon">
<div class="iconhead">
</div>
<div class="iconmain">
</div>
</div>
<div class="foldertext">
<h1>pics</h1>
</div>
</div>
<div class="iconcontainer" id="websites">
<div class="foldericon">
<div class="iconhead">
</div>
<div class="iconmain">
</div>
</div>
<div class="foldertext">
<h1>websites</h1>
</div>
</div>
<div id="maindialog" class="dialog">
<div class="dialogtitle">
<h2>Welcome to matprichardson.co.uk</h2>
</div>
<div class="dialogcontent">
<div class="buttonsurround buttonselected"><input type="button" id="mainOK" value="OK" class="windowsbutton" /></div>
<div class="buttonsurround"><input type="button" value="Cancel" id="mainCancel" class="windowsbutton" /></div>
<div class="buttonsurround"><input type="button" value="H̲elp" id="mainHelp" class="windowsbutton" /></div>
</div>
</div>
<div id="helpdialog" class="dialog">
<div class="dialogtitle">
<h2>Help</h2>
</div>
<div class="dialogcontent">
<p>Welcome to the personal site of Mat Richardson. There's not much to see right now,
but do feel free to have a click about.</p>
<p>Some links you might want to visit (or not, your choice):</p>
<ul>
<li>2toria (another site I own)</li>
<li>My Codepen Profile</li>
<li>My StackOverflow Profile</li>
<li>My twitter account</li>
<li>My LinkedIn Profile</li>
</ul>
<div id="helpClose" class="buttonsurround buttonselected"><input type="button" value="Close" class="windowsbutton" /></div>
</div>
</div>
</div>
</body>
</html>
It's because the position property for your blog, websites,and pics divs is set to relative and therefore it's taking up space. Change it so that they're set to absolute, and the text on your help dialog goes back to normal.
You could add something like:
#blog, #pictures, #websites {
position:absolute;
}
#blog {
left:20px;
}
#pictures {
left:80px;
}
#websites {
left:140px;
}
jsFiddle example
As I noted in my comment:
This is because the dialog is positioned relatively and it is still in
document normal flow. Therefore the content wraps the floated icons
which are at the left-top of the page.
Positioning the dialog box absolutely will fix the problem.
Alternatively, you can add clear: both declaration to the dialog element in order for clearing the floats. Thus the content of relative positioned dialog won't wrap the floated icons anymore.