I'm trying to create a simple HTML document that has two main divs - the first one has a background image w/a background size of cover so that the image takes up the entire top portion of the screen, the second div is directly beneath the first div and contains an img tag.
This seems simple enough, but when I apply a background:url style to my first div, scrolling down causes my second div image to overlap the background image of the first div. I expected this so I set a height property in my first div and this has no effect.
How do I make the first image cover the first div but not have the second one overlap it?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="font-family: 'lato'; font-size:18px;">
<div class="container-fluid">
<div style="background:url('http://www.screensavergift.com/wp-content/uploads/2011/01/BeautifulLakeView1.jpg') no-repeat center center fixed; background-size:cover; height:1100px" class="row">
<div class="row">
<div style="margin-top:20px" class="text-right col-xs-offset-1 col-xs-10">
Login | Sign Up
</div>
</div>
<div class="row">
<div style="background-color:rgba(62,83,78,0.2); margin-top:10px" class="text-center col-xs-offset-1 col-xs-10">
<span style="color:white; font-size:40px;">
Join us in God's country!
</span>
</div>
</div>
</div>
<div class="row">
<div class="text-center">
<img src="http://www.ynaija.com/wp-content/uploads/2014/05/Bird.jpg" alt="Cyrillic alphabet" />
</div>
</div>
</div>
</body>
</html>
See an example of what I'm trying to do here:
http://jsfiddle.net/y0oL6k4d/
Related
I'm creating a simple 2 column layout. The left column should be narrow and contains a vertical navigation bar, the right column will contain the main content of the site. I'm using bulma-css columns to create this layout.
The problem that I'm encountering is that depending on the horizontal windows size, part of the right side of the second column is falling off the page. So this column is not scaling appropriately.
Below is a minimal example that illustrates the problem. Depending on window size the button will (partially) fall off the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
</head>
<body>
<div class="columns">
<div class="column is-narrow">
<p>aaaaaaaaaaaaaaaaa</p>
</div>
<div class="column">
<div class="container">
<p class="button is-primary is-pulled-right">button</p>
</div>
</div>
</div>
</body>
Good expected behaviour:
Bad:
Actually the problem is your .container class in the second column which has a width...better or remove it and use .is-one-third class in the first column to make it smaller or other [bulma grid column classes]
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div class="columns is-mobile">
<div class="column is-one-third">
<p>aaaaaaaaaaaaaaaaa</p>
</div>
<div class="column">
<p class="button is-primary is-pulled-right">button</p>
</div>
</div>
I have the following code. I want to resize my image, but it doesn't work with col-xs-offset-0. (I want to center it)
What could be the problem here? I want my image to get big with col-xs and centered.
I don't want to use col-xs-4 since it'll make my image too small. I can't col-xs-5 because then I can't use offset.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href=""/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<body>
<div class="container">
<div class="row">
<div class="col-md-2 col-md-offset-5 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-0">
<img class="img-responsive" src="http://www.turkcealtyazi.org/images/poster/0903747.jpg" alt="">
</div>
</div>
</div>
<script src="/js/jquery-2.1.3.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Fiddle : http://jsfiddle.net/rx4ptj2k/
An offset of zero would only be appropriate if you had a width of 12. As it's 6 columns wide, you'd divide the remainder of the 12 in half for a result of 3.
Use col-xs-offset-3 instead of col-xs-offset-0.
Demo
I need to move the red circle image to the position shown as in below photo:
My code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>領収書</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
{% if receipt %}
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<h2>領収書
</h2>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3 col-xs-offset-3">
<h5>No. {{receipt['receipt_number']}}</h5>
<h5>{{receipt['date']}}</h5>
<hr/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 text-center">
<h3>{{receipt['c_name']}} 様</h3>
<hr/>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 text-center">
<h3><b>￥ {{receipt['amount']}}</b><br/>
</h3>
<hr/>
<h3>
但 {{receipt['quantity']}} {{receipt['product']}}<br/>
</h3>
<h4>
上記正に領収いたしました
</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 text-center col-xs-offset-6">
<h5>xxxxxxxxxxxxxxxxxxxxxxxxxx</h5>
<h5>xxxxxxxxxxxxxxxxxxxxxxx</h5>
<img src='inkan.PNG'/>
</div>
</div>
</div>
{% endif %}
<!-- /container -->
</body>
</html>
Could anybody tell me how to do it?
Just add these style to your img and play with "right" value;
<img src='inkan.PNG' style="position: absolute; right: 200px;"/>
Just add the image as a background, like this:
<div class="col-xs-6 text-center col-xs-offset-6" style="background:url(urlhere) no-repeat">
Refer to this link for more info.
Give the div an id and then add it ad css property background: url({url}); like so:
HTML:
<div id="myDiv"></div>
CSS:
#myDiv {
background: url({url});
}
Include that CSS code either from a separate file or in <style/> tags.
I also recommend you try the web course on CodeCademy to learn most of everything you need to know about HTML & CSS.
If you would use a Background, it wouldn't be printed by some Browsers.
Best way to solve this is that you use relative (or absolute) Positioning on the Image Element.
But you must fix a little thing on the col- divs from Bootstrap. Basically they don't have any position Attribute, so you can't really use the position Attribute on the child elements.
So first, let's fix the positioning Inheritance problem:
.row > div { position:relative; }
Go for this CSS Rule as example to have it relative, you may use also position: absolute and or additionally float:right, but I think this should be fine, depends on your content. I've used 100px for your Image as example size, change this as you need.
.inkan_image { position:relative; top:0px; right:0px; width:100px; height:100px }
In Your HTML you just need to add your class to the Image.
By the way: I would position the Image as first element in your Content, as it will float or will be positioned on the right side and the content just swaps in then.
<img src='inkan.jpg' class='inkan_image'>
I have a webpage I made here: http://jsfiddle.net/KM9HJ/
<!DOCTYPE html />
<head>
<title>Home</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo">
<img style="width:50; height:50; float:left;" src="Content/Portal%20Layered.png"/>
<img style="width:50; height:50; position:relative; left:-50px; z-index:2;" src="Content/Blank.png"/>
<div><h2 id="headerh2">Cody Shearer</h2></div>
</div>
<div id="wrapper">
<div style="background-color:#565656">
<div id="links">HOME</div>
<div id="links">ABOUT ME</div>
<div id="links">GALLERY</div>
</div>
<article id="para">
<p>About This Website</p>
<div id="paraL2"><p>About this page:</p> <div id="paraP">This is</div></div></article>
</div>
</body>
If you look at the div that says "About this page:" you will see that it is positioned to the far right of the div and part of it is cut off (you may have to resize the result area to see this). What I want the words to do is to stay on one line and be aligned to the left. From what I have seen the issue can be fixed by removing the "float:left" from the #links area, or It can be helped a little by removing the "width: 150px;" from #link. The only issue is that I spent a long time trying to get other s
adding clear:left may help you.
#para {
clear:left;
....
I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>Home page</title>
<style type="text/css">
.mydiv {
width:300px;float:left;background-color:#ff0000;height:250px;margin-right:10px
}
</style>
</head>
<body>
<div style="margin-left:auto;margin-right:auto;width:1000px;clear:both">
<div style="margin-right:auto;margin-left:auto;text-align:center;margin-top:5px;">This is the title</div>
</div>
<div style="margin-right:auto;margin-left:auto;clear:both;width:1000px;margin-top:10px">
<div class="mydiv">Div</div>
<div class="mydiv">Div</div>
<div class="mydiv">Div</div>
</div>
</body>
</html>
The problem is that the second and the third divs do not align properly (horizontally) with the first. For some reasons, a vertical offset makes the second and the third div appear a little lower than the first. Why is this?
Thankyou
PS
I am using Chrome 25, on MacOS X. Hope it helps somehow.
Its because you have clear: both; on the parent container of the three red boxes, if you remove that property all three will be aligned as expected.
You need to include the clear property after the last floated closing </div> or you can use a clearfix which uses the ::after pseudo-element on the container to clear floated elements within it.
You can see the container now respects the floated red boxes ..
jsBIN
Randomly poking around tells me the way to fix the offset is to remove the clear: both; declaration from the parent <div> of the three floated <div>s:
<div style="width: 1000px">
<div style="…">Div</div>
<div style="…">Div</div>
<div style="…">Div</div>
</div>
To make the parent <div> "wrap around" the floated <div>s, you need to add a cleared <div> after the floated ones:
<div style="width: 1000px">
<div style="…">Div</div>
<div style="…">Div</div>
<div style="…">Div</div>
<div style="clear: both;" />
</div>
You can also use a "clearfix" (for instance the one from HTML 5 Boilerplate on the containing <div> instead:
<div class="clearfix" style="width: 1000px">
<div style="…">Div</div>
<div style="…">Div</div>
<div style="…">Div</div>
</div>