I want to keep everything within the parent div but the second div goes outside, as if starting a new row and I can't figure this out. Can someone please tell me why>
Thanks.
<!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>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
</head>
<body>
<div style="border:1px solid #000;">
<h3>Title</h3>
<p>Everything here expands with the parent div but the div just below this paragraph tag will not expand.</p><br />
<div>
<span style="float:left; width:49%; border:1px solid #000;">
Book<br />
<select id="book" name="book">
<option value="">Select..</option>
</select>
</span>
<span style="float:right; width:49%; border:1px solid #000;">
Chapter<br />
<input type="text" id="chapter" name="chapter" />
</span>
</div>
</div>
</body>
</html>
These are the new changes and renders correctly. Please see if I am missing anything else.
<!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>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
</head>
<body>
<div style="border:1px solid #000;">
<h3>Title</h3>
<p>Everything here expands to the parent div but the div just below this paragraph tag will not expand.</p><br />
<div>
<span style="float:left; width:49%; border:1px solid #000;">
Book<br />
<select id="book" name="book">
<option value="">Select..</option>
</select>
</span>
<span style="float:right; width:49%; border:1px solid #000;">
Chapter<br />
<input type="text" id="chapter" name="chapter" />
</span>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
I would add the following styles to the div that contains the floating divs:
overflow: hidden;
zoom: 1;
The overflow setting ensures it fully wraps its floating child divs and the zoom setting is for IE browsers, to kick them into "hasLayout" mode. Using special empty divs with clear:both is a rather ugly, dated way of ensuring you have the correct layout.
There is an excellent article on the subject here:
http://www.quirksmode.org/css/clearing.html
although the article uses width: 100% to achieve the same end.
Since you’ve used float, that container has zero height as far as the parent container is concerned. To change that, put an extra dummy tag just before the end of the parent div:
<div style="clear: both;"> </div>
Related
In my Spring MVC + Thymeleaf application, I have a default fragment that mounts the page. It is:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:include="fragments/common :: commonFragment">
<meta charset="UTF-8" />
<link rel="shortcut-icon" th:href="#{/assets/img/favicon.png}" type="image/x-icon" />
<title th:text="#{app.name}"> </title>
</head>
<body>
<div th:id="defaultFragment" th:fragment="defaultFragment">
<div th:replace="fragments/header :: headerFragment"></div>
<div class="main-container container-fluid">
<div class="page-container">
<div th:replace="fragments/sidebar :: sidebarFragment"></div>
<div class="page-content">
<div class="page-body">
<div layout:fragment="content"></div>
</div>
</div>
</div>
</div>
<div th:replace="fragments/footer :: footerFragment"></div>
</div>
</body>
</html>
Some pages, specially those with very wide tables overspan the width of the visible area and not only looks bad, you have to move the browser "view port" with arrow keys. I'd like the content fragment to be auto adjustable.
How to to that?
You can use CSS overflow property to "hide" the overflowing content. Seet the width and overflow property of the element.
.page-body {
width: 800px;
overflow: hidden;
/* OR
overflow: scroll; */
}
<div class="page-content">
<div class="page-body">
<div layout:fragment="content"></div>
</div>
</div>
I am doing a project for school and cannot figure out how to line the snowboard pictures up with the names of the products and prices. I need them to line up so it would look like a product page from a websiteHow would I line this all up?
<!--Doctype tells the browser the rules to follow-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--First required tag-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--The head is just information-->
<!--The title is what is shown on the tab bar on the browser-->
<title>Snowboards</title>
<!--Meta is data about the data. This is the english character set-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="ski store.css"/>
</head>
<!--The body is what is shown on the browser-->
<body>
<div id="products">
<div>
<img src="burton1.jpeg" style="float: left;"/>
</div>
<div>
<img src="burton2.jpeg" style="float: left;"/>
</div>
<div>
<img src="soloman1.jpg" style="float: left; height: 300px;"/>
</div>
<div>
<img src="soloman2.jpg" style="float: left; height: 300px;"/>
</div>
</div>
<div style="float: left;">
<h3 >Burton Custom Flying V</br>$550</h3>
</div>
<div style="float: left;">
<h3 >Burton Sherlock</br>$500</h3>
</div>
<div style="float: left;">
<h3 >Salomon Pulse</br>$270</h3>
</div>
<div style="float: left;">
<h3 > Salomon Protocol</br>$700</h3>
</div>
<!--Always the last two tags-->
</body>
</html>
an easy way you could make them line up is by doing this
h3 {
line-height: 300px;
width: 300px;
}
#products > div {
height: 300px;
width: 300px;
}
Adjust the pixels according to how you want it.
Put that in your CSS of course. Or else you got to style each div and h3, which would be a lot more work.
I would highly, highly recommend a table for this. The code might be:
<table>
<tr>
<td><img src=snowboard1.jpg width=100%></td>
<td><img src=snowboard2.jpg width=100%></td>
<td><img src=snowboard3.jpg width=100%></td>
</tr>
<tr>
<td><h1 align=center>The Snowboard 1</h1><br><h1 align=center>$100</h1></td>
<td><h1 align=center>The Snowboard 2</h1><br><h1 align=center>$200</h1></td>
<td><h1 align=center>The Snowboard 3</h1><br><h1 align=center>$300</h1></td>
</tr>
</table>
Obviously, just use the actual names and prices of the snowboards, and you can add more <td>'s as is needed.
im learning HTML and CSS right now.
Now im trying to create a simple Layout,
HEADER
below that a
A MENU BAR
and below that a
NAVIGATION BAR in the right and MAIN SECTION in the right
Im not able to place the navigation bar and the main section side by side.
THE main section goes below the navigation bar and not on its side
The code:
<!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>
</head>
<body>
<center>
<div style="height:70px; width:800px; background-color:red; color:white; font-size:30px" align="center">
<strong>WELCOME</strong>
</div>
<div style="height:30px; width:800px; background-color:blue; color:white; font-size:15px; top:80px" align="center">
<div style="width:200px; float:left">
HOME
</div>
<div style="width:200px; float:left">
liwjoejlsn
</div>
<div style="width:200px; float:left">
lskdjflsd
</div>
<div style="width:200px; float:left">
ABOUT
</div>
</div>
</center>
<center>
<div style="height:800px; width:800px; background-color:grey; color:white; font-size:10px; top:100px">
<div style="height:800px; width:200px; float:left; border-style:solid; border-width:2px;">
<ul>
<li>Hello</li>
<li>hey</li>
<li>who is</li>
<li>forgive</li>
</ul>
</div>
<div style="height:800px;width:600px; float:left; border-style:solid; border-width:2px; left:200px;">
<p>
lsjdgfio jsldfkslj;do fsmi;odfml dsijfo siuldhf iofj s dofus <br> klsjhdfioy oasdilufilh aoudsfk <br> ksajhkdfjhu aosls
</p>
</div>
</div>
</center>
</body>
</html>
If you want to have two div elements side by side you should use float:left;. As far as your code is concerned, you are using old code, such as center and you should really start naming your div elements. It would also be better if you placed your css code on a separate file and called it from your html.
There's too much to cover from just one post, but I did write up some small demos so you can see how float:left; works. I also fixed your code so now you have the divs side by side.
FLOAT LEFT DEMO
YOUR CODE
in this example you can use
display: inline-block;
I have a webpage I made here: http://jsfiddle.net/KM9HJ/
<!DOCTYPE html />
<head>
<title>Home</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo">
<img style="width:50; height:50; float:left;" src="Content/Portal%20Layered.png"/>
<img style="width:50; height:50; position:relative; left:-50px; z-index:2;" src="Content/Blank.png"/>
<div><h2 id="headerh2">Cody Shearer</h2></div>
</div>
<div id="wrapper">
<div style="background-color:#565656">
<div id="links">HOME</div>
<div id="links">ABOUT ME</div>
<div id="links">GALLERY</div>
</div>
<article id="para">
<p>About This Website</p>
<div id="paraL2"><p>About this page:</p> <div id="paraP">This is</div></div></article>
</div>
</body>
If you look at the div that says "About this page:" you will see that it is positioned to the far right of the div and part of it is cut off (you may have to resize the result area to see this). What I want the words to do is to stay on one line and be aligned to the left. From what I have seen the issue can be fixed by removing the "float:left" from the #links area, or It can be helped a little by removing the "width: 150px;" from #link. The only issue is that I spent a long time trying to get other s
adding clear:left may help you.
#para {
clear:left;
....
I have two templates. index.html (PARENT) and test.html (CHILD)
I have a DIV which is fixed on top of the page, like a bar [#TopBar]. it stays there on the the PARENT template, but once it reaches the CHILD template, it insists on adding some sort of padding or margin, and its a few pixels off the top.
I tried overiding the css from within the child template, and still no luck. I stopped using the templates, and creating two full HTML files and that works(don't want to do this as i am duplicating html code). So it seems everytime i put {% extends "crm/index.html" %} on the child template it stuffs things up.
Heres my code:
PARENT - index.html
<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>{%block title%}Control Panel {%endblock%}</title>
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}crm/crm.css" />
</head>
<body>
<div id="TopBar" >
<div id="header">
<h1> TITLE</h1>
</div>
<div id="searches" >
<input type="text" id="search" name="search" /> <input type="button" value="submit" />
</div>
</div>
<div id="LeftCol">
<div id="LeftMenu">
<h3>MENU</h3>
</div>
</div>
<div id="RightCol">
<div id="UserProfile">
{% block content %}
<h1 class="profile"> USER PROFILE</h1>
<p>Random text</p>
{%endblock%}
</div>
</div>
</body>
</html>
CHILD - test.html
{% extends "crm/index.html" %}
{%block title%} Test {%endblock%}
{%block content%}
<h1 class="profile"> test</h1>
<p> hkhksjhgkdhskghdk</p>
{%endblock%}
CSS
*{padding:0px;margin:0px;}
body{background-color:#DBDBDB; }
#TopBar{width:100%; height:50px; background-color:#009999; margin:0px;}
#header{float:left}
#searches{float:right; padding:15px;}
#LeftCol{height:840px; margin-top:10px; width:200px; background-color:#C0C0C0; -moz-border-radius: 20px; -webkit-border-radius: 20px;-khtml-border-radius: 20px; border-radius: 20px;
display:block; overflow: hidden; float:left;}
#RightCol{width:1040px; margin:10px; color:black;-moz-border-radius: 20px; -webkit-border-radius: 20px;-khtml-border-radius: 20px; border-radius: 20px;
display:block; overflow: hidden; background-color:white; float:left;}
h1{color:white;font-family:"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
padding:5px;}
h1.profile{ color:black;font-family:"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
padding:5px;}
.h3{margin-left:70px; padding-top:10px}
I Only want to change content in the {% block content %} there is no reason for me to put other DIVS in blocks.
This is the output I get from the browser (right click, view source):
index.html:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title> Control Panel </title>
<link rel="stylesheet" type="text/css" href="/static/crm/crm.css" />
</head>
<body>
<div id="TopBar" >
<div id="header">
<h1>Control Panel</h1>
</div>
<div id="searches" >
<input type="text" id="search" name="search" /> <input type="button" value="submit" />
</div>
</div>
<div id="LeftCol">
<div id="LeftMenu">
<h3>MENU</h3>
</div>
</div>
<div id="RightCol">
<div id="Contents">
<h1 class="profile"> USER PROFILE</h1>
<p>Random text</p>
</div>
</div>
</body>
</html>
test.html:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title> Test </title>
<link rel="stylesheet" type="text/css" href="/static/crm/crm.css" />
</head>
<body>
<div id="TopBar" >
<div id="header">
<h1> Test</h1>
</div>
<div id="searches" >
<input type="text" id="search" name="search" /> <input type="button" value="submit" />
</div>
</div>
<div id="LeftCol">
<div id="LeftMenu">
<h3>MENU</h3>
</div>
</div>
<div id="RightCol">
<div id="Contents">
<h1 class="profile"> test</h1>
<p> hkhksjhgkdhskghdk</p>
</div>
</div>
</body>
</html>
i don't think this is a django problem, the extended template seems right.. maybe you could post the full HTML output of both the index.html and the test.html you receive when accessing your views in the browser...
try using the stylesheet for css reset it removes a lot of margins and paddings. it may not solve your problem, but usually it helps a lot