I cant find the text in browser when i use this code, caan someone please help me out telling me my errors i cant seem to find the problem its all simple html and css
<html>
<head> <title>Header example</title>
</head>
<style>
body {background: green;
height:100%;
margin:0; padding:0;
}
#header1 {z-index:2;
position:fixed; top:0; left:0;
width:100%; height:30%;
}
p1 {background:#FFFF00;
position:absolute; top: 80%; left: 5%;
height: 40%; width: 100%;
}
</style>
</head>
<body>
<body oncontextmenu="return false;">
<div id="header1"> <img src="Head_img.gif" width="100%" height="100%" />
</div>
<div id="p1">
<p Text text text text text text text textText text text text text text text text Text text text text text text text text </p>
</div>
</body>
</html>
Five major issues:
You have no <!DOCTYPE>
You have two <body> opening tags.
You have two </head> closing tags.
Your <style> block is sort of in a <head> tag.
You never properly open your <p> tag.
One minor issue:
Your <img /> tag should have an alt attribute that holds some text describing what's in that image.
This code should work:
<!DOCTYPE html>
<html>
<head>
<title>Header example</title>
<style type="text/css">
body {background: green;
height:100%;
margin:0; padding:0;
}
#header1 {z-index:2;
position:fixed; top:0; left:0;
width:100%; height:30%;
}
p1 {background:#FFFF00;
position:absolute; top: 80%; left: 5%;
height: 40%; width: 100%;
}
</style>
</head>
<body>
<div id="header1"><img src="Head_img.gif" width="100%" height="100%"></div>
<div id="p1">
<p>Text text text text text text text textText text text text text text text text Text text text text text text text text</p>
</div>
</body>
</html>
<p> Text text text text text text text textText text text text text text text text Text text text text text text text text </p>
not
<p Text text text text text text text textText text text text text text text text Text text text text text text text text </p>
Well your <p> element does not have any end >...
<p Text
Should be
<p> Text
Related
I want to align an image, a title and a text block responsively using the bootstrap layout classes.
For the sm/xs breakpoint the title is supposed to be aligned next to the image in the top left corner, the text in full width (12col) underneath.
For the md breakpoint the text should align beneath the title but next to the image.
Here's a example image of the desired layout.
I assigned a col for each element in one row.
if I assign more than 12 column widths and push down the third column (text) with an offset, it will be aligned in a second row, while I want it to share the height of the image.
My brain hurts, thanks a lot for help and hints in any directions!
This is one of the many html sceletons I tried
<div class="container">
<div class="row">
<div class="image col-sm-6 col-md-6"></div>
<div class="title col-sm-6 col-md-6"></div>
<div class="text col-sm-12 col-md-6 col-md-offset-6"></div>
</div>
</div>
Here you go...
I suggest you to make two text boxes (i.e., text_1 and text_2). Use Bootstrap classes to show/hide them depending on the viewport width. To do so, apply d-md-block d-none to the text_1 and d-md-none d-block to the text_2.
See the snippet below.
#image {
background-color: greenyellow;
height: 200px;
}
#title {
background-color: gold;
height: 30px;
}
#text_1,
#text_2 {
background-color: red;
}
#text_2 {
height: 200px;
}
<!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.0'>
<title>Document</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>
</head>
<body>
<div class='container-fluid'>
<div class='row d-flex justify-content-between mb-3'>
<div class='col-6' id='image'>Image</div>
<div class='col-6 pe-0'>
<div class='col-6 w-100 mb-3' id='title'>Title</div>
<div class='col-6 w-100 h-75 d-md-block d-none' id='text_1'>Text</div>
</div>
</div>
<div class='row'>
<div class='col-12 d-md-none d-block' id='text_2'>Text</div>
</div>
</div>
</body>
</html>
I want to align some text above the edge of a box.
The box is an inline-block element and the text I want to align is <h2>2014 Pictures!</h2>.
This is what it looks like right now.
http://jsfiddle.net/Zr5yt/3/
As you can see the problem is the text is veering left.
I would like it if 2014 pictures! could start above the edge of the picture box. I've been stuck on this for days now; can anyone help?
HTML
<title>Picture Gallery</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link href='<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet' type='text/css'> rel='stylesheet' type='text/css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<body>
<div class="container clearfix">
<div class="grid_12">
<h1>Picture Gallery</h1>
</div>
<div class="grid_3">
<ul class="nav">
<li class="first">Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
<li>Project 4</li>
<li>Project 5</li>
<li class="last">Contact Me</li>
</ul>
</div>
<div class="grid_9 omega">
<h2>Introduction</h2>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
Click to learn about me
</div>
<div id="gallery" class="grid_12">
<h2>2014 Pictures!</h2>
<img src="img/1 crop.jpg" alt="Picture">
<img src="img/2 crop.jpg" alt="Picture">
<p> For more photos click here </p>
</div>
</body>
</html>
STYLE CSS
body {
font-family:'Source Sans Pro', sans-serif;
color: #FF00DB;
background: #A1B3FA ;
}
a {
color: #0000FF;
text-decoration: none;
}
h1 {
font-size: 5em;
letter-spacing: 1.5px;
text-align: center;
}
h2 {
font-size: 1.750em;
letter-spacing: 1.5px;
margin: 20px 20px 0 0;
text-align: left;
}
.btn {
color: #FF0000;
background: #4FB69F url('img/texture.png') no-repeat right top;
padding: 10px 10px;
margin: 0px 0px 0 0;
border-radius: 40px;
text-transform: uppercase;
}
.btn:hover {
background-color: #4c4756;
}
ul.nav {
margin-right: 20px;
list-style: circle;
float: left;
}
ul.nav li {
margin-bottom: 0px;
}
#gallery {
clear: both;
text-align: center;
}
#gallery img{
border: 8px solid;
color: #0000FF;
margin: 40px 0px 0px 0px;
}
GRID CSS
.grid_1 { width: 65px; }
.grid_2 { width: 150px; }
.grid_3 { width: 235px; }
.grid_4 { width: 320px; }
.grid_5 { width: 405px; }
.grid_6 { width: 490px; }
.grid_7 { width: 575px; }
.grid_8 { width: 660px; }
.grid_9 { width: 745px; }
.grid_10 { width: 830px; }
.grid_11 { width: 915px; }
.grid_12 { width: 1000px; }
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
margin: 0 20px 10px 0;
float:left;
display: block;
}
.alpha{margin-left:0px;}
.omega{margin-right:0px;}
.container{
width: 1000px;
margin: auto;
}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
Updated Jsfiddle
just added
#gallery h2 {
text-align:center;
}
is this the way you wanted?
I'm hoping someone can point me the right way. When I view my site in Dreamweaver, all of my divs line up correctly. That is to say, the text sits on the background next to the menu div. However, when I test in a browser, the text sits at the bottom, below the background image.
http://jsfiddle.net/sodisarmingdarling/Pr5AQ/
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
html, body, .container {
width: 100%;
height: 100%;
margin: 0;
padding:0;
background-image:url(Background.gif);
background-repeat:no-repeat;
}
.menu {
padding: 70px 10px;
float: left;
}
li{
padding: 10px 20px;
margin: 0px 0;
list-style-type: none;
border: 0px;
}
.content{
padding: 130px 10px;
float: left;
font-family: "Letter Gothic Std Bold";
font-size: 16 pt;
color: #99CCFF;
}
</style>
</head>
<body>
<div class="container">
<div class="menu">
<ul>
<li><a href = "#" ><img src="images/DarkLayout_03.gif" width="166" height="66" /></a></li>
<li><img src="images/DarkLayout_06.gif" width="166" height="66" /></li>
<li><img src="images/DarkLayout_08.gif" width="164" height="66" /></li>
<li><img src="images/DarkLayout_11.gif" width="164" height="66" /></li>
<li> <img src="images/DarkLayout_13.gif" width="166" height="66" /></li>
</ul>
</div>
<div class="content">
text text text
</div>
</div>
</body>
</html>
What I see in Dreamweaver:
What I get in the browser (tested in Safari, Chrome, and Mozilla):
In the CSS for the .content, change the float from left, to none.
Current CSS:
.content{
padding: 130px 10px;
float: left;
font-family: "Letter Gothic Std Bold";
font-size: 16 pt;
color: #99CCFF;
}
New CSS:
.content{
padding: 130px 10px;
float: none;
font-family: "Letter Gothic Std Bold";
font-size: 16 pt;
color: #99CCFF;
}
Here is a jsFiddle of it (using random images in the html), http://jsfiddle.net/FvAW4/
Whilst the current CSS works for small text, with larger text it forces the text to go underneath everything. Changing it to none will solve this.
Design view is intended as a viewport for you to work in, and not as a browser to test in (even though most content is displayed the same in browsers). Dreamweaver has an option to enable the Design view to render it as though it were a browser, however. This option is called the "Live" view, and it is the tab next to the Design view tab.
I would suggest you get used to using Live view, as it's quick and easy to display the page. But remember, sometimes Dreamweaver renders the page contents differently to that of browsers.
I've got some problem with css, the content is sticking out from the boundaries.
It is expected to have a scrollbar rather than hidden overflow, but the boundaries.
Please help.
Here's the code, which reflects my CSS structure:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body{
border:3px solid #FFAD17;
background-color:#FFF;
border-radius:7px;
font:9.5pt Tahoma;
margin:0px;
padding:0px;
}
html {
margin:0px;
padding:0px;
}
div.header{
background-color:yellow;
background-position:top;
padding: 3px;
}
div.wrapper{
float:left;
}
div.context_wrapper{
margin-left:158px;
padding: 3px;
}
div.context{
float:left;
}
div.menu{
text-align:center;
padding: 3px;
width:140px;
float:left;
}
div.footer{
background-color:yellow;
background-position:bottom;
width:auto;
padding: 3px;
clear:both;
}
</style>
</head>
<body>
<div class="header">Head</div>
<div class="wrapper">
<div class="menu">Menu</div>
<div class="context_wrapper">
<div class="context">
ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent
</div>
</div>
</div>
<div class="footer">Foot</div>
</body>
</html>
a busy cat http://img215.imageshack.us/img215/6065/20120223132157.png
I shouldn't style the body element like it was a <div> element, better to make a new wrapper. Furthermore, from your question I gather you're looking for something like this: http://jsfiddle.net/SQDXt/
Basically, this adds the wrapper div with the scrollbar when your content exceeds the size of the wrapper. Also, the header and footer are within the second wrapper, to span the whole width when the content exceeds the first wrapper's width.
I am trying to get two elements to sit side by side inside a div or other element, so both two elements are always centered in the page.
Here's the catch... I cannot use any fixed widths, it is dynamically generated by javascript. It would seem that from reading other posts that this is not possible without fixed widths, but I wanted to see if any one had any other ideas to achieve the same result.
HTML:
<body>
<div class="centerdiv">
<div class = float1></div>
<div class = float2></div>
</div>
</body>
CSS:
body {text-align: center; width: 100%;}
.centerdiv {margin: 0 auto;width: 100%}
div.float1 {float:left; display:inline;}
div.float2 {float:left; display:inline;}
You can use the follwing code to center the div side by side.
<html>
<head>
<style type="text/css">
body {text-align: center; width: 100%;}
.centerdiv {margin: 0 auto;width: 100%;margin-left:40%;}
.float1{border:1px solid black;width:10%;float:left;}
</style>
</head>
<body>
<div class="centerdiv">
<div class = float1>Hello</div>
<div class = float1>Hai</div>
</div>
</body>
</html>
Hope this helps!!!!!!