I am in need of help. I am currently developing my new webstore for my website, and I cannot figure out ho to properly align my text, images and buttons. I have tried many things in order to align them, but I cannot seem to figure out how to do it myself. I'll provide more info if needed. Thanks in advance!
Here is my code and below you can see the result:
Assuming that you just want to align all the items vertically, you can simply give the container a value of text-align:center while giving the containing block a width. So for the purpose of your code it would be something like this. Not that I've changed your markup as you were using inline styling.
The wrapper I've set as display:flex to help it align nicely. You can read about flexbox here
HTML:
<div class="wrapper">
<section>
<h2>MVP</h2>
<img class="img-rounded" style="float: left;" title="" src="//dunb17ur4ymx4.cloudfront.net/packages/images/d04fbf5918208479df283e7fa0ad8f0fcc0d7acb.png"/>
<button>helpme</button>
</section>
<section>
<h2>MVP</h2>
<img class="img-rounded" style="float: center;" src="//dunb17ur4ymx4.cloudfront.net/packages/images/f6f9b85569cc52ddc9bf5e57b4fd28309093fdcc.png"/>
<button>helpme</button>
</section>
<section>
<h2>MVP</h2>
<img class="img-rounded" style="float: center;" src="//dunb17ur4ymx4.cloudfront.net/packages/images/f6f9b85569cc52ddc9bf5e57b4fd28309093fdcc.png"/>
<button>helpme</button>
</section><
</div>
CSS:
.wrapper section {
text-align:center;
justify-content:center;
width:200px;
}
.wrapper {
display:flex;
}
Fiddle
Related
I am trying to use JS Affix to keep 2 blocks in a sidebar column staying fixed on the page.
Upon scrolling, the width of the sidebar is expanded a bit and the expanded portion overlaps the main body column.
I have tried manually setting div widths and using percentages, but all changes I make end up having same behavior.
Here is the relevant code:
<div class="menu block tile-default" id=sidebarmenu" data-spy="affix" data-offset-top="195" data-offset-bottom="300" style="border:0px;">
<img src="/img/sidebar-top.png" class="img-responsive" alt="sidebar image">
<div class="pad">
<ul class="nav nav-pills nav-stacked">
#include('partials/menu')
</ul>
</div>
<div style="background-color: white; height: 10px; border:0px"></div>
<div class="pad" style="border: 4px solid orange; background-color: #1d6899; color: ghostwhite">
<a href="https://zoom.us/webinar/register/Pt9LgDTBR828OXIHOfTLPQ" class="thumbnail" target="_blank">
<img class = "img-responsive" src="/img/img.png" alt="...">
<div class="caption">
<h5 class="text-center">Some Caption</h5>
</div>
</a>
</div>
</div>
You can see what I am talking about here:
https://guitar-dreams.com/guitar-lesson/triad-arpeggios-2-strings/20
There it might be easier to follow the CSS as well.
Notice how when you scroll down, the navigation menu and the block below it expand to the right a bit and overlap the main body. This problem only manifested after I added the 2nd block below the menu.
I have read a lot about strange affix behavior so maybe this is just instance where affix is not ideal solution. In any case, wondering if there is some glaring problem causing this that is readily fixed. Me being a guitarist trying to do some basic coding I am sure I am overlooking something obvious!
Thanks!
Brian
I'm working on building a website, and I have an issue where the navbar is hiding the first bit of the page so I can't see the information. How would I fix this? The link to my website is here:
codepen.io/sookyungahn/pen/wzQkBp?editors=1100
In your case, add padding-top in home div id with same size height on your nav bar.
<div class="container-fluid well" id="home" style="display:block; padding-top:50px;">
Add a padding of the size of your navbar's height to the body.
In the official bootstrap example here, they add a 70px padding on top. Basically,
body {
padding-top: 70px;
}
Since 2017 add position: sticky; top:0; to navbar and it will fix this problem.
<img style="margin-right:10px;margin-top:50px" class="image gap img-rounded pull-left" src="http://odezhda-stilnaya.ru/kartinki/1/ptichka_babochki_zvezdy_2560x1600.jpg" alt="PLACEHOLDER IMAGE" />
<div>
<h3 style="font-family:HelveticaNeue, Tahoma; font-weight:200;margin-top:50px;">I am a website developer, passionate about programming and assisting people. I am currently an intern at a tech startup.
</h3>
Great Code:)
Just add margin-top:50px as shown.
Happy Coding :)
Is it possible to have fixed elements (Text here) between just the slides?
The only way i could achieve this was by putting the text element outside of the slides div.
<div class="section" id="section1">
<div class="intro">
<h1>URL get updated (#)</h1>
<p>
Easy to bookmark and share
</p>
</div>
<div class="slide" id="slide1">
</div>
<div class="slide" id="slide2">
<img src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/examples/imgs/iphone-blue.png" alt="iphone" id="iphone-two" />
</div>
</div>
Am not sure whether this is the right way, please correct me if am wrong.
Here's my fiddle
Yeah, that's ok.
There's a bug in Chrome with fixed positioned elements and the css3 translate3d property, although it seems it can be solved when using z-index as you can see here.
.intro {
position: fixed;
-webkit-perspective: 1000;
z-index:1;
}
In any case, I believe its better to go for your option. We don't know if Chrome will change its behavior in a future regarding this trick.
I'm wondering how to achieve this in CSS (and less and jquery is also good :)
I have the slider, but it looks like this:
I want it to look like this:
The fonts is of curse no problem, not making the stuff round and so on, removing border and stuff...
I'm wondering how I can achieve this little pins: in CSS, so it keeps the right dimensions, and squeezes together when the screen-size is different. By the way, thanks a bunch to danielcrisp, for this awesome slider for AngularJS.
Any help is appreciated.
Came up with this solution
http://codepen.io/anon/pen/bkdAs
HTML:
<div class="slider">
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
</div>
CSS:
.slider{
width:500px;
height:20px;
border-bottom:2px solid red;
}
.slider .pin{
height:100%;
width:10%;
float:left;
border-right:2px solid red;
transform: translateY(55%);
box-sizing: border-box;
}
.slider .pin:last-child{
display:none;
}
Might be easier to achieve using some javascript though for appending the divs inside the slider
I think the best solution would be to make 8 elements with position absolute and left 10*n%.
It may be possible to use css pseudo element instead of DOM elements to prevent bloating your HTML.
Edit: it turns out you can't chain css pseudo-elements, you'll have to append real DOM elements to your code.
http://jsfiddle.net/0hea6ody/
<span class="grad grad1"></span>
...
<span class="grad grad9"></span>
I'm using CarouFredSel for an image carousel, and I'm having an issue with the transitions between items.
I want to use some simple HTML in the carousel rather than plain old images, but when I do, the swipe transition doesn't work. While the old image slides out, the new image flashes in rather than sliding in and you can see the background briefly in between images.
<div id="carousel">
<div>
<img src="img/instagram1.png">
<div style="position:relative; z-index:100; bottom:20px;">Byline 1</div>
</div>
<div>
<img src="img/instagram2.png">
<div style="position:relative; z-index:100; bottom:20px;">Byline 2</div>
</div>
</div><!-- /carousel -->
As you can see from this JSFiddle, the transition effect works fine with just images, but it looks off when using HTML.
It turns out that all you have to do to fix this is apply a left float on the items like this:
#carousel div {
display: block;
float: left;
}