My name is Will and I'm coding a website for some folks. I've ran into a bit of an error. No matter what sort of code I use, the website will not adjust it's self correctly to the page. For example, this is what it looks like on a large screen:
http://i.stack.imgur.com/B5KLX.jpg
Generally, looks alright. However, the massive space in between the two elements on the sides are awful and create an enviroment of poor contrast and spacing in my opinion.
Here is how it looks on a small screen:
http://i.stack.imgur.com/y0HFI.jpg
Also generally looks alright. Accept for the missing scroll bar that should be to the right. The picture taken from the smaller computer is how I'd like the site to look on all computers, though I need a scroll bar for it.
Here is the code for that page:
<HTML>
<HEAD>
<h1><font color="#000000" size="+1"><marquee direction="right" bgcolor="green" scrollamount="3">Website BETA: Version 1.0</marquee></font></h1>
<link rel="stylesheet" type="text/css" href="css.css">
<div class="fadeIn">
<center>
<div style="display: inline-block;" id="red">
<h1>Hinte's </h1>
</div>
<div style="display: inline-block;" id="white">
<h1>Liberty </h1>
</div>
<div style="display: inline-block;" id="blue">
<h1>Theatre</h1>
</div>
</center>
</div>
<br>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='active'><a href='art.html'><span>Art</span></a></li>
<li class='active'><a href='biography.html'><span>Biography</span></a></li>
<li class='last'><a href='contact.html'><span>Contact Us</span></a></li>
</ul>
</div>
<link rel="shortcut icon" href="favicon.ico">
</HEAD>
<br>
<br>
<br>
<body background="grayscale.jpg">
<div style="position:fixed;top:20em;left0em;right:4em;" id="text60">
<p>Gary Edward Hinte</p>
</div>
<div style="position:fixed;top:26em;left0em;right:7em;" id="text30">
<p>American Political Artist</p>
</div>
<div style="position:fixed;top:22em;left:1em;right:40em;">
<img class="grayBox" style="border: 0px solid black;
border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;" width="600px" height="500px" src="JulianA.jpg">
</div>
</body>
<title>HLT - Home</title>
</HTML>
<html>
<head>
<title>HLT - Home</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--All of your content in here-->
</body>
</html>
I would appreciate if you put the stylesheet too, also, don't copy and paste your whole document. Just the parts you are having trouble with
I would recommend a few HTML and CSS tutorials. You have the wrong idea. a body element is where ALL the content goes besides imports and stuff. The head element is where imports and titles and stuff go, NOT CONTENT YOU WANT TO DISPLAY.
And lastly, I'm confused on why you're even using a stylesheet. It seems you're using all these old methods for styling in HTML. Such as: center and font and you're apply most of your styles directly into the element.
To center it like you want on your smaller picture. I would add a max-width: 1280px; to your styles, or make a container DIV with a specified width around all of your content in your body section.
Hope this helped
Try creating a wrapper and putting your div's in the BODY like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<title>HLT - Home</title>
</head>
<body>
<h1><font color="#000000" size="+1"><marquee direction="right" bgcolor="green" scrollamount="3">Website BETA: Version 1.0</marquee></font></h1>
<div id="wrapper">
<div class="fadeIn">
<center>
<div style="display: inline-block;" id="red">
<h1>Hinte's </h1>
</div>
<div style="display: inline-block;" id="white">
<h1>Liberty </h1>
</div>
<div style="display: inline-block;" id="blue">
<h1>Theatre</h1>
</div>
</center>
</div>
<br>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='active'><a href='art.html'><span>Art</span></a></li>
<li class='active'><a href='biography.html'><span>Biography</span></a></li>
<li class='last'><a href='contact.html'><span>Contact Us</span></a></li>
</ul>
</div>
<link rel="shortcut icon" href="favicon.ico">
</HEAD>
<br>
<br>
<br>
<body background="grayscale.jpg">
<div style="position:fixed;top:20em;left0em;right:4em;" id="text60">
<p>Gary Edward Hinte</p>
</div>
<div style="position:fixed;top:26em;left0em;right:7em;" id="text30">
<p>American Political Artist</p>
</div>
<div style="position:fixed;top:22em;left:1em;right:40em;">
<img class="grayBox" style="border: 0px solid black;
border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;" width="600px" height="500px" src="JulianA.jpg">
</div>
</div> <!--closing wrapper-->
</body>
</html>
And add this to your css file
#wrapper {
width:1200px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
Im sorry but your website is setup all wrong. try this.
<html>
<title>Page Name</title>
<meta tags />
<styles that you need to link to />
<body>
anything you want people to see goes here!!!
<scripts go here />
</body>
</html>
Also it is impossible to help you with out your css and for your elements to be properly displayed they must be put like I showed you.
If you want your site to look the same or somewhat the same you need to use %%%% to style your elements so they are responsive to the window size.
To align your elements look into useing: position, margin, padding, left right top and bottom.
Related
Image of what i plan to do:
Need help to actually add those kind of text box so i can type in it. i am currently only using field set but i have no ideal on how to give it a location. If anyone have any ideal on how to do it please do teach me..
-A beginner at codding.
<html>
<head>
<title>Assignment 2 </title>
<!-- -->
</head>
<body>
<center><h1 Style=color:Lime> Movie review<h1></center>
<img src="movie logo.jpg" width="200" height="200" border="2" alt="Logo">
<br>
<fieldset>
Commedy movie
</fieldset>
<hr>
<center>
For more Movies Review click here.
</center>
</body>
</head>
you will have to learn to use some tools and there are many different way to do that. You can use html tables to position blocs where you want or the framework bootstrap or flexbox.
For basic stuff I think flex box should be faster for you: an example:
<!DOCTYPE html>
<html>
<head>
<title>Assignment 2 </title>
</head>
<body>
<div style="display: flex; justify-content: center">
<div style="height: 100px;width: 100px; background-color: aqua; margin: 15px;">Bloc 1</div>
<div style="height: 100px;width: 100px; background-color:coral; margin: 15px;">Bloc 2</div>
</div>
</body>
</html>
On the bottom of my website, BJBGaming1.com, there is a weird white bar, please help me get rid of it. and my coding is
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>BJBGaming1</title>
<link rel="stylesheet" href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li>Home</li>
<li>Minecraft</li>
<li>CS:GO</li>
<li>Smite</li>
</ul>
</div>
</div>
<div class="callout large primary">
<div class="row column text-center">
<h1 style="color:green">BJBGaming1</h1>
<h2 class="subheader">Happy Thanksgiving!</h2>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>Minecraft <small>11/25/2015</small></h3>
<img class="thumbnail" src="Minecraft.png">
<p style="color:white">Minecraft is a very popular game, on PC, Xbox, and Smart Phones, played by millions of people every day. For more information go to www.bjbgaming1.com/minecraft</p>
</ul>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>CS:GO <small>11/25/2015</small></h3>
<img class="thumbnail" src="CS.GO.png">
<p style="color:white">CS:GO stand for, Counter-Strike: Global Offensive, and is a FPS game that is assosiated with E-Sports, and played by millions of people everyday. For more information go to www.bjbgaming1.com/cs_go</p>
</ul>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>Smite <small>11/25/2015</small></h3>
<img class="thumbnail" src="Smite.png">
<p style="color:white">Smite is a game just like LoL (League of Legends). In Smite you can pick from over 50 gods that ou unlock with Favor, favor is basically the currency to buy gods, but in Smite there are tons of different game modes, and every day they feature a community made gamemode. Also, Smite is always coming out with new gamemodes to try. For more information go to www.bjbgaming1.com/smite</p>
</ul>
</div>
</div>
</div>
<!-- begin wwww.htmlcommentbox.com -->
<div style="color:white" id="HCB_comment_box">Comment Form is loading comments... </div>
<link rel="stylesheet" type="text/css" href="//www.htmlcommentbox.com/static/skins/bootstrap/twitter-bootstrap.css?v=0" />
<script type="text/javascript" id="hcb"> /*<!--*/ if(!window.hcb_user) {hcb_user={};} (function(){var s=document.createElement("script"), l=hcb_user.PAGE || (""+window.location).replace(/'/g,"%27"), h="//www.htmlcommentbox.com";s.setAttribute("type","text/javascript");s.setAttri bute("src", h+"/jread?page="+encodeURIComponent(l).replace("+","%2B")+"&mod=%241%24wq1rdBcg%24nHgonDoa 62nAhjUsN9BAt%2F"+"&opts=16862&num=10&ts=1448559904895");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
<!-- end www.htmlcommentbox.com -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"> </script>
<script>
$(document).foundation();
</script>
</body>
</html>
Im probably missing some code so its probably best that you look at it from bjbgaming1.com
Add background color to the "body" tag of this website by using CSS:
body {
background-color: #000;
}
The bottom of your background image is black so add black background to 'extend' the background image.
When I click on a button to redirect to a new page, new page is not at the top position. I have to scroll down to have a look. Please have a look at below pictures.
Page titled 'LIST' is the page I am redirecting to.
HTML of the page I'm redirecting to is
<!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">
<title>Some Title</title>
<link href="css/style.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.mobileMenu').click(function(){
$("#mobileNav").toggle();
});
$("#mobileNav li").click(function(){
$('#mobileNav').hide();
});
});
</script>
</head>
<body>
<div id="innerheader">
<div class="innerwrapper">
<h1 id="someId" onClick="location.href='index.html'"></h1>
<div class="mobileMenu"></div>
<div id="mainNav">
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
</div>
<div id="mobileNav">
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<div id="priceList">
<h4>List</h4>
<div class="innerwrapper">
<div class="leftsection">
<div class="listSec">
<h5>ABC</h5>
<ul>
<li>
<p>A</p>
<span>70</span>
<div class="clear"></div>
</li>
<li>
<p>B)</p>
<span>300</span>
<div class="clear"></div>
</li>
<li>
<p>C</p>
<span>100/150/200</span>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
</body>
</html>
The CSS
.innerwrapper {
width:1140px;
height:700px !important;
margin:0 auto;
position:relative;
z-index:99999
}
#priceList{
background:#fff;
padding-bottom:80px;
}
#priceList h4{
font-size:24px;
color:#37444d;
line-height:65px;
font-weight:300;
text-align:center;
text-transform:uppercase;
border-bottom:solid 1px #f0f0f0;
border-top:solid 1px #f0f0f0;
}
If I remove height from above class, it works fine.
The reason that the #priceList div is being pushed down is because your div innerwrapperhas height: 700px set to it which pushes the content beneath it(i.e. priceList) down 700 pixels.
Edit:
To solve this you need to remove/change height: 700px !important on innerwrapper.
If it's crucial for your design that innerwrapper is 700 pixels high you have two options. Either absolute position your price list and place it exactly where you want it or you can move your pricelist to within the innerWrapper.
Your script is doing something here.
<script>
$(document).ready(function(){
$('.mobileMenu').click(function(){
$("#mobileNav").toggle();
});
$("#mobileNav li").click(function(){
$('#mobileNav').hide();
});
});
</script>
Try removing the script part and see how it works. Then, you can recode it as per the need.
I am designing a simple HTML website. The problem I have is with my images that I am using as links. I had them positioned where I wanted them but then I noticed that the link area extended to the left of the image. I was using relative positioning and thought that might have something to do with it, but I removed all CSS from my website and it still happens. I have a strictly HTML page and the link area still extends outside the size of the image.
Any idea what's causing this?
Thanks
<!DOCTYPE html>
<html>
<head>
<title>Zach's Website</title>
<link rel="stylesheet" type="text/css" href="css/grid.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!--<link rel="stylesheet" type="text/css" href="css/style.css">-->
<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen/projection">
<link rel="stylesheet" type="text/css" href="css/print.css" media="print">
<!--[if IE]>
<link rel="stylesheet" href="blueprint/ie.css" type="text/css"
media="screen, projection">
<![endif]-->
<div id="header">
<div class="container clearfix">
<img id="headbanner" class="span-24" src="img/headerbanner.png">
<a id="headerLogo" href="index.html"><img class="prepend-3" src="img/ZBLogoHeader.png"></a>
<ul class="navigation">
<li>Experience</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<ul class="social">
<li><img src="img/twitter.png"></li>
<li><img src="img/facebook.png"></li>
<li><img src="img/tumblr.png"></li>
<li><img src="img/linkedin.png"></li>
<li><img src="img/github.png"></li>
</ul>
<img id="bodyPattern" src="img/body.png">
</div>
</div>
</head>
<body>
<div id="project1" class="container clearfix">
<img id="novel" class="prepend-2" src="img/ANovelIdea.jpg" onmouseover="this.src='img/hoverNovel.png'" onmouseout="this.src='img/ANovelIdea.jpg'" />
<img id="barminder" class="prepend-8" src="img/Barminder.jpg" onmouseover="this.src='img/hoverBar.png'" onmouseout="this.src='img/Barminder.jpg'" />
</div>
</body>
<footer>
<div class="container clearfix">
<img id="footerLogo" src="img/ZBLogoFooter.png">
<img id="footerBanner" src="img/footerbanner.png">
</div>
</footer>
</html>
Are you setting a height/width to the 'a' tag? Ideally you should be setting height, width and display:block, so that the 'a' tag has its exact size.
a{
display:block;
height:100px;
width:100px;
}
This worked for me.
<!-- HTML -->
<img src="#" alt="logo image">
/* CSS */
a {display: block; width: 50%;}
img {width: 100%;}
You set the width of the link then you set the width of the image to 100% of the link width. Then you adjust the width of the link until the image is the size you need. Link won't go past the width of the image this way.
So...I stumbled on this because I was having the same issue. Then, when I didn't see the answer here, I tried one last-ditch effort. I set all of my images wrapped in A tags to display: block; in the CSS. Before that, the A tag was allowing users to click far outside the image to the right where there was just white space caused by the display: block; default. Try display: inline-block because it caused the link to force itself down only to the edges of the image. Hope that works for you!
i'm coding a website for some friends where i'm using ddsmoothmenu for dropdowns.. BUT now it there's a weird spacing between the header and top of the body, and it only appears on some pages.. It is very weird, and when checking it out through chromes developer options, i simple cannot find the reason for this spacing. BTW, i'm using 960 gs. The header gradient is body background image.
EDIT
I now know WHAT the problem is. Everything in the head tag gets moved into body, on the pages with weird spacing. I have no idea why or how.
No weird spacing, exactly as it should be.
http://i.imgur.com/5cL7W.jpg
Weird spacing!
http://i.imgur.com/7Gldl.png
Here is the rendered source of one of the pages without the error:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="icon" type="image/png" href="img/favicon.ico" />
<title>Armilla - Forside</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta name="viewport" content="width=960">
<!--////////////////////
//Imports - JS and CSS//
/////////////////////-->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
<link rel='stylesheet' id='style-css' href='css/diapo.css' type='text/css' media='all'>
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu-v.css" />
<script type='text/javascript' src='js/jquery.min.js'></script>
<!--[if !IE]><!--><script type='text/javascript' src='js/jquery.mobile-1.0rc2.customized.min.js'></script><!--<![endif]-->
<script type='text/javascript' src='js/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/diapo.js'></script>
<script type='text/javascript' src='js/ddsmoothmenu.js'></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--///////
//Init JS//
////////-->
<script>
ddsmoothmenu.init({
mainmenuid: "menu", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
});
</script>
</head>
<body>
<div id="header" class="container_12">
<div id="logo" class="grid_5">
<a href="index.php">
<img src="img/logo.png" width="226" height="65"/>
</a>
</div>
<div id="nav" class="grid_7">
<div id="menu" class="ddsmoothmenu">
<ul>
<li id="prodli"><img src="img/produkter.png"/>
<ul style="z-index: 1;">
<li>Armb�nd</li><li>Overlevelsesudstyr</li> </ul>
</li>
<li><img src="img/armilla.png"/></li>
<li><img src="img/nyheder.png"/></li>
<li><a id="lasta" href="?p=contact"><img src="img/kontakt.png"/></a></li>
</ul>
<br style="clear: left" />
</div>
</div>
</div>
<section>
<div style="overflow:hidden; width:960px; margin: auto auto; padding:0 20px;">
<div class="pix_diapo">
<div data-thumb="img/thumbs/megamind_07.jpg">
<img src="img/slides/megamind_07.jpg">
<div class="caption elemHover fromRight" style="bottom:65px; padding-bottom:5px; color:#ccc; text-transform:uppercase">
Armilla
</div>
<div class="caption elemHover fromLeft" style="padding-top:5px;">
Verdensklasses overlevelsesudstyr.Tjek vores nye produkter ud
</div>
</div>
<div data-thumb="img/thumbs/wall-e.jpg" data-time="7000">
<img src="img/slides/wall-e.jpg">
<div class="elemHover caption fromLeft" style="bottom:70px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px;">
You can also get the same effect as the caption with:
</div>
<div class="elemHover button fromTop" data-easing="easeOutExpo" style="left:388px; bottom:78px;">
A button
</div>
<div class="elemHover button button2 fromBottom" data-easing="easeOutExpo" style="left:512px; bottom:78px;">
Or two buttons
</div>
<div class="elemHover fadeIn" style="left:600px; bottom:auto; top:0; padding-top:50px; color:#ff0; font-size:13px; line-height:20px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; background:url(img/demo/arrow_caption.png) no-repeat 230px 30px">
Or any other html element...<br>
and you can decide the transition time of any slide
</div>
</div>
<div data-thumb="img/thumbs/up-official-trailer-fake.jpg">
<iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lWp7_R0?wmode=transparent&autoplay=1" data-fake="img/slides/up-official-trailer-fake.jpg" frameborder="0" allowfullscreen></iframe>
<div class="elemHover caption fromLeft elemToHide" style="bottom: 350px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; left:0">
You can also display videos, but it requires a "fake image"... read the documentation please
</div>
</div>
</div><!-- #pix_diapo -->
</div>
</section>
<script>
$(function(){
$(".pix_diapo").diapo();
});
</script>
<div id="footer" class="container_12">
<div style="text-align:center; color:#333333;" id="copyright" class="grid_12">
<p>Copyright 2012 © - Armilla.dk - Alle rettigheder forbeholdt Armilla - Kontrolpanel - Log ud <br />Webdesign af DoWEB</p>
</div>
</div>
</body>
</html>
It might be an white-space issue, where your html, css looks good on paper (in chrome developer), but isn't interpreted as it should be. To detect, if this is really the case, I would uglify my html and strip all whitespace in the html problem area.
If it turns out to be true, here are various approaches to this topic, even though most of 'em have small drawbacks (long uglified html lines, unnecessary comments, uncommon line breaks, ..).
After converting my index.php to UTF-8 Without BOM the whitespace issue dissappeared. So i'm a happy camper now! :D
I found this post about the same problem appearing in Wordpress when using Notepad++.
http://wordpress.org/support/topic/head-scriptslinks-showing-up-inside-body-tag