Here's my HTML:
<div class="navbar navbxar-inverse navbar-fixed-bottom" role="navigation" style="min-width: 320px; height: 51px;">
<div class="container-fluid" style="display: table;">
<div class="row row-mod">
<div class="col-xs-7 col-xs-7-mod" style="background-color: blue;">
<a class="navbar-logo pull-left" href="/"><img class="img-responsive" src="http://s24.postimg.org/intj0mv3l/logo.jpg" /></a>
<span class="navbar-footer-text-container">
<span class="navbar-footer-text">CUSTOMER SERVICES | STORE </br>COPYRIGHT © BRND 2006/2014</span>
</span>
</div>
<div class="col-xs-5 col-xs-5-mod" style="padding-right: auto; background-color: red;">
<img style="margin-left: 1px;" class="pull-right img-responsive" src="http://s4.postimg.org/kus2gqabd/image.jpg" />
<img style="margin-left: 1px;" class="pull-right img-responsive" src="http://s4.postimg.org/kus2gqabd/image.jpg" />
<img class="pull-right img-responsive" src="http://s4.postimg.org/kus2gqabd/image.jpg" />
</div>
</div>
</div>
</div>
My CSS is added to JSFiddle.
Currently the problems are:
1. The bigger yellow image is not centered vertically in the blue div, it is on the bottom of the div
2. The smaller yellow images are not centered vertically in the red div, they are on the top of the div
3. The smaller yellow images are not on the right of the red div. There is a little space, I couldn't find why this space appears
4. The yellow images are set to be responsive. I've set this, because I've also set a rule to resize the navbar under 410px to have only 39px height. This feature is necessary, because then on smaller screens the text doesn't have to go to the next row, so everything fits like on bigger screens. The problem is that it isn't working this currently.
Do you have any clues for these problems?
Edit:
I would like to achieve the following layout:
1. The bigger image (the logo) and the text should be on the left side
2. The text after the logo must be in 2 lines and the space between the two lines should be small
3. The other three images should be on the right
4. The navigation bar should have a width as the window
5. The content on the navigation bar should have a maximum widht of 976px
6. The navigation bar should have a height of 51px
7. The text should have an 8pt size
These settings should be changed a bit when the screen size is lower than 410px. This is necessary, because under 410px the content cannot fit in the space, so in case the navbar is only 39px and also the images will be resized according to this height than everything can fit.
the main issue is your mix of inline and external styles, quite a mess. Within that mess, you have that bottom nav with a display:table declaration. Basically, you're trying to re-invent the wheel. I don't know why are you doing this, but following your logic, I've fixed your code so it works. See fiddle and HTML code below.
<div class="navbar navbxar-inverse navbar-fixed-bottom navbar-bottom" role="navigation">
<div class="container-fluid" style="display: table; padding:0; margin:0 auto">
<div class="row row-mod">
<div class="col-xs-7 col-xs-7-mod" style="background-color: blue; ">
<a class="navbar-logo pull-left" href="/"><img class="img-responsive" style="margin-left: 1px; margin-top:-9px; display:inline; vertical-align:50%; height:47px;" src="http://s24.postimg.org/intj0mv3l/logo.jpg" /></a>
<span class="navbar-footer-text-container">
<span class="navbar-footer-text">CUSTOMER SERVICES | STORE </br>COPYRIGHT © BRND 2006/2014</span>
</span>
</div>
<div class="col-xs-5 col-xs-5-mod" style="padding-right: auto; background-color: red; ">
<img style="margin-left: 1px; margin-top:9px" class="pull-right img-responsive" src="http://s4.postimg.org/kus2gqabd/image.jpg" />
<img style="margin-left: 1px; margin-top:9px" class="pull-right img-responsive" src="http://s4.postimg.org/kus2gqabd/image.jpg" />
<img style="margin-left: 1px; margin-top:9px" class="pull-right img-responsive" src="http://s4.postimg.org/kus2gqabd/image.jpg" />
</div>
</div>
</div>
Now, my suggestion would be for you to use Bootstrap as it is, it really works fine without any reinvention.
Related
In advance, I apologize for my bad English.
My logo (which should be positioned in the horizontal center on the header) gets shifted like 5px to the left.
The hamburger icon is also like 5px wide, so I tested what would happen if I set the hamburger icon property display:none; and the logo shifted perfectly to the horizontal center.
I already set the margin-left and margin-right properties for the logo to auto and it works fine, except for the 5px shift to the left.
Do you have any idea how to solve this problem?
I'm grateful for any answer.
<div
class="fusion-header-v6 fusion-logo-center fusion-sticky-menu- fusion-sticky-logo- fusion-mobile-logo- fusion-header-has-flyout-menu">
<div class="fusion-header-sticky-height"></div>
<div class="fusion-header">
<div class="fusion-row">
<div class="fusion-header-v6-content fusion-header-has-flyout-menu-content">
<div class="fusion-logo" data-margin-top="31px" data-margin-bottom="31px" data-margin-left=""
data-margin-right="0px">
<a class="fusion-logo-link" href="#">
<!-- standard logo -->
<img src="link" srcset="link 1x" width="2792" height="1216" retina_logo_url=""
class="fusion-standard-logo" />
</a>
</div>
<div class="fusion-flyout-menu-icons">
<a class="fusion-flyout-menu-toggle" aria-hidden="true" aria-label="Toggle Menu" href="#">
<div class="fusion-toggle-icon-line"></div>
<div class="fusion-toggle-icon-line"></div>
<div class="fusion-toggle-icon-line"></div>
</a>
</div>
</div>
</div>
</div>
</div>
I've run into an issue that I can't seem wrap my head around.
Using Bootstrap 4 and HTML and I'm not that good at CSS or CSS3, this is my first undertaking of getting things to align or following a design that was handed from a designer and put it to html and css.
I need to align the ending of one row or container with the right margin of the upper slider and i need to do the same for the second row or container except align it with the opposite margin of the upper slider.
To better explain please refer to the image.
I need the image that is in those rows or containers to be responsive and grow as the row or container grows and stop till it reaches about the red lines.
Here's my code so far:
<div class="container">
<div class="row">
<div id="slider20" class="rev_slider" style="width:100%;">
<ul style="padding-left: 0px;">
<div class="caption">
<h1 class="jumbo-text">some text</h1>
</div>
<li data-transition="slideleft" data-slotamount="1" data-thumb="/*/img5_thumb.jpg">
<img src="assets/images/background.jpg" class="img-responsive" style="width:100%; height:100%;">
</li>
</ul>
</div>
</div>
</div>
<div class="flex-nowrap align-items-start align-content-start d-flex flex-row-reverse justify-content-start container-fluid" style="padding-left: 0;
padding-right: 0;">
<div class="row ml-auto">
<img src="assets/images/elipseleft1.png" width="100%" />
</div>
</div>
I'm trying to align each image to the left and right of the text in the "wrapper2 panel-footer center-block" div. It correctly aligns the left image, but the right image is actually going "under" the div for some reason.
.wrapper2 {
max-width: 800px;
float: none;
margin: 0 auto;
}
<div class="wrapper2 panel-footer center-block">
<div class="pull-left">
<img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" />
</div>
<p><small>Copyright © All Rights Reserved.</small>
</p>
<div class="pull-right">
<img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" />
</div>
Any reason for this?
To align divs next to each other in Bootstrap you utilize columns. There are 12 columns in a row, so in the example below I put each element in a 4 wide using the col-xs-4 class.
I also added the img-responsive class to both of the images so they scale down correctly on smaller devices.
<div class="wrapper2 panel-footer">
<div class="col-xs-4">
<div class="pull-left"><img class="img-responsive" alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
</div>
<div class="col-xs-4">
<p><small>Copyright © All Rights Reserved.</small></p>
</div>
<div class="col-xs-4">
<div class="pull-right"><img class="img-responsive" alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
</div>
</div>
Here's a working fiddle link: https://jsfiddle.net/88ebLj7e/
You can find more information on the Bootstrap grid here: https://getbootstrap.com/examples/grid/
<p> Tag is outside the pull-left class. That's what made it looks "under" the div. When you use pull-left. all should be INSIDE the class.
From your codes, <p><small> belongs to wrapper2 not pull-left or pull-right.
If you need more flexible usage, you can use what James Ives suggest. Otherwise, you should change it into like this:
Add one line in your stylesheet as follows:
<style>
.wrapper2 p{float:left; padding-left:30%;}
</style>
<div class="wrapper2 panel-footer center-block">
<div class="pull-left"><img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
<p><small>Copyright © All Rights Reserved.</small></p>
<div class="pull-right"><img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
</div>
So, what you need now is to decide padding-left value.
Hopes, it helps.
I am using older Skeleton css version, it is a 16 column grid system. I am trying to setup similar layout as in this picture.
http://imgur.com/sIV2aYo
I am pretty new to CSS, is using two containers (one inside another) a proper method?
Here is a sample code of what I been trying, but not working out too well =(
<div class="container">
<div class="eight columns alpha">
<div class="image">
<img alt="" src="images/coffee.jpg">
</div>
</div>
<div class="eight columns omega">
<div class="container">
<div class="eight columns">
<img alt="" src="images/plate.jpg">
</div>
<div class="eight columns">
<img alt="" src="images/macaro.jpg">
</div>
<div class="text area">
<p class="quote">"One of my favorite parts of using Square Register is being able to talk to customers while I am swiping their cards."</p>
<p class="name">Norm Mui, Coffee Foundry</p>
</div>
</div> <!-- 2nd container -->
</div>
</div> <!-- 1st container -->
Thanks in advance.
I don't know your CSS, but maybe this helps you:
HTML:
// The class "columns" is your "block" (div) that needs the content. I've made a CSS with a background-color, height and width.
// In that div "columns we create new "columns, numbered by 1,2 and 3. I've floated all the text to the left and gived it a margin. The first, second and the third a margin of 15px ( top, right, buttom and left ).
// In the div column "columns" I have made a textarea with also a margin of 15px. The vertical-align is for a top vertical align. with the display we means that it needs to be in the block, with a margin of 40% ( it takes 40% of the block).
<div id="container">
<div class="columns">
<div class="eight-columns-1">
<img alt="" src="http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png">
</div>
<div class="eight-columns-2">
<img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg">
</div>
<div class="eight-columns-3">
<img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg">
</div>
<div class="textarea">
<p class="quote">"One of my favorite parts of using Square Register is being able to talk to customers while I am swiping their cards."</p>
<p class="name">Norm Mui, Coffee Foundry</p>
</div>
</div>
</div>
CSS:
.columns {background-color:yellow; width: 530px; height: 285px;}
.eight-columns-1 {float:left; margin: 15px;}
.eight-columns-2 {float: left; margin: 15px;}
.eight-columns-3 {float:left; margin: 15px 15px 15px 0px;}
.textarea {vertical-align:top; margin: 15px; display:inline-block; width: 40%;}
I'm having an issue getting an image to appear to "overflow" the DIV it is residing in.
A simple example:
<div class="container callout-blue">
<div class="row">
<div class="col-md-6"> Some content</div>
<div class="col-md-6">
<img src="myimage.png" class="hidden-sm hidden-xs center" />
</div>
</div>
</div>
With the desired effect of having the container-div with a blue background, but have the image appear to spill over the top of the div. Say the blue-background is 200px high, and the image is 300px high, having the top 100px of the image appear above the callout div.
change your HTML like this:
<div class="col-md-6 overbox"> <img src="myimage.png" class="hidden-sm hidden-xs center" /></div>
and now apply your CSS like this:
.overbox{position:relative;}
.overbox img{position:absolute; left:0; top:-100px;}