So I'm trying to add a navbar to the footer of my pages in jQuery Mobile, with three list items. The first and last are data icons, while the one in the middle is simple text. The problem is that the middle item (Contact Us) is shorter than the other two, and I can't figure out a way to get them to all be equal sizes. Here is my code:
<div data-role="page" id="pageone">
<div data-role="header" data-position="fixed">
<h1 style="width:90%; margin:0 auto;">Title</h1>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li></li>
<li>Contact Us</li>
<li></li>
</ul>
</div>
</div>
</div>
Any ideas?
Here is a Fiddle. Thanks!
I have added simple padding on contact us Hyperlink:
.contact-us{padding: 12px;}
Here is footer markup:
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li></li>
<li>Contact Us</li>
<li></li>
</ul>
</div>
</div>
DEMO
Note: This height issue is just because of Icon on Navbar taking
different height them text. Use custom css is pretty nice idea.
Related
HTML
<body>
<!-- Header -->
<section id="header">
<div class="header container">
<div class="nav-bar">
<div class="brand">
<a href="#home">
</a>
</div>
<div class="nav-list">
<div class="hamburger">
<div class="bar"></div>
</div>
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
I'm trying to add a logo to my website. The logo fills the screen. I can't adjust its size.HTML codes like this.
It is difficult to answer without seeing the stylings and I see you haven't provided a proper code.
Just give the img tag a width and a height and position the div wrapping it correctly.
Something like this,
div {
position:relative;
text-align:center;/* Add This*/
}
<div>
<img src="https://www.w3schools.com/tags/img_girl.jpg" width='300px' height='400px'/>
</div>
I suggest you to refer the following,
Positioning a div
Inserting an img
Good luck mate!
I have created a custom alignment of li tags that I want to use in a CSS media query. Here is a JFiddle how it should look:
https://jsfiddle.net/4fwx7rbj/1/
The li are centered in their container and the text is centered with the list images. Now I tried to use this together with a media query:
https://jsfiddle.net/ro7gj60h/
What should happen is, that the .half-width div take 100vw and the list gets aligned like in the first snippet. However this does not really work as expected, could someone help me what I am missing?
Thanks a lot.
Here the HTML for a quick overview:
<div class="container">
<div class="half-width section3">
<div class="half-width-content">
<div class="middle-text">
<h2>A Headline</h2>
<p>
Some paragraph
</p>
<div class="list-div" id="A">
<ul class="items-list" id="list">
<li class="animation-listener">This is a list item</li>
<li class="animation-listener">This is a list item</li>
<li class="animation-listener">This is a list item</li>
<li class="animation-listener">This is a list item</li>
</ul>
</div>
<img class="hand-writing-img" src="https://fakeimg.pl/498x50/?text=this is some image">
</div>
</div>
</div>
</div>
the display flex in class #media (max-width: 768px) and (min-width: 500px)
.list-div {} shrinks the ul
This question already has answers here:
How to make a div 100% height of the browser window
(39 answers)
How to make a <div> always full screen?
(13 answers)
Closed 4 years ago.
I'm new to programming and was hoping someone could help me with this one.
I have multiple pages and would like them all to be different colors. I wrapped all of my code in a class and then styled them like this:
.tech_page{
background-color: #F4C0CC;
}
And the body looks like this:
<body>
<div class="tech_page">
<div class="nav-bar">
<nav> <p class="nav-home"> Home </nav>
<nav> Tech </p> </nav>
<nav> About </p> </nav>
<nav> Mind Map </p> </nav>
<nav> Projects </p> </nav>
</div>
</div>
</body>
But only the nav bar is getting the background color! Everything else remains white. The entire span of the page gets the background color if I put a class on the body but I don't think that's clean code. Does anyone have any ideas?
By adding height:100vh in your tech_page class should solve your issue.
if you want all the body use the class tech_page you should add the class
<body class='tech_page'>
<div class="projects_page">
<div class="nav-bar">
<nav> <p class="nav-home"> Home </nav>
<nav> Tech </p> </nav>
<nav> About </p> </nav>
<nav> Mind Map </p> </nav>
<nav> Projects </p> </nav>
</div>
</div>
</body>
or you could used
body {
width: 100%;
height: 100%;
}
.tech_page{
background-color: #F4C0CC;
width: 100%;
height: 100%;
}
and for html
<body>
<div class="tech_page">
<div class="nav-bar">
<nav> <p class="nav-home"> Home </nav>
<nav> Tech </p> </nav>
<nav> About </p> </nav>
<nav> Mind Map </p> </nav>
<nav> Projects </p> </nav>
</div>
</div>
</body>
Either write the css in any css file or write the same in style tag as given below.You can write similar css for newly created page.Note:Best practice is to create a css file and write css.Here only tech_page class background is changed ,if you want o change the whole page background you can write css for element css of top level div class.Try it.
<html>
<head>
<title></title>
<style type="text/css">
.tech_page{
background-color: #F4C0CC;
}
</style>
</head>
<body>
<div class="tech_page">
<div class="nav-bar">
<nav> <p class="nav-home"> Home </nav>
<nav> Tech </p> </nav>
<nav> About </p> </nav>
<nav> Mind Map </p> </nav>
<nav> Projects </p> </nav>
</div>
</div>
</body>
</html>
I'm trying to have a ul and a span elements to stick to the bottom of their containing div. The only way I managed to so is through setting them with position:relative and playing with bottom: x for each element separately (according to its size).
Is there a more standard way to do it?
Here is the code: jsfiddle
<div id="header">
<div id="top_menu">
<span id="logo">TechSystems</span>
<span id="sub_logo">think smarter</span>
<div id="menu_content">
<ul>
<li>home</li>
<li>about</li>
<li>contact us</li>
</ul>
</div>
</div>
</div>
<div id="slideshow">
</div>
Try adding to #menu_content:
#menu_content
{
position:fixed;
bottom: 0px;
}
See: https://jsfiddle.net/x7p35mrz/
According to web2py documentation page is divided in sixteen columns and this should be placed on 10th column but it does not work, I am new to all these so have no idea where to start debugging from. pointers?
<div class="ten columns">
<nav>
<ul>
<li>Home</li>
<li>Help</li>
<li>Login</li>
<li>Privacy</li>
</ul>
</nav>
</div>
</header>
ten columns has no effect. The list is placed on default location(left most).
*Entire File*
<!DOCTYPE html>
<head>
<title>Web On Steroids</title>
{{response.files.append(URL('static','css/skelton.css'))}}
{{include 'web2py_ajax.html'}}
</head>
<body>
<header class="container">
<div class="ten columns">
<h1>tukker.me</h1>
</div>
<div class="ten columns">
<nav>
<ul>
<li>Home</li>
<li>Help</li>
<li>Login</li>
<li>Privacy</li>
</ul>
</nav>
</div>
</header>
<section id="main" class="container">
<div class="ten columns">
<h1>Messages With 300 Chars</h1>
</div>
<div class="sixteen columns">
Register
</div>
<footer class="container">
<nav class="sixteen columns alpha omega">
About
Terms
Contact
</nav>
</footer>
</body>
It appears you are using the web2py scaffolding app, which currently uses Skeleton for the responsive grid. It may help to review the Skeleton documentation.
Note, class="ten columns" does not put the content in the tenth column, it makes the div ten columns wide. If you want something in the tenth column, you should either precede it with a div that is nine columns wide (i.e., class="nine columns"), or offset it with class="one column offset-by-nine" (actually, you probably want it wider than just one column, which is only 40px wide). Note, within a given row, the total number of columns (including offset columns) should add up to no more than 16. Specifically, in your case, you might try:
<header class="container">
<div class="nine columns">
<h1>tukker.me</h1>
</div>
<div class="one column">
<nav>
<ul>
<li>Home</li>
<li>Help</li>
<li>Login</li>
<li>Privacy</li>
</ul>
</nav>
</div>
</header>
That will put your h1 header in the first nine columns and your nav ul in the tenth column (to the right of the h1). If you want the nav ul to be more than one column (40px) wide, just specify its class with the number of columns you want (e.g., class="four columns"). Note, because the h1 div takes up 9 of the 16 available columns, the nav div should not be more than 7 columns wide, otherwise, it will get pushed down below the h1 instead of being floated to the right of it (that is what was happening when you had it set to be 10 columns wide).