I made a little landing page and the client wants: "The text, Sourcing & Trading, CCTV security. Want to use overstriking.
Then all will be OK." I googled what overstriking is and I have to admit I'm a little hazy on the concept and not sure how to implement it with CSS at.
The code I tried is in the snippet bellow. Thanks in advance.
<!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">
<title>Welcome</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
footer{
position: fixed;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height:100px;
line-height: 10px; /* Vertically center the text there */
padding-top:10px;
background-color: #f5f5f5;
margin-top: 10px;
}
.main-buttons {
width: 400px;
height: 50px;
margin: 0 auto;
text-decoration: line-through;
}
span{
margin-left: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.main-container {
background-image: url('http://wenshin.ltd/wp-content/uploads/2018/07/logisticsworldmap-1024x586.png');
height: 100vh;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
}
.middle{
top: 50%;
}
.btn-lg {
box-shadow: 3px 3px #888888;
}
h1 {
text-shadow: 1px 1px #888888;
}
.logo {
width: 50%;
}
</style>
</head>
<body class="main-container">
<div class="container middle">
<div class="row ">
<div class="col-md-12 text-center ">
<div class="intro"> <br> <br> <br> <br>
<img src="http://wenshin.ltd/wp-content/uploads/2018/08/WS-01.png" class="img-fluid logo" alt="Logo"> <br> <br>
<h1 class="">WELCOME TO WENSHIN <br> INDUSTRIAL CO LIMITED</h1>
<p>
<a href="http://www.wenshin.ltd/index.php">
<button class=" main-buttons btn btn-light btn-lg mt-3">Sourcing & Trading</button>
</a>
</p>
<p>
<a href="http://www.cctvcamerahd.com/">
<button class="main-buttons btn btn-light btn-lg mt-3">CCTV Security</button>
</a>
</p>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span class="text-center"><p><strong>Choose your language:</strong></p></span>
<span class="text-center"><p><span>English</span> <span>繁體中文</span> <span>Español</span> <span>Português</span> <span>Deutsch</span> <span>Français</span> <span>Italiano</span> <span>Pусский</span> <span>한국어</span> <span>日本語</span> <span>Nederlands</span> <span>غة العربية
</span> <span>Indonesian</span>
</p></span>
</div>
</footer>
</body>
</html>
I used:
text-decoration: line-through;
And I wondered if that's it or is there something alternative.
First of all, I would ask my client what he means by that.
Most people mean a strikethrough by saying overstrike.
You would just have to add this to your css for these buttons.
text-decoration: line-through;
As for the overstriking, it is an old technique used in the time of typewriters to write letters that where not on the "Keyboard". It doesn't really make sense anymore.
Cheers!
This just in.... I managed to answer my own question.
Since it turns out that (at least for my device) the inline «style» attribute accepts «/**/» comments like its stylesheet cousin, I thought it would be helpful to "good doctor" the code to make it easier to follow:
<p style="text-align: justify;">An element with «position: relative;»
[such as
<span style="/*Block setup*/display: inline-block; position: relative;
/*Adjust to match print baseline*/vertical-align: -7.5%;
/*Block width*/width: 6.5em;">
<span style="/*Element Name*/position: absolute;
left: 0em;">Cæsium (</span>
<span style="/*Isotope weight*/font-size: 60%; vertical-align: 55%;
position: relative;/**/ left: 6.0em;">133</span>
<span style="/*Atomic number*/font-size: 60%; vertical-align: -25%;
position: relative;/**/ left: 4.6em;">55</span>
<span style="/*Element Symbol*/position: relative;
left: 2.5em;">Cs)]</span>
</span> is positioned relative to its normal position:</p>`
The user may need to jiggle about the «width» and «left» properties to smooth out the spacing for their system (as well as prune the comments if storage space us at a premium).
Related
I'm currently working on freecodecamp's first test, so my question is probably dumb. I would like to change the line-height of #titles to a smaller one, while keeping it's background color. It's probably the display element, but I can't figure out what to do. Also, I'd like to get rid of the white line surrounding my image, right before the border...
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is
there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
https://jsfiddle.net/deffciu/hrna0Lfs/
any help is appreciated
Adding the below two rules to #titles makes it work:
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
You get this:
Snippet
html, body {
font-family: 'Oswald', sans-serif;
text-align: center;
background: white;
}
#title2 {
color: #052449;
margin-bottom: 0px;
}
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
#image {
border: 8px solid #052449;
border-radius: 50%;
width: 500px;
height: 375px;
margin-top: 15px;
}
hr {
border-color: #486282;
margin-top:0px;
}
#img-caption {
margin-top: 20px;
font-style: italic;
font-size: 25px;;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
For the white border issue, it's your body's margins. The below code will fix it.
body {margin: 0;}
See page (front.html)
Codepen
What the page should look like (Ignore the div highlighting, its structure is not being used)
No matter what or how I try, the "Read More" image (line 61) refuses to center horizontally AND responsively. As in, it's responding to pixel measurements, but not % measurements.
I've looked at around 15 articles by now, and I can't afford to spend any more time fruitlessly. Does anyone have a solution to the fact that the Read More image refuses to center? It should be responsive too. The only reason I can think of as to why it's not centering is because of bootstrap, but I doubt that.
The image is currently in a link tag inside a div that class="read-more". The image seems to ignore the margin-left and margin-right properties entirely.
.read-more img{
display:inline-block;
padding-left:auto;
margin-right:auto;
height:10%;
width:20%;
}
An image should not be centered using the approach you are using. Simply add:
text-align:center;
To the block level container element's CSS rule (not the image's CSS rule).
Text alignment is an inherited CSS property and you use it by applying it to the parent BLOCK LEVEL element (container) of the element that needs alignment. In your case, since you have the image inside of a div, the CSS rule should be applied to the div.
A width of 100% for the container and text-align:center should do:
.read-more img {
height: 10%;
width: 20%;
}
.read-more {
width: 100%;
text-align: center;
}
Updated codepen: http://codepen.io/anon/pen/EKmmMZ
You can apply text-align: center to read-more div to make image to center. Make Sure that the link and image must not have float property used.
Here is the code you exactly need.
Updated codepen: http://codepen.io/anuragscsit/pen/YqVVmv
body {
background-image: url("graphics/Website_background_2,_100_dpi.jpg");
}
body a {
color: rgb(241, 90, 34);
}
body a:hover {
color: rgb(208, 78, 29);
}
body a:visited {
color: rgb(144, 14, 0);
}
.row {
overflow: hidden;
}
[class*="xs-"] {
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color: rgba(255, 255, 255, 0.8);
padding-top: 40px;
}
.row1-imgs img {
height: 60%;
width: 100%;
/*box-shadow: inset 5px 5px 7px rgb(0,256,0);/*the line that breaks .border-blue and .border-orange shadows*/
}
.read-more{text-align:center;}
.read-more img {
display: inline-block;
padding-left: auto;
margin-right: auto;
height: 10%;
width: 20%;
}
.read-more div {
background-color: green;
margin-left: 20px;
}
.row1 p {
text-align: justify;
margin-top: 20px;
padding-left: 15px;
padding-right: 15px;
}
.row2 {
text-align: center;
}
#row3 img {
height: 60%;
width: 100%;
}
[class*="title-"] {
text-shadow: 4px 4px 5px rgb(63, 63, 63);
font-weight: bold;
color: white;
font-family: Serif;
letter-spacing: 2px;
font-size: 130%;
text-align: center;
}
.title-blue,
.blue-border,
.title-orange,
.orange-border {
box-shadow: 5px 5px 7px rgb(117, 117, 117);
}
.title-blue {
background-color: rgb(0, 102, 179);
}
.title-orange {
background-color: rgb(208, 78, 29);
}
.blue-border {
border: 4px solid rgb(0, 102, 179);
}
.orange-border {
border: 4px solid rgb(208, 78, 29);
}
#post1 {
width: 85%;
margin-left: auto;
margin-right: auto;
}
#post1 p {
text-align: justify;
}
#post2 {
width: 50%;
margin-left: auto;
margin-right: auto;
}
.event {
padding-top: 3%;
}
.event p {
font-size: 110%;
}
.eventitle {
font-size: 120%;
font-weight: bold;
}
#post1 .eventitle {
color: rgb(0, 102, 179);
}
#post2 .eventitle {
color: rgb(208, 78, 29);
}
* {
/*border: 1px dotted green;*/
}
/*line 13-21 taken from http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height
*/
<html lang="en">
<head>
<link rel="stylesheet" href="front.css" />
<meta name="" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="icon" href="graphics/Liger head for website masthead.ico" />
<title>Ligerbots</title>
</head>
<body>
<header>
</header>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display...Ross you decide whether this is important or not -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://sonexdjco.com/" target="_blank">
<img id="brand-image" src="img/bg9.png" alt="Check us out!">
</a>
</div>
<!-- Collect the nav links-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="https://www.google.com/maps/dir//MONROE+Restaurant,+450+Massachusetts+Avenue,+Cambridge,+MA+02139/#42.3751756,-71.1304011,10.44z/data=!4m9!4m8!1m0!1m5!1m1!1s0x89e37754659a60b7:0xdf11b00d94f15ff9!2m2!1d-71.1012446!2d42.36351!3e0?hl=en-US"
target="_blank">Get Directions!<span class="sr-only">(current)</span></a></li>
<li><a href="https://sonexdjco.yapsody.com/event/index/34100/spring-fever" target=_blank>Buy Tickets!</a></li>
<li>Overview</li>
<li>Links</li>
<li>Map</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div style="background-color:rgba(255,255,255,0.8)" class="col-xs-5 col-xs-offset-1">
<div>
<div class="row1">
<div class="title-orange">
LIGERBUILD BLOG
</div>
<span class="row1-imgs"><img class="orange-border" src="graphics/row1col1.gif"/></span>
<p>Work has already begun on the chassis for the 2016 Stronghold robot. Five working groups are preparing the team to hit the ground running on January 9. We have students working on mechanical, electrical, programming and several fixing the road
kill. . . .</p>
</div>
<div>
</div>
</div>
</div>
<div class="col-xs-5">
<div class="row1">
<div class="title-blue">
LIGERBUISNESS BLOG
</div>
<span class="row1-imgs"><img class="blue-border" src="graphics/row1col2.jpg"/></span>
<p>FRC alumnus Ian from Dash Electric visited with his awesome electric longboard in December and told us how he started his company. Students got to ride his board and ask him lots of questions. <a>Read and see more. . .</a></p>
</div>
</div>
</div>
</div>
<div class="read-more">
<img src="graphics/Read_more_button_outlines.gif" />
</div>
<div class="row">
<div style="background-color:rgba(255,255,255,0.8);" class="col-xs-5 col-xs-offset-1">
<div class="row2">
<div class="title-blue">
ANNOUNCMENTS
</div>
<div style="background-color:rgba(255,255,255,0.8)" class="blue-border">
<div id="post1">
<div class="event">
<span class="eventitle">Team Dinners Needed During Build</span>
<p>Please sign up to make team dinners during build season. We eat together as a team on Friday nights at 6:00. Several families can do this together. Please see the signup here.
</div>
<div class="event">
<span class="eventitle">Carpool Drivers Needed</span>
<p>Please sign up to drive carpools from North to South and back, Mondays through Saturdays during build season. Please see details on our carpool page, here.</p>
</div>
<div class="event">
<span class="eventitle">STIMMS Signup Required</span>
<p>All Students must sign up on STIMMS or theey will not be able to attend competitions. Please see details here.</p>
</div>
<div class="event">
<span class="eventitle">No Team Meeting 12/24</span>
<p>There will be no team meeting 12/24 due to Christmas. Team meetings will resume on 1/4/16.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-5">
<div class="row2">
<div class="title-orange">
UPCOMING EVENTS
</div>
<div style="background-color:rgba(255,255,255,0.8)" class="orange-border">
<div id="post2">
<div class="event">
<span class="eventitle">Visit the Waban Cub Scouts</span>
<p>January 13, 2016, 7-8 p.m.<br/> Waban Library Center</p>
</div>
<div class="event">
<span class="eventitle">Visit to Danger Awesome!</span>
<p>January 23, 2016, 4-6 p.m.<br/> 215 Ranham St. Melrose, MA</p>
</div>
<div class="event">
<span class="eventitle">Whole Foods Fundraiser</span>
<p>Feb. 1-28 10 a.m.-10 p.m.<br/> Whole Foods, Newton Four Corners</p>
</div>
<div class="event">
<span class="eventitle">FRC Competition at WPI</span>
<p>March 11-12, 2016, 9 a.m.-5 p.m.<br/> Worcester Polytechnic Institute<br/> Link to FIRST Livestream here</p>
</div>
<br/>
<br/>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div id="row3">
<div class="blue-border">
<img src="graphics/row3col1.jpg" />
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</html>
You need to alter the css line 42 to this
.read-more {
text-align: center;
}
Please use "margin" property to bring it center.It will align the image in order of -Top,Right,Bottom and Left.
.read-more img {
display: inline-block;
float:center;
padding-left: auto;
margin: 0 0 0 40%;
height: 10%;
width: 20%;
}
try this perhaps
.read-more {
margin: 0 20% 0 20%;
}
or any value of percentage that you'd like
I'm new in html and css so i have a question.
I am messing around with some stuff but after placing some images on my page i can't click on my links anymore.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Rijschool Houben</title>
</head>
<body>
<div id="header"></div>
<div id="header-pic"><img src="image/test.png"></div>
<p>
<div id="nav-bar">
<ul>
<li>|Home|</li>
<li>Info|</li>
<li>Prijzen|</li>
<li>Acties|</li>
<li>Machtiging|</li>
<li>Theorie|</li>
<li>Begeleid rijden|</li>
<li>Bromfiets|</li>
<li>Contact|</li>
</ul>
</div>
</p>
<p>
<div id="icon-main">
<i class="fa fa-mobile" style="font-size:28px;"></i><a>046-4524501</a><br />
<i class="fa fa-paste" style="font-size:18px;"></i><a>raymond#rijschoolhouben.nl</a><br />
<i class="fa fa-facebook-official" style="font-size:20px;"></i><a>Volg ons op Facebook!</a>
</div>
</p>
<p>
<div id="img-1">
<img src="image/1.jpg" alt="Scooter" width="330px" height="400px"/>
</div>
<div id="img-2">
<img src="image/2.jpg" alt="Geslaagde 1" width="337px" height="400px"/>
</div>
<div id="img-3">
<img src="image/3.jpg" alt="Geslaagde 2" width="337px" height="400px"/>
</div>
<div id="img-4">
<img src="image/4.jpg" alt="Geslaagde 3" width="337px" height="400px" />
</div>
<div id="img-5">
<img src="image/5.jpg" alt="Geslaagde 4" width="337px" height="400px" />
</div>
<div id="img-6">
<img src="image/6.jpg" alt="Geslaagde 5" width="337px" height="400px" />
</div>
</p>
</body>
</html>
CSS:
div#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: white;
}
div#header-pic{
position: fixed;
height: 50px;
left: 500px;
}
div#nav-bar{
position: fixed;
padding-top: 130px;
left: 0;
width: 100%;
white-space: nowrap;
}
div#nav-bar ul{
list-style: none;
text-align: center;
background-color: #323232;
padding: 10px 0;
}
div#nav-bar li{
display: inline;
}
div#nav-bar li a{
text-decoration: none;
color: white;
padding: 14px 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#icon-main{
position: fixed;
color: #323232;
padding: 10px;
}
div#icon-main i{
padding: 5px;
}
div#icon-main a{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#img-1 {
position: fixed;
left: 0;
padding-top: 184px;
width: 100%;
}
div#img-2 {
position: fixed;
padding-top: 184px;
padding-left: 255px;
}
div#img-3 {
position: fixed;
padding-top: 184px;
padding-left: 915px;
}
div#img-4 {
position: fixed;
padding-top: 184px;
padding-left: 585px;
}
div#img-5{
position: fixed;
padding-top: 184px;
padding-left: 1245px;
}
div#img-6 {
position: fixed;
padding-top: 184px;
padding-left: 1575px;
}
i know the code is bad but i hope someone can help me!
Here is a fiddle.
-Ryan
I looked at your external code. Please add your HTML and CSS to your question in Stack Overflow.
From the external HTML you have the following code:
<a>046-4524501</a>
Which does not work as a link.
You have this code
Home
That works as you would expect it to.
Change this line:
<a>046-4524501</a>
to
046-4524501
Where the href="Where you want the link to go".
It's all about the value for "href"
I did notice you are doing non-responsive html which means it is not mobile friendly or will look the same in smaller browser windows.
Your code is messy but your doing okay.
First off wrap everything you are putting in the header in the header div
The images are floating up to the top over your nav due to the position:fixed
Remove all the empty <p></p> between your div's
Use floats on your images and width of a percentage of 100% plus wrap them in a container/div
If you need me to I can see if I can redo all your html and CSS but think for you would learn better to try it out for yourself.
You could always go look at the HTML5 boilerplate out there and use them to guide you on how to construct good code.
I see that you are trying to create a row of images. Instead of using a system of DIVs why don't you use the more flexible (and more responsive) structure of a list?
Then you can use float: for lining them up in a row and basic CSS to give them sizes. The images will be specified as a background for these li elements (better practice).
Like this: http://codepen.io/Attrexx/pen/KVvwXP
You are placing divs containing the images using padding. That's why you can not use links in the menu. Div blocks cover your links.
Try using something like:
selector {
position: absolute; /* or `fixed` like in your css; see below*/
top: 100px; /* pixels from the top */
left: 100px; /* pixels from the left */
/* you can also use `bottom` and `right` */
}
For example:
div#img-3 { /* or just `#img-3`; see below */
position: absolute;
top: 184px;
left: 915px;
}
Check this w3 schools article for more information on positioning.
Not related to the question:
If you are using CSS's id selector (#), I suggest not to use element selector (e.g. div). So rather than div#img-3 try using just #img-3.
Try avoiding using id selectors at all. You can use class rules, and happily after some time they will result in saving you a lot of work.
If you are using HTML5 then try using semantic elements.
Avoid using fixed position when you don't need to (your page is an example of such page).
Paragraphs (p) shouldn't be used in the same way as div. It may result in bad habit for semantic sites.
Rather than using positioning (position), experiment with float or different display types (e.g. inline-block). Use it only when it is really needed.
Read about HTML Responsive Web.
At: http://www.fmancoding.com their is a section under "featured game of the week" that displays all the games, then the title and description of it. It looks exactly what I would like it to, except on a mobile device. On a mobile device the images are being tabbed in and touching each other.
Does anyone know why this is happening? I have breaks inbetween each div and I believe div's automatically are created on a new line, like a paragraph. Also, I added padding and margin to see if this would fix the problem, but it did not.
HTML:
<html>
<head>
<link href="Styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Javascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Fman Coding</title>
</head>
<body>
<center id="headerBox">
<h1 id="header">Welcome To Fman Coding</h1>
<h2 id="header">Most Games Are Mobile Friendly, And Can Be Used Offline!</h2>
</center>
<div id="MG">
<div id="FG">
<p id="ft">This Week's Featured Game!</p>
<img src="Games/Murderer.jpeg" width="100%" height="30%" alt="Miji">
<!-- Game Name & Description -->
<p id="FGD">Miji! Input Your Number Of Players And It Will Automatically Generate Everyone's Job!</p>
</div>
<div id="gLibrary">
<!-- Games -->
<div id="gameFrame"><img id="float" src="Games/Murderer.jpeg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Miji</h4>
<span id="desc">This game auto selects your positions based on the number of people playing!</span>
</div>
<!-- Next Game -->
<br/>
<!-- Next Game -->
<div id="gameFrame"><img id="float" src="Games/RPS.jpg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Rock, Paper, Scissors</h4>
<span id="desc">You can play Rock, Paper, Scissors, Shoot against a computer!</span>
</div>
<!-- Next Game -->
<br/>
<!-- Next Game -->
<div id="gameFrame"><img id="float" src="MC/Click.jpg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Minecraft Player Finder</h4>
<span id="desc">Create groups for certain games and find players to play, or help you build stuff!</span>
</div>
</div>
</div>
</body>
</html>
CSS:
#header{
text-align: center;
color: aqua;
}
#headerBox{
border: 1px black solid;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
background-image: url('matrixCode.jpeg');
}
#gLibrary{
color: #989898;
margin: 15px;
display: inline;
}
#gLibrary p a{
text-decoration: none;
color: aqua;
display: inline;
}
#FG{
border: 3px gold solid;
}
#FGD{
color: red;
text-align: center;
}
#MG{
border: 1px purple solid;
background-color: #333;
}
#ft{
text-align: center;
font-size: 16px;
background-color: #333;
color: red;
}
#gameTitle{
color: aqua;
}
#float{
float: left;
}
#desc{
color: crimson;
}
#gameFrame{
margin-top: 1%;
margin-bottom: 1%;
padding-top: 1%;
padding-bottom: 1%;
}
Just found out this solution in wordpress by Tobiasbg.
The cause for this basically is that your theme is hiding all HTML tags (using display: none;) in it’s CSS file.
You can either correct it in the theme's CSS file or give ,
br{
display:block !important;
}
if you want only specific div's br to be shown give the div's class name prior to br in thre above code.
#gLibrary should be displayed as block, not inline :
#gLibrary{
color: #989898;
margin: 15px;
display: block;
}
I am currently having problems with a website. I am trying to make the text stay in the same place when the page is either viewed on larger screens or when zooming out (zoom out and see for yourselves). I have the same problem with the buttons on the right side. Can anyone tell me how I can solve this?
http://ronnym.tk/
Please help me with this. I have no clue what to do, I tried absolute positioning, individually positioning divs with margins, nothing works. I think the parent's parameters overwrites the child parameters or something. I honestly don't know what else to try. Wasted days already.
Here is my HTML code
<!DOCTYPE html>
<html class="html">
<head>
<script type="text/javascript">
if(typeof Muse == "undefined") window.Muse = {}; window.Muse.assets = {"required":["jquery-1.8.3.min.js", "museutils.js", "jquery.musepolyfill.bgsize.js", "index.css"], "outOfDate":[]};
</script>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<meta name="generator" content="2014.0.1.264"/>
<title>HOME</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/site_global.css?475048684"/>
<link rel="stylesheet" type="text/css" href="css/index.css?4024854745" id="pagesheet"/>
<!-- Other scripts -->
<script type="text/javascript">
document.documentElement.className += ' js';
var __adobewebfontsappname__ = "muse";
</script>
<!-- JS includes -->
<script type="text/javascript">
document.write('\x3Cscript src="' + (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//webfonts.creativecloud.com/cambo:n4:all.js" type="text/javascript">\x3C/script>');
</script>
</head>
<body>
<div class="clearfix" id="page"><!-- group -->
<div class="clearfix grpelem" id="pu203-4"><!-- column -->
<img class="colelem" id="u203-4" alt="ABOUT ME" width="171" height="41" src="images/u203-4.png"/><!-- rasterized frame -->
<div class="clearfix colelem" id="u205-24" data-ice-editable="html" data-ice-options="disableImageResize,none" data-muse-uid="U205"><!-- content -->
<p id="u205-2">My name is Ronny Minkovsky, and I'm a graphics designer and artist, currently based somewhere behind a computer screen.</p>
<p id="u205-3"> </p>
<p id="u205-5">About 6 years ago, I realized my passion for art, and began a self-taught career... for now.</p>
<p id="u205-6"> </p>
<p id="u205-8">Ever since my childhood days, I've always loved gaming, and developed a real passion for its graphics, a passion that eventually lead me into creating, and participating in the art production of several games, one of which will be released on steam shortly, by the name of CivCraft.</p>
<p id="u205-9"> </p>
<p id="u205-11">I'm majorly inspired by the Cyberpunk genre, and by authors such as Philip K. Dick, H. P. Lovecraft, Edgar Allan Poe, and Baudrillard and have been gaming since the good old days of Divine Divinity, and Ultima.</p>
<p id="u205-12"> </p>
<p id="u205-14">Even though I prefer gaming graphics, I also tend to be versatile, working on web design, and advertising as well.</p>
<p id="u205-15"> </p>
<p id="u205-17">I know my way around a number of digital art programs, mainly Photoshop, Illustrator, and Sketchbook Pro.</p>
<p id="u205-18"> </p>
<p id="u205-20">Take a moment to browse through my Projects section, where I uploaded a few works from different fields, or skim through the Artwork tab for random art I made.</p>
<p id="u205-21"> </p>
<p> </p>
</div>
</div>
<div class="clearfix grpelem" id="pu400"><!-- column -->
<a class="nonblock nontext museBGSize colelem" id="u400" href="mailto:portal-m#hotmail.com"><!-- simple frame --></a>
<a class="nonblock nontext museBGSize colelem" id="u383" href="callto://portal230762"><!-- simple frame --></a>
</div>
</div>
<div class="preload_images">
<img class="preload" src="images/mail%20button1-o.png" alt=""/>
<img class="preload" src="images/mail%20button1-m.png" alt=""/>
<img class="preload" src="images/mail%20button1-n.png" alt=""/>
<img class="preload" src="images/skype%20button-over.png" alt=""/>
<img class="preload" src="images/skype%20button-mouse%20down.png" alt=""/>
</div>
<!-- JS includes -->
<script type="text/javascript">
if (document.location.protocol != 'https:') document.write('\x3Cscript src="http://musecdn.businesscatalyst.com/scripts/4.0/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
<script type="text/javascript">
window.jQuery || document.write('\x3Cscript src="scripts/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
<script src="scripts/museutils.js?353204447" type="text/javascript"></script>
<script src="scripts/jquery.musepolyfill.bgsize.js?323834883" type="text/javascript"></script>
<!-- Other scripts -->
<script type="text/javascript">
$(document).ready(function() { try {
(function(){var a={},b=function(a){if(a.match(/^rgb/))return a=a.replace(/\s+/g,"").match(/([\d\,]+)/gi)[0].split(","),(parseInt(a[0])<<16)+(parseInt(a[1])<<8)+parseInt(a[2]);if(a.match(/^\#/))return parseInt(a.substr(1),16);return 0};(function(){$('link[type="text/css"]').each(function(){var b=($(this).attr("href")||"").match(/\/?css\/([\w\-]+\.css)\?(\d+)/);b&&b[1]&&b[2]&&(a[b[1]]=b[2])})})();(function(){$("body").append('<div class="version" style="display:none; width:1px; height:1px;"></div>');
for(var c=$(".version"),d=0;d<Muse.assets.required.length;){var f=Muse.assets.required[d],g=f.match(/([\w\-\.]+)\.(\w+)$/),l=g&&g[1]?g[1]:null,g=g&&g[2]?g[2]:null;switch(g.toLowerCase()){case "css":l=l.replace(/\W/gi,"_").replace(/^([^a-z])/gi,"_$1");c.addClass(l);var g=b(c.css("color")),h=b(c.css("background-color"));g!=0||h!=0?(Muse.assets.required.splice(d,1),"undefined"!=typeof a[f]&&(g!=a[f]>>>24||h!=(a[f]&16777215))&&Muse.assets.outOfDate.push(f)):d++;c.removeClass(l);break;case "js":l.match(/^jquery-[\d\.]+/gi)&&
typeof $!="undefined"?Muse.assets.required.splice(d,1):d++;break;default:throw Error("Unsupported file type: "+g);}}c.remove();(Muse.assets.outOfDate.length||Muse.assets.required.length)&&alert("Some files on the server may be missing or incorrect. Clear browser cache and try again. If the problem persists please contact website author.")})()})();/* body */
Muse.Utils.transformMarkupToFixBrowserProblemsPreInit();/* body */
Muse.Utils.prepHyperlinks(true);/* body */
Muse.Utils.showWidgetsWhenReady();/* body */
Muse.Utils.transformMarkupToFixBrowserProblems();/* body */
} catch(e) { if (e && 'function' == typeof e.notify) e.notify(); else Muse.Assert.fail('Error calling selector function:' + e); }});
</script>
</body>
</html>
And here is the CSS code
.version.index /* version checker */
{
color: #0000EF;
background-color: #E668D9;
}
.html
{
background-color: #000000;
}
#page
{
z-index: 1;
max-width:100%;
height: auto;
border-style: none;
border-color: transparent;
padding-bottom: 212px;
margin-left: auto;
margin-right: auto;
background: transparent url("../images/home%20back%20(smaller).jpg") no-repeat center center;
}
#pu203-4
{
width: 0.01px;
margin-right: -10000px;
margin-top: 478px;
margin-left: 138px;
position: relative;
}
#u203-4
{
z-index: 2;
display: block;
vertical-align: top;
margin-left: 138px;
position: relative;
}
#u205-24
{
z-index: 6;
min-width: 465px;
height: auto;
margin-top: 29px;
margin-left: 0px;
margin-right: 0px;
position: relative;
}
#u205-2,#u205-3,#u205-5,#u205-6,#u205-8,#u205-9,#u205-11,#u205-12,#u205-14,#u205-15,#u205-17,#u205-18,#u205-20,#u205-21
{
width:100%;
font-size: 11px;
line-height: 13px;
color: #86A4B2;
font-family: cambo, serif;
font-weight: 400;
}
#pu400
{
width: 0.01px;
margin-right: -10000px;
margin-top: 570px;
margin-left: 892px;
}
#u400
{
z-index: 31;
width: 354px;
height: 120px;
position: relative;
background: transparent url("../images/mail%20button1-a.png") no-repeat left top;
background-size: contain;
}
#u400:hover
{
margin: 0px;
background: transparent url("../images/mail%20button1-o.png") no-repeat left top;
background-size: contain;
}
#u400:active
{
margin: 0px;
background: transparent url("../images/mail%20button1-m.png") no-repeat left top;
background-size: contain;
}
#u400.MuseLinkActive
{
margin: 0px;
background: transparent url("../images/mail%20button1-n.png") no-repeat left top;
background-size: contain;
}
#u383
{
z-index: 30;
width: 354px;
height: 120px;
top: -8px;
margin-bottom: -8px;
position: relative;
background: transparent url("../images/skype%20button-active%20(normal).png") no-repeat left top;
background-size: contain;
}
#u383:hover
{
margin: 0px 0px -8px;
background: transparent url("../images/skype%20button-over.png") no-repeat left top;
background-size: contain;
}
#u383:active
{
margin: 0px 0px -8px;
background: transparent url("../images/skype%20button-mouse%20down.png") no-repeat left top;
background-size: contain;
}
body
{
position: relative;
min-width: 1280px;
max-height:100%;
}
Try using a wrapper for your page as following:
<div class="wrap"> all your page content </div>
using this CSS:
.wrap {width=800px; margin: 0px auto;}
This will automatically horizontally center the DIV wrapper, as well as making sure that all the content within always stays at the same place, relative to the wrapper.
You can still expand the page vertically by adding more content or adding a height value.
You might want to change the Width if 800px is too much or too little, but make sure it's a constant (px) value.