In my footer I have breadcrumb list and under that is some text.
My question then is how to set the padding between the breadcrumb list and the Copyright paragraph.
I solved this using <br> tag, but I think it's not semantically correct.
I tried with padding-top but without success.
.col-xs-12 .breadcrumb{
background-color: #2b2b2b;
}
.breadcrumb > li + li:before {
content: none;
}
.breadcrumb li a {
color: white;
font-family: TW Cen MT;
font-size:17px;
}
.container-fluid p{
bottom: 0;
position: absolute;
margin-left: 34em;
}
<div class="container-fluid footer">
<div class="row">
<div class="col-xs-12">
<img src="img/Gallery/fb.png" alt="">  
<img src="img/Gallery/twitter.png" alt="">  
<img src="img/Gallery/youtube.png" alt="">  
<img src="img/Gallery/myspace.png" alt="">
<ol class="breadcrumb">
<li><a class="active">Home</a></li>  
<li>Gallery</li>  
<li> FAQ</li>  
<li> Contact</li>
</ol>
<p><small>Copyright <span class="glyphicon glyphicon-copyright-mark"></span> All Right Reserved | Testing Website </small></p>
</div>
</div>
Set a margin-bottom to the ordered list, like so:
.breadcrumb {
margin-bottom: 50px;
}
Your paragraph is positionned in absolute, it's out the flow.
1st solution
Remove absolute positionning.
2nd solution
Add a padding-bottom in your list.
The size of padding correspond to the height of the paragraph and the margin you want.
Like so:
.breadcrumb {
padding-bottom: 50px; // 20px height paragraph, 30px height margin
}
The solution is to add a margin-bottom:; to the list (.breadcrumb), and please remove the properties
.container-fluid p{
bottom: 0;
position: absolute;
margin-left: 34em;
}
you won't need them anymore.
Related
I'm writing the CSS for my site. I have text that I am putting on top of my background image. My HTML and CSS is below:
HTML
<header class="site-header">
<div class="site-header__menu-icon">
<div class="site-header__menu-icon__middle"></div>
</div>
<div class="site-header__menu-content">
<div class="site-header__btn-container">
Request A Demo
</div>
<nav class="primary-nav primary-nav--pull-right">
<ul>
<li>Home</li>
<li>Services</li>
<li>Why Us</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="section">
<picture>
<img src="assets\images\pepper.jpg">
</picture>
<div>
<div class="section__text-content">
<h1 class="section__title">Company</h1>
<h3 class="section__sub-title">Company Slogan</h3>
<div class="btn-container">
<a class="btn" href="#">Talk To A Specialist</a>
<a class ="btn btn__white btn__pepper-white" href="#">Get A Quote</a>
</div>
</div>
</div>
</div>
CSS
.section {
position: relative;
max-width: 100%;
&__text-content {
position: absolute;
top: 30%;
width: 100%;
margin-left:
}
&__title {
font-size: 7rem;
font-weight: 300;
color: #ffffff;
margin-bottom: 0;
}
&__sub-title {
font-size: 2.5rem;
font-weight: 300;
margin-top: 3%;
margin-bottom: 2%;
color: #ffffff;
}
}
The problem arises when I try to add a margin-left to the .section class in my CSS, because then a blank which space to the right of my screen appears with a horizontal scroll bar in direct proportion to the amount of margin I specified to move to the left.
I know that I could use a simple "background-image" for my css, but I'd prefer to do it this way for responsive imaging (it's how I learned to do it and I'm on a bit of a time crunch).
Any suggestions?
FIXED
My problem was I was writing my margin in relative terms by doing:
.section__text-content {
position: absolute;
margin-left: 10%
}
Which is wrong, because the &__text-content is set to position: absolute
Percentage is relative position, with an absolutely positioned image you need absolute margins (i.e. pixels)
I have a webpage with an image and a section of text which I'm trying to stack in a vertical line. I figured adding display: block; to .about div would be the appropriate way of doing this. It gives me the vertical stack that I want, but impacts the overall layout of the page. At first I thought it was pulling the header section down the page, but when I inspected the page, it seems as if this command is actually shifting the entire body section down the page. Not sure what is causing this.
<body>
<header>
<a href="index.html" id="logo"> <h1>
<div id="header_title">
Name
</div></h1> </a>
<div id="header_border"></div>
<nav id="nav">
<ul>
<li>
<a href="index.html" class="selected" >About</a>
</li>
<li>
Resume
</li>
<li class="subNav">
<a>Portfolio</a>
<ul>
<li>
Writing Samples
</li>
<li>
Photoshop
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div class="wrapper">
<div class="about_div">
<img src="img/1935323_10153090821883239_4407778661294134622_n.jpg" class="profile-photo">
</div>
<div class="about_div">
<h3 id="about_me">About Me</h3>
<p id="about_me_info">
Text
</p>
<p id="about_me_info">
More Text
</p>
</div>
<div class="push"></div>
</div>
<div class="footer">
<p>
© 2016 My Name.
</p>
</div>
</body>
And CSS:
body {
font-family: 'Playfair Display', open sans;
position: relative;
height: 100%;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding-top: 18%;
}
.about_div {
display: block;
margin-top: 50px;
}
.about_div img {
margin-left: 125px;
}
.about_div h3 {
margin-top: 50px;
margin-right: 1%;
}
.about_div p {
margin-right: 1%;
}
.profile-photo {
max-width: 350px;
border-radius: 100%; /* adds rounded corners to an element */
}
#about_me {
font-size: 2em;
}
#about_me_info {
font-size: 1.5em;
}
How header spacing should look (with inline-block)
How header spacing actually looks when applying display: block
Note that this isn't technically a problem with the header, but rather the entire body section is shifting downward in the second example.
Remove display:block from '.about_div' and add display:flex to '#wrapper'
I have a <ul> with images that I want to be displayed horizontally centred, inline but it keeps floating a little to the right and gets my window size to be a little over 100% width. Here's a FIDDLE, you might need to scroll out a little to see it.
Here's the ul:
<div class="row graybackground margin-top-60">
<section id="menuimages" class="margin-top-60">
<ul class="margin-top-60">
<li class="col-md-4 col-sm-6">
<div class="menubg" style="background-image: url({{ URL::asset('img/training/18911510_m.jpg'); }})">
<span>{{ link_to('index/#training', 'TRAINING') }}</span>
</div>
</li>
<li class="col-md-4 col-sm-6">
<div class="menubg" style="background-image: url({{ URL::asset('img/taste/20360155_m.jpg'); }})">
<span>{{ link_to('index/#eat', 'TASTE') }}</span>
</div>
</li>
<li class="col-md-4 col-sm-6">
<div class="menubg" style="background-image: url({{ URL::asset('img/relax/14824877_s.jpg'); }})">
<span>{{ link_to('index/#relax', 'RELAX') }}</span></div>
</li>
</ul>
</section>
</div>
and here the CSS:
.graybackground {
background: rgba(0,0,0,0.15);
padding: 50px;
}
.margin-top-60 {
margin-top:60px;
}
.menubg a {
margin-top:20px;
margin-left: 20px;
display: inline-block;
font-size: 1.7em;
font-weight: bold;
color: #f5f5f5;
background: rgba(0,0,0,0.5);
border-radius: 5px;
padding:2px 4px;
}
.menubg a:hover {
text-decoration: none;
}
No matter where I add margin or padding or whatever, it doesn't move and fit.
I'm using bootstrap 3.
Can someone assist?
The spilling out over 100% of the page is due to the negative margins on .row - and this is important to how bootstrap's nested grid works. Wrapping the whole thing in a .container will correct this for you (it adds padding to the outside to negate the negative margins).
As for the ul being off-center, just do a simple reset on it and its nested lis before you start adding:
http://jsfiddle.net/8b6trqgj/4/
I solved by removing left padding to the ul and adding the same rule as #Brian:
#menuimages ul {
padding-left: 0;
}
.graybackground {
background: rgba(0,0,0,0.15);
padding: 50px;
margin:0;
max-width: 100%;
}
Fiddle
Just add
max-width: 100%;
margin: 0;
to .graybackground
Fiddle
I have a footer in my webpage which nests 3 divs with twitter bootstraps span4 class. I want to have the 'Connect With Us' the same distance from the right as the 'Contact Us' header is from the left and the 'Useful Links' in the middle with all the text for each div left justified underneath.
This is what I have so far:
You can see that Contact Us is closer to the left edge than Connect With Us is from the right edge.
I have tried using text align for the headers which works however the list items below do not left align with the elements.
Here is an image which shows what it is like with the text-align on the headers. You can see that they are laid out as I want but the content below them is not left aligned with them:
Here is the HTML for the footer:
<footer class="footer">
<div class="row-fluid">
<div class="span12">
<div class="span4" id="leftFooter">
<h5><b>Contact Us</b></h5>
<ul>
<li>Tel: 01234 567897</li>
<li>E-mail: info#oom.com</li>
</ul>
</div>
<div class="span4" id="middleFooter">
<div class="middle"><h5><b>Useful Links</b></h5>
<ul>
<li>Contact Us</li>
<li>About Us</li>
<li>Copyright Information</li>
<li>Terms & Conditions</li>
</ul> </div>
</div>
<div class="span4" id="rightFooter">
<h5><b>Connect With Us</b></h5>
<ul>
<li><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px"> Facebook</li>
<li><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px"> Twitter</li>
</ul>
</div>
</div>
</div>
</footer>
Here is the CSS for the footer:
.footer {
padding: 10px;
position: relative;
color: #ccc2a0;
background-color: #333333;
height: 150px;
clear:both;
padding-top:20px;
}
.footer ul {
list-style: none;
padding: 0;
margin: 0;
}
#leftFooter {
color: #ccc2a0;
padding-left: 50px;
}
#middleFooter {
color: #ccc2a0;
/* text-align: center; */
}
#rightFooter {
padding-right: 50px;
/*text-align: right; */
color: #ccc2a0;
}
#rightFooter li {
padding-top: 5px;
}
.follow { line-height: 19px; }
Can anyone help?
Thanks
EDIT:
Here are the changes I made to the right footer:
<div class="span4" id="rightFooter">
<div class="trow"> <h5 class="tcell"><b>Connect With Us</b></h5> </div>
<ul>
<div class="trow"> <li class="tcell"><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px"> Facebook</li> </div>
<div class="trow"> <li class="tcell"><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px"> Twitter</li> </div>
</ul>
</div>
CSS:
.trow {
display: table-row;
background-color: green;
margin-right: 0;
}
.tcell {
display: table-cell;
background-color: green;
}
.trow h5 {
display: table-row;
background-color: yellow;
}
and here is what it looks like with the rows and cells coloured:
You can use display: table-cell to make the block behave as table cells, which can style further to make them the same width.
You can also float the blocks or use display: inline-block and give each block a third of the width, but when zooming you may get rounding errors that can cause the last block to jump to the next line. When the block behave like table-cells, you don't have that problem.
I renamed some of your CSS ids and removed some markup in your HTML like the b tag (not sure why you were using that). Your ampersand & should be &.
Added a couple DIVs .outer and .inner that center the contents of the second .span4 but maintain the left alignment. The main thing there is the float: left; on .outer which sets the width of .outer to it's content. You could also use display: inline-block; instead of float: left;. .outer is moved left 50% of it's container and then .inner is moved right 50% of it's container (.outer). In the end it ends up in the center of .span4.
For the third .span4 we added a DIV with the class .pull-right which is from your Twitter Bootstrap that floats things to the right. This sets everything to the right side of the third .span4 without re-aligning your text.
.footer {
padding: 10px;
position: relative;
color: #ccc2a0;
background-color: #333333;
height: 150px;
clear:both;
padding-top:20px;
}
.footer ul {
list-style: none;
padding: 0;
margin: 0;
}
#contact-us {
padding-left: 50px;
}
.outer {
position: relative;
left: 50%;
float: left;
}
.inner {
position: relative;
right: 50%;
}
#connect-with-us {
padding-right: 50px;
}
#connect-with-us li {
padding-top: 5px;
}
#connect-with-us a {
padding-left: 5px;
}
.follow {
line-height: 19px;
}
<footer class="footer">
<div class="row-fluid">
<div class="span12">
<div id="contact-us" class="span4">
<h5>Contact Us</h5>
<ul>
<li>Tel: 01234 567897</li>
<li>E-mail: info#oom.com</li>
</ul>
</div>
<div class="span4">
<div class="outer">
<div class="inner">
<h5>Useful Links</h5>
<ul>
<li>Contact Us</li>
<li>About Us</li>
<li>Copyright Information</li>
<li>Terms & Conditions</li>
</ul>
</div>
</div>
</div>
<div id="connect-with-us" class="span4">
<div class="pull-right">
<h5>Connect With Us</h5>
<ul>
<li><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px">Facebook</li>
<li><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px">Twitter</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
I've got an issue that I can't resolve.
I have a list of lists, like this one:
<ul id="nav">
<li>
<div class="tabquad">
Item 1
</div>
<ul>
<li>
<a class="item" href="index.jsp?quad=1">
<div class="tabquad">
1.1
</div>
</a>
</li>
<li>
<a class="item" href="index.jsp?quad=2">
<div class="tabquad">
1.2
</div>
</a>
</li>
<li>
<a class="item" href="index.jsp?quad=3">
<div class="tabquad">
1.3
</div>
</a>
</li>
</ul>
</li>
<li>
<div class="tabquad">
Item 2
</div>
<ul>
<li>
<a class="item" href="index.jsp?quad=7">
<div class="tabquad">
2.1
</div>
</a>
</li>
<li>
<a class="item" href="index.jsp?quad=8">
<div class="tabquad">
2.2
</div>
</a>
</li>
<li>
<a class="item" href="index.jsp?quad=9">
<div class="tabquad">
2.3
</div>
</a>
</li>
<li>
<a class="item" href="index.jsp?quad=10">
<div class="tabquad">
2.4
</div>
</a>
</li>
<li>
<a class="item" href="index.jsp?quad=11">
<div class="tabquad">
2.5
</div>
</a>
</li>
</ul>
</li>
</ul>
with this CSS:
#nav, #nav ul {
padding: 0;
margin: 0 auto;
list-style: none;
}
#nav {
width: 45em;
margin: 0 auto;
}
#nav a {
display: block;
width: 15em;
}
#nav li {
float: left;
width: 15em;
}
#nav li ul {
position: absolute;
width: 15em;
left: -500em;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
.item{
color:#0E4063;
text-decoration:none;
}
.tabquad{
color:white;
margin:auto;
position:relative;
border:1px solid #000;
border-color:rgb(82,115,154);
width:200px;
height:30px;
text-align:center;
padding-top:10px;
top:25px;
background-color:rgb(0,56,130);
}
.tabquad:hover{
background-color:rgb(49,87,132);
cursor: hand;
}
My problem is: Item 1 list and Item 2 list are not in the center of my page, they are left-oriented.
I've tried with the center parameter and with the float, without success.
Any suggestion?
You can find a fiddle here: Link
you have to set the width of the #nav to the right value (corresponding to the width of the content). change your example to the following value and the two menus will be centered on the page.
#nav {
width: 30em;
margin: 0 auto;
}
updated jsFiddle: http://jsfiddle.net/F9Wrb/17/
and just to increase cross-browser compatibility, add the following CSS to the parent node of your #nav:
body {
text-align: center;
}
You might want to read about the basics of CSS page centering and page layouts.
Normally, you'd have a "container" <div> that contains the entire page and defines the layout and boundaries of the page. You can call it anything (not necessarily container)
Now, you need to decide what layout fits you best, most commonly used layout sizes can vary anywhere between 960px to 1200px.
general styling for your container would be,
.container{
width:960px; //<-- this can be anything, based on your layout.
margin:0 auto;
}
This ensures your page is centered almost always. You would want to use some kind of a CSS Reset to ensure you reset browser defaults
Here is your solution. I have just changed these two styles. FYI, unless you are using html5, you cannot put div inside <a> tag; it's invalid.
#nav, #nav ul {
padding: 0;
margin: 0 auto;
list-style: none;
text-align:center
}
#nav li {
width: 15em;
display:inline-block;
}
Three possible solutions:
Using absolute positioning and a negative left margin:
#nav {
position: absolute;
left: 50%;
margin: 0 0 0 -15em;
}
Demo 1
Using auto margins with ul width specified:
#nav {
width: 30em;
margin: 0 auto;
}
Demo 2
If you want to use the auto-margin solution and don't want to specify the ul width, declare the LIs as display: inline-block (instead of floating them). This works because the LIs will now be in the page flow instead of out of it, as they are when floated. Answer courtesy of Kashif Raza.
#nav {
margin: 0 auto;
}
#nav > li {
display: inline-block;
width: 15em;
}
Demo 3
#nav a {
display: block;
width: 15em;
margin:auto;
}
#nav>li {
width:50% !important;
}
#nav li:hover ul {
position:relative;
left: auto;
}
Make these changes in your CSS and lists will be in the center of your page.
Just put a width on the surrounding div, then change that to margin:0 auto, which will center it in the page.
.center{
width:400px;
margin:0 auto;
}
And the html, rather than float="center"
<div class="center">
http://jsfiddle.net/F9Wrb/12/
As mentioned, there is no such thing as float="center", or for that matter, float:center;! For advanced positioning of elements, I'd recommend using a CSS framework such as zurb foundation or Gridpak.com
Put this where you want to center:
div align="center"