How to center hgroup, I want "welcome to sweet spirals" and "happiness in every bite" centered. The problem occurs when you open the page to full size, it doesnt center please help. heres the http://jsfiddle.net/yotzincastrejon/huco2sek/
<!DOCTYPE html>
<html lang="en">
<head>
<meta chartset="utf-8">
<title>Sweet Spirals</title>
<link href="sweetstyle.css" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="row">
Sweet Spirals
<div class="header-right">
<nav class="header-nav">
Home
Shop
About Us
FAQ
Search
</nav>
<form method="get" accept-charset="UTF-8" action="/search" id="search" class="header-search">
<input type="search" name="q" placeholder="Search terms…">
</form>
</div>
</div>
</header>
<div class="content">
<div class="row">
<section class="main">
<hgroup class="heading home-heading" id="heading">
<h1 class="major" id="major">Welcome to Sweet Spirals</h1>
<h2 class="minor" id="minor">Happiness In Every Bite</h2>
</hgroup>
<aside class="aside">
<div class="subscribe">
Like
</div>
<figure class="crackers2">
<img src="https://farm6.staticflickr.com/5655/22900680453_242b39b6d6_k.jpg" alt="missing" height="100%" width="100%" />
<figcaption>Peppermint Thins</figcaption>
</figure>
<div id="pepthinsbutton">
<script src="https://gumroad.com/js/gumroad.js"></script>
<a class="gumroad-button" href="https://gum.co/Peppermintthins" target="_blank">Buy my product</a>
</div>
<figure class="crackers1">
<img src="https://farm1.staticflickr.com/773/22899649574_e49e0b6316_k.jpg" alt="missing" height="100%" width="100%" />
<figcaption>Chocolate Licorice</figcaption>
</figure>
<div id="licoricebutton">
<script src="https://gumroad.com/js/gumroad.js"></script>
<a class="gumroad-button" href="https://gum.co/Tlut" target="_blank">Buy my product</a>
</div>
</body>
</html>
look at the fiddle for the css
its centered in the demo i forked from you and linked below; a few things:
a) hgroup is deprecated, you shouldn't be using it because it'll surely screw up the document outline that a user requires for their at software to run correctly.
b) section.row was set to a wonky width, around 500px...so i changed that to 100% with an important to override whatever was conflicting with it:
.main{width:100% !important}
http://jsfiddle.net/jalbertbowdenii/bz82g8fe/7/
Look for this part in your css:
.main {
float: left; /* Remove this line */
width: 36.25em; /* Remove this line */
margin: 2em 0 2.5em
}
Related
This is the image that im trying to center, ive tryed different ways to do this but to no success i think its to do with bootstrap pre determining the position and if so i dont know how to disable it can anyone help me with this issue many thanks.
<div class="container">
<div class="row">
<div class="col-md-5">
<!-- <img src="../images/4uSupportLogo.png" class="" height="250px"/> -->
<br> </br>
<!-- <img src="../images/4uSupportLogo.png" alt="Logo" align="top" width="300" height="200" </br> -->
<!-- <img src="../images/4uSupportLogo.png" width="300" height="200" style="display:block; margin-left:auto;
margin-right: auto;" align="center" /> -->
<center> <img src="../images/4uSupportLogo.png" class="img-responsive" width="300" height="200"> </center>
<br> </br>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class=" col-md-12 well text-center">
<h4><i><strong>The Username or Password is incorrect please try again.</strong></i></h4>
<p>
If you have forgot your password and would like to reset it please contact Jack </p>
<input type="button"
value="Request New Password"
onclick="location='../forgot_password/forgot.php'" />
</div>
</div>
</div>
It looks like that the row is just positioning the image wrongly.. <center><img></center> should work fine.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Image</h2>
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<center><img src="https://media.giphy.com/media/l0HlSYVgZLQ1Y4GdO/giphy.gif" class="img-responsive" alt="Cinque Terre" width="304" height="236"></center><br><br>
<img src="https://media.giphy.com/media/l0HlSYVgZLQ1Y4GdO/giphy.gif" class="img-responsive" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>
Source
The img-responsive isn't doing anything to fix it left. Content flows left to right normally, so it's positioned normally. You can center it by adding text-align: center; on its parent element or by adding some rules directly to the image. This is better done on a class, but here's an example:
img {
display: block;
margin: 0 auto;
}
http://codepen.io/paulcredmond/pen/RGOKwr
I am centering an image using bootstrap's center-block class.
<section class="container">
<a href="www.apple.com">
<img class="center-block" src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;"/>
</a>
</section>
The only problem is that the links spans the width of the container. How do I restrict the URL to the image?
Working JSFIDDLE
You have to add a container for your image and link to sit inside besides just a section tag. In This way you don't have to modify the container class and you introduce a div to organize and style as you wish. Here is the working code:
<section class="container">
<div style="width:150px;margin-left:auto;margin-right:auto;">
<a class="center-block"href="www.apple.com">
<img class="center-block" src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;"/>
</a>
</div>
</section>
Try wrapping another element around your <a> and <img> tags and explicitly centering it via text-align: center; or Bootstrap's text-center class :
<section class="container">
<!-- You can use Bootstrap's text-center class a style="text-align: center;" here -->
<div class='center-block text-center'>
<a href="www.apple.com">
<img src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;"/>
</a>
</div>
</section>
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Centered Apple Logo</title>
</head>
<body>
<section class="container">
<div class='center-block text-center'>
<a href="www.apple.com">
<img src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;" />
</a>
</div>
</section>
</body>
</html>
The link is an inline element so just use text-center on the container instead..
<section class="container text-center">
<a href="//www.apple.com">
<img class="center-block" src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;"/>
</a>
</section>
http://codeply.com/go/bLOmNY1pQZ
If you're referring to the link, as in hovering over any section of the .container will activate the link, rather than just the image, here's the solution:
.container {
text-align: center;
}
.container a {
display: inline-block;
}
This basically gives the link its own dimensions, so it doesn't stretch to fill the parent.
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;
}
}
The solution has been found. The code is below. Thank you to everyone who helped.
The Solution was to clear the float, the code below fixed it for me.
.div#content:after {
content:"";
display:table;
clear:both;
}
Thanks Again.
Original Question
I have 2 Divs, one being "Content" where all the content of my site is in. And another div named "updates". I want the div "content" to resize its height so that all the divs inside of it and fit.
Here's an image explaining my problem easier Imgur Link, Not high enough rep to post image directly.
Here's my full source code (html) (along with the css of content div and updates div.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>MCSocial</title>
<script type="text/javascript" src="src/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="src/jquery.tinycircleslider.js"></script>
</head>
<body>
<div id="container">
<div id="content">
<nav>
<ul class="nav">
<li class="left">MCFish</li>
<li>Home</li>
<li>News</li>
<li>Members</li>
<li>Media</li>
</ul>
</nav>
<a href="#"><div id="block">
<img src="img/mojang.jpg" height="200px" width="850px">
</div></a>
<a href="#"><div id="block">
<img src="img/minecraft.jpg" height="200px" width="850px">
</div></a>
<div id="updates">
<img src="img/update.png" height="48px" width="140px">
<!--post updates here-->
<h3 class="sub-title">Update 1.5</h3>
<p class="list">Added a new homepage! More simple to navigate! Enjoy!<br>Please send me some feedback here!</p>
<h3 class="sub-title">Update 1.4</h3>
<p class="list">Cleaned up code!</a></p>
<h3 class="sub-title">Update 1.3</h3>
<p class="list">Added new themes! Check them out!</a></p>
<h3 class="sub-title">Update 1.2</h3>
<p class="list">Renamed Site: from MinecraftFishing to MCFish!</a></p>
<h3 class="sub-title">Update 1.0</h3>
<p class="list">Site goes LIVE!</p>
<!--end post updates-->
</div>
<div id="twitter">
<img src="img/twitter.png" height="48px" width="140px"><br><br>
<a class="twitter-timeline" href="https://twitter.com/FluffyRabbitzZ" data-widget-id="544642022154723328">Tweets by #FluffyRabbitzZ</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div id="footer">
<p>©2014. MCSocial. All Rights Reserved.</p>
</div>
</div>
</div>
</body>
</html>
and the CSS;
div#content {
width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
height: auto;
border-radius: 2px;
min-height: 100%;
position: relative;
}
div#updates {
float: left;
margin-left: 2.6%;
}
Thanks for any help.
You should clear the float.
Add overflow CSS property (for example :auto) to the div#content.
A solution for modern browsers :
.div#content:after {
content:"";
display:table;
clear:both;
}
You have to clear the floating content:
<div style="clear:both"></div>
before closing yout div.content.
I'm trying to display a image as the background in my header, but nothing seems to happen.
This my css code where I set the specs of my image(500 * 2000):
header{
background-image: url(../images/banner2.png);
background-repeat: no-repeat;
margin: 0 auto;
max-height:100px;
width: 100%;
}
And this is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<link rel="stylesheet" href="../css/main.css" />
</head>
<body id = "contact">
<header></header>
<div id="page">
<div id="logo">
<h1>Baby kleding online</h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Kleding</li>
<li><a class="inuse" href="../html/contact.html"id="contactnav">Contact</a> </li>
<li>Vragen</li>
</ul>
</div>
<div class="content">
<h2>Contact</h2>
</div>
<div class="Images">
<b target="_blank" href="kleding.htm">
<img src="../images/logo.PNG" alt="Boy1" width="300" height="140">
</b>
</div>
</div>
</body>
</html>
In order to fix your problem you have to assign a height to your header.
This can be done by using the height: [Amount of pixels]px;
Or you can add something in between the <header></header> tags that will make the header show.