I'm working on my first website and I'm very pleased with my progress thus far, but I've run into an issue.
I'm trying to align a black "block" with the blue block above it. For some reason, there is like a random space right infront of the black bar.
I am using the 960 grid system (16 column variant). Here is an image of the issue I am having: http://gyazo.com/4a9a0ba8b31105f1e95029f9cf878009.png
Here is the code I have. Can anyone understand why I have that random space infront of it?
<div id="banner" class="grid_16">
<div id="socialmedia" class="grid_3 prefix_7">
<img src="images/facebook.gif" alt="facebook icon">
<img src="images/twitter.gif" alt="twitter icon">
<img src="images/youtube.gif" alt="youtube icon">
</div>
<div id="bar" class="grid_16">
</div>
</div>
And then the CSS:
#bar {
height: 20px;
background-color: black;
}
Related
I am trying to have three columns aligned so that they are all the right side. Here is what I have so far: https://prnt.sc/o5284n
And here is how this is supposed to work: https://prnt.sc/o528y3
I have managed to solve this problem by applying margin to the sides of the images, but this gets really messed as the web page gets smaller.
I have looked into many other option such as float and column gap but this doesn't work for me in this case
<section id="bottom">
<img src="Appify.png" alt="app" width="310" height="200" class="pad">
<p class="twenty_f">APPIFY</p>
<img src="sunflower.jpeg" alt="flower" width="310" height="200" class="pad">
<p class="twenty_f">SUNFLOWER</p>
<img src="bokeh.jpeg" alt="bokeh" width="310" height="200" class="pad">
<p class="twenty_f">BOKEH</p>
</section>
I think what you are looking for flexbox handles perfectly.
That being said. The problem you are running into is that you don't have a max-width on your bottom-section.
Try adding:
section#bottom {
max-width: 1000px;
text-align: center;
}
This will allow your items to be closer together without stretching out too far.
What I suggest though is using the flexbox method. Another thing is you should wrap your images and related text into a div that contains them together. It gives you better responsive control in the end.
I have given you an example that I quickly did on codepen.
Link to example
Why don't go with flexbox approach. Try this:
#bottom {
display: flex;
justify-content: space-around;
}
#bottom div {
text-align: center;
margin-right: 10px;
}
<section id="bottom">
<div>
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="app" width="310" height="200" class="pad">
<p class="twenty_f">APPIFY</p>
</div>
<div>
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="flower" width="310" height="200" class="pad">
<p class="twenty_f">SUNFLOWER</p>
</div>
<div>
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="bokeh" width="310" height="200" class="pad">
<p class="twenty_f">BOKEH</p>
</div>
</section>
Refer: https://www.w3schools.com/css/css3_flexbox.asp
Hope it helps. Cheers!
I would like to make the sliding images clickable in this image slider.
http://dev7studios.com/lean-slider/
I tried
<div id="wrapper">
<div class="slider-wrapper">
<div id="slider">
<div class="slide1">
<img src="images/1.jpg" alt="" />
</div>
<div class="slide2">
<img src="images/2.jpg" alt="" />
</div>
<div class="slide3">
<img src="images/3.jpg" alt="" />
</div>
<div class="slide4">
<img src="images/4.jpg" alt="" />
</div>
</div>
<div id="slider-direction-nav"></div>
<div id="slider-control-nav"></div>
</div>
But it didn't work.
Actually how it works, it makes all the slides opacity:0 initially, and add class current on the currently viewed slide/element and make opacity: 1 on it.
So Whatever is the current position of the slider, the last element is always on the top, and any anchor tags you add on sliders (apart from last one) will not work.
You can use z-index to elevate the current slide on top to make the anchor tag work.
Adding the following css should make it work
.leaner-slider-slide {
z-index: 1;
}
.leaner-slider-slide.current {
z-index: 10;
}
To make direction and nav buttons on top of slider
#slider-direction-nav, #slider-control-nav {
z-index: 20;
}
I've been googling this and have found many answers, but none of them work in my situation because one of the divs is a gallery with multiple images. Basically, I'm trying to put an image and another gallery in the center of a page next to eachother.
HTML snippet:
<div class="sides">
<div class="featured-item">
<p class="featured-label">This weeks Featured Item is Mint Chip Cupcakes!</p> <img src="img/mintchip.jpg">
</div>
<div class="sides">
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/1.jpg" alt="A Happy Birthday Mario Cake">
</li>
<li>
<img src="img/2.jpg" alt="A Pizza Hut Cake">
</li>
<li>
<img src="img/5.jpg" alt="A Makeup Cake">
</li>
<li>
<img src="img/6.jpg" alt="A Makeup Cake">
</li>
<li>
<img src="img/156.jpg" alt="A Makeup Cake">
</li>
</ul>
</div>
</div>
</div>
CSS:
.sides {
display: inline-block;
text-align: center;
max-width: 612px;
}
I also tried using each div seperately and using margin-left, margin-right but no luck. The max-width is 612px because that's the max-width of the gallery. I tried setting it to 1000 and it shows a ton of the images very widely.
Result: http://i.imgur.com/se8DwyL.png
One image is on top of the other, and they are on the left side of the screen.
First, you are using the "slides" class name for what seem like unrelated divs. I'd change that; it's only going to cause you grief. Next, the wrapper should have a set width and be centered with an auto margin -
.my-Wrapper-class {
width:960px;
margin:0px auto;
}
Now float the two divs holding your picture and slide show -
.featured-item {
float:left;
}
.flex-slider {
float:right;
}
You can add a margin to either of those until it's spaced to your liking.
I have the following html..
<div class="container animate" data-animation="pulse">
<div class="margin30 "></div>
<h2 class="border-title">Powering payments for <span></span></h2>
<div class="margin25"></div>
<div style="display:table-cell;">
<div>
<img src="images/clientlogos/pappa.png" title="" width="170" height="88" style="margin-left:5px;">
</div>
<div>
<img src="images/clientlogos/offergrid.png" title="" width="215" height="55" style="margin-left:5px;">
</div>
<div>
<img src="images/clientlogos/index.png" title="" width="121" height="33" style="margin-left:5px;">
</div>
<div>
<img src="images/clientlogos/fudr.png" title="" width="156" height="65" style="margin-left:5px;">
</div>
<div>
<img src="images/clientlogos/inloc8.png" title="" width="139" height="39" style="margin-left:5px;">
</div>
</div>
</div>
Can someone tell how could I arrange all the divs having images in a horizontal line.I want all the images in one line
div, img {
float: left;
display: inline-block;
}
float: left on your divs is one option:
http://jsfiddle.net/c3DV3/
Since you are only storing images in your div, you should check if it's better for you to use the <img> tag or to set them as a background-image, as stated in this post. It mainly depends on what you are going to do with those images. Check the link for further informations.
Floating the divs on left like others already said is the proper way to do it. You could also use display:inline-block; (even if divs are rendered as blocks by default).
Personally I didn't get if you wanted just to display them on one line, or to align them on top: in this case, you can use vertical-align:top; in addition to the other CSS parameters to achieve the result.
EDIT: This might make more sense, check this image. http://puu.sh/rt8M
The image just goes through the padding. I want the title div to expand vertically to accommodate the image. While keeping the text centered and the center of the image should intersect the line the text is on.
I want to align an img to the left (and then another after the text to the right). I've tried various properties but none seem to do it right. Can anyone help?
To clarify, I want the image against the left side of the screen or browser window. The div stretches from the left to the right of screen, as you would expect of a header/title div.
Float;left seems to make the img drop out of the div tag. I should mention there is a text-align:center; property on the tag. But it doesn't fix the problem when removed so I'm not sure it's that.
The HTML
<div id="header">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" alt="" width="86" height="98" />
Page Header Title
</h1>
</div>
</div>
I created a little dabblet code example for you. I think this is what you are trying to do?
http://dabblet.com/gist/2492793
CSS:
.logo{
float:left;
width: 86px;
height:98px;
display:block;
}
.img2{
float:right;
display:block;
}
.clear{
clear:both;
}
HTML:
<div id="header">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" alt="" />
Page Header Title
<img class="img2" src="images/img2.png" alt="" />
<div class="clear"></div>
</h1>
</div>
</div>
The reason the logo is dropping out of the div is because it is not cleared.
This should fix things up.
Use this
<div id="header" style="float:left">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" width="86" height="98" />
Page Header Title
</h1>
</div>
#logo{
display: flex;
justify-content: space-evenly;
}
<div id="logo">
<img src="https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="something" width="100" height="100"/>
<h1>Hello World</h1>
</div>