How do I move all the text and images slightly down to center them without moving the borders down with it?
I tried relative positioning each item but the border kept moving down and out of the height of parent container.
Here is the code (I am using an old page from the BBC website and trying to copy it to learn):
<head>
<meta charset="utf-8">
<title>Technology - BBC News </title>
<style>
body {
margin:0;
padding:0;
}
#topbar{
width:1000px;
height: 40px;
margin: 0 auto;
background-color: red;
}
#topbar-menu li {
list-style-type: none;
float:left;
border-left: 1px solid grey;
height: 40px;
padding: 0 10px 0 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="topbar">
<ul id="topbar-menu">
<li><img src="images/bbc-logo.png"></li>
<li id="signin-text">Sign in</li>
<li><img src="images/bell.png"></li>
<li>Sport</li>
<li>Weather</li>
<li>TV</li>
<li>Radio</li>
<li>CBBC</li>
<li>More</li>
<li> <input type="text" value ="Search"> </li>
</ul>
</div>
</body>
I would suggest using the line-height attribute. For example, see screenshot below.
There is no need for <div id="topbar"> because your ul will serve as the container. From there, you can set that ul to be a flex container using the Flexbox layout.
You should also reconsider using fixed sizes because they will only appear correctly on a fixed viewport size.
body {
margin:0;
padding:0;
}
#topbar-menu {
display:flex;
justify-content:center;
margin:0;
padding:0;
background:red;
text-align:center;
height: 3em; /* 300% of the inherited font size */
min-width:900px; /* never less than 900px wide regardless of viewport width */
margin: 0 auto;
background-color: red;
}
#topbar-menu li {
list-style-type: none;
border-left: 1px solid grey;
padding: 1em; /* This is what makes the content vertically align */
font-weight: bold;
}
<ul id="topbar-menu">
<li><img src="images/bbc-logo.png"></li>
<li id="signin-text">Sign in</li>
<li><img src="images/bell.png"></li>
<li>Sport</li>
<li>Weather</li>
<li>TV</li>
<li>Radio</li>
<li>CBBC</li>
<li>More</li>
<li> <input type="text" value ="Search"> </li>
</ul>
Try this. This will center align the contents vertically.
#topbar-menu li{
display: flex;
align-items: center;
}
Try line-height: 100%;
This should let the text be vertically centered
Related
I just started with CSS and HTML. I am not able to sync my div and nav tag along the same line. The problem is that my div and nav are too far away from each other. What's the error here?
/* CSS RESET */
* {
margin: 0;
padding: 0;
}
#navbar {
align-items: center;
display: flex;
}
/* Logo And Image */
#logo {
margin: 10px 20px;
}
#logo img {
margin: 0px 0px;
}
/* Navigation Bar:-List Styling */
#navbar ul {
display: flex;
}
<nav id="navbar">
<div id="logo">
<img src="top.png" alt="Image Failed To Load !" width="10%" />
</div>
<ul>
<li class="item">Home</li>
<li class="item">About Us</li>
<li class="item">Recommendations</li>
<li class="item">Contact Me</li>
</ul>
</nav>
<section class="home">
<h1 class="h-primary">
Lorem ipsum
</h1>
</section>
Remove or change this margin:
#logo {
margin: 10px 20px;
}
The 10px adds space to the top and bottom.
The 20px adds space to the left and right.
I checked and tested your code, and from what you asked i understand you want div and ul to be same line, which are located inside nav. Then you should use display:flex; for element.
Don't forget to link your css to your HTML.
<link rel="stylesheet" href="test.css">
It seems perfectly fine in my testing, div and ul at the same line
I would like to place an image on a div which I use for a navigation bar, but when I resize the image to 50px or above, the padding on the div gets bigger as well. I don't like this since the image will either be too small to see or the navigation bar will be too big to look pleasing, any ideas on how to fix this?
.navbar{
background-color:green;
padding:20px;
}
.navbar #image1{
width:40px;
margin-left:950px;
padding:0px;
}
<div class='navbar'>
<a href='home.html'>Home</a>
<a href='1.html'>Profile</a>
<a href='2.html'>Transactions</a>
<a href='3.html'><p>Settings</p></a>
<img src='https://picsum.photos/200/300' id='image1'/>
</div>
You should first start by removing
margin-left:950px
as the margin will exclude your item from your navbar
then apply flex properties to your navbar
.navbar {display : flex}
so your navbar items become in the same line
I recommend checking out this flex-box guide as well flexbox properties
can you please share the image's link so we can help you?
also you most edit margin-left:950px; to margin-left: auto; if you want to center it
and this is an example navbar code (press run to see what is it)
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.navbar{
padding: 10px 20px;
background: black;
color: white;
display: flex;
align-items: center;
}
.navbar li{
list-style: none;
display: inline-block;
padding: 0 20px;
cursor: pointer;
}
.navbar li a{
color: white;
text-decoration: none;
}
.navbar li:hover,
.navbar li a:hover{
color: #666;
}
.navbar img{
width: 50px;
height: 50px; /*or :auto ; */
}
<ul class="navbar">
<li>home</li>
<li>project</li>
<li>contact</li>
<li><a>settings</a></li>
<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/600x600.jpg"/>
</ul>
<br><br><br>
<p>or</p>
<br><br><br>
<ul class="navbar">
<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/600x600.jpg"/>
<li>home</li>
<li>project</li>
<li>contact</li>
<li><a>settings</a></li>
</ul>
I think you need to learn the basics before start doing websites
I have a simple website that I've made from scratch. I got confused with the layout of my header:
H1 title
Text line
Logo
Menu (coding from w3school)
These four are within my div header. I'd like to be able to position them wherever I want within the div. The issue I have is that I'm not sure what coding to use for this (margin, position: relative or absolute, padding, top:, right:, etc.).
I've tried all kinds of combinations but it seems they never position where I want them and they mess up each others' position: the menu loses full width, the logo I can't get nicely with same space between top and right of header div, the H1 and tag don't seem to respond to the pixels I set, and so on.
Could someone please take the time and have a look at my code and come with a suggestion how to make this layout stable?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<style type="text/css">
body {
background-color: #F8F8F8;
}
#page {
width: 900px;
margin: 30px auto;
background-color: #FFFFFF;
}
#header {
height: 377px;
width: 100%;
background-image: url(images/banner.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#header a {
color: black;
text-decoration: none;
}
#header ul {
list-style-type: none;
margin-top: 0;
padding: 0;
overflow: hidden;
background-color: #3399FF;
position: relative;
top: 264px;
}
#header li {
float: left;
}
#header li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#header li a.active {
background-color: gray;
}
#header li a:hover:not(.active){
background-color: #3366CC;
}
.p1 {
font-family: Consolas, monaco, monospace;
font-size: 20px;
position: relative;
top: 28px;
left: 50px;
}
.p2 {
font-family: Consolas, monaco, monospace;
font-size: 16px;
position: relative;
top: 5px;
left: 200px;
}
.logo {
float: right;
position: relative;
top: 8px;
right: 8px;
}
#content {
position: relative;
top: 12px;
left: 10px;
}
#footer {
font-size: 14px;
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
border-top: #D3D3D3 0.5px solid;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<img class="logo" src="images/logo-d.png">
<span class="p1"><h1>This is my H1 Title</h1></span>
<span class="p2">"This is going to be my tag under H1"</span>
<ul>
<li><a class="active" href="">Link menu</a></li>
<li>Link menu 2</li>
<li>Link menu 3</li>
<li>Link menu 4</li>
<li>Link menu 5</li>
<li>Link menu 6</li>
</ul>
</div>
<div id="content">
<h1>H1 Title of the page content<h1>
<p></p>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<p></p>
</div>
<div id="footer">
The footer of the page
</div>
</div>
</div>
</body>
</html>
Put the contents of the header in an Unordered list as so. If you are using a responsive framework like Bootstrap, this will be completely different - but since you did not specify, here is an example without a framework.
HTML
<div id="header>
<ul>
<li><h1>Your Title</h1></li>
<li><p>some line of text you wanted</p></li>
<li class="logo"><img src="yourlogo.png" /></li>
<li class="spacer"></li>
<li><a href="somepage.html>Some Page</a></li>
<li><a href="somepage.html>Some Page</a></li>
<li><a href="somepage.html>Some Page</a></li>
</ul>
</div>
CSS
#header ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#header li{
padding: 0 20px;
display: inline;
}
#header li.spacer{
width:10%
}
It's just a case of structuring the divs correctly, as Holle points out, this is a list of objects rather than a poster. I think the main issue you are having in positioning is that you're foundation structure within your html isn't beneficial for manipulating.
I would recommend having a container div for each section and then further divs or other content within those. i.e.
<div id="headerContainer">
<h1>Title</h1>
<img id="logo" src="myImagePath">
</div>
<div id="navigation">
<!-- Navigation Bar, your UL list items -->
</div>
<div id="pageContent">
<!-- More content... <img>s, <p>s, <h1>s, probably more divs to structure the content etc-->
</div>
I hope that helps, if you want a suggestion, take a look a DevTips youTube channel, he's great at explaining the design and structuring stages when building a website.
Also, in terms of positioning, check out flexbox froggy (google it), just be aware the browser support isn't fantastic before you jump in.
Cheers,
James
First suggestion: try to think of a webpage as list of objects rather than a poster etc. Screen sizes vary (desktop/mobile) and you should use relative widths and positions to ensure responsiveness of your site. I'm sure you can find a better template to work on.
Second suggestion: If you DO wish to position an element "anywhere" this is an example of correct use of positioning:
<style>
.floatingdiv {
position:absolute;
right:0;
top:0;
}
</style>
<div class="floatingdiv">
<h1>Header</h1>
</div>
I'm a really new at this but I don't manage to ge the menu bar to get in line with the rest of the content on the page. Can someone just explain how to think to get everything in line and so everything scale nicely?
HTML:
<div id="all">
<ul id="menu1">
<li><img src="Pic/Homemini.png"></li>
<li><img src="Pic/MeMINI.png"></li>
<li><img src="Pic/portfolioMINI.png"></li>
<li><img src="Pic/contactMINI.png"></li>
</ul>
<ul id="menu2">
<li><img src="Pic/Home.png"></li>
<li><img src="Pic/Me.png"></li>
<li><img src="Pic/portfolio.png"></li>
<li><img src="Pic/Contact.png"></li>
</ul>
<div id="box1MINI"><img src="Pic/box1MINI.png"></div>
<div id="main"><img src="Pic/main.png"></div>
<footer>
<p>DID YOU KNOW?</p>
<p>alsdjaljsdkasjd askldjalksdj <br> asdlkjaslkd asldkjasldj asldk <br> alsdkjalksdj lakdj</p>
</footer>
</div>
CSS:
/* ALL CONTENT */
* {
max-width: 100%;
}
#all{
margin: auto;
}
/* END ALL CONTENT */
/* HEADER */
ul li{
display: inline-block;
width: 20%;
}
#menu2{
display: none;
}
#box1MINI{
max-width: 80%;
min-width: 60%;
margin: auto;
}
/* END HEADER*/
/* MAIN SPACE */
#main{
margin: auto;
max-width: 80%;
}
/* END MAIN SPACE */
/* FOOTER*/
footer{
background-color: darkgreen;
width: 80%;
padding: 1px;
margin: auto;
text-align: center;
}
/* END FOOTER*/
The issue you were getting because you gave "60%" width to "#box1MINI" and "80%" to "#main and footer". And no width to "Menus"
Whereas you should give width to the "Outermost" container which is "#all" in your case. and set that to center by "margin: 0 auto;" property. And keep everything else inside the "#all" container.
I have updated your code and made some modifications as per good practice.
Please find the Updated code below:
HTML
<div id="all">
<ul id="menu1">
<li>
<img src="Pic/Homemini.png">
</li>
<li>
<img src="Pic/MeMINI.png">
</li>
<li>
<img src="Pic/portfolioMINI.png">
</li>
<li>
<img src="Pic/contactMINI.png">
</li>
</ul>
<ul id="menu2">
<li>
<img src="Pic/Home.png">
</li>
<li>
<img src="Pic/Me.png">
</li>
<li>
<img src="Pic/portfolio.png">
</li>
<li>
<img src="Pic/Contact.png">
</li>
</ul>
<div id="box1MINI">
<img src="Pic/box1MINI.png">
</div>
<div id="main">
<img src="Pic/main.png">
</div>
<footer>
<p>DID YOU KNOW?</p>
<p>
alsdjaljsdkasjd askldjalksdj
<br>
asdlkjaslkd asldkjasldj asldk
<br>
alsdkjalksdj lakdj
</p>
</footer>
</div>
CSS
html,
body {
height: 100%;
}
body {
margin: 0 auto;
}
#all {
margin: 0 auto;
width: 80%;
}
/* END ALL CONTENT */
/* HEADER */
ul {
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
width: 24.6%;
margin: 0;
padding: 0;
}
#menu2 {
display: block;
}
#box1MINI {
min-width: 60%;
margin: auto;
}
/* END HEADER*/
/* MAIN SPACE */
#main {
margin: auto;
}
/* END MAIN SPACE */
/* FOOTER*/
footer {
background-color: darkgreen;
padding: 1px;
margin: auto;
text-align: center;
}
/* END FOOTER*/
Working Fiddle: http://jsfiddle.net/96ft87ev/1/
Hope this will help!
Let me know if you were looking for something else!
Add this selector:
#menu1 {
text-align:center;
}
Since you've set the li elements to be displayed as inline, they conform to text-alignment rules.
Edit: After this, the nav bar was still slightly off-center. This is due to a couple reasons. First of all, parts of your HTML are invalid, resulting in tags not being nested properly. Your link, img, and br tags all need to be self-closing. That just means you need to add a / (slash) before the > symbol on the tag.
After you've fixed that, simply remove the padding that is added to the li elements by adding padding:0 to the #menu1 selector.
Here is an example (I've added borders, but you can remove them).
When using percentages, it uses the parent to calculate. You want each li to be 20% of the page, not 20% of the parent (ul). Set the width for menu1 as 80%, then each li is 25% of that. Give the ul auto margins and it will line up with content.
#menu1{
margin: auto;
width:80%; //same as content
padding: 0px;
}
ul li{
display:inline-block;
width: calc(25% -4px); //each image is 25% of the parent, parent is 80% of page
box-sizing: border-box; //includes border and padding in box size
}
fiddle
Is there a simple way in CSS to position a number of images—stacked vertically—on the right) of a variable-sized image. The variable-sized image has a max-width defined that should be relative to the size of the browser window (i.e. it should be as big as possible to not fall off the screen, but not bigger than the actual image pixel dimensions). To make this more difficult, the markup is such that all <img>s are listed as equals, i.e., the images to appear on the right are not in a separate container.
Using a markup like the following, the size of each image is about equal.
<ul>
<li><img/></li> <!-- the big image -->
<li><img/></li>
<li><img/></li>
etc...
</ul>
By request, in a jsFiddle: http://jsfiddle.net/2p9gR/
It would be nice to do this in pure CSS(3), I don't need to support any browsers except my own (the latest Chrome).
Oh. And I will accept "no" for an answer, if it is the truth.
given your picture I have come up with the following solution:
HTML
<div class="container">
<div class="main-image"><img src="http://lorempixel.com/800/800/sports/1/" /></div>
<ul class="small-image-list">
<li><img src="http://lorempixel.com/120/120/sports/2/" /></li>
<li><img src="http://lorempixel.com/120/120/sports/3/" /></li>
<li><img src="http://lorempixel.com/120/120/sports/4/" /></li>
<li><img src="http://lorempixel.com/120/120/sports/5/" /></li>
</ul>
</div>
CSS
.container {padding-right:150px;}
.container .main-image {width:100%; float:left;}
.container .main-image img {width:100%; max-width:800px; max-height:800px;}
.small-image-list {list-style:none; margin:0 -150px 0 0; padding:0; width:120px; float:right;}
.small-image-list li {width:100%; overflow:hidden; padding-bottom:10px;}
#media all and (min-width: 950px) {
/*this is optional if you want the images to stick left when the page is over 950px;*/
.container {padding:0;}
.container .main-image {width:800px;}
.small-image-list {margin:0 0 0 30px; float:left;}
}
Example
Delete the media query if you want the large gutter
EDIT
Given the need for it all to be in a list you can try this:
HTML
<ul class="list">
<li><img src="http://lorempixel.com/800/800/sports/2/" /></li>
<li><img src="http://lorempixel.com/120/120/sports/3/" /></li>
<li><img src="http://lorempixel.com/120/120/sports/4/" /></li>
<li><img src="http://lorempixel.com/120/120/sports/5/" /></li>
</ul>
CSS
.list {list-style:none; padding:0 150px 0 0; margin:0;}
.list li {width:120px; float:right; padding:0; display:block; overflow:hidden; margin-right:-150px;clear:right; display:block;}
.list li:first-child {width:100%; float:left; margin:0; padding:0;}
.list li:first-child img {width:100%; max-height:800px; max-width:800px;}
List Example
Here is a partial solution. I needed to consider two cases that depend on the aspect ratio of the large image, portrait and landscape.
Case 1 - Portrait
<ul class="portrait">
<li class="first">
<img src="http://placekitten.com/300/1000" />
</li>
<!-- the next two images should 'float' right of the first one -->
<li>1
<img src="http://placekitten.com/800/600" />
</li>
<li>2
<img src="http://placekitten.com/800/560" />
</li>
</ul>
ul.portrait {
list-style: none;
border: 1px solid blue;
margin: 0;
padding: 0;
float: left;
}
ul.portrait li {
border: 1px dotted red;
width: 120px;
float: right;
clear: right;
margin-left: 30px;
}
ul.portrait li img {
width: 100%;
}
ul.portrait li.first {
float: left;
width: auto;
border: 1px dashed blue;
margin: 0;
}
ul.portrait li.first img {
vertical-align: top;
height: 100%;
max-height: 800px;
}
Case 2 - Landscape
<ul class="landscape">
<li class="first">
<img src="http://placekitten.com/1000/500" />
</li>
<!-- the next two images should 'float' right of the first one -->
<li>1
<img src="http://placekitten.com/800/600" />
</li>
<li>2
<img src="http://placekitten.com/800/560" />
</li>
<li>3
<img src="http://placekitten.com/800/560" />
</li>
<li>4
<img src="http://placekitten.com/800/560" />
</li>
<li>5
<img src="http://placekitten.com/800/560" />
</li>
<li>6
<img src="http://placekitten.com/800/560" />
</li>
</ul>
ul.landscape {
list-style: none;
border: 1px solid blue;
margin: 0;
padding: 0;
float: left;
}
ul.landscape li {
border: 1px dotted red;
width: 120px;
float: right;
clear: right;
margin-left: 30px;
}
ul.landscape li img {
width: 100%;
}
ul.landscape li.first {
float: left;
width: auto;
border: 1px dashed blue;
margin: 0;
}
ul.landscape li.first img {
vertical-align: top;
width: 100%;
max-width: 600px;
}
It is possible to get the images appearing in the correct configuration, bit there are some limitations.
Since floats are being used, as you make the screen more narrow, the right hand thumbnails will eventually stack below the large image. This suggests specifying a min-width for the parent ul containing block.
See Fiddle: http://jsfiddle.net/audetwebdesign/rsqW3/
The gist of the problem is in the rule for the large image. In the portrait case, you need to specify height: 100% and max-height: 800px and for the landscape case, you need to specify width: 100% and max-width: 600px. You can't quite make this distinction using CSS alone. The calc() value may be of some help but it is not yet widely supported.