I'm trying to create a responsive header with a background image. When I add the off-canvass menu hamburger icon, I get a band of body background displayed at the top of the viewport.
What am I doing wrong?
html,
body {
margin: 0;
padding: 0;
height: 100%;
position: relative;
background: red;
font: 16px/1.75 Verdana, Arial, Helvetica, sans-serif
}
.toggle {
position: absolute;
right: 0.15em;
cursor: pointer;
color: white
}
.wrapper {
max-width: 78.75em;
margin: auto;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0)
}
.container {
background: yellow;
min-height: 100%;
padding: 0;
margin: 0
}
#header label {
padding: 0 0.125em;
font: 2.875em/1.4375em Arial
}
#header label:hover,
#menu label:hover {
color: grey
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
</head>
<body>
<!-- red -->
<div class="wrapper">
<div id="menu">
</div>
<!-- closing "#menu" -->
<div class="container">
<!-- yellow -->
<div id="header">
<img src="http://www.dragsdownunder.info/ralph/forums/greenbox.jpg" style="float:left; margin:0 0 0 0; max-width:100%; height:auto; border:0" alt="green box" title="green box">
<label for="main-nav-check" class="toggle" onclick="" title="Menu">≡</label>
</div>
<!-- closing "#header" -->
<h1>Test header 4</strong></h1>
<p>Lorem ipsum dolor sit amet, no pro mundi graeco pertinacia, et lorem conceptam complectitur sea. Eam no persecuti scriptorem. Ius an sadipscing consectetuer. Purto nostrum mel in. Ne sea congue homero.</p>
</div>
<!-- closing ".container" -->
</div>
<!-- closing ".wrapper" -->
</body>
</html>
I think problem is solved, have a look
html,
body {
margin: 0;
padding: 0;
height: 100%;
position: relative;
background: red;
font: 16px/1.75 Verdana, Arial, Helvetica, sans-serif
}
.toggle {
position: absolute;
right: 0.15em;
cursor: pointer;
color: white
}
.wrapper {
max-width: 78.75em;
margin: auto;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0)
}
.container {
background: yellow;
min-height: 100%;
padding: 0;
margin: 0
}
#header label {
padding: 0 0.125em;
font: 2.875em/1.4375em Arial
}
#header label:hover,
#menu label:hover {
color: grey
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
</head>
<body>
<!-- red -->
<div class="wrapper">
<div id="menu">
</div>
<!-- closing "#menu" -->
<div class="container">
<!-- yellow -->
<div id="header">
<img src="http://www.dragsdownunder.info/ralph/forums/greenbox.jpg" style="max-width:100%; height:auto; border:0" alt="green box" title="green box">
<label for="main-nav-check" class="toggle" onclick="" title="Menu">≡</label>
</div>
<!-- closing "#header" -->
<h1>Test header 4</strong></h1>
<p>Lorem ipsum dolor sit amet, no pro mundi graeco pertinacia, et lorem conceptam complectitur sea. Eam no persecuti scriptorem. Ius an sadipscing consectetuer. Purto nostrum mel in. Ne sea congue homero.</p>
</div>
<!-- closing ".container" -->
</div>
<!-- closing ".wrapper" -->
</body>
</html>
Related
when i try to change logo size, whole background changes size as well. How to do it correctly? i want logo to be 150px by 150px.
I want to make signup form page that looks something like this
https://cdn.statically.io/gh/TheOdinProject/curriculum/5f37d43908ef92499e95a9b90fc3cc291a95014c/html_css/project-sign-up-form/sign-up-form.png
* {
height: 100vh;
}
.main-container {
display: flex;
}
.image {
background-image: url(https://images.unsplash.com/photo-1584983333849-26ca57622ac2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=656&q=80);
background-size: contain;
background-repeat: no-repeat;
}
.logo {
display: flex;
}
/* .logo img {
height: 140px;
} */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Sign-up Form</title>
</head>
<body>
<main class="main-container">
<div class="image">
<div class="logo">
<img
src="https://logodix.com/logo/20841.png"
alt="logo"
class="flower"
/>
<h1 class="tokyo">Tokyo</h1>
</div>
</div>
<div class="form"></div>
</main>
</body>
</html>
By default, your logo size is too big, and parent div was adjusting according to logo, So if the logo size changes, you whole parent div size will also change. So give them definite value to adjust accordingly
Here some changes i made, if that's helps
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.main-container {
display: flex;
height: 100vh;
}
.logo {
display: flex;
align-items: center;
color: #fff;
}
.logo img {
width: 150px;
}
.left {
display: grid;
place-items: center;
background-image: url(https://images.unsplash.com/photo-1584983333849-26ca57622ac2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=656&q=80);
width: 40%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.right {
width: 60%;
padding: 40px;
}
<main class="main-container">
<div class="left">
<div class="logo">
<img src="https://logodix.com/logo/20841.png" alt="logo" class="flower" />
<h1 class="tokyo">Tokyo</h1>
</div>
</div>
<div class="right">
<h4>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus tempore assumenda error! Laudantium non voluptates provident molestias expedita atque eaque!</h4>
<div class="form"></div>
</div>
</main>
As part of learning Web Development (#beginner) , I'm currently building a website that takes as a base the official Cover template: https://getbootstrap.com/docs/4.0/examples/cover/ .
I really like the design of the demo but I am not able to make the Navbar responsive without modifying the Navbar design.
I checked the documentation (https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors) but after various attempts it always get rid of the template design.
My goal is to create a responsive Navbar (hamburger menu) without losing the design of the template.
Could someone help a Web Development student with this issue? 🙌
Extract of my html and css files:
/*
* Globals
*/
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
color: #333;
text-shadow: none; /* Prevent inheritance from `body` */
background-color: #fff;
border: .05rem solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background: linear-gradient(90deg,#0548f3 10%,#671ef4 110%);
background-repeat: no-repeat;
background-attachment: fixed;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
color: #fff;
}
.cover-container {
max-width: 44em;
}
/*
* Header
*/
.masthead {
margin-bottom: 200px;
}
.masthead-brand {
margin-bottom: 0;
}
.nav-masthead .nav-link {
padding: .25rem 0;
font-weight: 700;
color: rgba(255, 255, 255, .5);
background-color: transparent;
border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
#media (min-width: 48em) {
.masthead-brand {
float: left;
}
.nav-masthead {
float: right;
}
}
/* Styling curated list page */
.page-list{
margin-bottom: 100px;
}
/*
* Cover
*/
.cover {
padding: 30 1.5rem;
}
.cover .btn-lg {
padding: .75rem 1.25rem;
font-weight: 700;
}
.headline {
font-family: "Inter";
}
/* Cards styling */
.tools-cards {
background-color: #262626 ;
}
.btn-primary{
background-color: #0335ff;
border-color: #001be6 ;
}
.card-boxing{
padding: 10px 10px 10px 10px;
}
.card {
border-radius: 12px;
}
.card-badge {
position:absolute;
top:-10px;
left:-10px;
padding:5px;
background:#00d57c;
color:white;
border-radius: 12px;
}
.card-badge-paid {
position:absolute;
top:-10px;
left:-10px;
padding:5px;
background:#f3b005;
color:white;
border-radius: 12px;
}
/*
* Footer
*/
.mastfoot {
color: rgba(255, 255, 255, .5);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="cover.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#800&display=swap" rel="stylesheet">
<title>Lorem ipsum dolor sit amet</title>
</head>
<body class="text-center">
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
<header class="masthead ">
<div class="inner">
<h3 class="masthead-brand">Lorem ipsum </h3>
<nav class="nav nav-masthead justify-content-center navbar-expand-lg">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Page Number 1</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</header>
<main role="main" class="inner cover">
<h1 class="cover-heading headline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h1>
<hr>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="lead">
Lorem ipsum
</p>
</main>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
</footer>
</div>
</html>
Thanks in advance for the help. 🙌
Best,
Matt
I've started diving into HTML / CSS last week and i was studying some projects that I've found interesting to develop my skills and one of them was to create a basic parallax effect.
The problem is that when I use the min-height:100%; to define my first image height, the image doesn't appear on the webpage and I am struggling finding a solution online.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Estudo Navbar</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img class="logo" src="_images/logo.svg">
<nav>
<ul class="nav-links">
<li>Services</li>
<li>Projects</li>
<li>About us</li>
</ul>
</nav>
<a class=cta href="#"> <button>Contact</button></a>
</header>
<section class=caixa-parallax>
<div class="pimg1">
<div class="ptext">
<span class="border">
Bem vindo(a)!
</span>
</div>
</div>
<section class="section-light">
<h2>Section One</h2>
<p>
Lorem ipsum dolor
</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border">
Image 2 Text
</span>
</div>
</div>
<section class="section-dark">
<h2>Section Two</h2>
<p>
Lorem ipsum dolor
</section>
<div class="pimg3">
<div class="ptext">
<span class="border">
Section 3 Text
</span>
</div>
</div>
<section class="section-3">
<h2>Section Three</h2>
<p>
Lorem ipsum dolor
</p>
</section>
</section>
</body>
</html>
#import url('https://fonts.googleapis.com/css?family=Montserrat:500&display=swap');
body:not(header), html:not(header){
height: 100%;
margin: 0;
font-size: 16px;
font-family:"Montserrat", sans-serif;
font-weight:400;
line-height: 1.8em;
color:white;
}
* {
box-sizing: border-box;
margin:0;
padding:0;
background:#24252A;
}
a:link{
color:#ecf0f1;
}
a:visited{
color:#ecf0f1:none;
}
li, a, button {
font-family:"Montserrat", sans-serif;
font-weight:500;
font-size:16px;
color: #ecf0f1;
text-decoration:none;
}
header{
display:flex;
justify-content: flex-end;
align-items: center;
padding: 30px 10%;
}
.logo{
cursor:pointer;
margin-right:auto;
}
.nav-links{
list-style:none;
}
.nav-links li{
display:inline-block;
padding: 0 20px;
}
.nav-links li a{
transition: all 0.3s ease 0s;
}
.nav-links li a:hover{
color: #0088a9
}
button {
margin-left:30px;
padding: 9px 25px;
background: rgba(0,136,169,1);
border:none;
border-radius: 50px;
cursor:pointer;
transition: all 0.3 ease 0s;
}
button:hover {
background: rgba(0,136,169,0.8);
}
.pimg1{
background-image:url('../2/images/image1.jpg');
min-height:100%;
}
.pimg2{
background-image:url('../2/images/image2.jpg');
min-height:400px;
}
.pimg3{
background-image:url('../2/images/image3.jpg');
min-height:400px;
}
I am using Bootstrap with a sticky footer and off-canvas menu. Sticky footer works fine on desktop view, but footer begins to overlap content on mobile view. I think it is due to the .row-offcanvas position being set to relative on mobile media query. If I remove the offcanvas menu the sticky footer works as expected on mobile devices. The other issue is when you scroll down in mobile view white space appears under the footer.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/master-simple.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<header>
<div class="container">
<div class="row">
<div class="col-xs-4 headerLinks">
Coverage Details
<div id="drawerNavigationID" data-toggle="offcanvas" class="hidden-sm">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4 text-right headerLinks">
<!-- Click to call on Mobile Device -->
Contact Us
</div>
</div>
</div>
</header>
<!-- Off Canvas Menu -->
<div class="container">
<div class="row">
<div class="col-sm-6 sidebar-offcanvas visible-xs">
<ul>
<li>Coverage Details</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<!-- Page Content -->
<div class="container mainWrapper">
<div class="row">
<div class="col-md-10 col-centered" id="confirmationWrapper">
<h2 class="noBorderBottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet tempor nisl, ut rutrum lacus vulputate vel.</h2>
<h3>CLAIM NUMBER: 12345678954</h3>
<p class="claimNumberText">Nulla libero enim, consequat at pulvinar eu, ultrices a risus.</p>
<p>Nulla libero enim, consequat at pulvinar eu, ultrices a risus. Mauris bibendum enim non magna maximus, non tempor lacus lacinia. Fusce vestibulum tincidunt vulputate. Suspendisse eu erat et neque facilisis consequat id in quam. Cras convallis massa at ornare hendrerit.</p>
<div class="row text-center">
Shop
</div>
</div>
</div>
</div><!-- End Page Content -->
<footer>
<div class="container">
<ul>
<li>Terms of Use | </li>
<li>Privacy Policy</li>
</ul>
<p>© 2015 ANulla libero enim</p>
</div>
</footer>
</div><!-- End Container-fluid Row -->
</div><!-- End Container-fluid -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/offcanvas.js"></script>
</body>
</html>
CSS:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 196px;
}
* {
font-weight: normal!important;
margin: 0;
padding: 0;
outline: 0;
outline-style: none;
}
header {
font-family: 'aig_futura_medregular', aig_futura_medregular, Arial, Helvetica, sans-serif;
position: absolute;
top:0;
z-index: 100;
height: 92px;
width: 100%;
padding-top: 15px;
color: #fff;
background-color: rgba(0,164,228,0.9);
}
header a {
font-family: "aig_futuraregular", Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: none;
text-transform: uppercase;
color: #fff!important;
}
header a:hover {
border-bottom: 1px solid #fff;
}
header .headerLogo {
width: 116px;
height: 63px;
cursor: pointer;
background: url(../img/aigLogo.png) no-repeat center bottom;
}
.headerLinks {
margin-top: 20px;
}
footer {
font-size: 14px;
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 186px;
padding: 40px 20px 20px;
color: #fff;
background-color: #252525;
}
footer ul {
margin: 0 0 20px;
padding: 0;
list-style: none;
}
footer ul li {
display: inline;
}
footer li a {
color:#fff;
}
.mainWrapper {
margin-top: 92px;
}
#media screen and (max-width:768px){
#drawerNavigationID{
padding-left: 10px;
}
#drawerNavigationID span {
display: block;
width: 25px;
height: 3px;
background: #fff;
margin-bottom: 7px;
}
.row-offcanvas {
position: relative;
bottom: 0;
min-height: 100vh;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-left .sidebar-offcanvas {
left: -85%;
padding: 0 0 0 20px;
background-color: #54565b;
}
.row-offcanvas-left .sidebar-offcanvas ul li {
font-size: 18px;
padding: 15px;
text-transform: uppercase;
border-bottom: 1px solid #696b6f;
}
.row-offcanvas-left .sidebar-offcanvas a {
text-decoration: none;
color: #ffffff;
}
.row-offcanvas-left.active {
left: 85%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
bottom:0;
width: 85%;
}
}
I have got a simple question. And I think the answer will be that easy for you too.
I am using Bootstrap for a website. All files are downloaded and connected in my php File.
I have got a container div with class container. In it all the website foo, such as header, ..., will happen.
Now I code two span6 divs in the header. I would like to have them next to each other. Like it is thought.
But they the second div is displayed under the first div.
What am I making wrong?
Here are my files:
index.php
<!doctype html>
<!-- Developer: Raphael Klein - http://austrianmultimedia.at/ -->
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="<?php echo $sitePath; ?>">
<meta name="author" content="<?php echo $author; ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="">
<link rel="apple-touch-icon" href="">
<script src="js/jquery-1.10.1.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<!-- my CSS -->
<link rel="stylesheet" href="css/doktorhaiden.css">
</head>
<body>
<div id="container" class="row, container">
<header>
<?php include("header.php"); ?>
</header>
<div class="row">
<div id="left" class="span4">
<div class="element" id="navLeft">
<ul>
<li><h1>Home</h1></li>
<li><h1>Über uns</h1></li>
<li><h1>Kontakt</h1></li>
</ul>
</div> <!-- element -->
</div> <!-- left -->
<div id="right" class="span8">
<div id="home" class="element">
<h1><hr width="100px">Willkommen<hr width="200px"></h1>
<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.</p>
<img class="thumbnail" src="graphics/placeholder.png">
</div> <!-- home -->
<div id="ueberuns" class="element">
<h1><hr width="100px">Über uns<hr width="300px"></h1>
<div class="span4">
<h2>Dr. (med) Katharina Haiden</h2>
<img class="thumbnailHoch" src="graphics/placeholderHoch.png">
</div>
<div class="span4">
<h2>Dr. (med) Elmar Haiden</h2>
<img class="thumbnailHoch" src="graphics/placeholderHoch.png">
</div>
</div> <!-- ueber uns -->
</div> <!-- right -->
</div>
</div> <!-- container -->
</body>
</html>
my header.php
<div class="row">
<div id="span6" style="background-color:red">
sahdkad
</div>
<div id="span6" style="background-color:blue">
salkjdhsa
</div>
</div>
and finally my css-File
/* Developer: Raphael Klein - http://austrianmultimedia.at/ */
/* #group undo defaults margins and paddings */
/* INIT */
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, , span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ------------------------------------- #end INIT */
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 0px;
}
.row {
margin-left: 0px;
*zoom: 1;
}
#container {
}
body {
background-color: #fff;
font-family: 'Raleway', sans-serif;
line-height: 21px;
}
header {
height: 100px;
}
#left {
background-color: #3F3F3F;
text-align: right;
}
#right {
margin-left: 10px;
}
#left h1 {
color:#5AD1E5;
font-size: 2em;
line-height: 0.7em;
}
#right h1 {
font-size: 2em;
}
#right h2 {
font-size: 1em;
color: #CC9E44;
}
#right h1 hr {
display: inline-block;
top: 12px;
left: 10px;
position: relative;
border: 0;
border-top: 2px solid #5AD1E5;
margin-right: 20px;
}
.element {
padding:10px 10px 10px 10px;
}
#navLeft {
margin:0px 10px 20px 0px;
}
/* Seitenbereiche */
#home {
/*background-color: #FFCE00;*/
}
/* Images */
.thumbnail, .thumbnailHoch {
border: 1px solid #5AD1E5;
padding: 10px 10px 10px 10px;
}
.thumbnail {
width: 350px;
}
.thumbnailHoch {
height: 200px;
}
hr {
/*height: 24px;
background: url('flourish.png')
no-repeat 50% 50%;
margin: 3em 0;
border: 0;*/
}
I would be very happy, when you can help me!
Yours, Raphael
Isn't it supposed to be class="span6"? Try the following:
<div class="row">
<div id="span6" class="span6" style="background-color:red">
sahdkad
</div>
<div id="span6" class="span6" style="background-color:blue">
salkjdhsa
</div>
</div>
Use class instead of id.
<div class="span6">