So I currently have the logo sitting in the very left of the navbar, however I would like it in the middle. I have tried almost everything on these forums and on google searches and I can't seem to change it.
Here's the code for it:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<a class="brand" href="#">
<img alt="logo.png"src="img/logo.png" style="height:60px;>
</div>
Thanks,
Here is a sample which puts the logo in the middle of the toolbar: http://jsbin.com/efagoj/1/edit.
The only key changes you need to make is to give float: none; margin: 0 auto; to the a tag with .brand class. We add float: none; because in bootstrap .brand has a float: left; in it and we don't want it to be like that. margin: 0 auto; is to center the link.
We also need to add text-align: center; to the div with container-fluid.
Related
I am trying to implement a horizontal scroll bar to display images , but the width of the wrapper (scroll-container) container is overflowing. I also need to use FlexBox grid to make it responsive for different screen sizes.
Structure for HTML & SCSS is as given below. The container must be inside a mat-tab-group (Angular Material).
div 'item' will contain multiple items.
I am running it on chrome and have checked the inspector, apparently the mat-tab-body-wrapper display: flex property is causing this issue.
Is there any work around for this issue?
HTML
<mat-tab-group>
<mat-tab label="First">
<div class='row scroll-container'>
<div class='col-xs-5 col-sm-8 col-md-9 col-lg-12'>
<div class='horizontal-slider'>
<div class='slider-container'>
<div class='item'>
<img src='' alt=''>
</div>
</div>
</div>
</div>
</div>
</mat-tab>
</mat-tab-group>
SCSS
.scroll-container {
margin: 8px 0 0 0;
.horizontal-slider {
display: flex;
overflow-y: hidden;
max-width: inherit;
overflow-x: scroll;
box-sizing: border-box;
.slider-container {
.item {
display: flex;
margin-right: 8px;
img {
width: 124px;
height: 124px;
}
}
}
}
}
The most effective solution would be as shown below. Alongside the flex-nowrap you need to set the overflow attribute to prevent the whole page expanding.
With overflow property:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<h6>Bootstrap 4 horizontally scrollable card groups</h6>
<div class="d-flex flex-row flex-nowrap overflow-auto">
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
</div>
As stated above, I am unable to figure out why some images on the website aren't being rendered.
I have ensured that the url and filename are in lowercase and I have used the correct url syntax i.e ('/static/img/banner/common-banner.png').
I am receiving a 404 NOT FOUND error when I inspect my code but the images are in the directory.
Please note that most of the invisible images have been referenced in a css file and not directly to the html file.
Here's a sample code:
.banner_area .banner_inner {
position: relative;
background: url('/static/img/banner/common-banner.png') no-repeat center center;
background-size: cover;
background-attachment: fixed;
width: 100%;
min-height: 300px;
z-index: 1;
}
<!--================Home Banner Area =================-->
<section class="banner_area ">
<div class="banner_inner overlay d-flex align-items-center">
<div class="container">
<div class="banner_content text-center">
<div class="page_link">
<a>Home</a>
<a>About Us</a>
</div>
<h2>About Us</h2>
</div>
</div>
</div>
</section>
<!--================End Home Banner Area =================-->
I have gone through most if not all resources and I just can't figure out what the problem is.
Any assistance will be appreciated.
my html is
<div id="heading1">
<ul class="heading">
<li>Geelong</li>
</ul>
</div>
and css is
.heading {
font-size: 24px;
text-align: center;
list-style-image: url('img/stationary/marker.png');
}
If I do the css inline it works but not otherwise.
With that code:
<div id="heading1">
<ul class="heading">
<li>Geelong</li>
</ul>
</div>
.heading{
font-size: 24px;
text-align: center;
list-style-image: url('https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
}
The list is displaying correctly with Google logo as bullet.
It seems that your problem is the image's URL that is wrong. You may verify that it points to an image that exists (think that it's a relative link)
I have two images, a left arrow and a right arrow, that need to go outside of the text "submit your picture here!" I am actually able to achieve the look I'm going for: http://i.imgur.com/1k1QTE4.jpg ,but I used z-index to do so, which does not stay relative to the text when the screen is made smaller/larger. What would you suggest is the best way to go about this? Here is my code for the text:
<article>
<br>
<p style="text-align:center;font-family:arial">
<font size="4">
<strong>
<span class="white_bg">
Submit your picture here!
</span>
</strong>
</font>
</p>
<br>
<br>
<br>
<br>
<br>
<br>
</article>
There's not really anything (yet in the css) that pertains to this. Thanks!
Edit: Full CSS and HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
#banner {width:100%}
#banner img {width:100%;height:auto}
nav {width:100%;display:block;}
nav ul {list-style-type:none;margin:0;padding:0;text-
align:center;background-color:#222419}
nav li {display:inline-block;background-color:#222419;}
nav a {line-height:35px; color:white; padding: 0 30px; font-size:18px;
font-family:Arial, sans-serif;background-color:#222419;}
nav a:hover {text-decoration:none}
a{float:left;
margin-right:58px;
margin-left:58px;
color:#000;
text-decoration:none;
}
body {background-image:url("background1.jpg");
background-size:1700px 850px;
background-repeat:no-repeat;
}
.white_bg {background-color:#ffffff;
padding: 1px;
}
.col-split-3 {
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
text-align:center;
width: 450px;
}
.col-split-3 > div {
display:block;
}
-->
</style>
<meta charset="utf-8"/>
<title>DrawYourPets.com</title>
</head>
<body>
<header>
<nav>
<div style="text-align:center" id="banner">
<img src="drawyourpetsbanner3.jpg" border="0" alt="DrawYourPetsBanner3"/>
</div>
<div>
<ul>
<li><strong>HOME</strong></li>
<li><strong>CONTACT</strong></li>
<li><strong>GALLERY<strong></li>
<li><strong>STORE</strong></li>
</ul>
</div>
</nav>
</header>
<section>
<aside>
</aside>
<article>
<br>
<div class="col-split-3">
<div><img src="arrow1.jpg" width="120" height="120"/></div>
<div><p style="font-family:arial">
<font size="4">
<strong>
<span class="white_bg">
Submit your picture here!
</span>
</strong>
</font>
</div>
<div><img src="arrow2.jpg" width="120" height="120"/></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
</article>
</section>
<footer>
<div style="text-align:center" id="banner">
<img src="banner3.jpg" border="0" alt="Banner3">
</div>
</footer>
</body>
</html>
Edit 2 - Columns Centered
I found that the columns are similar to a table, and can only be centered in the css by adding margin-left and margin-right:auto:
.col-split-3 {
margin-left:auto;
margin-right:auto;
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
text-align:center;
width: 500px;
}
.col-split-3 > div {
display:block;
}
Now my only problem is getting "submit your picture here!" on two lines. I need to find a way to expand the width of the center column. Current screenshot:http://i.imgur.com/wxe79tS.jpg
There are a couple of ways to do this, just from me fiddling around with - Keep In mind: I've only tested these on Chrome because I don't have any other browsers installed on my computer.
Example 1
.img-left {
float: left;
}
.img-right {
float: right
}
.center {
text-align: center;
border: 1px solid black;
}
<br />
<div class="center">
<div class="img-left">
This is the left image
</div>
Text
<div class="img-right">
This is the right image
</div>
</div>
Example 2 (edited)
This one uses a trick of block-level elements inside an element with the column-count CSS property auto splitting into columns. I've not tested this with any large amount of text, but by your example it looks to be a fairly simple application. I've added a width to the parent element to change the spacing between the elements.
.col-split-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
text-align: center;
width: 300px;
}
.col-split-3 > div {
display: block;
}
<div class="col-split-3">
<div>Image 1</div>
<div>center text</div>
<div>Image 2</div>
</div>
These were sort of the first two ways that came to mind, I'm sure there's some way to use the ::before and ::after selectors to add images, I just don't currently have the time to fiddle with how.
Using Twitter Bootstrap 3, I have a container, three div place holders, and three images that fill as links each floated side by side and taking up the entire row: When I minimize the screen to make it responsive, I only see the first image (the second two dissapear). What steps would I have to take to make sure that each image becomes responsive and sits one below the other at the minimize dmobile display screen.
Please Note: Each Img. already has class="img-responsive" applied to it.
HTML:
<!--Wide Display Container -->
<div class="wide-display">
<div id="firstholder">
<a href="home.html" title="Home" class="imglink"><img src="/images/slide2.JPG" alt="City Lights Image" class="img-responsive" id="electricone">
<div class="item1">
<h1 class="slickfont1" >First Title</h1>
</div>
</a>
</div>
<div id="secondholder">
<a href="office.html" title="Office" class="imglink"><img src="/images/ant.JPG" alt="City Lights Image" class="img-responsive" id="electrictwo">
<div class="item1">
<h1 class="slickfont1" >Second Title</h1> </div></a>
</div>
<div id="thirdholder">
<a href="reviews.html" title="Locations" class="imglink"><img src="/images/family.JPG" alt="City Lights Image" class="img-responsive" id="thirdelectric">
<div class="item1">
<h1 class="slickfont1" > Third Title</h1>
</div>
</a>
</div>
</div><!-- Wide Display Container -->
CSS:
.wide-display {
min-width:33%;
position: relative;
width: 100%;
height:100%;
margin-top:6px;
overflow: hidden;
height:366px;
}
/*! First img Holder */
#firstholder {
width: 449px;
height: 100%;
float:left;
display:inline-block;
margin-left:1px;
margin-right:0px;
}
.item1 {
width: 24%;
margin: auto;
position:relative;
}
#secondholder {
width: 450px;
height: 100%;
float:left;
display:inline-block;
margin-right:0px;
}
#thirdholder {
width: 449px;
height: 100%;
float:left;
display:inline-block;
}
You have to create Bootstrap Grid to make it work. You can just read the documentation here: http://getbootstrap.com/css/ it's pretty easy to understand. The divs that wrap you images need to have grid classes applied to them.