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;
....
Related
I feel like using margin and padding will mess with the bootstrap grid in a way that makes it not work on all devices since your going outside of the grid. If anyone can clarify this that would be awesome. Anyways I'm having issues getting the left arrow to space out away from the 3 bike images in a way that keeps everything on the page perfectly centered. I've been messing with the grid, but no matter what I do I can't get the left arrow to move away from the first bike image. See screenshot for reference. Any help is appreciated.
HTML
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Bike Shop"}}</span></i>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
</div>
<!-- you missed md from offset, end class not needed -->
<div class="products" ng-controller="BikeController">
<div class="row">
<div class="col-md-1" id="leftArrow"><img ng-src="images/leftarrow.png"></div>
<div class="col-md-3 text-center" ng-repeat="product in products | limitTo:-3">
{{product.manufacturer}}
<img id="bikePic" ng-src="{{product.image}}">
</div>
<div class="col-md-1" id="rightArrow"><img ng-src="images/rightarrow.png"></div>
</div>
</div><!--End controller-->
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bikeimageslider.js"></script>
</body>
</html>
CSS
.header{
font-style:italic;
background-color:black;
height:60px;
color:white;
font-weight:bold;
font-size:40px;
}
.header .fa {font-style:italic;
}
.bikeSelector{
color:green;
}
.chooseTitle{
font-size:60px;
}
.products{
color: #1E90FF ;
text-align:center;
font-size:40px;
}
#bikePic{
height:100%;
width:100%;
}
<img ng-src="images/leftarrow.png">
change to
<img ng-src="images/leftarrow.png" class="img-responsive">
this will add max-width: 100%; to your image and won't break the <div class="col-md-1" id="leftArrow"> layout
In other words, your problem is that nav images is too big :)
I would rather use absolute positioning for the navigation elements.
Like
#leftArrow{
position: absolute;
left: -40px;
top: 50%;
}
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/
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 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>
I am having a problem with my web page, because I have a wrapper around all element of the page (header,navigation menu and content) when the content expands due to the amount of data to display it would go over the wrapper without pushing it down, but on IE7 it does expand the wrapper.
It is driving me crazy, and I can not figure out why it is doing this.
Sorry for the code, as it may have too many divs, but I dont know any other way to create round corner.
code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
*
{
padding:auto;
margin:auto;
text-align:center;
}
div
{
text-align:left;
display:block;
}
</style>
</head>
<body style="">
<form id="form1" runat="server">
<!--Main div container-->
<div style="background-image:url('Images2/Content/WrapTop.gif');width:1210px;height:18px;background-repeat:no-repeat;margin-top:10px;" ></div>
<div style="background-image:url('Images2/Content/WrapMid.gif');width:1210px;min-height:900px;display:block;background-repeat:repeat-y;">
<!--Menu container-->
<!--Heading-->
<div style="width:1210px;height:132px;background-image:url('Images2/Heading/Heading.gif');background-repeat:no-repeat;">
<div style="width:1046px;height:6px;background-repeat:no-repeat;"></div>
<div style="width:1046px;height:96px;background-image:url('Images2/Heading/tiltle.gif');background-repeat:no-repeat;"></div>
<div style="width:1046px;height:3px;display:block;"></div>
<!--Top Menu-->
<div style="width:1200px;height:25px;text-align:justify;padding-bottom:-10px;">
</div>
</div>
<!--Container of menu and subcontainer-->
<div style="width:1212px;min-height:750px;margin-top:60px;margin-left:15px;">
<!--Menu-->
<div style="width:274px;float:left;">
<div style="float:left">
<div style="width:272px;height:39px;background-image:url('Images2/menu/MenuTop.gif');color:White;"><asp:LinkButton ID="LinkButton1" runat="server" Text="Electronics" OnClientClick="FindSubCats(560864, 'SearchSubCatsOne');return false;" /></div>
<div id="SearchSubCatsOne" style="width:272px;height:auto;background-image:url('Images2/Menu/menuMid.gif');background-repeat:repeat-y;"></div>
<div style="width:272px;height:14px;background-image:url('Images2/Menu/menuBottom.gif');"></div>
</div>
<div style="float:left">
<div style="width:272px;height:39px;background-image:url('Images2/Menu/MenuTop.gif');"></div>
<div id="SearchSubCatsTwo" style="width:272px;height:auto;background-image:url('Images2/Menu/menuMid.gif');background-repeat:repeat-y;"></div>
<div style="width:272px;height:14px;background-image:url('Images2/Menu/menuBottom.gif');"></div>
</div>
<div style="float:left">
<div style="width:272px;height:39px;background-image:url('Images2/Menu/MenuTop.gif');"></div>
<div id="SearchSubCatsThree" style="width:272px;height:auto;background-image:url('Images2/Menu/menuMid.gif');background-repeat:repeat-y;"></div>
<div style="width:272px;height:14px;background-image:url('Images2/Menu/menuBottom.gif');"></div>
</div>
</div>
<!--Content Menu-->
<div style="width:802px;float:left;min-height:650px">
<div style="float:left;margin-left:10px;">
<div style="width:800px;height:37px;background-image:url('Images2/Content/contentTop.gif');"></div>
<div style="width:800px;min-height:650px;background-image:url('Images2/Content/contentMid.gif');background-repeat:repeat-y;display:block;">
<div id="Products" style="width:800px;min-height:650px;display:block;"></div>
</div>
<div style="width:800px;height:13px;background-image:url('Images2/Content/contentBottom.gif');"></div>
</div>
</div>
</div>
</div>
<div style="background-image:url('Images2/Content/WrapBottom.gif');width:1210px;height:15px;background-repeat:no-repeat;" ></div>
</form>
</body>
</html>
On quick look, it may be caused by the fact that you've got floated divs inside the wrapper which means they'll gladly float outside of it.
As a quick hack, add this as the last element inside your wrapper:
<div style="clear: both"></<div>
If that solves it, you can add a cleaner "clear: both" solution into your CSS.
You're probably looking for max-width or max-height, and for problems like this, you may want to take a look at overflow settings.
Also, FWIW, This code is going to be very hard for you to maintain if you continue to keep the CSS inline. You should be using classes and IDs with an external CSS file. That way, you can quickly change your entire site's design - plus the information only has to be loaded & cached once by the client browser.