I am trying to hide one of the images, it does hide one of the images but it leaves a border around the image that suppose to be there if its not hidden. in other words i want the hidden image to be behind the visible image. i hope i am clear
http://jsfiddle.net/47Vab/1/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="main.css" />
<title></title>
</head>
<body class="body">
<div class="box">
<div class="imgs">
<img id="Img2" src="IMG/2.jpg"/>
<img id="Img1" class="hidden" src="IMG/1.jpg"/>
</div>
</div>
</body>
</html>
body{
background-color:#F0F0F0 ;
color:#000305;/*font color*/
font-size: 87.5%;/*87.5% out of 14px*/
font-family: Arial,'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
}
.body{
margin:0 auto;
width:70%;
clear:both;
}
.box{
background-color: yellowgreen;
margin:50px auto;
width:80%;
height:auto;
border-style:solid;
border-width:5px;
border-color: black;
}
.imgs{
margin:50px auto;
width:80%;
border-style:solid;
border-width:5px;
border-color: black;
}
img {
max-width: 100%;
display: block;
}
.hidden{
visibility : hidden;
}
Try display: none instead of visibility: hidden.
visibility: hidden hides the image but retains it's space. Where as display: none hides it and does not take up any space.
Fiddle
Related
Here is a simple HTML file with inline css:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
body {
margin-top: 20px;
margin-right: 500px;
margin-left: 500px;
}
.events {
font-size: 200%;
vertical-align:middle;
text-align:left;
margin-left:20px;
}
.sections{
font-size: 100%;
vertical-align:middle;
text-align:right;
margin-right:20px;
}
#divA {
background-color: #BB1919;
color:white;
height:60px;
font-family: Arial;
font-weight:bold;
}
</style>
</head>
<body>
<div id="divA"><div class="events">EVENTS</div>
<div class="sections">Sections</div>
</div>
</body>
</html>
The large red rectangle is correct. BUT why are the words EVENTS and Sections not vertically centered? It seems quite simple and yet it doesn't look correct.
vertical-align:middle; works only when parent has display:table and children display:table-cell
Take a look:
body {
margin-top: 20px;
margin-right: 100px;
margin-left: 100px;
}
.events {
font-size: 200%;
vertical-align:middle;
text-align:left;
margin-left:20px;
display:table-cell;
}
.sections{
font-size: 100%;
vertical-align:middle;
text-align:right;
margin-right:20px;
display:table-cell;
}
#divA {
background-color: #BB1919;
color:white;
height:60px;
width:100%;
font-family: Arial;
font-weight:bold;
display:table;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<div id="divA"><div class="events">EVENTS</div>
<div class="sections">Sections</div>
</div>
</body>
</html>
Here is how you do it :
#divA {
display:block;
background: #BB1919;
color:white;
height:100px;
padding:20px;
box-sizing:border-box;
}
.divA {
display:table;
width:100%;
height:100%;
}
.events,
.sections {
display:table-cell;
font-size: 20px;
vertical-align:middle;
}
.divB {
display:table;
width:100%;
height:100px;
background:#f5f5f5;
padding:20px;
box-sizing:border-box;
}
<h2>If you need Outer Div</h2>
<div id="divA">
<div class="divA">
<div class="events">EVENTS</div>
<div class="sections">SECTIONS</div>
</div>
</div>
<h2>If you dont</h2>
<div class="divB">
<div class="events">EVENTS</div>
<div class="sections">SECTIONS</div>
</div>
The css property vertical-align will align elements on the same line. As you can see in the example below, three divs are centered through the middle because of that property. Vertical-align will not center text inside an element, though.
One way to achieve that without tables is to set the line height property to the same height value of the container. In the example below, the container is 60px tall and so is the text line. This method works if the text is contained in one line only.
div {
display: inline-block;
border: 1px solid black;
vertical-align: middle;
}
.lg {
height: 60px;
}
.sm{
height:40px;
}
.centerTxt{
line-height: 60px;
}
<div class="sm">
Small
</div>
<div class="lg">
Large
</div>
<div class="lg centerTxt">
Large centered text
</div>
I am trying to code this page.
I don't know how to solve the problem, but it seems that overflow:hidden of #bigf makes image go down and clipped. How to make all those divs inside #bigf fits nicely in one horizontal line? Thank you.
HTML:
<html>
<head>
<title>Title</title>
<meta name="Description" content="desc">
<meta name="keywords" content="keywords">
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-2" />
<link type="text/css" href="style.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Exo+2' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrap">
<div id="top">
<div class="container">
<h1>Name</h1>
</div>
</div>
<div id="bigf">
<div class="container">
<img src="hydraulik.png" class="hydra">
<div class="sm1">
<div class="textsec">SOMETHING</div>
<div class="textsec">IS SAID HERE</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
* {
margin:0px;
padding:0px;
}
body {
font-family: 'Exo 2', sans-serif;
}
#wrap {
position: relative;
width: 100%;
overflow: hidden;
background: #fff;
}
#top {
height:60px;
}
.container {
width:1160px;
margin:0 auto;
}
#bigf {
height:380px;
background: url(bf.jpg) right no-repeat black;
overflow:hidden;
}
.textsec {
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.8);
display: inline-block;
color: #FFF;
font-weight: 600;
padding: 10px 25px;
outline: 2px solid rgba(51, 51, 51, 0.2);
text-shadow: 2px 3px 0px #000;
margin: 0px 0px 10px;
float:right;
font-size:26px;
}
.hydra {
margin-left:25px;
float:left;
}
.sm1 {
margin-top:150px;
}
Add a clearfix to the #bigf .container.
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
And add the class to the container.
<div class="container cf"></div>
You have floated elements inside there so I recommend you to read the following : What is Clearfix
Try to add following code in your css:
.hydra {
float: left;
margin-left: 25px;
vertical-align: top;
}
No need to remove overflow:hidden just use vertical-align: top;. so that the persons image and text will be aligned to top as expected.
Hope this helps you!
Hey it has nothing to do with overflow hidden.
The Image of the man jumps down because of div.sm1 the divs in there are floating and messing with the box model.
Depending of what you want to achieve you can give .sm1 a fixed max-width (container size - image size) and let it float right, too. This should do the trick.
Replace your container styles with the below code.
.container {
width: 1160px;
margin: 0 auto;
display: flex;
}
I'm attempting to insert a vertical line into my code that runs along a certain path of text.
My full code thus far is:
<!DOCTYPE HTML>
<html>
<header>
<title> This Website </title>
<link type="text/css" href="stylesheet.css" rel="stylesheet"/>
</header>
<body>
<div>
<section>
<h1> Test</h1>
</section>
<img src="thingvellir.jpg "class="vinstri" height="300" />
<p>
<div class="vert">**Random text that I want my vertical line to follow.**</div>
</p>
<img src="logo-thing.png" class="haegri" height="100" />
</div>
</body>
</html>
And this is my CSS file:
body {
background-color:green;
}
div{
height:800px;
width: 1300px;
border-color:black;
background-color:#e9b96e;
border-width:2px;
border-style: solid;
border-radius:10px;
margin: auto;
text-align: center;
}
h1 {
margin:auto;
font-size: 35px;
}
section
{
width: 400px;
height: 20px;
padding: 20px;
border: none;
margin: auto;
box-shadow:10px 10px 5px #888888;
background-color: white;
border-radius: 30px;
position:relative;
top: 10px;
}
p {
font-family:Verdana;
font-size:14px;
}
.vinstri {
float:left;
margin:3px;
border:solid black;
}
.vert {
border-left: thick solid #ff0000;
}
Now it's this last attribute that should make the vertical line, but what it does instead of trailing the text, is that it makes a vertical line along the WHOLE ORIGINAL div box (and for some reason adds black border around as well as pushing the text down) as displayed here.
Any ideas on how to fix this one? Thanks.
Your DIV rule applies to every DIV, both the one immediately inside BODY and your DIV.vert. So, the first DIV rule in your CSS, applying the full black border, applies to every DIV in your code. I'm assuming you only want this to apply to the top DIV instead, rather than to everything.
So give that top DIV it's own class, and update that first rule to use the class name.
This way, your DIV.vert box, where you want the red left line won't also pick up the additional CSS rules.
Updated HTML:
<!DOCTYPE HTML>
<html>
<header>
<title> This Website </title>
<link type="text/css" href="stylesheet.css" rel="stylesheet"/>
</header>
<body>
<div class="main">
<section>
<h1> Test</h1>
</section>
<div class="vert">
<img src="thingvellir.jpg "class="vinstri" height="300" />
</div>
<p>
<div class="vert">**Random text that I want my vertical line to follow.**</div>
</p>
<img src="logo-thing.png" class="haegri" height="100" />
</div>
</body>
</html>
And your CSS:
body {
background-color:green;
}
div.main{
height:800px;
width: 1300px;
border-color:black;
background-color:#e9b96e;
border-width:2px;
border-style: solid;
border-radius:10px;
margin: auto;
text-align: center;
}
h1 {
margin:auto;
font-size: 35px;
}
section
{
width: 400px;
height: 20px;
padding: 20px;
border: none;
margin: auto;
box-shadow:10px 10px 5px #888888;
background-color: white;
border-radius: 30px;
position:relative;
top: 10px;
}
p {
font-family:Verdana;
font-size:14px;
}
.vinstri {
float:left;
margin:3px;
border:solid black;
}
.vert {
border-left: thick solid #ff0000;
}
I have a div element with all of my content in it, including a video at the bottom of the page. My issue is, when I try to scroll down to see the video, it only reaches about half of it, and refuses to scroll down any further.
<html>
<head>
<link rel="shortcut icon" href="Images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="Style.css" media="screen" />
<title>Arthur</title>
<meta content="text/html" charset="windows-1251">
</head>
<Body background="Images/background2.jpg">
<IMG class="imgborder" src="Images/button.png" align="left" height="50">
<div id="wrapper" style="background-color:black; width:60%; margin-left: auto ; margin-right: auto ;">
<center><img width="60%" src="Images/logo2.png"></center>
<BR><BR>
<center><img class="imgborder" height="300" src="Images/muller.jpg"></center>
<Font size="5" color="crimson" face="Calibri">
<Center><P align="justify">... </P>
<P align="justify">...</P>
<P align="justify">...</P></Font></Center>
<Center><iframe width="640" height="360" src="http://www.youtube.com/embed/DooYpt9Gu1s" frameborder="5"
allowfullscreen></iframe></Center>
<Font size="5" color="crimson" face="Calibri"><P>Thomas Muller</P></font>
</div>
</body>
</html>
And here's the CSS:
#charset "utf-8";
/* CSS Document*/
/*This section is for links*/
a:link
{
font-weight:normal; color:crimson
}
a:visited
{
font-weight:normal; color:Crimson;
}
a:hover
{
font-weight:bold; color: Royalblue; font-variant:small-caps;
}
/*This section is for a paragraph section*/
p {
font-style:normal; font-size:18px;
}
blue {
color:crimson;
}
/*This section is for the image's black border.*/
.imgborder {
border-color: crimson; border:thick; border-style:outset;
}
.body
{
background-color: #0000FF;
}
html , body{height:100%;}
#wrapper {
margin: 0 auto;
width: 990px;
height:100%;
overflow:hidden;
position:relative;
}
#navigation {
margin: 0 auto;
width: 990px;
height: 55px;
background-color: #fff;
}
#bottomHalf {
margin: 0 auto;
width: 990px;
height: 100%;
background-color: #4d3c37;
}
div { /* set div to full width and height */
width: 100%;
height: 100%;
}
p {
margin-left:2cm; margin-right:2cm;
}
You need to remove the overflow:hidden; from your #wrapper class.
Also, you are using many elements and attributes that are deprecated and not supported anymore as of HTML5, such as <center> and <font> (as well as attributes like align), I'd advise replacing these with their CSS equivalents.
Working to help a student with his project trying to get his Div to fill up the full body of the page.
I've tried following the various examples with HTML and BODY tag being set to 100% however when I set the minimum height for my Div it does not fill with the complete height of the page. Here is my code. When it renders the green should fill the page but it doesn't.
Thanks KT
<html>
<center>
<head>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="tblwrap" height="100%">
<table class="scndtable" >
<tr class="headerrow">
<td height=100%>Summary </td>
<td>Map </td>
<td>Videos </td>
</tr>
</table>
</div>
<p style="font-weight: bold;text-align: center;"> </p>
</body>
</center>
Here is my CSS
html
{
height:100%;
}
body
{
margin:0;
padding:0;
vertical-align: middle;
height: 100%;
border: 20px solid skyblue;
}
body table
{
margin-left:auto;
margin-right:auto;
height:100%;
}
.tblwrap
{
background-color:green;
min-height: 100%;
vertical-align: middle;
border:solid 3px red;
}
.headerrow{
text-align: center;
}
.scndtable
{
border-spacing:20px;
height: 100%;
}
.headerrow td{
font-size: 20pt;
background-color:silver;
}
.headerrow td a{
text-decoration: none;
color: black;
}
.headerrow td a:hover{
text-decoration: none;
color: gray;
}
.selectednav
{
font-size: 72px;
font-weight: bold;
color:navy;
}
.tblwrap{position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color:green;
vertical-align: middle;
border:solid 3px red;
oveflow:auto;
}
This will work for you:-)
It's always helpful to recreate your issue in JSFiddle before you ask your question on StackOverflow. I tried to recreate your particular problem, but in my case the div easily stretches the height of the viewport:
http://jsfiddle.net/hWGVr/
But as with Ankit Gautam's solution, this will always cover the height of the viewport, never stretching further