I want to ask why my html code with and float can't divide the page into column form. I have already used float.I have seen other people code the similar things for dividing page to column.But Why it is not successful in this way.Is there any bug.
this is my html file.
<html>
<head>
<title >
Test
</title>
</head>
<body>
<h1 id="center" ><I>
Testing
</I></h1>
<div id="left_list">
<ul Type=Circle>
<LI>Main Page</LI>
<LI>Course</LI>
<LI>Location</LI>
</ul>
</div>
<div id="image">
<img src="hi.png" alt="FAIL">
</div>
<div id="image">
<img src="bye.png" alt="FAIL">
</div>
<div id="image">
<img src="download.jfif" alt="FAIL">
</div>
<LINK REL=Stylesheet TYPE="text/css" HREF="style.css">
</body>
</html>
This is style.css
#left_list{
Font-size:20px;
float: left;
width:300px;
margin-right:20px;
height:800px;
background-color:#00FF7F;
clear:both;
}
#image{
float:left;
margin-right:20px;
height:800px;
width:400px;
clear:both;
}
#rightimage{
float: right;
margin-right:20px;
height:800px;
width:400px;
clear:both;
}
#center{
align:center;
}
body{
background-color:#6495ED;
}
head{
font-size:large;
}
<div class="clearfix" id="wrapper">
<div id="left_list">
<ul Type=Circle>
<li>Main Page</li>
<li>Course</li>
<li>Location</li>
</ul>
</div>
<div id="image">
<img src="hi.png">
</div>
</div>
css code:
#wrapper {
margin-right: 200px;
border:2px dashed red;
}
#image {
float: left;
margin-right: 20px;
height: 400px;
width: 200px;
background: #444;
}
.clearfix:before,
.clearfix:after{
content:'';
display:block;
clear:both;
}
you don't use clear:both for floating elements.
Related
how can i achieve the attached layout
using html, bootstrap, CSS
where the circles will contains an images
and a detail box will be beside them
question has been updated with code snippet
what i have done is not accurate the sizes not responsive
and if i make the circle bigger than the rectangle it does not align vertically in middle
also the code inside the rectangle is not middle
could any one please provide me a demo
custom layout
.rectangle1{
display:block;
height:40px;
width:150px;
background:red;
position:relative;
margin-top:100px;
}
.circle1{
position:absolute;
height:40px;
width:40px;
border-radius:40px;
border:3px solid white;
left:0%;
margin-left:-25px;
top: 0px;
background:red;
}
.rectangle1{
display: inline-block;
height: 100px;
width: 100%;
background: #6f0a18;
position: relative;
}
.circle1{
position:absolute;
height:100px;
width:100px;
border-radius:50%;
border:3px solid white;
left:0%;
margin-left:-25px;
top: 0px;
background:red;
}
.circle2{
position:absolute;
height:100px;
width:100px;
border-radius:50%;
border:3px solid white;
right:0%;
margin-right:-25px;
top: 0px;
background:red;
}
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="rectangle1">
<img class="circle1" src="https://www.freeiconspng.com/uploads/camera-icon-circle-21.png" />
<h3 style="padding-left: 100px;">Title</h3>
<p style="padding-left: 100px;"> Sub Title</p>
</div>
</div>
<div class="col-md-6">
<div class="rectangle1">
<img class="circle2" src="https://www.freeiconspng.com/uploads/camera-icon-circle-21.png" />
<h3 style="padding-right: 100px; text-align: right;">Title</h3>
<p style="padding-right: 100px; text-align: right;"> Sub Title</p>
</div>
</div>
</div>
</div>
.outer-wrapp {
padding:30px;
}
ul {
list-style:none;
padding:0;
}
ul li {
margin: 55px 0px;
}
.wrapp{
padding:0px 15px;
}
.left .box {
position:relative;
width:95%;
height:35px;
border:1px solid #000;
margin-left: 5%;
padding-left: 20%;
}
.left .circle {
position:absolute;
width:75px;
height:75px;
border-radius:50%;
background:#000;
top: calc(50% - 37.5px);
left: -37.5px;
}
.right .box {
position:relative;
width:95%;
height:35px;
border:1px solid #000;
margin-right: 5%;
padding-right: 20%;
}
.right .circle {
position:absolute;
width:75px;
height:75px;
border-radius:50%;
background:#000;
top: calc(50% - 37.5px);
right: -37.5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="outer-wrapp">
<div class="row">
<div class="col-xs-6 col-sm-6">
<ul class="left">
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
<span>Text</span>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
</ul>
</div>
<div class="col-xs-6 col-sm-6">
<ul class="right">
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Try this. it works for you.
Try something like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.circle {
height: 40px;
width: 40px;
background-color: #000;
border-radius: 50%;
}
#id1 {
border: 1px solid black;
padding: 11px;
margin: 30px;
width: 100px;
}
</style>
</head>
<body>
<h2>Circle CSS</h2>
<div class="circle"><div id='id1'> text here</div></div>
</body>
</html>
try this
.container{
width:100%;
background:red;
margin:10px 0;
}
#image{
width:20%;
float:left;
}
#image img{
border-radius: 50px;
}
#text{
width:80%;
float:left;
}
#text h3{
padding:10px;
}
<div class="container">
<div id='image'>
<img src='https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png' width='100%' />
</div>
<div id="text">
<h3> Hello </h3>
</div>
<div style="clear:both;"></div>
</div>
<div class="container">
<div id='image'>
<img src='https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png' width='100%' />
</div>
<div id="text">
<h3> Hello </h3>
</div>
<div style="clear:both;"></div>
</div>
Hello there i have made a grid for my website and the issue I am having is the grid overlaps the footer element I have been trying everything from setting the grid container to height Auto to see if it automatically adjusts I can't give it a set height as the website is responsive any help would be appreciated attached is my HTML and CSS code for the grid :)
<html>
<head>
<link href="/styles.css" rel="stylesheet" type="text/css">
<link href="/services-styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="header">
<div class="nav">
<ul>
<li>Home</li>
<li>Services</li>
<li>About us</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="content">
<div class="title logo">
<h1>Logo's</h1>
</div>
<div class="title">
<h1>"Just a Glimpse of what we can do for you and your business"</h1>
</div>
<div class="Grid1">
<div class="Gallery1">
<a href="Images/logo1.jpg">
<img src="/Images/logo1.jpg" style="width:100%; height:100%;">
</a>
</div>
<div class="Gallery1">
<a href="Images/logo2.png">
<img src="/Images/logo2.png"style="width:100%; height:100%;">
</a>
</div>
<div class="Gallery1">
<a href="Images/logo3.jpg">
<img src="/Images/logo3.jpg" style="width:100%; height:100%;">
</a>
</div>
<div class="Gallery1">
<a href="Images/logo-grid3.jpg">
<img src="/Images/logo-grid3.jpg" style="width:100%; height:100%;">
</a>
</div>
<div class="Gallery1">
<a href="Images/logo-grid3.jpg">
<img src="/Images/logo-grid3.jpg" style="width:100%; height:100%;">
</a>
</div>
<div class="Gallery1">
<a href="Images/logo-grid3.jpg">
<img src="/Images/logo-grid3.jpg" style="width:100%; height:100%;">
</a>
</div>
<div class="Gallery1">
<a href="Images/logo-grid3.jpg">
<img src="/Images/logo-grid3.jpg" style="width:100%; height:100%;">
</a>
</div>
<div class="Gallery1">
<a href="Images/logo-grid3.jpg">
<img src="/Images/logo-grid3.jpg" style="width:100%; height:100%;">
</a>
</div>
<div class="Gallery1">
<a href="Images/logo-grid3.jpg">
<img src="/Images/logo-grid3.jpg" style="width:100%; height:100%;">
</a>
</div>
</div>
</div>
<footer>
<div class="Footer-Nav">
<ul>
<li>Home</li>
<li>Services</li>
<li>About us</li>
<li>Contact</li>
</ul>
</div>
</footer>
</div>
</body>
</html>
Here is code from main styles for all pages
.Gallery1{
margin:5px;
float: left;
width:300px;
height:200px;
position:relative;
border: 1px solid #ccc;
}
.Grid1{
max-width:945px;
position: relative;
height:auto;
margin:0 auto;
margin-top: 25px;
}
div.logo{
margin-top: 15px;
text-align: center;
font-size: 40px;
font-family: Monospace;
padding: 5px;
}
div.Gallery1:hover{
border-color:#777;
}
.title{
position: relative;
text-align: center;
margin-top:25px;
font-family: Monospace;
}
#media screen and (max-width:928px){
div.Grid1 {
width:308px;
margin:0 auto;
}
}
#media screen and (max-width:487px){
div.Gallery1{
width:100%;
}
div.Grid1{
width:90%;
}
.title{
margin:25px;
}
}
.Grid1{
height: auto;
position: relative;
}
.content{
height:100%;
margin: 0;
padding: 0;
position: relative;
}
Media Queries
#media screen and (max-width:928px){
div.Grid1 {
width:308px;
margin:0 auto;
}
}
#media screen and (max-width:487px){
div.Gallery1{
width:100%;
}
just add float left to your footer and width 100%
footer{
width:100%;
float:left;
}
so I solved the issue I was having myself here is the snippet of code to where I solved the issue I basically had to recode my footer and added a height dimension to solve the issue if anyone is having this issue hope it helps :)
Footer{
width: 100%;
height: 76px;
background-color:#404040;
margin-top: 76px;
}
.footer-nav{
width:403px;
height: 21px;
position: relative;
margin-top: 25px;
margin-left:10px;
}
.footer-nav ul li{
display: block;
float: left;
padding-left:15px;
padding-right:15px;
}
.footer-nav ul li a{
text-decoration: none;
color:white;
font-family:monospace;
font-size: 14px;
}
.image-fixed-size-and-vertical-middle {
width: 40px;
height: 40px;
vertical-align: middle;
padding-top: auto;
padding-bottom: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group">
<li class="list-group-item">
<div class="col-xs-3 col-md-2">
<div class="image-fixed-size-and-vertical-middle">
<img class="img-responsive" src="http://placehold.it/122x122">
</div>
</div>
<div class="col-xs-9 col-md-10">
<h4>header</h4>
<p>content</p>
</div>
<div class="clearfix"></div>
</li>
</ul>
The image is in the top of col. how to make it vertical middle?
plz try this one:
Html:
<div class="image-fixed-size-and-vertical-middle">
<img class="image" src="http://www.mictronics.de/yampp_color_themes/bmp0_test_image.bmp" />
</div>
Css
.image-fixed-size-and-vertical-middle{
display:table-cell;
vertical-align:middle;
position:fixed;
width:100%;
text-align:center;
z-index:600;
cursor:pointer;
left:0;
top:100px;
}
.image-fixed-size-and-vertical-middle img{
position:relative;
height:100px;
border:1px solid grey;
}
ty to use this in style
<style>
.image-fixed-size-and-vertical-middle
{
position:relative;
min-height:69px;
}
.image-fixed-size-and-vertical-middle img
{
width: 40px;
height: 40px;
position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;
margin:auto;
}
</style>
Am working on making a copy of the BBC site and want to make two horizontal bars (part of the header) butt up against each other. Right now, there is a space between the two which I want to remove.
Here is the image I am getting:
Here is the HTML and CSS:
<!doctype html>
<html>
<head>
<title>BBC_Copy</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0;
font-family: arial, helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height:40px;
color:white;
}
.fixedwidth {
width:1050px;
margin:0 auto;
}
#logodiv {
padding-top:5px;
float:left;
border-right:1px solid #770000;
padding-right: 10px;
}
#signindiv {
font-weight: bold;
padding:2px 80px 12px 20px;
font-size: 0.9em;
float:left;
border-right:1px solid #770000;
}
#signindiv img {
position:relative;
top:3px;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
margin:0;
padding:0;
}
#topmenudiv li {
list-style: none;
font-wieght:bold;
font-size:0.9em;
border-right:1px solid #770000;
height:100%;
padding:10px 20px 12px 20px;
float:left;
}
#searchdiv {
float:left;
padding:5px 0 0 10px;
}
#searchdiv input {
height:25px;
border:none;
font-size:0.9em;
padding-left: 10px;
background-image: url("images/magnify.png");
background-repeat: no-repeat;
background-position:center right;
}
.break {
clear:both;
}
#newsbar {
background-color:#7A0000;
width: 100%;
height:40px;
color:white;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbc_logo.png" />
</div>
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search" />
</div>
</div>
<div class="break">
</div>
<div id="newsbar">
</div>
</div>
</body>
</html>
Your problem is in:
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
The <p> tags are adding extra margin on top and bottom. I would recommend getting rid of the p tags... they don't add any semantic advantage.
Replace this:
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
with this:
<div id="signindiv">
<img src="images/signin.png" />Sign In
</div>
Result: http://jsfiddle.net/ru7zzc1w/1/
I have a content wrapper that I set height 100% but the problem is the background color does not fully extend across all of content. I've attached images and my code, any help would be great thanks! The obvious white space after my wrapper: http://imgur.com/8h18AdH
HTML (the part that does not work is the div outerColor):
<p id="dimensions"></p>
<div id="windpageTitle">
<div class="headerContent">
<nav>
<ul class="navDown">
<li>Home</li>
<li>Save</li>
<li>Locations</li>
<li>Activate</li>
</ul>
<p class="menu"></p>
</nav>
<h1 class="pageTitleText">Wind.</h1>
<div class="pageNav">
<ul class="navLink">
<li>Home</li>
<li>Savings</li>
<li>Location</li>
<li>Start</li>
</ul>
</div>
</div>
</div>
<div id="outerColor">
<div class="innerContent">
<div id="savingsSub">
<p class="graph"><img src="../images/graph.png" width="500px" height="500px" /></p>
<p class="savingsText">Text here</p>
</div>
<div id="locationSub">
<p class="map"><img src="../images/mapWind.png" width="500px" height="257px" /></p>
<p class="locationText">TEXT HERE</p>
</div>
</div>
</div>
CSS:
#windpageTitle {
background-color: #fff;
width:100%;
height:170px;
}
#outerColor {
background-color:#666;
width:100%;
height:100%;
}
.innerContent {
position:relative;
width:90%;
margin:auto;
text-align:center;
}
#savingsSub {
position:relative;
display:table;
padding-top:40px;
width:1300px;
float: left;
}
.savingsText {
display: table-cell;
vertical-align: middle;
float:right;
padding-right:30px;
padding-top:125px;
width:700px;
font-family: 'Oxygen', sans-serif;
font-size:18px;
color:#fff;
line-height:25px;
}
#locationSub {
position:relative;
display:table;
padding-top:55px;
width:1600px;
float: right;
}
.locationText {
display: table-cell;
vertical-align: middle;
float:left;
width:700px;
padding-left:350px;
padding-top:55px;
font-family: 'Oxygen', sans-serif;
font-size:18px;
color:#fff;
line-height:25px;
}
.graph {
float:left;
width:500px;
height:500px;
}
.map {
float:right;
}
Please add all HTML that is positioned within the elements and all CSS. Now it's impossible to solve!