Now, this is a new project, so I need some help.
I have the following code. Please press full screen.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<head>
<title>Stack Overflow Question</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="style/home.css">
<!-- Reference to main CSS Style File-->
<style>
ul {
margin:0 auto;
border-top:2px solid #000;
border-bottom: 2px solid #000;
padding:10px;
text-align: center;
font-family:"montserratlight";
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="container">
<div id = "navigation">
<p>
<ul class="col-md-12">
<!-- MAIN NENU BAR -->
<li><b>Home</b></li>
<li>Why Does This</li>
<li>Not</li>
<li>Work</li>
</ul>
<!-- Unordered lists.-->
</p>
</div>
<div class = "row">
<!-- Declaration of First Row -->
<div class="imageHolder col-md-12 hvr-underline-from-center">
<!-- Image Container as DIV -->
<div class = "imageInside" >
<img id = "imageHomeJPG" src="http://s30.postimg.org/8wav359r5/NYC.jpg" style="width:100%" />
</div>
<!-- Image Link -->
</div>
</div>
<div class="row">
<div class="col-md-6">
<a href="about.html">
<img src = "http://s30.postimg.org/mehrfflwh/Place1.jpg" style="margin-bottom:10px; margin-top:10px; width:100%;"/>
</a>
</div>
<div class="col-md-6">
<a href="about.html">
<img src = "http://s30.postimg.org/iw5rj1l0h/Place2.jpg" style="margin-bottom:10px; margin-top:10px; width:100%;"/>
</a>
</div>
</div>
</body>
</html>
Now, when expanded, this is what the website shows.
However, there is a small gap between both column 6 photos.
<div class="row" style="padding-right:0">
<div class="col-md-6">
IMAGE TAG
</div>
<div class="col-md-6" style="padding-left:0">
IMAGE TAG
</div>
This produced the following -
You can see that the image on the left is bigger on the right and therefore it is not correct.
My question is, how can I make the gap between the two columns smaller (to around 10px) without needing to change the padding? I want to make the images bigger in order to decrease the size of the gap, but I can't seem to find a way!
Thanks.
Make a class :
no-space {
Width: 100% !important;
Margin: 0px !important;
}
Then put this class in next to where col-md-6 is seep rated by a space like this :
Class="col-md-6 no-space"
And there should be no spaces between the photos now.
To actually solve this question too, what I can also do is go to the Bootstrap CSS file and edit the padding-left and padding-right values to equal amounts. Originally, both values are set at
padding-left:15px;
padding-right:15px;
but looking at other examples such as airBnb, their padding is both set at 12.5 so this is also another solution.
Related
I am making a webpage in HTML and CSS which have to be replicated exactly like this image.
At this moment, I am able to get this in fiddle.
The problem with the fiddle is: it (text and a rectangle(with some text)) is getting aligned at the left-side and right-side center of page whereas I want to bring them at the center of a page (with some distance between the two) as shown in the image. The HTML code which I am using is:
<div class="sections">
<div class="container">
<div class="row">
<div class="col-lg-6 left-side"> Development & Design</div>
<div class="col-lg-6 right-side"> Web Designer Qualifications Go here</div>
</div>
</div>
I am wondering whether do I need to .col-lg-6 class as I have used above to replicate an image ?
If not then do I need to use col-lg-offset-1 in my HTML code in order to replicate an image ?
At least for the size of screen that you're doing it col-lg you can get it to work by using justify-content-center in the wrapping <div>. What this does is that it moves the empty space to the sides of both elements, bring in them together to the center. I used col-lg-4 in my case, but if that is too small for you you can adjust it to your needs.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="sections">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-3 left-side"> Development & Design</div>
<div class="col-lg-3 right-side">
Web Designer
<!-- list requested in the comments Here -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
</div>
</div>
You can find more info on Bootstrap Doc
Run this below Snippet :
.sections{
width: 100%;
}
.sections .row {
padding-top: 100px;
}
.sections .left-side {
font-style: italic;
float:left;
width:45%;
}
.sections .right-side {
border-radius: 10px;
display: inline-block;
margin-bottom: 30px;
max-width: 320px !important;
height: 100px;
font-style: italic;
border: 1px solid #000;
background-color: white;
padding: 10px 10px 10px 10px;
float: right;
width:50%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Homesail</title>
<link rel="shortcut icon" href="assets/img/Uploads/favicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="sections">
<div class="container">
<div class="row">
<div class="col-lg-6 left-side"> Development & Design</div>
<div class="col-lg-6 right-side"> Web Designer
<ul>
<a href=''><li>Qualification</li></a>
<a href=''><li>Go here</li></a>
</ul></div>
</div>
</div>
</div>
</body>
</html>
I am currently building a web page and encountered the following problem and would appreciate if someone helped me solve it:
I want to have a full-width background image for every "section" (div) of the page. Within this background, there is a smaller div for content (text). On the right, there is a scrolling sidebar which scrolls with the user. I could not find how to have a full-width div and the sidebar(which is a div element with descendants) going over it?
The current structure looks like:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="col-md-9">
here go all the "sections"...
</div>
<div class="col-md-3">
and that is the sidebar...
</div>
</div>
</body>
So in short, what is needed is background images with some html content on top of them and a sidebar on the right (but being covered by the image). Thank you in advance!
So I guess that means you plan to make a fixed sidebar? You need to put the columns in a row. Make the row have the background-image. Position the sidebar fixed, this makes the bootstrap class ineffective but you can make the width 25% so it stays responsive. You may need to add some padding/margin, but I made something up quick with random colors so you can get the idea.
#sidebar{
position:fixed;
right:0;
top:0;
background-color:rgba(0,0,0, .5);
width:25%;
color:white;
}
.blue{
background-color:blue;
}
.white{
background-color:white;
}
.red{
background-color:red;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row red">
<div class="col-md-9">
Section 1
</div>
<div class="col-md-3" id="sidebar">
and that is the sidebar...<br/>
ber<br/>
baer
badsr
</div>
</div>
<div class="row white">
<div class="col-md-9">
Section 2
</div>
</div>
<div class="row blue">
<div class="col-md-9">
Section 3
</div>
</div>
</div>
</body>
You need to create a div outside of your container class. That div can be set to a full width.
<div class="row"> <!-- begins full width row-->
<div class="container">
<div class="col-md-9">
here go all the "sections"...
</div>
<div class="col-md-3">
and that is the sidebar...
</div>
</div>
</div><!-- ends full width row-->
I'm trying to get styles to apply to specific nested divs and they aren't showing up. (This is the problem)
I would like for them to work, or in other words, to apply the rules. (This is the desired outcome)
HTML:
<div class="" id="indexWrap">
<!-- Features Section -->
<section id="features" class="section-light">
<div class="container">
<div class="row">
<div class="col col-lg-3 col-md-4 col-sm-6 col-xs-12">
Stuff
</div>
</div>
</div>
</section>
<!-- END Features Section -->
</div>
<!-- END indexWrap -->
SCSS: (Also Bootstrap style sheet.)
#indexwrap {
.col {
border: 1px solid black;
border-radius: 8px;
padding: 5px;
}
}
Order of styles
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
And here is the codepen: http://codepen.io/anon/pen/avvbxx
Selectors are case sensitive:
#indexwrap should be #indexWrap to match the HTML's id="indexWrap".
Codepen Update
Your container div has an ID of indexWrap, but you refer to it as #indexwrap in your SCSS. Make sure that you match the case of the identifier.
I haven't done much html and css lately and I can't figure out why my H1 disappears out of sight when I re-size the browser...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript src="Jquery1_10_2.js"> </script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" media="screen" />
<link rel="stylesheet" type="text/css" href="LogIn_Page.css" media="screen" />
<!-- <script type="text/javascript src="LogIn_Page.js"> </script> -->
</head>
<body>
<div style="margin-top: 15px;text-align: center;" class="navbar navbar-inverse navbar-fixed-top container">
<img src="Logo.png" alt="somesite" style="width:225px; height:100px; text-align:center; margin-right:5px">
<img src="somesite_logo.png" alt="somesite" style="width:225px; height:100px; text-align:center;margin-right:5px; margin-left:5px;">
<img src="somesite.png" alt="somesite" style="width:225px; height:100px; text-align:center; margin-left:5px;">
</div>
<div class="container body-content" style="margin-top: 125px;">
<div class="row">
<div class="col-md-12">
<H1 style="margin-bottom: 50px;">Welcome to the Crops web application</H1>
<P>Please login:</P>
<button onclick="window.location.href="/auth"" >Login link</button>
</div>
</div>
</div>
<div id="footer">
<footer>
<script>window.onload = function() {
var d = new Date();
var n = d.getFullYear();
document.getElementById("date").innerHTML = "© " + n + " My company";}</script>
<p id="date"></p>
</footer>
</div>
</body>
</html>
The three images stack on top of each other like they are supposed to, but its just the H1 tag that dispersal totally. I haven't even used any custom css, except for the default bootstrap package.
Could someone point me out to the right solution?
I tried putting inside the H1 tag the following styles: position, float, height, width, min-height, min-width, but none of those seem to work out for me it just keeps disappearing when I size down the browser to the max. Its there when the browser is full screen of course....
You can add position: relative to your navbar.
.navbar.navbar-inverse {
position: relative;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div style="margin-top: 15px;text-align: center;" class="navbar navbar-inverse navbar-fixed-top container">
<a href="http://somesite.com/" title="Web Site">
<img src="Logo.png" alt="somesite" style="width:225px; height:100px; text-align:center; margin-right:5px">
</a>
<a href="http://www.somesite2.org/" title="Web Site">
<img src="somesite_logo.png" alt="somesite" style="width:225px; height:100px; text-align:center;margin-right:5px; margin-left:5px;">
</a>
<a href="http://somesite3.com/" title="somesite Web Site">
<img src="somesite.png" alt="somesite" style="width:225px; height:100px; text-align:center; margin-left:5px;">
</a>
</div>
<div class="container body-content">
<div class="row">
<div class="col-md-12">
<h1 style="margin-bottom: 50px;">Welcome to the Crops web application</h1>
<p>Please login:</p>
<button onclick="window.location.href="/auth"">Login link</button>
</div>
</div>
</div>
It's not disappearing, it just goes off the screen cause of it's huge size.
Try using #media (max-width: _px) in CSS to change the position and text size of theh1` accordingly:
#media (max-width:300px){
h1{
text-size: _px/em/%;
<more styles here>
}
}
So when the screen is less than 300px, it'll style the h1 to whatever you put in there.
It's not disappearing, it's just covered by the navbar. You need to add more margin for when the navbar elements stack up and expand the navbar. For example
<div class="container body-content" style="margin-top: 300px;">
will make it appear. However you need to actually put it in a media query. With your fixed image widths those queries to add to the styles section would be
#media (max-width: 732px) {
.body-content {
margin-top: 225px !important;
}
}
#media (max-width: 499px) {
.body-content {
margin-top: 325px !important;
}
}
I have a problem with this example: http://jsfiddle.net/JYkUS/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FSou1::Верстка макета</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="logo-wrapper">
<div class="logo">
<a href="#">
<img src="images/logo.png" alt="Logo" width="90" height="90" />
</a>
</div>
<div class="logo-text">
<span>Happy Nanny</span>
</div>
<div class="menu">
<ul>
<li class="first">HOME</li>
<li>SERVICES</li>
<li>NEWS & PRESS</li>
<li>FIND JOB</li>
<li>CONTACTS</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="header">
<div class="header-text">
<span class="easy-way">THE EASY WAY</span>
<span class="find-the-best">TO FIND THE BEST</span>
<div class="clear"></div>
<p>babysitters, childminders, nannies or private tutors</p>
</div>
</div>
</body>
</html>
Span with text
<span class="easy-way">THE EASY WAY</span>
as default has margin-left, but i don't know why. I really don't want to set a negative value to margin-left. Is it possible to align this span to left border and why does it now have margin with such value?
P.S. Watched in Google Chrome (firefox doesn't have this margin)
EDIT:
Just if i remove this style:
.logo-wrapper .logo, .logo-wrapper .logo-text {
float: left;
}
my span goes to left border =\ but why is it so?
EDIT2: Other way, to move <div class="clear"></div> from 'logo-wrapper' container, to root-level as
<div class="logo-wrapper">
<div class="logo"></div>
<div class="logo-text"></div>
<div class="menu"></div>
<!-- FROM HERE -->
</div>
<div class="clear"></div> <!-- MOVE HERE -->
<div class="header">
<div class="header-text">
<span class="easy-way">THE EASY WAY</span>
<span class="find-the-best">TO FIND THE BEST</span>
<div class="clear"></div>
<p>babysitters, childminders, nannies or private tutors</p>
</div>
</div>
But still can't understand, why floating still work after inner clear:both div
EDIT3: Is it because float:right menu even goes "righter", than div with clear:both?
The margin is actually applied on the body tag. You can remove it using:
body {
background: none repeat scroll 0 0 #F8F7E5;
font-family: Arial;
font-size: 100%;
margin-left: 0;
margin-top: 40px;
}
Working Example: http://jsfiddle.net/JYkUS/2/
This is commonly handled using a reset.css file which removes all browser specific styling from the page, so you can start from a single base point when creating a cross browser compliant webpage. I would recommend applying such a strategy to the site.
That is because you haven't set the body margin to 0
Make it margin:40px 0 0 0
body {
margin: 40px 0 0 0;
font-size: 100%;
font-family: Arial;
background: #f8f7e5;
}
DEMO