I would like to evenly space the 3 links ('About', 'Hours', 'Contact') within the containing 'banLinks' div. I do not want to use a list of any kind.
I would like each link to be evenly spaced, taking up 1/3 of their container. I am very new to HTML and CSS and I'm not sure how to do this.
I think one way of doing it may be by dividing the width of the div container in pixels by 3, account for the font size, then set the margins somehow around this figure. But to me this seems a bit unseemly, I'n not sure if this is the done thing.
<body>
<div id="wrapper">
<div class="bruceBanner">
<a href="#">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
<nav>
<div class="banLinks">
<a id="about" href="#">About</a>
<a id="hours" href="#">Hours</a>
<a id="contact" href="#">Contact</a>
</div> </nav>
</div><!-- .wrapper-->
</body>
CSS:
#wrapper {
}
.bruceBanner img {
border: 2px solid black;
height: 172px;
width: 553px;
display: block;
margin: 0 auto;
}
.banLinks {
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
}
#about, #hours, #contact {
font-size: 20px;
border: 2px solid blue;
}
Here is a jsfiddle. https://jsfiddle.net/yuy84gmq/6/
you can do this using flexbox. Do as followed:
.banLinks {
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
display: flex;
justify-content: space-around; //or space-between whatever you like best
}
JSfiddle: https://jsfiddle.net/yuy84gmq/10/
flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Add this to style:
.banLinks {
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
padding: 0;
}
.banLinks a{
width: calc(33% - 4px);
display: inline-block;
margin: 0;
}
Use a display table
.banLinks {
display:table;
table-layout:fixed;
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
}
.banLinks a {
display:table-cell;
}
Here is the fiddle: https://jsfiddle.net/yuy84gmq/8/
A couple of options here...both of which work regardless of the number of list items...assuming there is enough width.
Display:Table-cell
.banLinks {
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
display: table;
}
.banLinks a {
display: table-cell;
border: 1px solid grey
}
<div class="banLinks">
<a id="about" href="#">About</a>
<a id="hours" href="#">Hours</a>
<a id="contact" href="#">Contact</a>
</div>
Flexbox
.banLinks {
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
display: flex;
}
.banLinks a {
flex: 1;
border: 1px solid grey
}
<div class="banLinks">
<a id="about" href="#">About</a>
<a id="hours" href="#">Hours</a>
<a id="contact" href="#">Contact</a>
</div>
Instead of usual a links, put them into a list, and set the list to be inline. Then you can apply margin to the list items to space them out.
HTML
<nav>
<ul class="banLinks">
<li><a id="about" href="#">About</a></li>
<li><a id="hours" href="#">Hours</a></li>
<li><a id="contact" href="#">Contact</a></li>
</ul>
</nav>
CSS
.banLinks li { display:inline-block;margin:0 10px;} /* Adjust left/right margin as appropriate */
Related
I am new to css grid and I just understood how exactly positioning the grid elements works. What I don't understand is how to put an item that's resizing inside this grid element.
I will explain it this way:
This is my site's layout
and this is my code:
<div class="container">
<div class="header">Header</div>
<div class="content1">Content1</div>
<div class="content2">Content2</div>
<div class="footer">footer</div>
</div>
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 80px 1fr 1fr 120px;
gap: 10px;
padding: 10px;
box-sizing: border-box;
}
.container div {
padding: 10px;
border: 1px solid #000000;
}
.header {
grid-column: 1 / 5;
}
.content1 {
row-gap: 200px;
grid-column: 1 / 5;
grid-row: 2 / 3;
}
So now what I would love to do is in that header box an actual navigation menu but I want somehow to be only inside this box and resize automatically when I change the size of that box. Right now this is what I have done:
2nd picture
code:
<div class="header">
<nav>
<ul>
<li> <a text-white asp-area="" asp-page="/main">Home</a></li>
<li><a text-white asp-area="" asp-page="/pc">Games</a>
<ul>
<li><a text-white asp-area="" asp-page="/pc">PC</a></li>
<li><a text-white asp-area="" asp-page="/xbox">XBOX</a></li>
<li><a text-white asp-area="" asp-page="/ps">PS</a></li>
</ul>
</li>
<li><a text-white asp-area="" asp-page="/devices">Devices</a></li>
<li><a text-white asp-area="" asp-page="/pcparts">PC Parts</a></li>
</ul>
</nav>
</div>
.header {
grid-column: 1 / 5;
}
nav p {
float: left;
color: white;
font-size: 20px;
line-height: 40px;
}
nav ul {
float: left;
background-color: #222;
z-index: 998;
}
nav ul li {
float: left;
list-style: none;
padding: 0px 15.50px;
}
nav ul li a {
display: block;
font-family: arial;
background-color: #222;
color: #fff;
font-size: 16px;
padding: 26px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: #222;
outline-color: #f92525;
padding: 0px 2px;
padding-left: 0vh;
left: 2px;
width: 35px;
border-radius: repeat (5, 4px);
}
and this is so wrong that I don't really have an idea how it should be. I am sorry if this question exists but I tried to find a solution and I could not resolve the problem with anything I got from the Internet, nor understood how it should be.
Some general tips:
Don't define your site layout using both grid template rows and grid template columns.
Instead: If you have Sidebar, use grid-template-columns, if you have stacked content (like you), just use display:grid; This will force the content to stack ontop of each other.
Don't define static heights for your header and footer
Instead: Work with the spacing of the elements inside (margin and padding) to make your container responsive.
Get familiar with Flexbox and Grid a bit more to easily get started modelling your site, for example spacing out your menu items and much more.
Resources:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
Here is an example of those tricks:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 1rem;
}
.main {
display: grid;
}
.nav, .content {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid black;
}
.nav {
padding: 2rem;
}
.content {
padding: 5rem;
}
<div id="main">
<header class="nav">Header</header>
<div class="content">Content 1</div>
<div class="content">Content 1</div>
<footer class="nav">Footer</footer>
</div>
I'm trying to use angular to create list of elements. The page will be an app on mobile phone.
The list itself can have many elements so what I expect is that the ul element should be scrollable ("swipable"?). I tried to follow some example like http://jsfiddle.net/sirrocco/9z48t/ and http://jsfiddle.net/qcv5Q/1/..
This is the html code:
<div class="container">
<div id="spinner-icon" style="display:none">
<span class = "icon-spinner"></span>
</div>
<div class="col-xs-12 indentation push-down bg-white" ng-repeat="cei in completeElementInfo">
<div class="clearfix">
<div class="pull-left">
<h4>{{cei.description}}</h4>
<p>{{cei.name}}</p>
</div>
</div>
<div class="log-widget-list">
<ul class="list scroller clearfix" id="elements-list">
<li class="pull-left" ng-repeat="tinfo in cei.techInfo | orderBy: 'tinfo.sentTime'">
<h4 class="align-center">{{tinfo.elementShortCode}}</h4>
<div class="clearfix">
<span class="icon-clock pull-left"></span>
<span class="pull-right"> {{tinfo.sentTime}}min</span>
</div>
</li>
</ul>
</div>
</div>
</div>
and this is the css code:
.list {
margin: 0;
padding: 0;
}
.log-widget-list {
height:100px;
width: 720px;
overflow: hidden;
}
.log-widget-list .scroller{
overflow-x: scroll;
list-style-type: none;
width: 1500px; /* combined width of all LI's */
}
#elements-list li {
width: 100px;
list-style: none;
box-sizing: border-box;
border-top: none!important;
background-color: #0accf8;
padding: 4px;
}
#elements-list li:not(:last-of-type) {
border-right: 3px solid #ffffff;
}
#elements-list [class^="icon-"], #elements-list [class*=" icon-"] {
margin-top: 4px;
font-size: 12px;
}
Now the problem is that i don't want that the horizontal scrollbar appears, but it appears and i don't understand why... Any idea?
add overflow:hidden in #wrapper css.
CSS:
#wrapper {
background: transparent;
width: 550px;
color: white;
height:100%;
overflow:hidden;
}
Demo: http://jsfiddle.net/lotusgodkk/9z48t/5/
DEMO
http://jsfiddle.net/FTUrF/6/
Changed some CSS here:
.log-widget-list {
width: 200px;
height: 300px;
border: 1px solid #000;
overflow: hidden;
}
.log-widget-list .scroller {
width: 215px;
height: 300px;
overflow: scroll;
padding-bottom: 15px;
list-style-type: none;
}
Added height and padding-bottom in .scroller and border in .log-widget-list
and added some more of these:
<span class="pull-right"> {{tinfo.sentTime}}min</span>
<div class="nav">
<ul class="nav">
<a class="nav" href="#">
<li class="nav">item1</li>
</a>
<a class="nav" href="#">
<li class="nav">item2</li>
</a>
<a class="nav" href="#">
<li class="nav">item3</li>
</a>
</ul>
<div class="line"></div>
</div>
This is my HTML navbar
CSS:
ul.nav {
display: inline-block;
font-size: 0;
}
li.nav {
display:inline-block;
border-bottom: 2px solid gray;
padding: 15px 20px;
text-align: center;
font-size: 16px;
}
div.nav {
width: 100%;
display: inline-block;
}
How do I style the div.line so it is exactly next to the list (right), fills the rest of the page (width) and has the same height as the ul.nav/div.nav?
Thanks,
First of all, sorry about the english level!
You can do something like:
.line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: gray;
}
e.g: http://jsfiddle.net/X8fE4/
That's basically turn the div.line into an absolute alement behind your navigation. It will have the width of the parent div.nav, it's not a beautiful solution, but is well supported :)
this might help you:
preview: http://jsfiddle.net/webcarvers/7uZgW/3/embedded/result/
code: http://jsfiddle.net/webcarvers/7uZgW/3/
JS:
$(document).ready(function(){
$("div.two").css({
//-2 is for border width
"width": ($(window).width() - $("div.nav").outerWidth() - 2) + "px",
"height": ($("div.nav").height()-2) + "px"
});
});
div.nav {
display: flex;
display: ms-flex;
display: -webkit-flex;
{
Edit: You also need to add the property flex-grow to .line.
.line {
flex-grow: 1;
}
http://jsfiddle.net/eWHnU/
I have a few work thumbnail divs in a container When I hover over one specific one, it shifts the ones after it along the next row. How can I resolve this?
HTML:
<div class="blog-container">
<h1>PRINT</h1>
<div class="work_thumbs">
<li class="print">
<div><img src="../Images/Tree Top News/Thumbs/TTN2.jpg" alt="Tree Top" border="0" class="thumb">TREE TOP NEWS</div>
</li>
<li class="print">
<div><img src="../Images/Harrow Council/Thumbs/Harrow Logo.jpg" alt="Harrow Council" border="0" class="thumb">HARROW COUNCIL</div>
</li>
<li class="print">
<div><img src="../Images/Regent/Thumbs/Regent logo.jpg" alt="Regent Care" border="0" class="thumb">REGENT CARE SERVICES</div>
</li>
<li class="print">
<div><img src="../Images/NLCS/Thumbs/NLCS logo.jpg" alt="NLCS" border="0" class="thumb">NLCS</div>
</li>
<li class="print">
<div><img src="../Images/Aish/Thumbs/AHC.jpg" alt="Aish" border="0" class="thumb"> AISH</div>
</li>
<li class="print">
<div><img src="../Images/FJL/Thumbs/FJL.jpg" alt="chicago graphic design" border="0" class="thumb">FJL</div>
</li>
<li class="print">
<div><img src="../Images/Tree Top News/Thumbs/TTN.png" alt="Canons high school" border="0" class="thumb">CANONS HIGH SCHOOL</div>
</li>
</div>
</div>
CSS:
.blog-container {
height: 100%;
width: 100%;
margin-top: 37px;
background-color:
}
.work_thumbs {
width:1000px;
margin: 0px auto 0 auto;
float: left;
}
.work_thumbs li {
margin: 0px 15px 15px 0px;
list-style-type: none;
display: block;
float: left;
display: inline;
font-family: "geogtq md";
color: #FFF;
overflow: hidden;
}
.work_thumbs li a {
float: inherit;
display: block;
width: 230px;
padding-bottom: 50px;
font-family: "geogtq md";
color: #00BDE5;
height: 200px;
border: 1px solid #02BDE5;
overflow: hidden;
}
.work_thumbs li .type {
color: #01BDE6;
}
.work_thumbs li a:hover {
background-color: #ceeef6;
border-bottom: 1px solid #a2a2a2;
text-decoration: none;
margin-bottom: -1px;
color: #007789;
font-family: "geogtq md";
}
.work_thumbs li .thumb {
margin-bottom: 15px;
display:block
}
element:hover{url('pathToImg.png'); position:relative; z-index:1;}
Make z-index:1 a higher index to suit your needs, and include a height and width as well.
You are changing the dimensions of your divs upon hover, by adding the negative margin-bottom. this causes your floating divs to 'hook' upon hover, in stead of starting at the left.
Here you can see it in action: http://jsfiddle.net/P8xEN/
How do i put a border on a div in css that doesn't have a set height?
Want to achieve this without using any javascript. Code is below.
HTML
<div id="main_container">
<div id="header">
<div id="topMenu">
<ul id="topNav">
<li>Home</li><li>Contact</li><li>Links</li>
</ul>
</div>
<div id="mainMenu">
<ul id="mainNav">
<li >Home</li><li >About Us</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li>
</ul>
</div>
</div>
</div>
css
body{
text-align:center;
min-width:70%;
}
#main_container{
position:relative;
width:980px;
margin:auto;
text-align:center;
background-color:#FFFFFF;
border-color: #999999;
border-style: solid ;
border-width: 1px ;
margin-bottom: 20px;
}
#header{
position: relative;
width: 980px;
}
#mainMenu{
float:left;
width: 980px;
top: 50px;
background-color: #0099FF;
height: 30px;
}
#mainNav{
text-align: left;
}
ul#mainNav li{
display: inline;
margin: 0px 20px 0px 0px;
}
#topMenu{
width: 150px;
top: 10px;
text-align: right;
float:right;
margin-bottom: 20px;
}
ul#topNav li{
display: inline;
margin: 0px 10px 0px 0px;
}
#footer{}
Thanks in advance.
Does it work?
<div style="border:1px solid #000">
Your content here
</div>
It doesn't matter if there is no height attribute. Just use the border property as you normally would.
Edit: since you mention you have other divs inside your container div, I suspect you might need to use a clear. If you're still having issues with either the background or border not extending the length of the container, try adding this right before the closing div of the container:
<div style="clear:both"></div>
Just give the div some padding or content inside.
div {
border: solid 1px #000;
padding: 10px;
}