i am trying to build a new bootstrap "frame" template around my website content.
With the navbar i have no problems... But then there are a few problems with the footer.
The footer shall be:
sticky
have 2 rows
a fat gray one with 4 columns of responsive content
a thin black one that ends at the very bottom of the browser content frame
What i have so far:
sticky-footer.css:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 550px;
}
.footer {
background: black;
position: absolute;
bottom: 0;
width: 100%;
}
#contentFooter {
margin: 0px;
width: 100%;
background: dimgray;
padding: 50px 0 40px;
margin-bottom: 30px;
color: #939fa6;
}
#copyrightFooter {
color: black;
line-height: 30px;
}
#backToTopLink::before {
display: block;
content: "";
width: 15px;
height: 15px;
border-left: 1px solid #93959d;
border-top: 1px solid #93959d;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
left: 50%;
top: 13px;
margin-left: -9px;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ACME Inc.</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="sticky-footer.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<button class="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://via.placeholder.com/200x70"></a>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Foo</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Bar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Qux</a>
</li>
</ul>
</div>
</div>
</header>
<div class="container">
<div class="mt-1">
<h1>ACME Inc. presents</h1>
</div>
<p class="lead">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<footer class="footer">
<div id="contentFooter">
<div class="container">
<div class="row">
<div class="col-md-3">
<h6>ACME Inc.</h6>
</div>
<div class="col-md-3">
<h6>How to reach us</h6>
<ul>
<li>foobar#acme.inc</li>
<li>+1 234 567 890</li>
<li>Earth, Milkyway</li>
</ul>
</div>
<div class="col-md-3">
<h6>General</h6>
<ul>
<li>Imprint</li>
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
<div class="col-md-3">
<h6>Sponsored by</h6>
<img style="max-width: 100%; height: auto; width: auto; vertical-align: middle;" src="http://via.placeholder.com/350x100">
</div>
</div>
</div>
</div>
<div class="container" id="copyrightFooter">
<div class="row">
<div class="col-md-3">
<small class="text-muted">ACME Inc.</small>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</footer>
</body>
</html>
This does mostly work, but i have 3 remaining problems (see picture also):
When the browser image is so narrow that the responsive style kicks in, i suddenly have a white stripe below the black part of the footer. I would like the black part to continue down to the absolute bottom of the browser window.
I would like the ACME Inc. in the black part of the footer to be centered as soon as the responsive narrowing kicks in.
I need to define body { margin-bottom: 550px; } or otherwise the footer will "eat" some part of the content. The thing is... is there some way to make this "dynamically" so i don't need to recalculate the approximate footer height and refresh it in the body CSS rule?
Screenshot of problems from problem list
I was not able to create a runnable code sample with the stack overflow editor (cannot find the button: https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/), so i created a jsfiddle:
https://jsfiddle.net/8hb4d5t8/1/
When the browser image is so narrow that the responsive style kicks
in, i suddenly have a white stripe below the black part of the footer.
I would like the black part to continue down to the absolute bottom of
the browser window.
Define columns for smaller viewports as well. There are different column definitions for different windows sizes. So your divs should look like this:
<div class="container" id="copyrightFooter">
<div class="row">
<div class="col-3 col-md-3">
<small class="text-muted">ACME Inc.</small>
</div>
<div class="col-6 col-md-6">
</div>
</div>
</div>
This will make your divs have the same relative width as on big screens, if you want them to take a whole row, just set it to:
<div class="col-12 col-md-3"></div>
I would like the ACME Inc. in the black part of the footer to be
centered as soon as the responsive narrowing kicks in.
You can implement css that will only affect a certain screen width. This is done using Media queries.
So if you want to have this centered on small screens, you could do something like
#media screen and (max-width: 992px)
{
.some-css-class{
text-align: center;
}
}
This will only affect screens with a viewport width <= 992px.
The same goes for your third question:
I need to define body { margin-bottom: 550px; } or otherwise the
footer will "eat" some part of the content. The thing is... is there
some way to make this "dynamically" so i don't need to recalculate the
approximate footer height and refresh it in the body CSS rule?
You can define certain margins or paddings for your body element using media queries for different viewport widths.
This is your updated fiddle to this question.
Related
.empty-space{
width: 30%;
float: left;
}
.download-information{
width: 70%;
float: left;
}
.download-thumbnail img {
height: 30px;
width: 30px;
float: left;
}
.download-profile{
float: left;
}
<div class="download-content">
<div class="download-information">
<div class="empty-space"></div>
<div class="information">
<div class="download-thumbnail"><img src="https://media.istockphoto.com/photos/cloud-computing-picture-id1087885966" alt="Sample image"></div>
<div class="download-profile">
<b><div class="img-title">Demo title</div></b>
<div class="img-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</div>
</div>
</div>
</div>
<div class="download-link-content">
<div class="download-link-content">
<div class="download-icon"><i class="fas fa-download"></i></div>
<div class="link-to-download">Download</div>
<div class="download-link-information">
<span>(
<span class="download-filesize">3,2 MB,</span>
<span class="download-filestype">PDF</span>
)
</span>
</div>
</div>
<div class="empty-space"></div>
</div>
</div>
I have the following mockup which I am now trying to model.
I have thought of the following HTML framework and associated CSS:
<div class="download-content">
<div class="download-information">
<div class="empty-space"></div>
<div class="information">
<div class="download-thumbnail"></div>
<div class="download-profile">
<b><div class="img-title"></div></b>
<div class="img-description"></div>
</div>
</div>
</div>
<div class="download-link-content">
<div class="download-link-content">
<div class="download-icon"><i class="fas fa-download"></i></div>
<div class="link-to-download"></div>
<div class="download-link-information">
<span>(
<span class="download-filesize">,</span>
<span class="download-filestype"></span>
)
</span>
</div>
</div>
<div class="empty-space"></div>
</div>
</div>
.empty-space{
width: 30%;
float: left;
}
.download-information{
width: 70%;
float: left;
}
.download-thumbnail {
height: 30px;
width: 30px;
float: left;
}
.download-profile{
float: left;
}
Unfortunately it doesn't work and frontend is not my strength at all and unfortunately I don't know anyone who can help me here how to do it. Can someone here help me how it should look or how I would have to style the CSS?
Add 1:
Is my idea of the HTML DOM wrong or is it possible to implement this so that the image can also be displayed correctly
Add 2:
Add snippet to my post. I don't get it. It's only a privat project but don't get the frontend styling.
I would not use all these floats, but to stay as close to what you did as possible, here's what you can do:
Move .download-profile into the .information div.
Create an additional wrapper div around .thumbnail and the div which follows after it (which contains the image title and description). (To only have two child elements in .download-profile which will be placed beside each other)
Apply display: flex to .download-profile
.empty-space {
width: 30%;
float: left;
}
.download-information {
width: 70%;
float: left;
}
.download-thumbnail img {
height: 30px;
width: 30px;
float: left;
margin: 0 10px 6px 0;
}
.download-profile {
float: left;
display: flex;
}
<div class="download-content">
<div class="download-information">
<div class="empty-space"></div>
<div class="information">
<div class="download-profile">
<div class="download-thumbnail"><img src="https://media.istockphoto.com/photos/cloud-computing-picture-id1087885966" alt="Sample image"></div>
<div>
<b><div class="img-title">Demo title</div></b>
<div class="img-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</div>
</div>
</div>
</div>
</div>
<div class="download-link-content">
<div class="download-link-content">
<div class="download-icon"><i class="fas fa-download"></i></div>
<div class="link-to-download">Download</div>
<div class="download-link-information">
<span>(
<span class="download-filesize">3,2 MB,</span>
<span class="download-filestype">PDF</span> )
</span>
</div>
</div>
<div class="empty-space"></div>
</div>
</div>
It looks as though the CSS grid property will help here as it will work out how much space to leave between items tso you don't need to worry about floats or having empty space divs.
Here's a snippet to get you started. Obviously you'll want to look at the exact proportions you want for each part. You may also want to have a media query so that narrow devices use the full width of the screen for example.
You could also review your HTML structure as, with thinking of it in grid terms, it might be possible to simplify it.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
}
.download-content {
display: grid;
grid-template-columns: 2fr 1fr;
width: 70%;
margin: 0 auto 0 auto;
}
.information{
width: 70%;
display: grid;
grid-template-columns: 1fr 6fr;
}
.download-thumbnail img {
width: 100%;
height: auto;
}
.download-link-info div {
display: inline-block;
}
</style>
</head>
<body>
<div class="download-content">
<div class="download-information">
<div class="information">
<div class="download-thumbnail"><img src="https://media.istockphoto.com/photos/cloud-computing-picture-id1087885966" alt="Sample image"></div>
<div class="download-profile">
<b><div class="img-title">Demo title</div></b>
<div class="img-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</div>
</div>
</div>
</div>
<div class="download-link-content">
<div class="download-link-info">
<div class="download-icon"><i class="fa fa-download" aria-hidden="true"></i></div>
<div class="link-to-download">Download</div>
<div class="download-link-information">
<span>(
<span class="download-filesize">3,2 MB,</span>
<span class="download-filestype">PDF</span>
)
</span>
</div>
</div>
</div>
</div>
</body>
I need to display an image and some dynamic text inline within a Div.
The problem is when this text is too long the next line text start from the begibning of the Div rather than keeping left alignment of text same.
I want something like this. Thanks
I love to use the css background feature for this kind of task.
padding-left makes space for the image, so make sure to adjust that to your needs. Also you can control the image size with background-size.
.icon-box{
padding: 25px;
padding-left: 75px;
background-repeat: no-repeat;
background-image: url(https://www.gravatar.com/avatar/f087769399da5144ae10c892ae279490?s=32&d=identicon&r=PG);
background-position: 25px center;
background-color: #dedede;
}
<div class="icon-box">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="flex-container">
<div class="flex-item">
<img />
</div>
<div class="flex-item">
<p>This is the short or long text. Longer than shorter. Maybe.</p>
</div>
</div>
.flex-container {
display: flex;
flex-direction: row;
}
.flex-item {
align-self: center;
}
You can display an image and some dynamic text inline within a Div by use below code:
div.main{
border:solid black 1px;
display:table;
padding:5px;
width:100%;
margin:5px 0; /* you can change/remove margin */
}
div.main .image{
vertical-align:middle;
display:table-cell;
padding-right:5px;
width:50px; /* you can change width */
}
div.image img{
width:100%;
height:50px; /* you can change height */
vertical-align:middle;
}
div.your-text{
vertical-align:middle;
display:table-cell;
text-align:justify;
}
<div class="main">
<div class="image"><img src="your_iamge_link" /></div>
<div class="your-text">Type your text here. Type your text here. Type your text here. Type your text here. Type your text here. Type your text here. Type your text here. Type your text here.</div>
</div>
Hi guys I am trying to add to my page a menu bar down the left hand side
my issue is its pushing all the html below this out of line. The menu bar is showing but its not able to be clicked on.
How can I sort this issue please..
Many thanks in advance
here is some code I added to the HTML and the Stylesheet.
HTML
<!DOCTYPE html>
<html>
<head>
<meta https-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Site tile </title>
<div id="wrapper">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icon-bar">
<a class="active" href="https://Sitehere.com"><i class="fa fa-home"></i></a>
<i class="fa fa-search"></i>
</i>
<i class="fa fa-globe"></i>
</div>
<!--CSS-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-light.css">
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<!--/CSS-->
<!--JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.plugin.js"></script>
<script src="js/jquery.countdown.js"></script>
<script>
This is what I added to the style sheet..
}
.icon-bar {
width: 90px; /* Set a specific width */
background-color: #555; /* Dark-grey background */
}
.icon-bar a {
display: block; /* Make the links appear below each other instead of side-by-side */
text-align: center; /* Center-align text */
padding: 16px; /* Add some padding */
transition: all 0.3s ease; /* Add transition for hover effects */
color: white; /* White text color */
font-size: 36px; /* Increased font-size */
}
.icon-bar a:hover {
background-color: #000; /* Add a hover color */
}
.active {
background-color: #4CAF50; /* Add an active/current color */
}
How do i stop this pushing all the HTML text below down the page? and is there any reason the bar can be seen but not interacted with?
many thanks in advance!
FULL HTML
<!DOCTYPE html>
<html>
<head>
<meta https-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Coming Soon </title>
<div id="wrapper">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icon-bar">
<a class="active" href="https://EXAMPLE.COM"><i class="fa fa-home"></i></a>
<i class="fa fa-search"></i>
</i>
<i class="fa fa-globe"></i>
</div>
<!--CSS-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-light.css">
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<!--/CSS-->
<!--JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.plugin.js"></script>
<script src="js/jquery.countdown.js"></script>
<script>
$(function () {
$('#defaultCountdown').countdown({until: new Date(2017, 8-1, 25)});
//Replace above date with your own, to find out more visit https://keith-wood.name/countdown.html
});
</script>
<!--/JS-->
</head>
<script type="text/javascript"> //<![CDATA[
var tlJsHost = ((window.location.protocol == "httpss:") ? "httpss://secure.comodo.com/" : "https://www.trustlogo.com/");
document.write(unescape("%3Cscript src='" + tlJsHost + "trustlogo/javascript/trustlogo.js' type='text/javascript'%3E%3C/script%3E"));
//]]>
</script>
<body>
<!--DARK OVERLAY-->
<div class="overlay"></div>
<!--/DARK OVERLAY-->
<!--WRAP-->
<div id="wrap">
<!--CONTAINER-->
<div class="container">
<img src="images/LOGO.png" alt="LOGO" class="image-align" />
<h1>
<span>We are</span><br/>
Reaching For <span class="yellow">The Moon.</span>
</h1>
<p>SITE TEXT HERE.</p>
<div id="defaultCountdown"></div>
<form action="#">
<input type="text" name="email" id="email" value="Subscribe to find out when we are done">
<input type="submit" value="GO!">
</div>
</form>
<p class="copyright">Designed by Investex.pro</p>
<img src="images/comodo_secure_seal_76x26_transp.png" alt="Comodo" class="image-align" />
</div>
<!--/CONTAINER-->
<!--/WRAP-->
<script language="JavaScript" type="text/javascript">
TrustLogo("https://EXAMPLE.COM/images/comodo_secure_seal_76x26_transp.png", "CL1", "none");
</script>
Comodo SSL
</body>
</html>
To stop the bar pushing the following content down, you can just set it to float: left; to take it out of the normal text flow and put it to the left. Now the text will appear next to the bar.
Also if you can't click on the bar, there is maybe a hidden div with a higher z-index. I would recommend checking your web inspector to find out, why you can't click on the bar.
Also: Make sure, your markup is valid! Your head section is a bit messy. <div> elements e.g. don't belong here.
.icon-bar {
width: 90px;
background-color: #555;
float: left;
margin-right: 1em;
}
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #000;
}
.active {
background-color: #4CAF50;
}
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="wrapper">
<div class="icon-bar">
<a class="active" href="https://Sitehere.com"><i class="fa fa-home"></i></a>
<i class="fa fa-search"></i>
</i>
<i class="fa fa-globe"></i>
</div>
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>
you should replace your html down the link tags and close the head tag
<!DOCTYPE html>
<html>
<head>
<meta https-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Site tile </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--CSS-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-light.css">
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<!--/CSS-->
</head>
<div id="wrapper">
<div class="icon-bar">
<a class="active" href="https://Sitehere.com"><i class="fa fa-home"></i></a>
<i class="fa fa-search"></i>
</i>
<i class="fa fa-globe"></i>
</div>
</div>
<!--JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.plugin.js"></script>
<script src="js/jquery.countdown.js"></script>
<script>
you should change the background color for the a element
}
.icon-bar a {
display: block; /* Make the links appear below each other instead of side-by-side */
background:#555;
text-align: center; /* Center-align text */
padding: 16px; /* Add some padding */
transition: all 0.3s ease; /* Add transition for hover effects */
color: white; /* White text color */
font-size: 36px; /* Increased font-size */
}
I'm using TYPO3 with a calendar extension (cal). It creates events and shows them as a list. Currently, it looks like that:
Now I want to have a border around the date, but just as big as the text.
This is the extension's template:
<div class="col-md-3 text-center" style="text-align:center;">
<div class="event-wrapper">
<div class="img-wrapper">
<div class="date-wrapper">
<div class="date" title="###MICROFORMAT_START###" class="dtstart"><span class="borderspan">###STARTDATE###</span></div>
</div>
<div class="image">###IMAGE###</div>
</div>
<div class="text-wrapper">
<div class="time">###STARTTIME######ENDTIME###</div>
<h3><!-- ###EVENT_LINK### start-->###TITLE###<!-- ###EVENT_LINK### end--></h3>
<p>###DESCRIPTION###</p>
</div>
</div>
</div>
Div with class "date" is the relevant part.
This template creates this code:
<div class="col-md-3 text-center" style="text-align:center">
<div class="event-wrapper">
<div class="img-wrapper">
<div class="date-wrapper">
<div class="date" title="20170118T210000" class="dtstart"><span class="borderspan">
<div class="day">18.</div>
<div class="month">Januar</div></span>
</div>
</div>
<div class="image"></div>
</div>
<div class="text-wrapper">
<div class="time">21:00 Uhr - 23:00 Uhr</div>
<h3>Frankfurt/Main</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takim</p>
</div>
</div>
</div>
I tried to give the class "borderspan" a border, but this didn't worked and looked like this afterwards:
How can I have a border around the date?
You could try using ::before and ::after like so:
.date-wrapper {
max-width: 200px;
background: orange;
text-align: center;
}
.date::before,
.date::after {
content: "";
width: 1px;
height: 25px;
background: black;
display: block;
margin: 0 auto;
}
.date {
margin: 25px 0;
}
<div class="date-wrapper">
<div class="date" title="###MICROFORMAT_START###">
<span class="borderspan">###STARTDATE###</span>
</div>
</div>
Also notice (like #Banzay mentions) don't use class="" twice per element.
Your date is a <div> element which is block element by default. Means it take up whole width available. We need to make it inline-block, so the width will be content related. Plus add some padding to make some space between the text and a border. I set the border width equal to your text-line width and color to match the text color. Take a look:
.date {
display: inline-block;
padding: 7px;
border: 7px solid #ea644f;
}
I am trying to obtain this design:
I just have no idea how to start on this. It doesn't make sense in my head on how I can obtain this.
Can someone help me? Maybe do a quick jsFiddle, just with the basics. I want to learn how I can make layouts like this, where the left menu bar's bg (or just height) is the same as "DIV#2"' content.
Update:
I tried #Josh Davies answer like this:
<div class="container">
<div class="row">
<div id="wrapper">
<div class="leftt">left content</div>
<div class="rightt">right content</div>
</div>
</div>
</div><!-- end container -->
#wrapper{background-color:blue;width:100%;}
.leftt{float:left;width:29%;}
.rightt{float:left;width:69%;}
Unfortunately, I only get the left sidebar, and the right content. Not the top bar, nor the little menu at the bottom of the left menu.
Just create a wrapper and give the wrapper a background colour of the left div. Then position the left and right div and give the right div a colour of your choice. That way when the page expands the wrapper will also expand.
Hope this helps!
There's a couple of ways to achieve this. You can use the <table/> tag of course although some frown on that. Google do it in Drive though.
In 'modern' browsers, you can also use the "table-cell" CSS property to make your DIVs act like TABLEs, but that's not widely supported on legacy browsers, and IMHO a worse hack than using a table on balance.
You can do it all in DIVs though, cross browser, in pure CSS which requires forcing it to full screen height. There's an answer here and jsFiddle example that should help you with this;
https://stackoverflow.com/questions/12861847/100-height-div-using-jquery/12862033#12862033 (my answer does NOT require jQuery, despite the title).
Another thing you might want to consider is grabbing a grid library, which will have all the cross browser stuff worked out for you. Twitter bootstrap contains a good grid library, but I prefer this http://responsive.gs/ which is much simpler to configure for your table like layout above. You may need to combine the two in order to get a full-screen height but let the grid do the width layout for you.
Try something like:
demo: http://jsfiddle.net/sEKtU/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#top {
background: lightblue;
}
#inner-wrapper {
position: relative;
}
#main {
margin-left: 200px;
}
#main-inner {
background: lightsteelblue;
padding: 1px 0;
}
#left {
background: lightSeaGreen;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 200px;
}
#left-menu {
background: lightPink;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
top
</div>
<div id="inner-wrapper">
<div id="left">
<div id="left-content">
left
</div>
<div id="left-menu">
menu
</div>
</div>
<div id="main">
<div id="main-inner">
<h1>Lorem ipsum dolor sit amet,</h1>
<p>consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</body>
</html>
There is no such thing as max width or max height. At the very most you can get the screen width/height and use it as if that was the max width/height.
On the other site, you're looking for some kind of layout system. Maybe have a look at http://www.bramstein.com/projects/jlayout/
I'd start with this structure:
<div class="containter">
<div class="top-bar">
...
</div>
<div class="div1>
...
<div class="bottom-menu">
...
</div>
</div>
<div class="div2">
...
</div>
</div>
Then you're CSS this would be the starting point:
.container { position: relative; }
.top-bar { position: absolute; top: 0; z-index: 5;}
.div1 { height: 100%; position: relative; }
.bottom-menu { position: absolute; bottom: 0; }
That would be a very basic starting point and you would still have to do the styling for it. Sense it sounds like Div2 is going to set the height by being the bigger element Div1 should inherit the overall height of the parent container div.
Setting the Div position to relative will allow you to set the bottom-menu class to an absolute position of bottom 0 so that it will stay on the bottom of the div no matter the height.