I am trying to put a header on my page, but say for example i have two divs, which ever div is declared first will appear on top, and the second div wil appear below it. regardless of what position i set for it. Could anyone help me please?
css;
body
{
background-color:#CCC;
}
#pageHeader{
position:relative;
width:900px;
height:94px;
background-color:White;
margin:0 auto;
}
#nhsLogo
{
position:relative;
margin-left:40px;
}
#openingHours
{
position:relative;
margin-left:500px;
top:0px;
}
Html:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Template.master.cs" Inherits="Template.Template" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<link type="text/css" rel="stylesheet" href="css/default.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div id="pageHeader">
<div id="openingHours">
<p style="color:Green; font-size:18px; font-style:oblique;">0876 890756</p>
<p style="color:Purple; font-size:18px; font-style:oblique;">Opening hours</p> <p></p>
</div>
<div id="nhsLogo">
<p><img src="img/high.png" alt="GPlus logo" /></p>
</div>
</div>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<script type="text/javascript" src='<%# ResolveUrl ("~/Js/jquery-1.2.3.min.js") %>'></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
The easiest way to have two divs side-by-side, is to given them "float" CSS rules:
float:left;
https://developer.mozilla.org/en-US/docs/Web/CSS/float
alernatively you can use absolute positioning.
give your body the css rule: position:relative;
then any children elements of body that you want to position, give the css rules:
position:absolute;
top: 10px; //change this value to adjust vertical positioning
left: 10px; //change this value to adjust horizontal positioning
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Related
I'm fighting with this problem:
I have iframe in which I'm showing website, which has some html structure. And inside this structure is element, which has css property: height: 100%;
Problem is, that element stretch to iframes full height, anyway it shouldn't I think. Could you give me some idea, how to solve this problem?
Here is source code for iframe content:
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/swiper.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/style.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/grid.css" />
</head>
<body>
<div id="overview">
<div class="overview slider swiper-container swiper-container-horizontal">
<div class="swiper-wrapper">
XXX
</div>
</div>
</div>
<div id="benefits">
<div class="grid">
<article id="article1" class="clearfix">
<div class="text col right">
<h2>People behavior in one picture</h2>
</div>
</article>
</div>
</div>
</body>
</html>
Here is source code, where I put an iframe:
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Titulek stránky</title>
</head>
<body>
<iframe src="iframe.html" width="1600" height="4000"></iframe>
</body>
</html>
Thank you very much for you help.
On the child page (the page inside the iframe) will be shown starting from the top left corner, so positioning the child page is usually not necessary. The styling of the iframe's dimensions on the parent page determines how much of the child page will be seen. The easiest and most effective way is to make the iframe responsive (able to adapt to changes of screen sizes and/or window)
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Titulek stránky</title>
</head>
<body>
<iframe src="iframe.html" width="100%" height="100%" style="position: absolute; top:0; left:0; right:0; bottom: 0; width: 100%; height: 100%;overflow: hidden; overflow-x: hidden; overflow-y: hidden;" allowfullscreen webkitallowfullscreen mozallowfullscreen ></iframe>
</body>
</html>
I want to achieve this: two decoration elements (sort of waves) on both sides of the screen. Here's what I've got so far. If more elegant solution is possible (like styling with CSS only body element), then please advise.
Below solution would be fine, if both < img > elements would not be visible.
You can check this in action.
Here's the working FIDDLE.
Can you help?
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="styles/style.css" >
<style type="text/css">
.background_left {
background-image:url("http://www.destadesign.com/destacms/images/background_border_left.png");
background-repeat:repeat-y;
background-position:left;
position:absolute;
left:0;
}
.background_right {
background-image:url("http://www.destadesign.com/destacms/images/background_border_right.png");
background-repeat:repeat-y;
background-position:right;
position:absolute;
right:0;
}
.background_left, .background_right {
height:100%;
}
</style>
</head>
<body>
<div class="background_left">
<img src="http://www.destadesign.com/destacms/images/background_border_left.png">
</div>
<div class="background_right">
<img src="http://www.destadesign.com/destacms/images/background_border_right.png">
</div>
<div class="content" style="height:500px;"> <!-- content -->
</div>
</body>
</html>
Just do it like this:
body {
background:url("http://www.destadesign.com/destacms/images/background_border_left.png") left repeat-y,url("http://www.destadesign.com/destacms/images/background_border_right.png") right repeat-y;
}
This CSS adds two background images to body, positions them right or left respectively, and sets the repeat-y, so it doesn't fill the screen.
JSFiddle Demo
In my code class "slides" is working through external css link but class header is working through inline css only.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Site</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="slides">
<div class="header" style="width:100%; background-color:#630;"><img src="gz1.gif">
</div>
</div>
</body>
</html>
style.css
head,body{background-color:#CCC; margin:0; padding:0;;}
.slides{
overflow:hidden;
background:-moz-linear-gradient(bottom,red,white);
background:-ms-linear-gradient(bottom,red,white);
background:-o-linear-gradient(bottom,red,white);
background:-webkit-linear-gradient(bottom,red,white);
background:linear-gradient(bottom,red,white);
}
.header{position:fixed;}
I want to work class "header" code from external link instead of inline code...
To avoid inline css in your code, update your html and css like below:
Here we will remove inline styling from header div..
<div class="header"><img src="gz1.gif"></div>
And we will add the inline style of header div in the style.css like so...
head,body{
background-color:#CCC;
margin:0;
padding:0;
}
.slides{
overflow:hidden;
background:-moz-linear-gradient(bottom,red,white);
background:-ms-linear-gradient(bottom,red,white);
background:-o-linear-gradient(bottom,red,white);
background:-webkit-linear-gradient(bottom,red,white);
background:linear-gradient(bottom,red,white);
}
.header{
position:fixed;
width:100%;
background-color:#630;
}
Currently I have the below HTML code, as you can see there is no doctype specified:
<html lang="en">
<head>
<title>Website</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/plugins.min.js"></script>
<link rel="icon" type="image/x-icon" href="img/favicon.ico" />
</head>
<body>
<div class="container">
<div id="searchbar">
<form action="#" method="POST">
<div class="input-append">
<input class="span2" id="appendedInputButton" type="text" />
<button class="btn" type="button">Go!</button>
</div>
</form>
</div>
</div>
</body>
</html>
Mixed with the following style.css file:
#font-face{
font-family: Comfortaa;
src: url('Comfortaa.ttf');
}
body{
background-color: #77d5fb;
background-image: url('bottom_bg.jpg');
background-position: center bottom;
background-repeat: no-repeat;
font-family: Comfortaa;
}
#searchbar{
width:700px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -350px;
}
Having that code shows my background image just fine however when I add the <!DOCTYPE html> as is required by bootstrap, my background image declaration seems to be "ignored" and only the specified background color is shown.
I have done some testing and found that background-position is causing the issue.
With background-position: center bottom the image will not appear however background-image: center and it will appear but centered at the top of the page and I need it at the bottom.
How can I push down that background image?
Add
html,body{min-height:100%}
to your CSS.
As for the doctype, use this
<!DOCTYPE HTML>
so your document will look somewhat like this working example. Try it and you'll see the image is displayed just the way you want it to be displayed.
<!DOCTYPE HTML>
<html>
<head>
<title>Title Here</title>
<meta charset="utf-8">
<style>
html{
min-height:100%;
}
body{
min-height:100%;
background-color: #77d5fb;
background-image: url('bottom_bg.jpg');
background-position: center bottom;
background-repeat: no-repeat;
font-family: Comfortaa;
}
#searchbar{
width:700px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -350px;
}
</style>
</head>
<body>
<p id="searchbar">Just testing!</p>
</body>
</html>
Enjoy!
You should always use a doctype, otherwise you will be developing in the scary and unpredictable land called quirksmode, this is nothing you want. I suggest you add:
<!DOCTYPE html>
and try to fix your minor CSS issues with that in place.
I have a very simple holding page I built centering a div, anchor and image. For some reason it will not center in IE8 (either mode), and I am hoping someone can tell me why. I haven't had a chance to try it in other IE browsers. I have tried this in Chrome and FF3 where it works OK.
<html>
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
I said it was really simple. :)
Thank you,
Brett
Do you really want your page to work in quirks mode? Your HTML centers fine once I added doctype to to force standards mode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="http://stackoverflow.com/content/img/so/logo.png" id="toLogo"></a> </div>
</body>
</html>
The margin of auto on the sides of the div leave it up to the browser to decide where it goes. There is nothing telling the browser that the div should be centered in the body, or left or right aligned. So it's up to the browser. If you add a directive to the body, your problem will be solved.
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center;}
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
I added a 1px border to the div so that you could see what was happening more clearly.
You're leaving it up to the browser because it's in quirks mode. To remove quirks mode, add a doctype definition to the top, like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
Now you'll be able to see your 300 px div center on the page.
Add text-align:center to the body. That should do it when combined with the margin:0 auto on the div.
You can center without using the text-align:center on the body by wrapping the entire page contents in a full-width container & then setting text-align:center on that as well.
<html>
<head>
<title>Welcome</title>
<style>
#container {text-align:center;border:1px solid blue}
#pageContainer {width:300px; margin:0 auto; border:1px solid red}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="container">
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</div>
</body>
</html>
(I added the container div). It doesn't really change anything though... just an extra div. You still need all the same css properties.
You probably want to change it to the following:
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center; }
#pageContainer {width:300px;margin:0 auto;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
The text-align:center; is moved to the body. If you want to place other aligned left content within the div #pageContainer, then you'll need text-align:left; for that class. This is the solution that I have used in quite a few websites now and seems to work across all browsers (it's what Dreamweaver uses in it's starter templates).
FOR BLUEPRINT USERS
This drove my nuts, until i found this post: problem with ie8 and blueprint
Long story short, in you html code change the
<!--[if IE]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
for
<!--[if lt IE 8]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
Regards
Alex
This works for me on IE6,7,8,FF 3.6.3:
#container
{
width:100%;
}
#centered
{
width:350px;
margin:0 auto;
}
and
<div id="container">
<div id="centered">content</div>
</div>