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
Related
I can't get the .center class to apply to the following HTML. It gets applied to the ul element for some reason, but nothing else. Am I applying it wrong? Does it have something to do with IDs? I thought adding a class to a div would apply it to all elements within.
.center {
text-align: center;
}
ul {
list-style: none; /* getting rid of bullet pts */
padding: 0; /* practice to remove padding so we can set it later */
}
img {
display: inline;
width: 200px; /* we set in % or vh(view height) for responsive */
height: 100px; /* design - changes with page size (phones tablets etc) */
}
#footer {
width: 100%;
border-top: solid 2px black;
background-color: white;
position: fixed;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Guessing Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Bootstrap and CSS here-->
</head>
<body>
<div id='app' class='center'>
<div id='headers'>
<!-- Title and subtitles! -->
<h1 id='title' class='center'> Rav's Cheesy Guessing Game! </h1>
<h2 id='subtitle'> Guess A Number Between 1-100, You Won't </h2>
</div>
<div id='main'>
<div id='input-parent'>
<!-- Player's guess input, and submit button -->
<input id='player-input' class='center' placeholder="#" autofocus maxlength=2>
<button id='submit-button' type=submit>Go!</button>
</div>
<div id='guesses'>
<ul id='guess-list'>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
</ul>
<!-- unordered list of guesses -->
</div>
<div id="menu-btns">
<!-- reset and hint buttons -->
<button id='reset'>Reset</button>
<button id='hint'>Hint</button>
</div>
</div>
</div>
<div id='footer' class='center'>
<div>
<div class=''>
<img src='fa-logo#2x.png' alt="image">
</div>
<div class=''>
<h4>Project by Ravish Rawal</h4>
</div>
<div class=''>
<img src='grace_hopper_academy.png' alt="image">
</div>
</div>
</div>
</body>
</html>
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.
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.
Everything was perfect, until I changed a width. Instead of wrapping to a new line like normal when it gets to the div boundary, it extrudes from the box. The line length is the same as it was BEFORE I changed the div width. The line width not change to accommodate the change in div width as one would expect.
Page in question
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to TF2Shop</title>
<!-- Main Stylesheet -->
<link rel="stylesheet" type="text/css" href="../main.css" />
<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css" />
<!-- Icomoon -->
<link rel="stylesheet" type="text/css" href="../icomooncss/style.css" />
</head>
<body>
<div class="navbar navbar-inverse navbar-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">TF2 Shop</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home</li>
<li>Bank</li>
<li class="active">About</li>
<li><i class="icon-envelope" style="margin-right: 4px;"></i>Contact</li>
<li><i class="icon-heart" style="margin-right: 4px;"></i>Donate</li>
</ul>
</div><!--/.nav-collapse -->
<div style="float: right; margin-top: 8px;"><img src="../images/steam.png" /></div>
</div>
</div>
</div>
<div id="wrapper" style="height: 600px">
<div id="main-container">
<div id="about-section">
<ul>
<h1 style="text-decoration: underline; padding-top: 50px;">About</h1>
<li style="margin-bottom: 100px;">TF2bank was created by Josh Osborne, who is also the creator of Viddir.com. TF2 was the very first game he played on Steam and will always have a special place in his heart.</li>
<h1 style="text-decoration: underline;">Technology</h1>
<li style="margin-bottom: 100px;">TF2bank was built using HTML and CSS. SteamBot, written by Jesse Cardone is the base engine for the trade bots.</li>
<h1 style="text-decoration: underline;">Special Thanks</h1>
<li>Special thanks goes to Jesse Cardone, creator of SteamBot. Special thanks also goes to Valve for creating TF2 and Steam. And of course special thanks does to Slender Man from the StrangeBank for first
helping me code my first buds bot script and was patient and helpful the whole time!</li>
</ul>
</div>
</div>
</div>
<div id="footer">
<div id="copyright">© TF2Shop 2013</div>
<!-- <div id="info">A Slender Mann and Whizzard of Oz Collaboration</div> -->
<div style="color: #2f3034; height: 135px; width: 320px; padding-top: 30px; margin: 0 auto; font-family: 'Oswald', sans-serif; text-transform: uppercase; text-align: center;">
<div style="">
<h1 style="font-size: 57px; margin-top: -24px; padding-top: 3px; font-weight: bold; line-height: 56px;"><span style="font-size: 29px">Powered by</span><br /><span style="color: #313131; margin-left: -4px;">Steam</span></h1>
</div>
</div>
</div>
</body>
</html>
Your main-container is larger than your wrapper div.
#main-container {
width:1100px;
...
}
#wrapper {
width:1050px;
...
}
Your problem is that you've set the #wrapper div to 1050px and its child div main-container to 1100px.
If you want your wrapper div to be the same width as your container div just use this:
#wrapper {
width: 100%;
}
Now you can change the main container div without having to update the wrapper.
Your #wrapper has a CSS width of 1050px.
Your #main-container has a CSS width of 100px.
Thus the main-container div extends beyond the #wrapper div.
Either adjust the CSS width of #main-container, or clip the overflow by adding overflow: hiddenor overflow: scroll to #wrapper.
I made this website (http://aghicks.co.uk/) using Dreamweaver and tables and I'm now learning Bootstrap. I have a few things I can't quite sort out.
So far I have this
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/stylesheet.css" rel"stylesheet" type="text/css">
<style type="text/css">
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
max-width: 1000px;
border: 1px solid black;
background:#EAEAEA;
margin: auto;
padding-top: 66px;
}
.redtext {
color: #b83535;
}
a {
color: #333;
}
a:hover {
color: #b83535;
text-decoration: none;
}
.align_right {
text-align: right;
}
.logo {
min-width: 286px;
}
span {
font-weight: 300;
}
.navbar {
padding-top: 34px;
}
.centered {
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
h4 {
font-size: 16px;
}
/* Homepage */
/* Footer */
.footer_wrapper {
max-height: 70px;
}
.footer {
background-color: #999999;
}
.footer_text {
color: #FFF;
font-size: 10px;
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGHicks Homepage</title>
</head>
<body>
<div class="container-fluid">
<!-- Header -->
<div class="row-fluid">
<div class="span5 logo">
<img src="images/Logo.png" class="logo">
</div>
<div class="span4 offset3">
<img src="images/Phone_icon.png" class="pull-left">
<h4 class="pull-right align_right">Northampton <span>01604786464</span><br><br>Mobile <span>07710537685</span></h4>
</div>
</div>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home</li>
<li>Gallery</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="row-fluid">
<div class="span6">
<img src="images/Homepage/Small_one_off_jobs.png" >
</div>
<div class="span6">
<div class="row-fluid">
<div class="span12">
<h5>Welcome to AGHicks Building Services website! We are a Northampton based, family run company with over 20 years experience. Hardwork, efficiency and reliability are instilled throughout the workforce and we have gained a strong reputation through word of mouth.</h5>
</div>
</div>
<div class"row-fluid">
<div class="span12">
<img src="images/Homepage/Map_pin.png" >
<h5 class="redtext">Northampton Based</h5>
<img src="images/Homepage/Quote.png" >
<h5 class="redtext">Free Quotes</h5>
<img src="images/Homepage/Tools.png" >
<h5 class="redtext">No Job Too Small</h5>
<img src="images/Homepage/Piggybank.png" >
<h5 class="redtext">Competitive Prices</h5>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h5 class="redtext centered">OUR SERVICES INCLUDE</h5>
</div>
</div>
<div class="row-fluid">
<div class="span5">
<ul>
<li><strong>Conservatories</strong></li>
<li><strong>Extensions</strong></li>
<li><strong>Window & Door Refits</strong></li>
<li><strong>Bricklaying</strong></li>
<li><strong>Driveways</strong></li>
<li><strong>Carpentry</strong></li>
<li><strong>Patios</strong></li>
<li><strong>Stonework</strong></li>
</ul>
</div>
<div class="span6 offset1">
<ul>
<li><strong>Plastering</strong></li>
<li><strong>Kitchen & Bathroom Refits</strong></li>
<li><strong>Tiling</strong></li>
<li><strong>Fencing</strong></li>
<li><strong>Fascias</strong></li>
<li><strong>Garages & Carports</strong></li>
<li><strong>Guttering</strong></li>
</ul>
</div>
</div>
</div>
<!-- Footer -->
<div class="row-fluid footer_wrapper">
<div class="span12">
<div class="row-fluid footer">
<div class="span5">
<p class="footer_text"><strong>Copyright © AGHicks Building Services 2012 - All rights reserved.<br>Registered Address - 19 Bentley Close, Rectory Farm, Northampton, NN3 5JS.</strong></p>
</div>
<div class="span4 offset3 align_right">
<p class="footer_text"><strong>Web Design Services and SEO from Ben Mildren</strong></p>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The issues I'm having can be seen is in these pictures http://imgur.com/jdSAKEk,CbbVrv7#0
(The border around the body will be removed and the styling of the navbar will be changed)
In the first image (desktop size),you'll see that the phone numbers icon doesn't line up next to the actual numbers and both the icon and the text aren't aligned with the bottom of the logo. I can achieve this by using padding, but then when you reduce the width of the browser the padding remains and causes huge gaps in the page.
Second issue in the first image is that I cannot get those icons and red text in the middle right area to appear in a 'grid' formation like on www.aghicks.co.uk is currently.
Lastly, On the second image, when the browser width is reduced the two lists down appear in line with each other when there is clearly enough space.
Any help with any of the problems would be appreciated.
How do you want to align your huge phone icon and the 2 lines of text and numbers? First on desktop and then on tablet?
Vertical aligning is a job for display: table-something; vertical-align: bottom;.
Grid formation: I'd go with a list of 4 items, items would be fixed width (50% or 49%), displayed as inline-block (or floating into a .clearfix container).
Second image and lists not side by side: well, which CSS are applied at this width? Check rules into relevant media query. Maybe they're displayed as inline-block with a width of 50%? Then there's STILL a whitespace of approx. 4px. A width of 45% would automagically solve the problem (don't forget to add a .clearfix container otherwise content would spill into the remaining (10%-4px) left space...)