Well my code looks like this:
<header>
<div class="wrapper">
<div class="fixedHeader">
<span>some stuff here like logo and nav element</span>
</div>
<span>another header stuff here</span>
</div>
</header>
<section>
<div class="wrapper">
<span>sections stuff here</span>
</div>
</section>
<section>
<div class="wrapper">
<span>sections stuff here</span>
</div>
</section>
<footer>
<div class="wrapper">
<span>footer stuff here</span>
</div>
</footer>
the <header></header>is 100vh
when I scroll down the div.fixedHeader that is positioned fixed is visible only in the <header> area but it disappears in sections and footer
how can i fix it? i tried the z-index but it's pointless
Related
How can i make this Scroll to a specific Element Using html in Vue when the ID and element i want to click on are in different component?
<template>
<div class="container">
<div class="section">
<Bio/> <--------------------- inside of this is the text i want to click on
</div>
<div class="section">
<About/>
</div>
<div class="section">
<Gallery/>
</div>
<div class="section">
<Counter/>
</div>
<div class="section">
<Services/> <----------------- Section i want to scroll in after click
</div>
<div class="section">
<Clients/>
</div>
<div class="section">
<Clientslogo/>
</div>
</div>
</template>
As explained here, this is how you can achieve such thing
<template>
<div class="container">
<router-link :to="{ hash: '#services' }">Scroll to Services</router-link>
<div class="section">
<Bio id="bio" /> <!-- inside of this is the text I want to click on -->
</div>
<div class="section">
<About/>
</div>
<div class="section">
<Gallery/>
</div>
<div class="section">
<Counter/>
</div>
<router-link :to="{ hash: '#bio' }">Scroll to Bio</router-link>
<div class="section">
<Services id="services" /> <!-- Section I want to scroll in after click -->
</div>
<div class="section">
<Clients/>
</div>
<div class="section">
<Clientslogo/>
</div>
</div>
</template>
I am using Vash as my template engine. I want to have header and footer in a separate file that I want to include in layout.vash
layout.vash
<body>
<header>
#html.block('header')
</header>
#html.block('content')
<footer>
#html.block('footer')
</footer>
<!-- Render Page Specific Scripts Here -->
#html.block("scripts")
</body>
header.vash
#html.block('header', function(){
<!--==============================header=================================-->
<div class="container_12">
<div class="grid_12">
<h1>
<a href="index.html">
<img src="images/logo.png" alt="Your Happy Family">
</a>
</h1>
</div>
</div>
})
index.vash
#html.extend('./includes/layout', function(model){ #html.block('content',
function(model){
<!--==============================Content=================================-->
<div class="content">
</div>
}) })
header and footer templates not pulled in. Any ideas?
Layout.vash:
<body>
<header>
#html.include('partials/header')
</header>
#html.block('content')
<footer>
#html.include('partials/footer')
</footer>
<!-- Render Page Specific Scripts Here -->
#html.block("scripts")
header.vash:
<div class="container_12">
<div class="grid_12">
<h1>
<a href="index.html">
<img src="images/logo.png" alt="Your Happy Family">
</a>
</h1>
</div>
</div>
footer.vash:
<p>Your footer html</p>
Note that the partials folder should be inside the views folder.
I'm trying to build a profile card in Bootstrap 3 and I'm having trouble getting the image to fit into the card. I think I can do this easier if I link to image in the css but I have many profile cards with all different people so I think keeping the image link in the HTML is better in this case.
Here's how I'd like it:
and here's the where I'm at:http://jsfiddle.net/L3789n7u/1/
Any help is greatly appreciated. Thanks!
~Tony
<div class="container">
<div class="row">
<div class="people-cards">
<div class="col-md-6">
<div class="well">
<div class="profile-image">
<img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg">
<div class="card-info">
<h3 div class="company">Company Name</h3>
<h4 div class="name">Person Name</h4>
<h5 div class="title">Job Title</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As ever you have multiple options, here is example of one of them.
<div class="container">
<div class="row">
<div class="people-cards">
<div class="col-md-6" style="border: 1px solid black;">
<div class="row">
<div class="profile-image" style="float:left;">
<img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg" />
</div>
<div class="profile-info">
<h3 div class="company">Company Name</h3>
<h4 div class="name">Person Name</h4>
<h5 div class="title">Job Title</h5>
</div>
<div class="profile-link">
VIEW PROFILE
</div>
</div>
</div>
</div>
</div>
</div>
Basically you need to make profile image to float left, so other content will appear next to it. Also because your example how you would like it contains border around card you need to wrap image, info and link in row. If you want to customize image size you can still use all Bootstrap's col-size-number.
Working example on JSFiddle
I have a problem at aligning columns inside rows in bootstrap. I have the following structure:
<section class="container-fluid centerP">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-xs-10 col-xs-offset-1">
<h1></h1>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-1 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
<div class="col-lg-4 col-lg-offset-2 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-1 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
<div class="col-lg-4 col-lg-offset-2 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
</section>
It should look like a 1-2-2-1 (vertically aligned boxes of cntent). Currently they are centered but too far apart because of the overset of 2. I found a solution that mentioned using classes of "row-centered" and "col-centered" and it worked untill i modified the classes to "col-xs" and "col-lg". So what i was trying to do for the last two days was to bring them closer together but with no success.
I started coding a couple of weeks ago so please bear with me if the question is stupid
Each row should split to 12 col.
for exemple:
<div class="row">
<div class=col-md-6>
something
</div>
<div class=col-md-6>
something
</div>
</div>
A few suggestions:
I think you mean to use <div class="container-fluid centerP"> rather than <section class="container-fluid centerP>. Check out What is the difference between <section> and <div>? for more on why you should probably use a div rather than a section here.
A simple 1-2-2-1 block of vertically aligned central columns could be written like this:
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 id="headerBox">Dolloping doubloons!</h1>
</div>
</div>
<div class="row">
<div class="col-md-5">
<p class="contentText">Dolloping doubloons!</p>
</div>
<div class="col-md-2"></div>
<div class="col-md-5">
<p class="contentText">Dolloping doubloons!</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 id="footerText">Dolloping doubloons!</h3>
</div>
</div>
`
You can then use the ids and classes to set the text's padding and margin properties in CSS, which in turn will offer you more precise control over where the text displays. For example, if you wanted to centre the text within its respective box, you could use margin: 0 auto;.
I am trying to achieve full background width, using skeleton framework. For now, bad luck.
Here's how it looks now : http://shrani.si/f/3A/Uy/28somHnh/capture.png
Thanks everyone for helping me.
<div class="container">
<div id="portfolio-color">
<div class="sixteen columns">
<div id="color">
<div class="five columns offset-by-four">LATEST WORK
</div>
</div>
</div>
</div>
</div>
You can do so by putting .container onto a full width wrapping element. Something like this:
See dabblet here http://dabblet.com/gist/6476534
<style>
#import url(import.skeleton.before.css)
.wrapper {width: 100%;}
.color-one {background-color: red;}
.color-two {background-color: green;}
</stlye>
<div class="wrapper color-one">
<div class="container">
<div class="sixteen columns"></div>
</div>
</div>
<div class="wrapper color-two">
<div class="container">
<div class="five columns offset-by-four"></div>
<div class="eleven columns"></div>
</div>
</div>