Earlier I asked a question about horizontal positioning of div containers, now I've got follow up and related questions:
(1) As you can see in the HTML code below, I've got a "column_bottom" container (for links) placed to the left of a "content_bottom" container (for the page's main content).
As I type more content into the "content_bottom" container so that its height exceeds that of the left "column_bottom" container, the entire "content_bottom" container shifts to BELOW the "column_bottom" container. What can I do so that the left "column_bottom" container's height dynamically match the height of the right "content_bottom" container (and they stay horizontally next to each other)?
(2) As you can see in the CSS style sheet below, I tried to manually set the widths of the "column_top" and "column_bottom" to match in em units by trial and error. Would there be any issues with this method across different browsers on different systems? What can I do to ensure that "column_top" and "column_bottom" widths always match?
Thanks for your help.
Here's the HTML:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>this is the site's title</title>
<link rel="stylesheet" href="penonek.css" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="column_top">site<br>
</div>
<div class="content_top"> title<br>
</div>
<div class="column_bottom">
<ul>
<li>home</li>
<li><a href="#">link 1<br>
</a></li>
<li><a href="#">link 2<br>
</a></li>
<li><a href="#">link 3<br>
</a></li>
</ul>
</div>
<div class="content_bottom">main content here<br>
</div>
</div>
</body>
</html>
Here is the CSS:
body {
margin: 0;
padding: 0;
font-family: Arial,Helvetica,sans-serif;
text-align: center;
color: #cccccc;
background-color: black;
font-size: 1em;
}
.wrapper {
margin: auto;
min-width: 60em;
max-width: 60em;
font-family: Arial,Helvetica,sans-serif;
width: 60em;
color: #cccccc;
}
.column_top {
border-width: 0 0 0.25em;
border-bottom: 0.25em solid black;
width: 3.2em;
min-width: 3.2em;
float: left;
padding-top: 2em;
text-align: right;
color: #333333;
max-height: 1em;
background-color: #f4f4f4;
font-size: 3em;
min-height: 1em;
max-width: 3.2em;
height: 1em;
font-weight: bold;
padding-bottom: 0.2em;
}
.content_top {
border-width: 0 0 0.25em;
border-bottom: 0.25em solid #f4f4f4;
padding-top: 2em;
font-size: 3em;
min-height: 1em;
text-align: left;
max-height: 1em;
height: 1em;
font-weight: bold;
padding-bottom: 0.2em;
}
.column_bottom {
width: 9.28em;
text-align: right;
padding-top: 3em;
color: #333333;
border-bottom-width: 0;
background-color: #f4f4f4;
border-right-width: 0;
padding-right: 0.3em;
float: left;
border-left-width: 0;
min-width: 9.28em;
max-width: 9.28em;
}
.content_bottom {
padding: 3em 5em 5em;
border-collapse: separate;
text-align: left;
float: left;
}
.column_bottom ul {
margin: 0;
padding: 0;
text-decoration: none;
color: #333333;
list-style-type: none;
font-weight: inherit;
}
.column_bottom a:hover {
background-color: #999999;
}
.column_bottom a {
text-decoration: none;
font-weight: inherit;
color: #333333;
}
Add a wrapper for .content_bottom with this css:
.content_bottom_wrapper {
width: 100%;
margin-left: -9.58em;
float: right;
}
And add this to content-bottom:
margin-left: 9.58em;
9.58em = width of .column_bottom + padding-right on .column_bottom
http://jsfiddle.net/p93fM/
Here:
Live Demo
I added this to .content_bottom in CSS
width:640px;
You can adjust the margins as you wish.
Related
The position of the portfolio page is well positioned but I think I don't use correctly propriety margin-left, I think that I have to use another propriety?
Then, my second problem is that my languages page is too far from my portfolio page, I would like to fix to 50 px. But I cannot do because I am stuck with my first problem.
Thank you for help.
body{
margin: 0px;
padding: 0px;
}
header{
background-color: #B1DBE8;
height: 98px;
}
.header-block{
font-size: 11px;
text-transform: uppercase;
padding-top: 8px;
font-weight: 700;
color: #777;
line-height: 20px;
}
.page-left{
display: inline-block;
margin-left: 430px;
}
<body>
<header>
<div class="header-block">
<div class="page-left">Portfolio</div>
<div class="page-left">Languages</div>
</div>
</header>
</body>
You should create a new selector for your code for the second question:
View the result in full screen for actual margin-left working.
body{
margin: 0px;
padding: 0px;
}
header{
background-color: #B1DBE8;
height: 98px;
}
.header-block{
font-size: 11px;
text-transform: uppercase;
padding-top: 8px;
font-weight: 700;
color: #777;
line-height: 20px;
}
.page-left{
display: inline-block;
margin-left: 430px;
border:1px solid black;
}
.Languages{
display: inline-block;
margin-left: 30px;
border:1px solid red;
}
<body>
<header>
<div class="header-block">
<div class="page-left">Portfolio</div>
<div class="Languages">Languages</div>
</div>
</header>
</body>
Just add margin-left: 430px; to the header-block div
You can use "flex" it's help you
In different screen sizes It will help arrange the right proportions
Try.
body{
margin: 0px;
padding: 0px;
}
header{
background-color: #B1DBE8;
height: 98px;
}
.header-block{
font-size: 11px;
text-transform: uppercase;
padding-top: 8px;
font-weight: 700;
color: #777;
line-height: 20px;
display: flex;
}
.page-first{
display: inline-block;
margin-left: 430px;
}
.page-second{
margin-left: 50px;
}
<body>
<header>
<div class="header-block">
<div class="page-first">Portfolio</div>
<div class="page-second">Languages</div>
</div>
</header>
</body>
Example.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I did check the other questions, but none of them fixed my problem. When I resize the page, my elements are moving everywhere, all squashed up. I even tried doing a wrapper div, and that didn't help. Are we allowed to post web sites? Because I have the site live.
<!DOCTYPE html>
<html>
<head>
<title>Promises!-Contact</title>
<meta charset="UTF-8">
<style>
#body {
margin: 0 auto;
width: 370px;
height: 1%;
margin-top: 100px;
border-radius: 15px;
border: 5px dotted #00A396;
background-clip: content-box;
background-color: #F8B72E;
text-align: justify;
font-family: Kirvy;
overflow: hidden;
font-size: 13px;
}
#wrapper {
width: 100%;
margin: 0%;
padding: 0%;
}
p { padding: 10px;}
#title {
text-align: center;
font-size: 24px;
top-margin: 0px;
padding: 0px;
}
nav {
font-family: KBAStitchInTime;
font-size: 12px;
color: #EC225F;
right: 220px;
top: 140px;
position: relative;}
#dot1 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot2 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot3 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot4 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
a:link { color:#EC225F; text-decoration:none; }
a:visited{ color: purple; }
a:hover{ color: ;}
a:active {}
body {background-color: #262626;
text-align: left;
}
</style>
</head>
<body>
<div id="wrapper">
<nav>
<span id="dot1">.</span>About<br>
<span id="dot2">.</span>Pages<br>
<span id="dot3">.</span>Poems<br>
<span id="dot4">.</span>Home<br>
</nav>
<div id="body">
<p id="title">Contact!</p>
<p> I love getting mail! Find me at:</p>
</div>
</div>
</body>
</html>
I am having a CSS issue, I have a div called 'current-property' and inside this div, I have a paragraph. What I am trying to do is what this paragraph at the bottom of the element at all times. Is this possible?
.current-property {
padding: 50px 0px 50px 0px;
clear: both;
min-height: 460px;
}
.current-property p {
float: left;
padding-left: 50px;
}
p {
text-align: left;
font-size: 18px !important;
font-weight: 400;
padding: 10px 0px;
color: #333;
line-height: 1.8;
}
.current-property img {
float: left;
width: 28%;
}
.current-property h2 {
float: left;
width: 60%;
text-align: left;
padding-left: 50px;
font-size: 32px;
}
.current-property ul {
padding-left: 80px;
list-style-type: disc;
padding-top: 10px;
}
.current-property ul li {
padding-bottom: 10px;
}
<div class="current-property">
<img src="images/commercial/default-image.png" class="animated" data-animation="fadeInLeft" data-animation-delay="300" />
<h2>123 Fake Street</h2>
<div class="property-info">
<ul>
<li>Location: Oakland</li>
<li>Up to 22,000 Sq. Ft.</li>
</ul>
<p>Call for Availability: 555-555-5555</p>
</div>
</div>
You can do this with positioning. Set the position on the div to relative, and absolute on the paragraph (background color added to visualize the div's space).
.current-property {
padding: 50px 0px 50px 0px;
clear: both;
min-height: 460px;
background: #ccc;
position: relative;
}
.current-property p {
float: left;
padding-left: 50px;
position: absolute;
bottom: 0;
}
p {
text-align: left;
font-size: 18px !important;
font-weight: 400;
padding: 10px 0px;
color: #333;
line-height: 1.8;
}
<div class="current-property">
<img src="images/commercial/default-image.png" class="animated" data-animation="fadeInLeft" data-animation-delay="300" />
<h2>123 Fake Street</h2>
<div class="property-info">
<ul>
<li>Location: Oakland</li>
<li>Up to 22,000 Sq. Ft.</li>
</ul>
<p>Call for Availability: 555-555-5555</p>
</div>
</div>
If I understand what your question is, you can just add display:blockto .property-info p like this:
.property-info p {display:block;}
This makes sure that it will take up the full width of the screen, and no elements will float or be inline to it.
EDIT
Add it to the p tag
I am new to HTML and CSS and I have my own website.
The problem is that I don't know how to change the opacity when I hover over my text. I want it to become lighter if I'm hovering over my text in the menu on the right. Right now It's only changing when I hover over the image itself, the text changes too, but I want it to both change at the same time and on the same object, so I hover over the text; text changes and images opacity changes.
Here is my code:
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
#import url(http://fonts.googleapis.com/css?family=Roboto:300);
* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
background-image: url(lucafraserProject/images/backgroundImage.png);
background-repeat: repeat;
}
#container {
width: 100%;
height: 1000px;
}
#header {
width: 100%;
height: 200px;
background-position: 50% 50%;
background-color: #000;
color: #FFF;
font-family: 'Roboto', sans-serif;
text-align: center;
font-size: 45px;
box-shadow: 3px 3px 5px 3px #ccc;
}
#aboutMe {
width: 50%;
height: auto;
background-color: #FFF;
font-family: 'Roboto', sans-serif;
color: #333333;
line-height: 2;
margin-top: 50px;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 36px;
padding-right: 36px;
box-shadow: 3px 3px 5px 3px #ccc;
float: left;
}
#footer {
width: 100%;
color: #333333;
text-align: center;
display: block;
font-family: 'Roboto', sans-serif;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px;
padding-top: 10px;
float: left;
}
.aboutMe {
font-size: 20px;
margin-top: 0px;
margin-bottom: 0px;
}
.h2AboutMe {
font-size: 40px;
padding-bottom: 1px;
margin-top: 0px;
margin-bottom: 0px;
}
.h1Header {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 40px;
padding-bottom: 50px;
}
#menuLinks {
background-color: #FFF;
height: auto;
width: 21%;
float: left;
padding: 25px 36px;
overflow: hidden;
font-family: 'Roboto', sans-serif;
color: #333333;
line-height: 2;
margin: auto;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 36px;
padding-right: 36px;
margin-top: 50px;
box-shadow: 3px 3px 5px 3px #ccc;
}
.h2Menu {
font-size: 40px;
padding-bottom: 1px;
margin-top: 0px;
margin-bottom: 0px;
}
#menuRechts {
background-color: #FFF;
height: auto;
width: 21%;
float: left;
overflow: hidden;
font-family: 'Roboto', sans-serif;
color: #333333;
line-height: 2;
margin: auto;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 36px;
padding-right: 36px;
margin-top: 50px;
box-shadow: 3px 3px 5px 3px #ccc;
}
li {
text-decoration: none;
list-style-type: none;
margin-left: -40px;
vertical-align: middle;
margin-top: 10px;
}
a {
text-decoration: none;
list-style: none;
color: #000;
}
a:hover {
text-decoration: none;
font-size: 40px;
font-family: 'Roboto', sans-serif;
margin-top: 0px;
margin-bottom: 0px;
color: #000;
font-weight: bold;
}
#menuLinks li ul {
text-decoration: none;
list-style: none;
}
.marginClassP {
margin-top: -50px;
}
.marginLeft {
margin-left: 10px;
font-size: 20px;
}
.mainMenu {
font-size: 20px;
}
#widespace {
width: 2%;
height: 500px;
float: left;
}
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body {
}
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width : 320px) {
/* Styles */
}
/*1210px = follow me lelijk = new css, tablet device, mobile width = */
.pic {
opacity: 1;
filter: alpha(opacity=100);;
}
.pic:hover {
opacity: 0.3;
filter: alpha(opacity=30);
}
<!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>lucafraser.nl</title>
<link href="indexCSS.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<div id="header">
<h1 class="h1Header">Welcome</h1>
</div>
<div id="widespace"></div>
<div id="menuLinks">
<h2 class="h2Menu">Menu</h2>
<ul>
<li><span class="mainMenu">Home</span></li>
<li><span class="mainMenu">About</span></li>
<li><span class="mainMenu">Portfolio</span></li>
<li><span class="mainMenu">Results</span></li>
<li><span class="mainMenu">News</span></li>
<li><span class="mainMenu">Blog</span></li>
<li><span class="mainMenu">Contact</span></li>
</ul>
</div>
<div id="widespace"></div>
<div id="aboutMe">
<h2 class="h2AboutMe">Home</h2>
<p class="aboutMe">I am trying to get this website to work on mobile devices. After that I will continue creating my website and I will be inserting pages with content. Also, I am trying to get the font-type I use to work for everyone so you don't see the ugly standard font-type. Thanks for your patience!<br />Update: The font is working now! I hope it's readable :D</p>
</div>
<div id="widespace"></div>
<div id="menuRechts">
<h2 class="h2Menu">Follow me</h2>
<ul>
<li><img src="lucafraserProject/images/48x48/facebook-48.png" style="vertical-align:middle" class="pic"/><span class="marginLeft">Facebook</span></li>
<li><img src="lucafraserProject/images/48x48/twitter-48.png" style="vertical-align:middle" class="pic"/><span class="marginLeft">Twitter</span></li>
<li><img src="lucafraserProject/images/48x48/googleplus-48.png" style="vertical-align:middle" class="pic"/><span class="marginLeft">Google+</span></li>
<li><img src="lucafraserProject/images/48x48/email-48.png" style="vertical-align:middle" class="pic"/><span class="marginLeft">Gmail</span></li>
<li><img src="lucafraserProject/images/48x48/instagram-48.png" style="vertical-align:middle" class="pic"/><span class="marginLeft">Instagram</span></li>
<li><img src="lucafraserProject/images/48x48/youtube-48.png" style="vertical-align:middle" class="pic"/><span class="marginLeft">YouTube</span></li>
</ul>
</div>
<div id="widespace"></div>
<div id="footer">
<p>Copyright © Luca Fraser. Alle rechten voorbehouden.</p>
</div>
</div>
</body>
</html>
As you mentioned you know html and css please add class on links parent i.e ul see below example
<ul class="side-links">
then use below css in style file
.side-links li:hover{ opacity:0.3}
Done
It should go like this parent:hover child {opacity:0.3;}
here is the code example.
Instead of applying the hover effect when you hover over the a or the .pic apply it when you hover over their containing li element.
#menuRechts li:hover .pic{
opacity:0.3
}
#menuRechts li:hover a{
font-weight:bold;
}
you can always make us of css pseudo classes
img:hover{
opacity : 0.5;
}
this will decrease the opacity of every image by 50% , you can use any html element,css class or id instead of img
you can give any value between 0-1
1 being total visible and 0 being totally transparent
add this CSS:
#menuRechts li:hover {
opacity: 0.5;
}
and remove the .pic:hover code. This will make the entire LI element fade out, since it contains both the image and the text, theres no need to do both things separately.
Try to this code...
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<img src="klematis.jpg" width="150" height="113" alt="klematis">
<img src="klematis2.jpg" width="150" height="113" alt="klematis">
<p><b>Note:</b> In IE, a !DOCTYPE must be added for
the :hover selector to work on other elements than the a element.</p>
</body>
</html>
I'm trying to build a website for some coursework and my two middle columns are being pushed over to the left for some reason. The header, nav bar and footer all align vertically but the two floated divs in the middle are being forced to the left.
HTML
<html>
<head>
<title>Churches Of Norwich</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="site.css">
</head>
<body>
<div id="bg">
<div id="content">
<div id="headboxspacer"></div>
<div id="head-box">Churches of Norwich</div>
<div id="navbar" style="float: none">
<div id="tabs">
<ul>
<li>Home</li>
<li>Map</li>
<li>Churches</li>
<li>Comments</li>
<li>Gallery</li>
</ul>
</div>
</div>
<div id="container" style="overflow:hidden;width: 100%">
<div id="homeboxleft" style="clear: both">Testing</div>
<div id="homeboxright" style="clear: both" >Right</div>
</div>
<div id="footer"> footer </div>
<div id="bottomspacer"></div>
</div>
</div>
</body>
</html>
CSS
#content {
width: 1200px ;
height: max-content;
margin-left: auto ;
margin-right: auto ;
}
#headboxspacer{
height:50px;
width:100%;
}
#head-box{
background-color: #003651;
height: 120px;
width: 100%;
padding: 10px;
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 65pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
}
#navbar{
height: 50px;
background-color: #003651;
width: 100%;
margin: 5px;
padding: 10px;
font-family: sans-serif;
font-size: 20pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
text-decoration-line: underline;;
width: 100%;
}
#tabs ul {
margin: 0 ;
padding: 0 ;
list-style: none ;
display: inline ;
}
#tabs ul li {
margin: 0 ;
padding: 10px ;
display: inline ;
text-align: center ;
list-style: none ;
font-family: Arial, Helvetica, sans-serif ;
}
#tabs li a {
color: #FEE7BE;
background-color: #003651 ;
padding: 8px ;
text-decoration: none ;
display: inline ;
}
#tabs li a:hover {
color: gainsboro ;
background-color: #003651 ;
}
#container{
width: 1200px;
}
#homeboxleft{
background-color: #FEE7BE;
height: 500px;
width: 50%;
float: right;
margin: 0px;
opacity: 10%;
filter:alpha(opacity=10);
text-orientation: inherit;
font-family: sans-serif;
font-size: 10pt;
color: #003651;
font-style: normal;
text-align: center;
}
#homeboxright{
background-color: #FEE7BE;
height: 500px;
width: 50%;
float: left;
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 10pt;
color: #003651;
font-style: normal;
text-align: center;
}
#mainbox{
background-color: #FEE7BE;
height: 500px;
width: 100%;
opacity: 0.6;
}
#footer{
background-color: #003651;
height: 120px;
width: 100%;
padding: 10px;
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 65pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
clear: both;
}
#bottomspacer{
height:100px;
width:100%;
}
because the padding of the navbar is added to the width of the navbar.
you have to use the box model solution with an inner div
http://css-discuss.incutio.com/wiki/Box_Model_Hack#Box-in-a-box
then you have the same widths and appearance in all browsers
Your "container" which holds the two columns is set to "width =100%".
It means that the div will spread on the entire width of the page.
Try deleting this width attribute, and beside that delete all float attributes.
I have also attached a screenshot.
and this is the fullscreen preview of the fiddle:
http://fiddle.jshell.net/zHBhs/2/show/
I think your problem is the inline css here:
<div id="homeboxleft">Testing</div>
<div id="homeboxright">Right</div>
//-------------------^-------------just removed the clear:both inline css here
and in your this css class just removed the margin property:
#homeboxright{
background-color: #FEE7BE;
height: 500px;
width: 50%;
float: left;
margin: 0; // <------------------made margin for all sides to 0
text-orientation: inherit;
font-family: sans-serif;
font-size: 10pt;
color: #003651;
font-style: normal;
text-align: center;
}
try this and see if this solves, checkout the fiddle here: http://jsfiddle.net/zHBhs/2/
do some work on these css classes as well:
#head-box{
padding:0; // change paddings to 0
margin: 5px 0; // just apply to top and bottom margins
}
#navbar{
margin: 0; // change paddings to 0
padding:10px 0; // just apply to top and bottom margins
}
#footer{
margin: 0; // change paddings to 0
padding:10px 0; // just apply to top and bottom margins
}
Get both of the sides, left and right in a main div. Then apply this css:
#maindiv{
overflow:hidden;
border-bottom:1px solid rgba(200,200,200,0.3);
border-top:1px solid rgba(200,200,200,0.3);
}
#left{
width:60%;
float:left;
overflow:hidden;
}
#right{
overflow:hidden;
}
Note: The right div will be attached with left one, If you want to float it to right, Apply float:right; to it. But float to only left is suggested :)
An Example for both sides using the above trick.