Some child elements do not affect the parent's height - html
I am building a design for my university but have come across this peculiar problem: the <div> element' height is not affected by its insides.
Just take a look at these screenshots:
demo
Just to make some sense: I'm trying to build something complicated (for me) without using tables (only CSS - we are living in a modern web-epoch though =) ). Here's my goal:
I have some long and messy HTML and CSS code - I'm truly not a designer yet. Here it is:
HTML:
<html>
<head>
<title>verstka</title>
<link rel="stylesheet" type="text/css" href="verstka.css" media="all" />
</head>
<body>
<div class="top">
<div class="header angled-stripes">
<div class="logo"></div>
<div class="right-menu">
<div class="quick-links links">
<div class="item">
Home
</div>
<div class="item">
Login
</div>
<div class="item">
<span>Sitemap</span>
</div>
</div>
<div class="quick-search">
<form action="" method="get" onsubmit="javascript:void(0);">
<input type="text" name="q" size="20" />
search
</form>
</div>
</div>
</div>
<div class="top-menu">
<div class="item">
Products
</div>
<div class="item">
Download
</div>
<div class="item">
Support
</div>
<div class="item">
Contacts
</div>
</div>
</div>
<div class="middle table-positioning">
<div class="row-positioning">
<div class="left-column">
<div class="content">
<div class="block product angled-stripes">
<div class="title">BASIC Package</div>
<div class="body">
<img src="product-green.png" />
<span>blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah</span>
<div class="links">
Details
Download
</div>
purchase now
</div>
<div class="clearer"></div>
</div>
<div class="block product angled-stripes">
<div class="title">FULL Package</div>
<div class="body">
<span>lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</span>
<div class="links">
Details
Download
</div>
purchase now
</div>
<div class="clearer"></div>
</div>
<div class="block plain">
<div class="title">Popular Products</div>
<ul class="green-arrow-markered">
<li>
Set True Image 9.0
</li>
<li>
Standard Recorder 6.5
</li>
<li>
Disk Director Upgrade 4.56
</li>
<li>
ZippeNotes 6.22
</li>
</ul>
</div>
</div>
<div class="footer">
©<span class="bolder">Software Company</span>
<div class="links">
Privacy Policy
Terms of Use
<div class="clearer"></div>
</div>
</div>
</div>
<div class="right-column">
<div class="content">
<div class="post">
<div class="title green-title">Company Address</div>
<div class="image"><img src="company-photo.jpg" alt="company photo"></div>
<div class="content"></div>
</div>
<div class="post left-post">
<div class="title">Contact Form</div>
<form action="#" onsubmit="javascript:void(0);">
<div class="input">
<label for="name">Your full name:</label>
<input id="name" name="name" type="text" />
</div>
<div class="input">
<label for="email">E-mail address:</label>
<input id="email" name="email" type="text" />
</div>
<div class="input">
<label for="phone">Your phone:</label>
<input id="phone" name="phone" type="text" />
</div>
<div class="input">
<label for="message">Your message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</div>
<input type="submit" />
</form>
<div class="row">
reset
submit
</div>
</div>
<div class="highlighted-block post">
<div class="title green-title">
<img src="newsletter" alt="newsletter icon" />
<div>
<span class="uppercase">newsletter</span><br /><span class="sub-title">signup</span>
</div>
</div>
<div class="clearer"></div>
<form action="#" onsubmit="javascript:void(0);">
<label for="newsletter-name">Enter your name, please:</label>
<input id="newsletter-name" name="name" type="text" />
<label for="newsletter-email">Enter your e-mail, please:</label>
<input id="newsletter-email" name="email" type="text" />
subscribe now
</form>
<div>
<strong>Note:</strong>
<span>lorem ipsum ololo!</span>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="footer">
<div class="links">
Home
Products
Download
Support
Contacts
Login
Sitemap
<div class="clearer"></div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
</div>
</body>
</html>
CSS:
html, body {
margin: 0 0 80px 0;
padding: 0;
background-color: #313131;
color: #fff;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
}
a, a:hover, a:visited {
color: #fff;
}
/*.links .item:nth-child(n+2):before {
content: '|';
}
*/
.links .item:nth-child(n+2) {
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid #9C9C9C;
}
.links .item {
color: #9c9c9c;
float: left;
display: inline-block;
}
.links a.item:visited {
color: #9c9c9c;
}
.links a.item:hover {
color: #9c9c9c;
}
.bolder {
font-weight: bold;
}
.footer {
color: #9c9c9c;
}
.middle .left-column .content .block.product:nth-child(n+1) {
/*background: #8dc63f;*/
background-color: #86bc3c;
/*background-size: 25px 25px;*/
/*box-shadow: 1px 1px 8px #77ad32;*/
}
.middle .left-column .content .block.product:nth-child(n+2) {
/*background: #ee8911;*/
background-color: #ee8911;
/*background-size: 25px 25px;*/
/*box-shadow: 1px 1px 8px #eb7e0e;*/
}
.middle .left-column .content .block.product .title {
border-radius: 5px 5px 0 0;
padding-left: 20px;
text-shadow: 2px -1px 1px black;
min-height: 40px;
line-height: 40px;
vertical-align: middle;
}
.middle .left-column .content .block.product:nth-child(n+1) .title {
background: #6ce25d; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top, #6ce25d 16%, #4ebb30 36%, #bee884 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(16%,#6ce25d), color-stop(36%,#4ebb30), color-stop(100%,#bee884)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6ce25d 16%,#4ebb30 36%,#bee884 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6ce25d 16%,#4ebb30 36%,#bee884 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #6ce25d 16%,#4ebb30 36%,#bee884 100%); /* IE10+ */
background: linear-gradient(to bottom, #6ce25d 16%,#4ebb30 36%,#bee884 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ce25d', endColorstr='#bee884',GradientType=0 ); /* IE6-8 */
}
.middle .left-column .content .block.product:nth-child(n+2) .title {
background: #db8a08; /* Old browsers */
background: -moz-linear-gradient(top, #db8a08 17%, #c76307 36%, #ef9366 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(17%,#db8a08), color-stop(36%,#c76307), color-stop(100%,#ef9366)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #db8a08 17%,#c76307 36%,#ef9366 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #db8a08 17%,#c76307 36%,#ef9366 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #db8a08 17%,#c76307 36%,#ef9366 100%); /* IE10+ */
background: linear-gradient(to bottom, #db8a08 17%,#c76307 36%,#ef9366 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db8a08', endColorstr='#ef9366',GradientType=0 ); /* IE6-8 */
}
.middle .left-column .content .block .body .links .item:nth-child(n+2) {
border-left-color: #fff;
}
.middle .left-column .content .block .body .links .item {
color: #fff;
}
.middle .left-column .content .block.product .body img {
width: 30%;
float: left;
margin: 10px;
}
.middle .left-column {
width: 20%;
max-height: 350px;
}
.middle .right-column {
width: 65%;
}
.middle .right-column .content {
background-color: #fff;
border-radius: 5px;
border: 3px solid #1c1c1c;
}
.top .header .quick-links .item {
color: #fff;
}
.top .header {
font-size: 10pt;
}
.top .header .right-menu {
display: inline-block;
position: absolute;
right: 20px;
top: 20px;
}
.top .header .right-menu .quick-links {
display: block;
float: right;
margin: 20px 0;
}
.top .header .right-menu .quick-search {
display: block;
height: 20px;
line-height: 10px;
}
.top .header .right-menu .quick-search form {
margin-right: -10px;
}
.top .header .right-menu .quick-search form * {
display: inline-block;
float: left;
margin: 0 3px;
}
.button {
color: #fff !important;
text-transform: uppercase;
display: inline-block;
background-color: #a4dff2;
border: 1px solid #027499;
text-decoration: none;
font-family: Arial;
font-weight: bold;
text-shadow: #17688d;
font-size: 10pt !important;
text-align: center;
min-width: 70px;
max-height: 20px;
padding: 5px 5px;
border-radius: 3px;
text-shadow: 1px -1px 1px #000;
background: #69ace0; /* Old browsers */
background: -moz-linear-gradient(top, #69ace0 14%, #207cca 38%, #7db9e8 66%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(14%,#69ace0), color-stop(38%,#207cca), color-stop(66%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #69ace0 14%,#207cca 38%,#7db9e8 66%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #69ace0 14%,#207cca 38%,#7db9e8 66%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #69ace0 14%,#207cca 38%,#7db9e8 66%); /* IE10+ */
background: linear-gradient(to bottom, #69ace0 14%,#207cca 38%,#7db9e8 66%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#69ace0', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
}
.top {
height: 220px;
}
.top .header {
background-color: #09aad3;
/*background-size: 25px 25px;*/
box-shadow: 1px 1px 8px #0480a7;
height: 115px;
}
.top .header .logo {
width: 300px;
height: 50px;
margin: 20px 25px;
border-radius: 6px;
background-color: #027297;
position: absolute;
top: 0;
left: 0;
display: inline-block;
}
.top {
text-align: center;
}
.top .top-menu {
display: block;
height: 100px;
text-align: center;
}
.top .top-menu .item {
width: 190px;
height: 100px;
background-color: #363636;
display: inline-block;
margin: 0 -3px;
vertical-align: middle;
line-height: 50px;
/*font-family: Arial;*/
font-size: 14pt;
border: 1px solid #000;
border-radius: 4px;
}
.top .top-menu .item a {
text-decoration: none;
}
.middle .left-column .content .block .body {
margin: 10px;
}
.middle .left-column .content .block {
/*padding: 10px;*/
border-radius: 10px;
width: 225px;
max-width: 225px;
font-size: 12px;
margin: 7px;
border: 3px solid #1b1b1b;
}
.middle .left-column .content .block.plain {
background-color: #3f3f3f;
padding: 10px;
width: 205px;
}
.middle .left-column .content .block .title {
font-size: 16pt;
}
.middle .left-column .content .block.plain ul {
}
.middle .left-column .footer {
margin-left: 7px;
}
ul.green-arrow-markered {
list-style: disc outside url("list-bullet.gif");
padding-left: 15px;
}
.left-column {
padding-left: 5px;
}
.clearer {
clear: both;
}
.angled-stripes {
/*
background-color: #09aad3;
box-shadow: 1px 1px 8px #0480a7;
linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
*/
background-image: /* Safari 5 and earlier */
-webkit-gradient(linear, 100% 100%, 0 0,
color-stop(.25, rgba(255, 255, 255, 0.2)),
color-stop(.25, rgba(255, 255, 255, 0)),
color-stop(.5, rgba(255, 255, 255, 0)),
color-stop(.5, rgba(255, 255, 255, 0.2)),
color-stop(.75, rgba(255, 255, 255, 0.2)),
color-stop(.75, rgba(255, 255, 255, 0)),
color-stop(1, rgba(255, 255, 255, 0)));
background-image: /* Chrome and Webkit Nightly build */
-webkit-linear-gradient(45deg,
rgba(255, 255, 255, 0.2) 25%,
rgba(255, 255, 255, 0) 25%,
rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
rgba(255, 255, 255, 0) 75%,
rgba(255, 255, 255, 0) 100%
);
background-image: /* Firefox */
-moz-linear-gradient(45deg,
rgba(255, 255, 255, 0.2) 25%,
rgba(255, 255, 255, 0) 25%,
rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
rgba(255, 255, 255, 0) 75%,
rgba(255, 255, 255, 0) 100%
);
background-image: /* IE10 */
-ms-linear-gradient(45deg,
rgba(255, 255, 255, 0.2) 25%,
rgba(255, 255, 255, 0) 25%,
rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
rgba(255, 255, 255, 0) 75%,
rgba(255, 255, 255, 0) 100%
);
background-image: /* opera 11+ */
-o-linear-gradient(45deg,
rgba(255, 255, 255, 0.2) 25%,
rgba(255, 255, 255, 0) 25%,
rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
rgba(255, 255, 255, 0) 75%,
rgba(255, 255, 255, 0) 100%
);
background-image:
linear-gradient(45deg,
rgba(255, 255, 255, 0.2) 25%,
rgba(255, 255, 255, 0) 25%,
rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
rgba(255, 255, 255, 0) 75%,
rgba(255, 255, 255, 0) 100%
);
background-size: 15px 15px;
-moz-background-size: 15px 15px;
-webkit-background-size: 15px 15px;
-o-background-size: 15px 15px;
-ms-background-size: 15px 15px;
}
input[type=submit], input[type=button] {
display: none;
}
.middle {
position: relative;
width: 100%;
margin: 0;
}
.middle .right-column {
color: #000;
width: 80%;
position: absolute;
top: 0;
}
.table-positioning {
display: table;
width: 100%;
}
.table-positioning .row-positioning {
display: table-row;
padding-left: 20px;
}
.table-positioning .row-positioning .cell-positioning {
display: table-cell;
}
.middle .left-column, .middle .right-column {
display: table-cell;
}
.middle .right-column .post .title {
font-size: 16pt;
color: #09aad3;
}
.green-title {
color: #4ebb30 !important;
}
.blue-title {
color: #09aad3 !important;
}
.uppercase {
text-transform: uppercase;
}
.middle .right-column .post .title {
padding: 10px 0;
margin: 10px;
border-bottom: 1px solid #bebebe;
}
.middle .right-column .post form input, .middle .right-column .post form label, .middle .right-column .post form textarea {
display: block;
width: 100%;
}
.middle .right-column .post form input[type=submit], .middle .right-column .post form input[type=button] {
display: none;
}
.middle .right-column .post .image {
display: inline-block;
border: 1px solid #bebebe;
border-radius: 4px;
padding: 3px;
}
.middle .right-column .post .image img {
border: none;
min-width: 124px;
min-height: 124px;
width: 124px;
height: 124px;
max-width: 124px;
max-height: 124px;
}
.middle .right-column .post .content {
margin: 10px;
border: none;
border-radius: 0;
border-bottom: 1px solid #bebebe;
}
.middle .right-column .post {
padding: 0 20px;
}
.split-content {
display: table;
}
.highlighted-block {
border: 1px solid #bebebe;
border-radius: 6px;
background-color: #eeeeee;
margin: 20px;
min-height: 420px;
width: 300px;
float: right;
display: inline-block;
}
.middle .right-column .left-post {
float: left;
display: inline-block;
width: 500px;
}
.middle .right-column .left-post .row {
clear: both;
display: inline-block;
float: right;
}
.highlighted-block img {
display: inline-block;
float: left;
}
.highlighted-block .title {
display: block;
height: 110px;
}
.highlighted-block .title div {
display: inline-block;
}
.highlighted-block .title img {
display: inline-block;
float: left;
width: 100px;
margin: 10px;
height: 100px;
}
.middle .right-column .post .button {
float: right;
margin-left: 10px;
}
.middle .right-column .cell-positioning.post {
margin: 20px;
}
.cell-positioning.wider {
width: 65%;
}
.middle .right-column .post .input {
display: block;
position: relative;
margin: 10px;
float: left;
clear: both;
width: 100%;
}
.middle .right-column .post .input * {
display: inline-block !important;
width: 50%;
}
.middle .right-column .post .input input, .middle .right-column .post .input textarea {
position: absolute;
right: 0;
}
.middle .right-column .footer .links {
float: right;
margin: 5px 10px;
}
As you can see, i have one block, .middle, containing the left part, left-column and the right part, .right-column.
The right column contains only one element - .content. But the elements of that container could be divided into several columns recursively (it contains two columns, one of which contains two columns, one of which contain two columns...).
So I tried to use the CSS3 display: table;, display: table-row; and display: table-column; properties. Somehow it helped me. A bit. I've tried to apply the same changes to my current problem but it doesn't seem to be working. So, I decided to try the <div> approach. The problem with this is that the <div>, containing the label and its input is not sizing by the maximum child' height (<textarea> is much larger than the <label>, but the container' height is as big as the label' one).
I have two questions based on this information:
Why does the "miscalculation of the height" happen and how do I prevent it?
How should I do the layout to get my code modern, stupidly simple (KISS) and yet responsive?
why do things like that "miscalculation of the height" happen and how to prevent them?
That's because you're using float on all objects within the container. Floats are a little weird, so I recommend reading this CSS-Tricks article on them.
In short, though, when you float an element, you take it out of the document flow. When all elements in a (non-floated) container are floated, the parent thinks it doesn't have any children, and therefore collapses. There are a few ways you can fix this:
Set overflow: hidden on the parent container (this only really works if the container does not have a specified height)
Add clear: both to an element immediately after the floated elements, inside the parent container (this works well, but may add extra markup if you add elements specifically for this purpose)
Harness the power of the :after pseudo-element (this only works for browsers that support it; the good news is that the majority do, albeit possibly requiring a polyfill).
how i should do the layout of the elements to get my code modern, stupidly simple (KISS) and yet responsive?
From what I can see here, you're doing a number of things that are making your work more difficult than is necessary. It seems to me that you're missing some fundamentals.
You might want to look more into semantic markup. You're experiencing what we in the trade call "divitis". That is, you're wrapping things in <div> tags that are probably better suited to other elements.
For example, every place that you use <div class="item">, you can change to an unordered list (<ul>) and each "item" is a list item (<li>). This saves you from attaching a class to absolutely everything.
Additionally, you don't have to reinvent the wheel with your button. There are both an input type=button and <button> element. Using either of these will open up the form.submit action that you can then hook into (instead of recreating it, too).
You also shouldn't need chains of CSS selectors that are half a dozen selectors long. Take a look at how CSS and specificity works, or you're going to cause yourself migraines in the relatively near future.
I recommend picking up Dan Cederholm's Handcrafted CSS and Bulletproof Web Design, as well as perusing A List Apart and CSS-Tricks, to get a better grasp on CSS and HTML at a fundamental level.
Try Using
.input { overflow: hidden }
It may solve your problem.
When you have floating elements inside another one the height of this parent gets compromised since the child elements are "floating"
Related
how to add a circle at end of HTML "progress" bar created with <progress> tag
I could able to get progress bar with below code, but couldn't find solution how to add a small circle on the progress bar ?
HTML
<progress max="100" value="75"></progress>
CSS
progress {
width: 90%;
display: block; /* default: inline-block */
padding: 3px;
border: 0 none;
background: rgb(215, 211, 211);
border-radius: 14px;
}
progress::-moz-progress-bar {
border-radius: 12px;
background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
}
progress::-webkit-progress-bar {
background: transparent;
}
progress::-webkit-progress-value {
border-radius: 12px;
background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
}
Add a second background using a radial-gradient
progress {
width: 90%;
display: block; /* default: inline-block */
margin-bottom:1em;
padding: 3px;
border: 0 none;
background: rgb(215, 211, 211);
border-radius: 14px;
}
progress::-moz-progress-bar {
border-radius: 12px;
background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
}
progress::-webkit-progress-bar {
background: transparent;
}
progress::-webkit-progress-value {
border-radius: 12px;
background: radial-gradient(4px at 97%,white,white 4px,transparent),linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%))
;
}
<progress max="100" value="75"></progress>
<progress max="100" value="50"></progress>
<progress max="100" value="25"></progress>
I have no idea how to add a circle at the end of the progress element, but it is possible to do it with the div element
CSS:
.first{
width: 90%;
display: block; /* default: inline-block */
padding: 3px;
border: 0 none;
background: rgb(215, 211, 211);
border-radius: 14px;
}
.second{
background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
border-radius: 14px;
height: 10px;
width: 75%;
}
.third{
width: 10px;
background: linear-gradient(to right, hsl(0, 0%, 100%), hsl(0, 0%, 99%));
border-radius: 60px;
height: 8px;
width: 8px;
margin: 1px;
margin-right: 1px !important;
float: right;
margin-right: 0px;
color: white;
}
HTML:
<div class="first">
<div class="second">
<div class="third">.</div>
</div>
</div>
Displaying images in new line using HTML/CSS
I'm trying to display 2 images in a line below a line of text, but they show up in the same line. I tried using the "clear: both" property and "display: block" property in the CSS style for the images. What am I missing?
I included a screenshot of what it looks like as well as the relevant section of the HTML code and the complete CSS stylesheet. The "media" class is what I am using for the images. They are showing on the same line as the section under the "Contacts" div.
screenshot of website here
body {
background-color: #63a4ff;
background-image: linear-gradient(315deg, #63a4ff 0%, #83eaf1 74%);
}
.fadeline {
background-color: white;
margin: 25px 20%;
width: 60%;
height: 1px;
}
.fadeline.white {
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}
.fadeline.black {
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.row {
background-color: white;
margin: 0% 15% 0% 15%;
padding-bottom: 15%;
padding-top: 50px;
color: #586E95;
}
.header {
text-align: center;
padding-left: 40%;
}
#about {
text-align: center;
}
p {
margin: 0 auto;
display: block;
clear: both;
}
.example {
margin: 0 auto;
background-color: white;
border: 1px solid black;
border-radius: 10%;
outline: none;
width: 20%;
}
a,
a:hover {
text-decoration: none;
display: block;
}
img {
max-height: 90%;
max-width: 90%;
}
.media {
height: 55px;
width: 55px;
display: block;
margin: 0 auto;
}
<div id="contact" class="row text-center">
<h1 class="header">Contact</h1>
<div class="fadeline black"></div>
<p> Want to connect? Reach out with Facebook or LinkedIn.</p>
<div class='media'>
<a href='https://www.facebook.com/siddharth.gampa/'><img src='https://facebookbrand.com/wp-content/uploads/2019/04/f_logo_RGB-Hex-Blue_512.png?w=512&h=512'></a>
</div>
<div class='media'>
<a href='https://www.linkedin.com/in/siddharth-gampa/'><img src='https://image.flaticon.com/icons/svg/174/174857.svg'></a>
</div>
</div>
If you place both images in one div with the class .media then set that div to display: flex that should work.
Check out the example code below by clicking the Run code snippet
body {
background-color: #63a4ff;
background-image: linear-gradient(315deg, #63a4ff 0%, #83eaf1 74%);
}
.row {
display: flex;
flex-direction: column;
background-color: white;
margin: 0 15%;
padding: 50px 0;
color: #586E95;
}
.text-center {
text-align: center;
}
.heading {
text-align: center;
}
.fadeline {
background-color: white;
margin: 25px 20%;
width: 60%;
height: 1px;
}
.fadeline.white {
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}
.fadeline.black {
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.media {
display: flex;
justify-content: center;
width: 100%;
}
a img {
width: 40px;
margin: 0 10px;
}
<div id="contact" class="row text-center">
<h1 class="heading">Contact</h1>
<div class="fadeline black"></div>
<p> Want to connect? Reach out with Facebook or LinkedIn.</p>
<div class='media'>
<a href='https://www.facebook.com/siddharth.gampa/'>
<img src='https://facebookbrand.com/wp-content/uploads/2019/04/f_logo_RGB-Hex-Blue_512.png?w=512&h=512'>
</a>
<a href='https://www.linkedin.com/in/siddharth-gampa/'>
<img src='https://image.flaticon.com/icons/svg/174/174857.svg'>
</a>
</div>
</div>
It looks like they're not below the text because they're in the same div with the row class. Put them in a div below the row and it should work
Add a class to both images. For example Class="img-1" And Class="img-2" Make their position relative then push one of the images to the right. It may take some fiddling to get the locations correct
Can't seem to make an A tag fill parent TD tag
I am trying to make an A tag fill the parent TD element. However, no matter what I try it doesn't seem to work.
I have viewed many various other Stack Overflow pages and they all state to do
child-element{
display: block;
width: 100%;
}
But this has not seemed to work in my case.
html {
font-family: "Times New Roman", Times, serif;
color: white;
}
#wrapper {
background-color: black;
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
}
a {
color: white;
text-decoration: none;
background-color: none;
cursor: pointer;
}
#wrapper,
#header,
#main {
padding: 10px 15px;
margin: 0 auto 10px auto;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
}
#header {
min-width: 40vw;
max-width: 50vw;
}
#main {
min-height: 65vh;
}
.nav-link {
float: left;
padding: 10px 15px;
margin: 0 5px 0 5px;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
}
.nav-link:hover {
background-color: rgba(255, 255, 255, 0.4);
}
.nav-link a {
display: block;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.3);
}
<body>
<div id="wrapper">
<div id="header">
<table align="center">
<td class="nav-link">Main</td>
<td class="nav-link">Test</td>
<td class="nav-link">FAQ</td>
</table>
</div>
<div id="main">
<h1 style="line-height: 0%">Header</h1>
<p style="line-height: 0%; font-size: 1vw">_________________________________________________________________________________________________________</p>
<br>
<br>
</div>
</div>
</body>
If you would like to see this displayed you can view here: https://jsfiddle.net/wverhe/8gcypffm/
Remove the padding from .nav-link and add it to the .nav-link a. You can also remove the width and height from links since they will get resized from the padding.
html {
font-family: "Times New Roman", Times, serif;
color: white;
}
#wrapper {
background-color: black;
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
}
a {
color: white;
text-decoration: none;
background-color: none;
cursor: pointer;
}
#wrapper,
#header,
#main {
padding: 10px 15px;
margin: 0 auto 10px auto;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
}
#header {
min-width: 40vw;
max-width: 50vw;
}
#main {
min-height: 65vh;
}
.nav-link {
float: left;
margin: 0 5px 0 5px;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
}
.nav-link:hover {
background-color: rgba(255, 255, 255, 0.4);
}
.nav-link a {
display: block;
padding: 10px 15px;
/* width: 100%; */
/* height: 100%; */
background-color: rgba(255, 255, 255, 0.3);
}
<body>
<div id="wrapper">
<div id="header">
<table align="center">
<td class="nav-link">Main</td>
<td class="nav-link">Test</td>
<td class="nav-link">FAQ</td>
</table>
</div>
<div id="main">
<h1 style="line-height: 0%">Header</h1>
<p style="line-height: 0%; font-size: 1vw">_________________________________________________________________________________________________________</p>
<br>
<br>
</div>
</div>
</body>
https://jsfiddle.net/8gcypffm/4/
drop - down menu in css
I am new in css/html . I am working on cctccart project.while running this code
in bottom_menu,during click any menu like Products ,white background color is merging with blue.I want to fix this problem
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Cctvcart store</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="header_wrap">
<div class="header_top_wrap">
<div class="header_top">
</div>
</div>
<!--end of header top wrap -->
<div class="header_bottom_wrap">
<div class="header_bottom">
<ul class="bottom_menu">
<li>Company
</li>
<li>Products
<u1 class="submenu">
<li>DVR & Kits
</li>
<li>spy camraes
</li>
<li>alarms
</li>
</u1>
</li>
<li>Services
</li>
<li>Support
</li>
<li>Multimedia
</li>
</ul>
</div>
</div>
<!--end of bottom wrap -->
</div>
<!--end of header wrap -->
<div class="main_wrap">
<div class="main">
</div>
<!--end of main -->
</div>
<!--end of main wrap -->
<div class="footer_wrap">
<footer></footer>
</div>
<!--end of footer wrap -->
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
.header_wrap {
width: 100%;
height: 160px;
background: red;
position: relative;
}
.main_wrap {
width: 100%;
height: 1475px;
background: green;
}
.footer_wrap {
width: 100%;
height: 325px;
background: aqua;
}
.main {
width: 1000px;
height: 100%;
background: blue;
margin: auto;
}
footer {
width: 1000px;
height: 100%;
background: aqua;
margin: auto;
}
.header_top_wrap {
width: 100%;
height: 23px;
background: #ccc;
}
.header_bottom_wrap {
width: 100%;
height: 40px;
background: #06F;
position: absolute;
bottom: 0px;
left: 0px;
}
.header_top {
width: 1000px;
height: 100%;
background: purple;
margin: auto;
}
.header_bottom {
width: 1000px;
height: 100%;
background: black;
margin: auto;
}
.bottom_menu > li {
display: inline-block;
}
.bottom_menu a
{
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
color: #fff;
}
.bottom_menu > li >a {
display: block;
text-decoration: none;
padding: 0px 30px;
height: 45px;
line-height: 35px;
text-align: center;
}
.bottom_menu > li:hover >a
{
background:#fff;
color:#151716;
}
.submenu a:active, .submenu a:visited{
display: block;
color: #fff;
text-decoration: none;
z-index: 21;
}
.submenu {
position: absolute;
display: none;
width:160px;
height:250px;
background:white;
list-style:none;
}
.dropdown:hover > .submenu{
display: block;
}
.submenu>li>a
{
display:block;
width:100%;
height:42px;
background:black;
text-decoration:none;
line-height:58px;
padding-left:50px;
border:1px dashed white;
}
Edit your CSS to this:
.bottom_menu > li >a {
display: block;
text-decoration: none;
padding: 0px 30px;
height: 40px; /* this is the thing you have to fix */
line-height: 35px;
text-align: center;
}
I hope it can help you.
Link
HTML
<form id="form1" runat="server">
<div>
<br />
<br />
<div style="text-align: center;">
<label class="button">
<input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span><span class="text">Add Details</span></label>
<label class="button">
<input type="radio" name="button" /> <span class="outer"><span class="inner"></span></span><span class="text">Choice 2</span></label>
<br />
<br />
<br />
<br />
</div>
<br />
</div>
</form>
CSS
.button {
background: #cfe7fa;
background: -moz-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cfe7fa), color-stop(100%, #6393c1));
background: -webkit-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -o-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -ms-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
border: 1px solid #6393c1;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
cursor: pointer;
display: inline-block;
font: 10px Arial, Verdana, Geneva, sans-serif;
line-height: 3px;
padding-right: 5px;
}
.button:hover .inner {
opacity:.5;
}
.button input {
display:none;
}
.button input:checked + .outer .inner {
opacity:1;
}
.button .outer {
background:#2989d8;
background:-moz-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #2989d8), color-stop(99%, #101354));
background:-webkit-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:-o-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:-ms-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
border:1px solid black;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
height:10px;
margin:5px;
width:10px;
}
.button .inner {
background:#e4f5fc;
background:-moz-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #e4f5fc), color-stop(50%, #bfe8f9), color-stop(51%, #9fd8ef), color-stop(100%, #2ab0ed));
background:-webkit-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:-o-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:-ms-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
display:block;
height:10px;
margin:.5px;
opacity:0;
-moz-transition:opacity .5s;
-webkit-transition:opacity .5s;
-o-transition:opacity .5s;
transition:opacity .5s;
width:10px;
}
span.text,
span.outer
{
display: inline-block;
vertical-align: middle;
}
Vertically Aligning link in Navigation Menus
I was just wondering how to align links in a navigation menu in the middle vertically, as I have tried vertical align and it is not working and have searched stack overflow and have found no answers.
Note: the navmenu usually goes the full length of the page and the link are at the top, not in the middle.
Here is the fiddle
Here is the code:
CSS:
* {
padding: 0px;
margin: 0px;
}
.top {
position: fixed;
background-color: red;
border-radius: 10px;
width: 100%;
min-width: 1024px;
height: 100px;
border-radius: 10px;
border: 4px solid white;
}
.left {
position: fixed;
float: left;
margin-top: 5px;
width: 30%;
height: 100%;
background-color: red;
margin-bottom: 10px;
border-radius: 10px;
border: 4px solid white;
}
.menuandtop { bgcolor: yellow; }
.main {
width: 90%;
margin: 0px;
height: 100%;
background-color: pink;
border-radius: 10px;
float: right;
}
a { text-decoration: none; }
.navmenu { list-style-type: none; }
.navmenu li a {
color: #2E2E2E;
font-family: arial;
font-face: arial;
font-weight: bold;
}
ul.navmenu a {
display: block;
text-decoration: none;
}
.navmenu li {
background: rgb(255,50,50);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMzIzMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmNmQ2ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUyJSIgc3RvcC1jb2xvcj0iI2ZmMjgyOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,50,50,1) 0%, rgba(255,109,109,1) 50%, rgba(255,40,40,1) 52%, rgba(255,0,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,50,50,1)), color-stop(50%, rgba(255,109,109,1)), color-stop(52%, rgba(255,40,40,1)), color-stop(100%, rgba(255,0,0,1)));
background: -webkit-linear-gradient(top, rgba(255,50,50,1) 0%, rgba(255,109,109,1) 50%, rgba(255,40,40,1) 52%, rgba(255,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(255,50,50,1) 0%, rgba(255,109,109,1) 50%, rgba(255,40,40,1) 52%, rgba(255,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(255,50,50,1) 0%, rgba(255,109,109,1) 50%, rgba(255,40,40,1) 52%, rgba(255,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(255,50,50,1) 0%, rgba(255,109,109,1) 50%, rgba(255,40,40,1) 52%, rgba(255,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#ff0000', GradientType=0 );
filter: none;
height: 20%;
text-align: center;
}
.li1 { border-bottom: 1px solid #2E2E2E; }
.li2 { border-top: 1px solid #2E2E2E; }
.li3 {
border-top: 1px solid #2E2E2E;
border-bottom: 1px solid #2E2E2E;
}
HTML:
<body height="1000px" bgcolor="#2E2E2E">
<div class="menuandtop">
<div class="top"> </div>
<br>
<br>
<br>
<br>
<br>
<div class="left">
<ul class="navmenu">
<li class="li1">Home</li>
<li class="li3">Home</li>
<li class="li3">Home</li>
<li class="li3">Home</li>
<li class="li2">Home</li>
</ul>
</div>
</div>
<div class="footer"> </div>
</body>
There are a few way this can be achieved, one way is to create an invisible inline-block element with 100% height which the navigation is vertically aligned to. Change your CSS in the following way:
.left{
position: fixed;
float: left;
margin-top: 5px;
width: 30%;
height: 100%;
background-color: red;
margin-bottom: 10px;
border-radius: 10px;
border: 4px solid white;
font-size: 0;
}
Font size is set to 0 to remove white space.
.left:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
}
The :after pseudo-element is used to create the invisible element.
.navmenu{
display: inline-block;
font-size: 16px;
list-style-type: none;
width: 100%;
}
The menu is then set to be inline-block and the font-size set to offset the zeroed font size in the parent element.
http://jsfiddle.net/D7V7p/
here you are:
http://jsfiddle.net/J7P2c/
just add the following code:
.left {
display:table;
}
.navmenu{
display:table-cell;
vertical-align:middle;
}
Update: updated fiddle,
although on firefox it worked fine, on chrome there seemed to be some kind of error produced by the height of the li, so remove the following:
.navmenu li{
height: 20%;
}
Updated fiddle: http://jsfiddle.net/Vr8cv/1/