Problem:
I'm unable to limit scrolling to the content area of a typical Vue 3 SPA (scroll bar should not extend into header and footer areas). The Header and Footer blocks are placed with the Bootstrap fixed-top and fixed-bottom classes. It's a little hard to see in the attached image, but the current content area extends behind the header and footer. The header and footer are built from the Bootstrap components library. I can fix the content visibility with padding, but that doesn't address the overflow (scrollbar) issue.
Actions Taken
I've tried many solutions to similar questions, but those solutions have generally applied to earlier versions of Vue and Bootstrap and don't seem to work for me. I'm able to generate my desired layout in vanilla html and Bootstrap--it seems like it's the Vue 3 injection process that's tripping me up. I've tried applying layouts to both index.html and App.vue without success (trying both Bootstrap classes and vanilla css). The Bootstrap dependency appears to be working properly, so I don't think that's the issue (Bootstrap 5 not Bootstrap-Vue).
Desired Outcome:
Limit scrolling to content area while keeping header and footer Navbars fixed to their positions (and visible at all times).
Environment
Code snippets are used for readability (won't run in place). The below code has all (or nearly all) placement attempts stripped since they didn't work.
index.html
<!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="icon" href="../public/favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- <script>window.scrollTo(0,1) // this is meant to hide the address bar in mobile Safari on page load.</script>-->
</head>
<body>
<noscript>
<strong>The <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files are auto injected here -->
</body>
</html>
App.vue
<template>
<div id="wrapper" class="m-1">
<div id="header_area">
<Header/>
</div>
<div id="content_area">
<span class="page-title">{{ title }}</span>
<hr class="border-secondary">
<span class="page-content">{{ content }}</span>
<router-view #page-data="updatePageName($event)"/>
</div>
<div id="footer_area">
<Footer/>
</div>
</div>
</template>
<script>
import Header from '#/components/Header.vue'
import Footer from '#/components/Footer.vue'
export default {
data() {
return {
title: "home",
content: ""
}
},
components: {
Header,
Footer,
},
methods: {
updatePageName: function(event) {
this.title = event.title;
this.content = event.content;
}
}
};
</script>
<style>
#import'~bootstrap/dist/css/bootstrap.css';
#import "./assets/main.css";
</style>
Header.vue (partial)
<template>
<div>
<nav class="Header navbar navbar-expand-sm navbar-dark bg-dark border-bottom border-4 fixed-top" aria-label="Header Bar">
<div class="container-fluid">
<router-link to="/"><span class="navbar-brand">brand</span> </router-link>
<button class="navbar-toggler btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#Navbar" aria-controls="Navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item dropdown">
<router-link to=""><a class="nav-link dropdown-toggle" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">pages</a></router-link>
<ul class="dropdown-menu bg-dark" aria-labelledby="dropdown01" id="dave">
[snip]
main.css
#charset "utf-8";
#font-face {
font-family: 'Lato-Light';
src: local('Lato-Light'), url('Lato-Light.ttf') format("truetype");
}
:root {
--background: #191919;
--dark: #000000;
--grey1: #111111;
--grey2: #222222;
--grey3: #333333;
--grey4: #444444;
--grey5: #555555;
--grey6: #666666;
--grey7: #777777;
--grey8: #888888;
--grey9: #999999;
--light: #FFFFFF;
}
html, body {
background-color: var(--dark) !important;
color: var(--light) !important;
}
a {
color: var(--bs-secondary) !important;
text-decoration: none;
}
body {
font-family: Lato-Light, sans-serif;
font-size: 0.9em;
}
button {
padding: 1px;
}
input {
border: solid 1px var(--grey9);
border-radius: 5px;
box-sizing: border-box;
padding: 5px;
}
li {
float: left;
margin: 0 5px;
padding: 0 2px;
text-align: start;
}
ul {
list-style-type: none;
padding: 0;
}
.dropdown-item {
border: solid 1px var(--bs-dark);
color: var(--bs-secondary) !Important;
/*font-size: 0.9rem;*/
width: 94%;
}
.dropdown-item:hover {
background-color: var(--bs-dark) !important;
border: solid 1px var(--bs-secondary);
border-radius: 5px;
width: 94%;
}
.dropdown-menu {
background-color: var(--bs-dark) !important;
border: solid 1px var(--bs-dark) !important;
color: var(--bs-secondary) !Important;
/*font-size: 0.9rem !important;*/
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
border: solid 1px var(--bs-dark) !important;
color: var(--bs-secondary) !Important;
/*font-size: 0.9rem !important;*/
left: 100%;
top: 0;
}
.dropdown-toggle::after {
display: none;
}
.navbar {
border-bottom-color: var(--dark) !important;
border-top-color: var(--dark) !important;
margin-bottom: 0;
}
.navbar-brand {
border: solid 1px var(--bs-dark);
border-radius: 5px;
color: var(--bs-secondary) !important;
padding: 5px;
}
.navbar-brand:hover {
border: solid 1px var(--bs-secondary);
border-radius: 5px;
}
.nav-link {
background-color: var(--bs-dark) !important;
border: solid 1px var(--bs-dark);
border-radius: 5px;
color: var(--bs-secondary) !important;
}
.nav-link:hover {
border: solid 1px var(--bs-secondary);
border-radius: 5px;
}
.nav-link.dropdown-toggle {
padding: 8px;
}
.navbar-nav li:hover > ul.dropdown-menu {
border: solid 1px var(--grey5) !important;
color: var(--bs-secondary) !Important;
display: block;
}
.page-title {
color: var(--grey5);
font-size: 2rem !important;
text-align: left !important;
}
.page-content {
}
.selected {
border-color: lime !important;
}
#app {
}
#header_area {
}
#content_area {
}
#footer_area {
}
#Footer {
font-size: 0.9em;
}
:focus {
border-color: var(--dark);
box-shadow: none;
outline: none;
}
This is how I was able to get the CSS Grid spec to work. For my situation, adding styles to <html> and <body> in index.html was important, but may not be required. Assigning !Important to the grid elements may also not be required, but was done for insurance.
Now, any content that is injected by the Vue Router will appear in content_area and only that section will scroll (as needed).
App.vue
<template>
<div class="app m-1">
<div id="header_area">
<Header/>
</div>
<div id="content_area">
<span class="page-title">{{ title }}</span>
<hr class="border-secondary">
<span class="page-content">{{ content }}</span>
<router-view #page-data="updatePageName($event)"/>
</div>
<div id="footer_area">
<Footer/>
</div>
</div>
</template>
<script>
import Header from '#/components/Header.vue'
import Footer from '#/components/Footer.vue'
export default {
data() {
return {
title: "home",
content: ""
}
},
components: {
Header,
Footer,
},
methods: {
updatePageName: function(event) {
this.title = event.title;
this.content = event.content;
}
}
};
</script>
<style>
#import'~bootstrap/dist/css/bootstrap.css';
#import "./assets/navbar.css";
#import "./assets/main.css";
</style>
index.html
<!DOCTYPE html>
<html lang="en" style="margin: 0;">
<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="icon" href="../public/favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body style="margin: 0; overflow: hidden;">
<noscript>
<strong>The <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files are auto-injected here -->
</body>
</html>
main.css
.app {
height: 100vh !important;
display: grid !important;
grid-gap: 5px !important;
grid-template-columns: 1fr !important;
grid-template-rows: 65px 1fr 40px !important;
grid-template-areas: "header" "content" "footer" !important;
}
#header_area {
grid-area: header !important;
}
#content_area {
grid-area: content !important;
overflow: auto !important;
}
#footer_area {
grid-area: footer !important;
}
Plain HTML example
body {
background-color: red;
margin: 0;
}
.container {
height: 100vh;
display: grid;
grid-gap: 5px;
grid-template-columns: 1fr;
grid-template-rows: 70px 1fr 40px;
grid-template-areas: "header" "content" "footer";
}
.H {
grid-area: header;
background-color: blue;
color: white;
}
.C {
grid-area: content;
background-color: darkgreen;
color: white;
padding: 15px 5px 10px 5px;
overflow: auto;
}
.F {
grid-area: footer;
background-color: blue;
color: white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="H">header</div>
<div class="C">
content
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br> .
<br>
</div>
<div class="F">footer</div>
</div>
</body>
</html>
Related
I am trying to edit the content on standard notification. I want to split the body into two equal columns. When I try doing that in the HTML it always mess the CSS and automatically re-write it.
I am adding the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.column-left {
float: left;
width: 50%;
padding: 10px;
height: 300px;
}
.column-right {
float: right;
width: 50%;
padding: 10px;
height: 300px;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2>Two Equal Columns</h2>
<div class="row">
<div class="column-left" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>text</p>
</div>
<div class="column-right" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>text</p>
</div>
</div>
</body>
But as soon I hit "ok" it re-write it to this:
<html>
<head>
<style type="text/css">.c0 { font-family: 'Arial' } .c1 { margin: 0px 0px 14px; font-size: 18px; font-weight: bold } .c2 { padding: 10px; background-color: #aaaaaa } .c3 { margin: 0px 0px 13px } .c4 { padding: 10px; background-color: #bbbbbb } </style>
</head>
<body class="c0">
<div class="c1">Two Equal Columns</div>
<div>
<div class="c2">
<div class="c1">Column 1</div>
<p class="c3">text</p>
</div>
<div class="c4">
<div class="c1">Column 2</div>
<p class="c3">text </p>
</div>
</div>
</body>
</html>
Unfortunately, Archer pretty much "dumbs" down the HTML formatting permitted in notifications. The best you can get away with is using tables instead of CSS to do columns.
Since you want equal columns with any content, you can Choose the 'Body Layout' in the Notification as 'Two Column 50-50'.
That way, you can add any dynamic content within the two columns.
You can use css grid
Css Grid is good documentation
.row {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
}
<div class="row">
<div class="column-left" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>text</p>
</div>
<div class="column-right" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>text</p>
</div>
</div>
I am using bootstrap media slider carousel. but, it is repeating items if items are less than 4. I want to slide one item per click.
see my code below
JQUERY
$(document).ready(function(){
$('#media').carousel({
pause: true,
interval: false
});
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
});
Already tried to change [for (var i=0;i<2;i++) {] i<4 and i<6 instead of i<2
CSS :
/* carousel */
.carousel-pack{height:40px; margin:0; padding:0;}
.carousel-pack-inner{width:252px; margin: 0 auto;}
.media-carousel
{
margin-bottom: 0;
margin-top: 20px;
}
.carousel-control{line-height: 24px;}
/* Previous button */
.media-carousel .carousel-control.left
{
left: -37px;
background-image: none;
background: none repeat scroll 0 0 #222222;
border: 2px solid #FFFFFF;
height: 32px;
width: 32px;
margin-top: 4px;
}
/* Next button */
.media-carousel .carousel-control.right
{
right: -37px;
background-image: none;
background: none repeat scroll 0 0 #222222;
border: 2px solid #FFFFFF;
height: 32px;
width: 32px;
margin-top: 4px;
}
/* Changes the position of the indicators */
.media-carousel .carousel-indicators
{
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the colour of the indicators */
.media-carousel .carousel-indicators li
{
background: #c0c0c0;
}
.media-carousel .carousel-indicators .active
{
background: #333333;
}
.thumbnail
{
width: 48px !important;
height: 40px!important;
border-radius:0;
border-radius: 8px !important;
}
.thumbs{
margin-right: 15px;
padding: 0;
float: left;
}
.thumbs:first-child{margin-left: 7px;}
.thumbs:last-child{margin-right: 7px;}
HTML
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="carousel-pack">
<div class="carousel-pack-inner">
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<div class="item active">
<div class="row-new">
<div class="thumbs">
<a class="thumbnail" href="#">1</a>
</div>
</div>
</div>
<div class="item">
<div class="row-new">
<div class="thumbs">
<a class="thumbnail" href="#">2</a>
</div>
</div>
</div>
</div>
<a data-slide="prev" href="#media" class="left carousel-control">‹</a>
<a data-slide="next" href="#media" class="right carousel-control">›</a>
</div>
</div>
</div>
see it repeating 2. I have only two items 1 and 2. how can I stop repeating items?
Solved this by Splitting an array into chunks using array_chunk() and foreach.
HTML
<div class="carousel-pack">
<div class="carousel-pack-inner">
<div class="carousel slide media-carousel" data-ride="carousel" data-wrap="true" id="media">
<div class="carousel-inner">
<?php
$active = 'active';
$pages = array_chunk($file_array,3);
foreach ($pages as $key => $data) { ?>
<div class="item <?php echo $active; ?>">
<?php foreach ($data as $key => $value) { ?>
<div class="row-new">
<div class="thumbs">
<a class="thumbnail" href="#" target="_blank"><?php echo $value; ?></a>
</div>
</div>
<?php } ?>
</div>
<?php $active='';
} ?>
</div>
<a data-slide="prev" href="#media" class="left carousel-control">‹</a>
<a data-slide="next" href="#media" class="right carousel-control">›</a>
</div>
JQUERY
$(document).ready(function(){
$('#media').carousel({
pause: true,
interval: false
});
});
I want set my carousel in the middle of the page with a white border attached to it. But I'm unable to do it. I used padding but the border is not adjusting with the carousel. If I reduce a little more the padding then the carousel arrows is not shifting with carousel.
Here is my html file code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Carousel Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/prefixfree.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#featured"><h1>Carousel <span class="subhead">Practice</span></h1></a>
</div><!-- navbar-header -->
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Mission</li>
<li>Services</li>
<li>Staff</li>
<li>Testimonials</li>
</ul>
</div><!-- collapse navbar-collapse -->
</div><!-- container -->
</nav>
<div class="container wrapping">
<div class="carousel slide" data-ride="carousel" id="featured">
<div class="carousel-inner">
<div class="item active"><img src="images/carousel-lifestyle.jpg" alt="Lifestyle Photo"></div>
<div class="item"><img src="images/carousel-mission.jpg" alt="Mission"></div>
<div class="item"><img src="images/carousel-vaccinations.jpg" alt="Vaccinations"></div>
<div class="item"><img src="images/carousel-fish.jpg" alt="Fish"></div>
<div class="item"><img src="images/carousel-exoticanimals.jpg" alt="Exotic Animals"></div>
</div><!-- carousel-inner -->
<a class="left carousel-control" href="#featured" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#featured" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div><!-- featured carousel -->
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="js/myscript.js"></script>
</body>
</html>
This is my css:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800|Roboto+Slab:400,100,300,700);
/** Basic Page CSS **/
body{
font-family: "Roboto Slab", sans-serif;
font-weight: 300;
font-size: 2em;
position: relative;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Open Sans", sans-serif;
font-weight: 100;
margin: 0;
}
header{
background-color: #00173f;
}
.carousel-inner{
padding: 150px 30px 100px 30px;
border: 15px solid #fff; border-radius: 5px;
}
/** Header Navigation **/
header .navbar {
padding: 30px 0;
transition: all .5s ease-out;
}
header .navbar-default {
background-color: transparent;
border: none;
}
header .navbar-default .navbar-nav a {
color: white;
padding: 5px 8px;
}
header .navbar-default .navbar-nav a:hover {
color: #EEC856;
}
header .navbar-default .navbar-nav .active a {
font-weight: 700;
color: #EEC856;
background: transparent;
border-bottom: 4px solid #EEC856;
text-shadow: none;
}
header .navbar-default .navbar-nav .active a:hover {
color: #E15D5F;
background: transparent;
text-shadow: none;
}
/** Navbar Brand **/
header .navbar-brand {
background: url(../images/wisdompetlogo.svg);
background-repeat: no-repeat;
background-position: 15px 0;
height: auto;
}
header .navbar-brand h1 {
color: white;
margin: 0;
font-size: 1.8em;
font-weight: 400;
padding-left: 105px;
}
header .navbar-brand span.subhead {
display: block;
font-family: "Roboto Slab", serif;
font-size: .6em;
font-weight: 100;
}
/** Navbar Toggle **/
header .navbar-toggle {
background-color: #279182;
}
header .navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
#media only screen
and (max-width: 768px) {
header .navbar-collapse.in {
background-color: rgba(0,0,0, .5);
}
}
This is one of my images link: https://www.google.co.in/search?q=wisdom+pet+medicine&espv=2&biw=1280&bih=614&source=lnms&tbm=isch&sa=X&sqi=2&ved=0ahUKEwiejtTiqs7PAhWBPo8KHXsbDlwQ_AUIBigB&dpr=1.5#imgrc=uU4osiOZHZGu9M%3A
I'm not entirely sure if your problem is the border, the positioning, or both.
You have your carousel wrapped in your header. This might prevent it from being positioned in the middle of your page. If you want it to be in its own section I would put it in a container-fluid div class and add styling as desired.
I followed this http://codepen.io/redfrost/pen/dbrgk codepen working gallery snippet to the tee . Everything works as far as functionality but there is a background coming from a bootstrap class that makes the gallery wider than expected. The arrows according to the snippet should be contained within the image div itself.
I have deleted both style sheets just to see if the background would go away and it did not. It is a bootstrap class issue.
Here is the image of the issue http://postimg.org/image/mmdbsl6sp/full/
I think the class causing the issue is class="carousel-inner"
Here is the markup I have for the gallery:
#extends('layouts.main')
#section('content')
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="bannerImage">
<img src="http://placehold.it/960x405" alt="">
</div>
<div class="caption row-fluid">
<div class="span4"><h3>Picture 1</h3>
</div>
<div class="span8"><p>Picture 1 details</p>
</div>
</div>
</div><!-- /Slide1 -->
<div class="item">
<div class="bannerImage">
<img src="http://placehold.it/960x405" alt="">
</div>
<div class="caption row-fluid">
<div class="span4"><h3>Picture 2</h3>
</div>
<div class="span8"><p>Picture 2 details</p>
</div>
</div>
</div><!-- /Slide2 -->
<div class="item">
<div class="bannerImage">
<img src="http://placehold.it/960x405" alt="">
</div>
<div class="caption row-fluid">
<div class="span4"><h3>Picture 3</h3>
</div>
<div class="span8"><p>Picture 3 details</p>
</div>
</div>
</div><!-- /Slide2 -->
</div>
<div class="control-box">
<a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
<a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
</div><!-- /.control-box -->
</div><!-- /#myCarousel -->
</div><!-- /.span12 -->
</div><!-- /.row -->
</div><!-- /.container -->
#stop
Here is the css:
div { word-break: break-all; }
img {
max-width:100%;
display: block;
margin-left: auto;
margin-right: auto;
}
a {
-webkit-transition: all 150ms ease;
-moz-transition: all 150ms ease;
-ms-transition: all 150ms ease;
-o-transition: all 150ms ease;
transition: all 150ms ease;
}
a:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE7 */
text-decoration: none;
}
/* Container */
/* Page Header */
.page-header {
background: #fbf4e0;
margin: -30px 0px 0px;
padding: 20px 40px;
border-top: 4px solid #ccc;
color: #a83b3b;
text-transform: uppercase;
}
.page-header h3 {
line-height: 0.88rem;
color: #a83b3b;
}
/* Thumbnail Box */
.caption {
height: 140px;
width: 100%;
margin: 20px 0px;
padding: 20px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.caption .span4, .caption .span8 {
padding: 0px 20px;
}
.caption .span4 {
border-right: 1px dotted #CCCCCC;
}
.caption h3 {
color: #a83b3b;
line-height: 2rem;
margin: 0 0 20px;
text-transform: uppercase;
}
.caption p {
font-size: 1rem;
line-height: 1.6rem;
color: #a83b3b;
}
.btn.btn-mini {
background: #a83b3b;
border-radius: 0 0 0 0;
color: #fbf4e0;
font-size: 0.63rem;
text-shadow: none !important;
}
.carousel-control {
top: 33%;
zoom: 7;
color: #ff3333;
}
/* Footer */
.footer {
margin: auto;
width: 100%;
max-width: 960px;
display: block;
font-size: 0.69rem;
}
.footer, .footer a {
color: #fff;
}
p.right {
float: right;
}
body:after{content:"less than 320px";font-size:1rem;font-weight:bold;position:fixed;bottom:0;width:100%;text-align:center;background-color:hsla(1,60%,40%,0.7);color:#fff;height:20px;padding-top:0;margin-left:0;left:0}#media only screen and (min-width:320px){body:after{content:"320 to 480px";background-color:hsla(90,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}#media only screen and (min-width:480px){body:after{content:"480 to 768px";background-color:hsla(180,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}#media only screen and (min-width:768px){body:after{content:"768 to 980px";background-color:hsla(270,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}#media only screen and (min-width:980px){body:after{content:"980 to 1024px";background-color:hsla(300,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}#media only screen and (min-width:1024px){body:after{content:"1024 and up";background-color:hsla(360,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}
::selection { background: #ff5e99; color: #FFFFFF; text-shadow: 0; }
::-moz-selection { background: #ff5e99; color: #FFFFFF; }
a, a:focus, a:active, a:hover, object, embed { outline: none; }
:-moz-any-link:focus { outline: none; }
input::-moz-focus-inner { border: 0; }
Im just new to CSS:
And my problem is My Logo shows up but it's in the back and Should I put my div:top-most into the wrapper? because if I put my div:top-most, it will be shown along with the logo, but I want my lime color to be put on the max width of my browser..
Here's my HTML Code
<body>
<div id="top-most">
</div>
<div id="wrapper">
<img alt="logo" src="images/logo.png" /><div id="wrapper">
</div>
<div id="header">
<p>Put something here</p>
</div>
</body>
And here's my CSS Code:
#top-most { background-color: lime; height:51px ;width:100%; position:absolute; }
#wrapper { width :960px; height:100px ; overflow:hidden; margin:0px auto; }
#logo { margin: 19px 0 0 10px; position:absolute; top: 0px; z-index:2; }
#header { margin: 30px 0 0 20px; float:right; width: 750px; }
#header p { color: #979899; }
And here's the output:
http://imgur.com/gWDNYGB
Hello :) you need to put #wrapper in #top-most.
<body>
<div id="top-most">
<div id="wrapper">
<img alt="logo" src="http://placekitten.com/200/300" />
</div>
</div>
<div id="header">
<p>Put something here</p>
</div>
</body>
I edited your Css code too.
#top-most { background-color: lime; padding: 5px; position:absolute; }
#wrapper { width :960px; height:100px ; overflow:hidden; margin:0px auto; }
#logo { margin: 19px 0 0 10px; position:absolute; top: 0px; z-index:2; }
#header { margin: 30px 0 0 20px; float:right; width: 750px; }
#header p { color: #979899; }
You don't need padding: 5px; in #top-most but it will look better
Demo