Space above header in ddsmoothmenu - html

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

Related

Why does my html and css website always put my buttons in the wrong place

im making a website from scratch for the first time, i am formally educated on html but not css
pls explain heres my html
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="icon" href="favicon.ico">
<title>Jinuine Design | Home</title>
</head>
<div class="header">
<div class="logo">
<img src="imgs/JinuineFavicon.png">
</div>
<div class="home">
<a href="index.html" class="homelink">
<h1 class="homebutt">Home</h1>
</a>
</div>
</div>
heres my css
.header {
height: 100px;
background: black;
}
.homebutt {
color: black;
padding-top: 50px;
padding-right: 110px;
}
someone please explain how to get the effect i want this is what it looks like
ss of my page
You need to set the style to .logo, not .header
.logo {
height: 100px;
background: black;
}
.homebutt {
color: black;
padding-top: 50px;
padding-right: 110px;
margin: 0;
}
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="icon" href="favicon.ico">
<title>Jinuine Design | Home</title>
</head>
<div class="header">
<div class="logo">
<img src="imgs/JinuineFavicon.png">
</div>
<div class="home">
<a href="index.html" class="homelink">
<h1 class="homebutt">Home</h1>
</a>
</div>
</div>
Please remove padding on button.
The CSS padding properties are used to generate space around an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are properties
for setting the padding for each side of an element (top, right,
bottom, and left).

Chrome not accepting Flex or height % CSS

Hi I got an issue with my page where I have used Flex and height:x% to achieve a very botched but working responsive height for two divs within a container.
The problem I have is that it works fine in FF but not Chrome. (Assume IE, edge etc) doesn't either.
Here is what it looks like in FF: http://prntscr.com/a712g6 (this is what it should be)
Here it is in Chrome: http://prntscr.com/a712q4
Below is the code: (excuse the mess its a hacked up copy and paste of source code)
<!doctype html>
<html lang="en">
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles/header.css?v=1.0">
<link rel="stylesheet" href="styles/content.css?v=1.0">
<link rel="stylesheet" href="styles/footer.css?v=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="MainHeader">
</div>
<div class="logged_container">
You are Logged in as <span style='font-weight:bold;'>Ryan</span> (<a href='logoff.php'>Log Out</a>)
</div>
<div class="navigation_container">
<a href="main.php">
<img src="img/test.png" alt="" height="16" style="vertical-align:top; padding-right:5px;">Home
</a>
</div>
<div class='content'>
<div class='contentTableView' style="flex: 1; flex-direction: column; min-height:100%; height: 100%; position: relative;">
<span class="contentHeader">Title</span>
<div id="map" class="map" style="float:left; width: 40%; margin-top: 1%; height:90%; min-height:90%; margin-left:20px; border:1px solid #0a639d;"></div>
<div id="controls" class="controls" style="float:left; width: 40%; margin-top: 1%; height:90%; min-height:90%; margin-left:10%; border:1px solid rgb(204, 204, 204); background-image: url('img/bms47.png');"></div>
</div>
</div>
<div class="footer">
Footer Text
</div>
</div>
</body>
</html>
Anyone got any suggestions?
EDIT: ATTACHED CSS
http://pastebin.com/59rcgQwM
EDIT2: Issue Example
jsfiddle.net/vctbszc2/3 – Adam Buchanan Smith

CSS not being applied to ID

My css isn't being applied to a specific img id element on page. I have spent about 30 minutes trying to figure this thing out to no avail. I have 2 other elements with the exact same html and css being applied correctly. Image in question: http://i.imgur.com/Lrtucyo.gif The other two images are just like that one as far as i can tell.
body{
font-family: 'Montserrat', sans-serif;
background: url(/img/body_bg.jpg);
color:#ddd;
font-weight: 700;
font size: 30px;
}
.container{
margin: 0 auto;
}
#blue{
height:8px;
background-color: #4eb1ba;
margin-bottom: 45px;
}
#img{
border-bottom: 2px solid #4eb1ba;
}
/*BOTTLE*/
}
#spray{
border: 1px solid #4eb1ba;
}
/*/BOTTLE*/
/*Vacuum*/
#vacuum{
border: 1px solid #4eb1ba;
margin-left: 400px;
margin-top: -130px;
}
/*Vacuum*/
/*MOP*/
#mop{
border: 1px solid #4eb1ba;
margin-left: 630px;
margin-top: -130px;
}
#portfolio{
margin-top:100px;
}
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<title></title>
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html" </a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>Get In Touch</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="row-fluid">
<h4 class="underline"><span>Recent images</span></h4>
<img src="img/clean-home1.jpg" width="960" height="540" alt="">
<div id="portfolio">
<div class="row-fluid">
<div class="span4">
<img src="img/bottle.gif" id="spray" width="180" height="130">
</div>
<div class="row-fluid">
<div class="span4">
<img src="img/vacuum.gif" id="vacuum" width="180" height="130"></img>
</div>
<div class="row-fluid">
<div class="span3">
<img src="img/mop.gif" id="mop" width="180" height="130" ></img>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>
You have a random closing brace before the #spray{} rule. Not sure if that is the problem, but maybe.
As I saw your codes, you don't have any element with id img in your HTML codes. I think you likely want to apply this CSS rule for all img elements, if so, replace your #img with img in your CSS style
Replace
#img {
border-bottom: 2px solid #4eb1ba;
}
with
img {
border-bottom: 2px solid #4eb1ba;
}

Fit to page issue

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.

How do I remove column padding to have full-width inputs in Bootstrap 3?

How do I get rid of padding in Bootstrap 3's columns?
In the following plunkr, I'd like for the button and text input to be touching: http://plnkr.co/edit/H5EIiCyiH8HbploTghVZ?p=preview and for each to fill the entire width of the div. I'd like them to have no left or right padding. Same for the "pull me left" and "me too" divs.
When I override the padding-left in my own CSS, it pulls everything to the left, making the "Jim" and "Hello" div's content off screen.
Any ideas?
You can achieve this by adding a class to the row which removes padding from all immediate div elements with a class name beginning with "col-".
See here: http://plnkr.co/edit/MBkojy?p=preview
Here's the entire code what you wanted :) Please give a try
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link data-require="bootstrap-css" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<style>
body {
padding-top: 60px;
}
#media (max-width: 979px) {
/* Remove any padding from the body */
body {
padding-top: 0;
}
}
</style>
<link href="style.css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<!-- Le javascript
================================================== -->
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap" data-semver="3.0.0" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="script.js"></script>
Just a div
<div class="row">
<div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">Jim</div>
<div class="col-xs-6">Hello</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6" style="padding-right:0px !important; padding-left:0px !important">
<button class="btn" class="col-xs-12" style="width:100%; float:right; background-color:green; ">Click</button>
</div>
<div class="col-xs-6" style=" padding-left:0px !important; padding-right:0px !important">
<input type="text" class="col-xs-12" style="width:100%;">
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">pull me left</div>
<div class="col-xs-6">me too</div>
</div>
</div>
</div>
</div>
I have done it for the button and text input :) you can proceed in the same way :)
You can set all divs to no padding:
div {
padding-left: 0px !important;
padding-right: 0px !important;
}
For the other two divs, you'll need to give them some named class (in my example 'padLeft') that return the left padding to the divs.
div.padLeft {
padding-left: 15px;
}
That is the minimally invasive way to do it. If you have more div's where you want padding than not you simply inverse this, using a separate class for divs that you want the padding removed and leave the others to their default.