What I'm trying to accomplish is this:
Name Surname Phone: 123
Joe Cool Fax: 123
Charlie Brown Email: 123
Some more text goes here, after these two introductory columns. Normal text just
keeps going, and going, and going ...
that is to align the right column of text? Is it possible to make that via Markdown, or maybe via HTML or CSS tables, but in such a way that a table border isn't visible?
Here the HTML and CSS as per your question.
<!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 type="text/css">
.panel-inside {
padding-left: 0px;
padding-right: 0px;
overflow:auto;
}
.row
{
height: 30px;
width:100%;
vertical-align:middle;
}
.label
{
font-size: 12pt;
display:inline;
float:left;
margin-left:5px;
width:200px;
}
.label-right
{
font-size: 12pt;
color:#686868;
display:inline;
float:right;
margin-right:7px;
width:200px;
}
.listSeparator
{
clear:both;
height:0;
}
</style>
</head>
<body>
<div class="panel-inside">
<div class="row">
<div class="label">Name Surname </div>
<div class="label-right">Phone: 123</div>
</div>
<div class="listSeparator"> </div>
<div class="row">
<div class="label">Joe Cool</div>
<div class="label-right">Fax: 123</div>
</div>
<div class="listSeparator"> </div>
<div class="row">
<div class="label">Charlie Brown</div>
<div class="label-right">Email: 123</div>
</div>
</div>
<div id="content">
<p>Some more text goes here, after these two introductory columns. Normal text just keeps going, and going, and going ...
</p>
</div>
</body>
</html>
For output here is the fiddle: http://jsfiddle.net/LsGSc/
Related
I am trying to design a front-end with HTML and CSS, I am unable to use the div and style them with CSS to have a look like below format.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.students-page-container{
display: flex;
align-items:center;
justify-content:space-between;
}
.label-style{
font-weight:600;
font-family:'sans-serif';
font-size:24px;
align-items: center;
color: black;
margin-left:2rem;
line-height:28.8px;
display:flex;
}
.button-style{
border:none;
background:none;
padding:none;
font-weight:400;
size:12px;
line-height:14.4px;
}
.box-design{
width: 100 %;
background-color: gray;
}
.child-one{
width: 50%
min-height"400px;
background-color:white;
float:left;
}
.child-two{
width: 25%
min-height"200px;
background-color:white;
float:right;
}
.child-three{
width: 25%
min-height"200px;
background-color:white;
float:right;
}
</style>
</head>
<body>
<!-- Top Row Container-->
<div class="students-page-container">
<div class="label-style">
<span> student number: 92837293</span>
</div>
<div>
<button class="button-style">
<u> all students</u>
</button>
</div>
</div>
<!-- for the boxes -->
<div class="box-design">
<div class="child-one">
<p> Studnt Name: mike jordan</p>
....
...
...
..
<hr>
<p></p>
</div>
<div class="child-two">
<p> Alerts</p>
</div>
<div class="child-three">
<p> Contact Details</p>
</div>
</div>
</body>
</html>
I am able to display first row student number with a link to all students in the correct format. But as soon as i am trying to write other div elements for boxes and setting min-height. the box is overriding the exiting top and header of the page.
I am quite new to front-end and learning .any help would be greatly appreciated
Expecting how to achieve the Layout which is high-lighted with red box
What I need is two divs in following fashion:
[-width-of-content-][------------------remaining-width-of-page----------------------------]
I remember how in olden days it was a breeze to do this by using tables. But now tables are taboo, so how do I achieve this with div? I have been spending hours trying to figure this one out!
<div style='float:left;display:inline-block'> Hello</div>
<div style='float:left;width:100%''> THIS DIV BREAKS</div>
You could also achieve this using flexbox: http://jsfiddle.net/yr05wkuh/1/
This would keep your DIVs the same height, without requiring you to set a value.
CSS
.container {
display: flex;
}
.div1{
background-color:yellow;
}
.div2{
flex: 1 0;
background-color: red;
}
HTML
<div class="container">
<div class="div1"> Hello</div>
<div class="div2"> THIS DIV BREAKS</div>
</div>
Here's a good resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You only need to float the left element.
HTML
<div id="left">Hello yoyoyoy jrllo hello blah blah</div>
<div id="right"></div>
CSS
#left,#right{
height:50px;
}
#left{
background:red;
float:left;
}
#right{
background:green;
}
https://jsfiddle.net/qb3374ou/
EDIT: right div with content.. same result
https://jsfiddle.net/qb3374ou/1/
two divs side-by-side is impossible but this might work:
<div class="row">
<div class="col-md-10 col-md-offset-1">
width of content
<div class="col-sm-9">
Remaining width of page
</div>
</div>
</div>
hope it helped.. .
Sorry bro,.. my mistake... this one is more working :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">Width of content</div>
<div class="col-sm-8" style="background-color:lavenderblush;">Remaining Pages</div>
</div>
</div>
</body>
</html>
Not sure if I'm understanding you correctly, but I think you're trying to get this:
HTML:
<div class="right">Text goes here</div>
<div class="left">Text for the left div goes here</div>
CSS:
.right {
float:right;
background: #ddd;
background-repeat: no-repeat;
width: 240px;
height: 100px;
}
.left {
background-color:#ccc;
height: 100px;
}
fiddle: http://jsfiddle.net/veW2z/88/
Actually,"col-md-" are the classes of Bootstrap ..u need to include the Bootstrap css to make it work..Here is the link for itenter link description here
This contain complete Bootstrap but u need to include only the css in it and write the code
I'm having trouble linking my external file sheet to the separate html page. The .css file and html file are in the same folder also but when i run it the content is only appearing. Any help is appreciated. Thanks!
CSS Code
div
{
border-radius:5px;
}
#header
{
z-index:1;
width:97.%;
height:60px;
background-color:red;
margin-top:-20px;
margin-bottom:10px;
position:fixed;
}
#name
{
float:left;
margin-left:5px;
padding-top:5px;
font-size:16px;
font-family:Verdana, sans-serif;
color: #ffffff;
}
#email
{
float:left;
margin-left:5px;
padding-top:5px;
font-size:16px;
font-family:Verdana, sans-serif;
color: #ffffff;
}
#sidebar
{
left:90px;
top:160px;
position:fixed;
width:200px;
height:600px;
background-color:gray;
}
#content
{
left:290px;
top:160px;
position:fixed;
width:600px;
height:600px;
background-color:lightblue;
}
p
{
padding-left: 50px;
padding-top: 50px;
}
HTML Code
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="homepage.css" />
<title>HTML Project</title>
</head>
<body>
<div id="page">
<div class="topNaviagationLink">Home</div>
<div class="topNaviagationLink">About</div>
<div class="topNaviagationLink">Portfolio</div>
<div class="topNaviagationLink">Services</div>
<div class="topNaviagationLink">Contact</div>
</div>
<div id="mainPicture">
<div class="picture">
<div id="headerTitle">Project</div>
<div id="headerSubtext">HTML Project</div>
</div>
</div>
<div class="contentBox">
<div class="innerBox">
<div class="contentTitle">The Title of an Article</div>
<div class="contentText"><p>content </p><br />
<p>Content.</p><br />
<p>Other Content.</p></div>
</div>
</body>
</html>
That's what you need. See there please. I noticed lost div , check your code.
http://jsfiddle.net/vo9hLzqf/
If you feel problems with other styles like #email #name etc. check that in HTML you set right type
if your css is #email you should use <div id="email">%yourcode%</div>
and .email will be <div class="email">%yourcode%</div>
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="homepage.css" />
<title>HTML Project</title>
</head>
<body>
<div id="page">
<div class="topNaviagationLink">Home</div>
<div class="topNaviagationLink">About</div>
<div class="topNaviagationLink">Portfolio</div>
<div class="topNaviagationLink">Services</div>
<div class="topNaviagationLink">Contact</div>
</div>
<div id="mainPicture">
<div class="picture">
<div id="headerTitle">Project</div>
<div id="headerSubtext">HTML Project</div>
</div>
</div>
<div class="contentBox">
<div class="innerBox">
<div class="contentTitle">The Title of an Article</div>
<div class="contentText"><p>content </p><br />
<p>Content.</p><br />
<p>Other Content.</p></div>
</div>
</div>
My main problem here is that I have one .css stylesheet hooked up to 3 page because this really is just forming a template for the time being until I can decide how I want each page to look individually.
I preformed some div positioning on the website and I think it looks nice and centered on most of the pages...most. I have one page that is hooked up to the correct style sheet and will change anything I add to the style sheet, except where some divs won't shift on this one page. Here is a screenshot of a page that works:
Click here
And one that doesn't:
Click here
If you look closely, you are can see that my links are shifted more to the upper-right corner and so are my main content sections. The other two links that are used in this website look the same as the working page, by the way.
CODING (Warning, there may be a tad unnecessary code there, but the coding is exactly the same on all websites except for the img src attributes, so there is no reason that all page wouldn't look the same):
Page that works:
<!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>Teens For Antarctica Preservation</title>
<link href="template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
<div>
<p><a id="firstlink" href="index.html">TAP</a>
<a id="rollover" href="whatis.html">Who is TAP</a>
<a id="rollover" href="why.html">Why we do it</a>
<a id="rollover" href="resources.html">Resources</a></p>
<p> </p>
</div>
<p> </p>
<p> </p>
<img id="image" src="images/14_Seal2.jpg" /> <!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>
<div id="footer"><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>
</body>
</html>
This is the code for the website that doesn't work:
<!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>Who is TAP?</title>
<link href="template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
<div>
<p><a id="firstlink" href="index.html">TAP</a>
<a id="rollover" href="whatis.html">Who is TAP</a>
<a id="rollover" href="why.html">Why we do it</a>
<a id="rollover" href="resources.html">Resources</a></p>
<p> </p>
</div>
<p> </p>
<p> </p>
<img src="images/14_Teens.jpg" id="image"/><!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>
<div id="footer"><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>
</body>
</html>
And here is my CSS stylesheet:
#charset "utf-8";
/* CSS Document */
.header
{
height: 150px;
width: 100%;
margin-left: 25px;
margin-right: 50px;
position:relative;
left:0px;
top:0px;
}
html
{
width: 1000px;
height: 650px;
background-color:#D7D7FF;
}
a#rollover:link, a#rollover:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#B8B8B8;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
border:1px solid #000;
float:left;
margin-top:30px;
}
a#rollover:hover, a#rollover:active
{
background-color:#A7A7A7;
}
a#firstlink:link, a#firstlink:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#B8B8B8;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
border:1px solid #000;
float:left;
margin-top:30px;
margin-left:265px;
}
a#firstlink:hover, a#firstlink:active
{
background-color:#A7A7A7;
}
#image
{
height:230px;
width:300px;
float:left;
border: 3px solid #B5B5B5;
margin-left:150px;
margin-top:10px;
border-radius:25px;
box-shadow:10px 10px 6px #A3A3A3;
}
#main
{
height:250px;
width:450px;
border:3px solid #B5B5B5;
margin-left:500px;
margin-top:15px;
border-radius:25px;
box-shadow:10px 10px 6px #A3A3A3;
padding-left:10px;
padding-top: 6px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight:400;
background-color:#FFF;
}
#footer
{
height:100px;
bottom:0px;
text-align:center;
width:100%;
padding-top:100px;
padding-left:25px;
}
#pfoot
{
margin-left:50px;
}
Please provide any insite on how to fix this problem.
Working
<div class="header">
<div style="margin-left:200px;">
<img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
Not working
<div class="header">
<div style="margin-left:200px;">
<img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
On the not working version, you've missed out the closing div for 'header'
I see, your html code is not the same.
1st document
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
<div>
and the second document:
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
<div>
the second document is not correct, as you forgot to close the second div.
I am confused as to why when I float an object it no longer expands the border of the container it is in. Here is a simple bit of code I start with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Learning CSS</title>
<style>
.content
{
border: #000000 solid 3px;
clear: left;
padding: 1em;
}
.stuff
{
}
</style>
</head>
<body>
<h1>Learning CSS</h1>
<div class="content">
<h2>Page 1</h2>
<p>Text...</p>
<div class="stuff">
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
</div>
</div>
</body>
</html>
This link will display the results of this code
When I change the style of .stuff to:
.stuff
{
float:right;
}
This link shows what I get now
I would appreciate someone explaining why the floating content no longer expands the parent div or is contained in the parent div .content ?
thanks in advance
You'll need to add overflow: hidden; to your container element. Here is a working jsFiddle.
Edit: both overflow: hidden and overflow:auto work in this case.
You need overflow: auto to the parent container, not overflow: hidden.
Elements after the floating element will flow around it.
You can avoid this by using the clear property.
So right after your div having class stuff, add this:
<div style="clear:both"></div>
See your example on jsfiddle here
You need to use the clearfix hack to fix this. Try this code instead:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Learning CSS</title>
<style>
.content
{
border: #000000 solid 3px;
clear: left;
padding: 1em;
zoom: 1;
}
.stuff
{
float: left;
}
.content:before, .content:after
{
content: "";
display: table;
}
.content:after
{
clear: both;
}
</style>
</head>
<body>
<h1>Learning CSS</h1>
<div class="content">
<h2>Page 1</h2>
<p>Text...</p>
<div class="stuff">
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
</div>
</div>
</body>
</html>
To have a float expand the border of the container it is in you will need to apply what is called a clearfix to the container. There are probably a dozen different ways to do this, so instead of giving you one, I'll refer you to an excellent question whose answers list several: What methods of ‘clearfix’ can I use?