Text stuck next to navBAR - css

I'm trying to view text under the navBAR, but it just appears straight next to the navBAR buttons. I've tried some margin properties in css, but nothing seemed to work.
Thanks in advance!!
<html>
<title>title</title>
<head>
<img src="img/logo.png">
<meta charset="uft-8">
<link rel="stylesheet" href="css/style.css">
<style>
.narBAR{margin:0 auto; width:1080px;}
.navBAR ul {padding:0px;}
.navBAR ul li {float:left;}
</style>
</head>
<body>
<body background="untitled.png">
<div class="navBAR">
<ul>
<li></li>
<ul>
<li></li>
<li></li>
</ul>
<li></li>
<li></li>
</ul>
</div>
<div class="search">
<form action="file:///C:/Users/Amroo/Desktop/new%201.html/search.php">
<input type="text" name="search" placeholder="Search......"/>
<input type="submit" value="Search"/>
</form>
</div>
<h1>text</h1>
<img src="blog/img/mars.jpeg">
<h3>text</h3>
</body>

Your CSS has a wrong class .narBAR:
.narBAR{margin:0 auto; width:1080px;}
Also there are errors in your code. You can't have <img> in your <head> so place this <img src="img/logo.png"> in your <body>.
And use css background instead of <body background="untitled.png">.
For example:
body{
background-image: url(untitled.png);
}
Although your code should work fine you can get described issue due to images so set overflow: hidden for .navBAR
Something like this https://jsfiddle.net/kdmvxrmx/

Related

Display the list element from right to left

I'd like to arrange the list element displayed from right to left,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div class="row">
<div class="col-sm-6">
<ul>
<li>Javasript
<ul>
<li>DOM</li>
<li>BOM</li>
<li>Global Objects</li>
</ul>
</li>
<li>jQuery</li>
<li>CSS</li>
<li>HTML</li>
</ul>
</div>
</div>
<script>
</script>
</body>
</html>
I tried to add class="pull-right" to ul element, but found that they were all right-alighned without formatting.
Should I adjust the padding of li one by one?
I want it shown as
- Javascript
- DOM
- BOM
- jQuery
Try this CSS code:
ul{
direction: rtl;
}
You are forgot to add bootstrap css cdn in your file. You can get bootstrap css from here.
Then you can use bootstrap grid. There is row class in bootstrap. It has 12 column. click here for understand grid concept.
pull-right is replaced with float-right.
Similarly pull-leftis replaced with float-left.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<ul>
<li>Javasript
<ul>
<li>DOM</li>
<li>BOM</li>
<li>Global Objects</li>
</ul>
</li>
<li>jQuery</li>
<li>CSS</li>
<li>HTML</li>
</ul>
</div>
<div class="col-sm-4"></div>
</div>
<script>
</script>
</body>
</html>
Update:- As per your question output is updated. In that, There could be multiple solutions come across. One of the solutions is you can use grid concept as I mentioned above. Identify the columns in which you would like to display content as I update in my code. Other than this you could use align-item as well of bootstrap. Other than this you can also use justify-content-center link.

Align a picture to the right CSS: which tag to use

I have a picture that I would like to align relative to the right-hand side margin (i.e. 10 px). I have tried to define a fixed top/left value : it works perfectly well if I use my table in portrait mode, however, but if it is used in landscape mode, it gives an "ugly" result.
THis is my current HTML code :
<!DOCTYPE html>
<html>
<head>
<title>Domoos mobile </title>
<meta http-equiv="refresh" content="600">
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no"/>
<!--Using jQuery and jQuery UI for display effects-->
<script src="js/jquery-2.1.3.min.js"></script>
<script src="jquery-1.12.0/jquery-ui.min.js"></script>
<!--Using the hamburger menu display code-->
<script src="scripts/hamburger.js"></script>
<!--Using Media Queries, if the viewport is smaller than 700px use another stylesheet-->
<link rel="stylesheet" type="text/css" media="all" href="css/hamburger.css"/>
<link rel="stylesheet" type="text/css" href="css/mystyle_hamburger.css" />
<script type="text/javascript" src="scripts/date_time.js"></script>
<script>
// Global variables
var AutoScript = false;
var ValueCheck = -1;
var ControleurUpdate = "";
var ThermostatManualUpdate = false;
</script>
</head>
<body>
<!--This wrapping container is used to get the width of the whole content-->
<div id="container">
<!--The Hamburger Button in the Header-->
<header>
<div id="hamburger">
<div></div>
<div></div>
<div></div>
</div>
</header>
<!--The mobile navigation Markup hidden via css-->
<nav>
<ul>
<!--<li><img src="assets/icons/sun_icon.png" alt="" width="14" height="14">menuitem 1</li> -->
<li>menuitem 1</li>
<li>menuitem 2</li>
<li>menuitem 3</li>
<li>menuitem 4</li>
<li>menuitem 5</li>
<li>menuitem 6</li>
</ul>
</nav>
<!--The Layer that will be layed over the content
so that the content is unclickable while menu is shown-->
<div id="contentLayer"></div>
<!--The content of the site-->
<div id="content">
<div id="logo" style="position:relative; width:50%; height:50%;">
<img src="assets/icons/logo_Domoos_lab.png" alt ="" style="width:75px;height:54px;">
</div>
<div id="tag_domoos_title">
<p>Domoos mobile</p>
</div>
<div id="tag_sunrise_sunset">
<p><img src="assets/icons/sun_icon.png" alt="" width="14" height="14">↑ 06:25 ↓ 20:33</p>
</div>
<div id="date">
<script type="text/javascript">window.onload = getDate('date');</script>
</div>
<div id="time">
<script type="text/javascript">window.onload = getTime('time');</script>
</div>
<div id="current_weather_conditions">
<p>
<b>Conditions météorologiques actuelles (19.08.2016 19:15)</b>:
Vent 4 km/h SO • Humidité 74% • Pression 1010.9 hPa </p>
</div>
<div id="tag_weather_condition">
<p>Eclaircies • <b>22°C</b></p>
</div>
<div id="meteo_icon" style="position:absolute;">
<img src="assets/meteo_icons/neige-forte-big.png" alt="" style="width:40px;height:40px;">
</div>
</p>
</div>
</div>
</body>
</html>
This is my current CSS :
#meteo_icon img{
position: relative;
top: -130px;
left: 270px;
}
Is there a "cleaner" means to achieve this ? Thanks a lot for reading me.
You need an absolute positioning with a right value, inside a relative positioned container.
#meteo_icon {
position: relative;
}
#meteo_icon img {
position: absolute;
right: 0;
}

want to have <div> tag in next line of <header> tag

I tried this code and try to add different display properties to header and div tags, but image in next div tag is coming top left corner. I want it to come in next line of header tag which is on right top(pull right).This is about position of div and header tags
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet"/>
<style type="text/css">
</style>
</head>
<body style="background-color: #1D1D1D" >
<div id="main" class="">
<header class="site header" role="banner">
<h1 id="logo" class="pull-right"> Logo of site
</h1>
</header>
<div id="">
<div id="" class="">
<img src="Images/1157217a.jpg?w=1800&fit=max&auto=compress,format&h=1800" width="240" height="312" alt="slideshow image">
</div>
</div>
</div>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/jquery-3.1.0.js"></script>
<script src="Scripts/jquery.cycle2.js"></script>
<script src="Scripts/modernizr-2.8.3.js"></script>
</body>
</html>
you can add class="clearfix" after the header tag and then the image will come in the next line. Clearfix is a class in bootstrap
A display: block; using a css on one of this two element will be enought.
Indeed display: block tell a div to take all the width of the page.
<header class="site header" role="banner">
<h1 id="logo" class="pull-right"> Logo of site
</h1>
</header>
<div id="">
<div id="" class="" style="display:block;">
<img src="Images/1157217a.jpg?w=1800&fit=max&auto=compress,format&h=1800" width="240" height="312" alt="slideshow image">
</div>
</div>
Or simply use bootstrap structurales classes as "container", "row" to create a new section above the header ?
you can simply do with this float:left property, just check with this example
header {
float:left;
width:100%;
background: #c1c1c1; /* just for showing the header */
padding:15px;
}
.block-element {
float:left;
width:100%;
background: #ddd; /* just for showing the div */
padding:15px;
margin-top:30px;
}
<header>
<!-- something here -->
</header>
<div class="block-element">
<!-- something here -->
</div>
<div class="block-element">
<!-- something here -->
</div>

Can't get List to display inline?

I would prefer to keep the css for the list inline. Not in a separate CSS. Is it the way my id's are stacked? Any other comments would be greatly appreciated as well.
<!doctype html>
<html>
<head>
<title>My First Site</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container"><!--entire body-->
<div id="topbar"><!--css uses a #-->
<div class="fixedwidth"><!--.fixedwidth in css-->
<div id="logodiv">
<img src="logo.png" alt="site logo">
</div><!--logodiv-->
<div id="topMenuDiv"><!-- should this be the div id? or should it be in the ul?-->
<ul style="list-style-type:none";
display:inline;>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div><!--topmenudiv"-->
</div><!--topbar-->
</div><!--fixedwidth-->
</div><!--container-->
</body>
</html>
<ul style="list-style-type:none; display:inline;"> just simple typo error.
You have syntax error here :
<ul style="list-style-type:none";
display:inline;>
It should be like this :
<ul style="list-style-type:none; display:inline;">
CSS :
ul, ul li { list-style-type;none; display:inline-block; }

Using Full-Height Columns in Zurb Foundation

I have an app that I am trying to build that uses three-columns. Currently, I have the following code:
<html>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css">
<style type="text/css">
.app {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
}
.app-col {
height: 100%;
}
.fullwidth {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
</style>
<meta class="foundation-data-attribute-namespace">
<meta class="foundation-mq-xxlarge">
<meta class="foundation-mq-xlarge-only">
<meta class="foundation-mq-xlarge">
<meta class="foundation-mq-large-only">
<meta class="foundation-mq-large">
<meta class="foundation-mq-medium-only">
<meta class="foundation-mq-medium">
<meta class="foundation-mq-small-only">
<meta class="foundation-mq-small">
</head>
<body>
<div class="app">
<div class="row fullwidth" data-equalizer="">
<div style="width:33%; height:100%;">
<div class="row" data-equalizer="">
<div class="large-6 columns" style="background-color:#467EAF;">
<h3>Hello</h3>
<nav>
<ul style="list-style: none;">
<li><a href="/what/we-do" style="color:white;">
<h4><i class="icon-google-plus"></i>Welcome</h4></a>
</li>
<li><a href="/about" style="color:white;">
<h4><i class="icon-google-plus"></i>About Us</h4></a>
</li>
</ul>
</nav>
<ul class="inline-list text-center pull-bottom">
<li>Google Plus</li>
<li>LinkedIn</li>
<li>Email Us</li>
</ul>
</div>
<div class="large-6 columns" style="background-color:#829EBF;">
<h3>ABOUT</h3>
<nav>
<ul style="list-style: none;">
<li>Overview</li>
</ul>
</nav>
</div>
</div>
</div>
<div style="width:67%;">
Content
<ul class="inline-list text-center pull-bottom">
<li>©2015 Goes Here</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script>
</body></html>
My problem is, my columns are not taking up the full-height of the screen. I thought that was the purpose of the data-equalizer attribute. Unfortunately, it looks like I was wrong. What am I doing wrong?
I've been using vh units to get this to work:
div.full-height {
min-height:100vh;
}
For our particular project it meets our requirements, which you can check for your project at Can I Use
According to the foundation docs you're supposed to use data-equalizer on the parent and then data-equalizer-watch on all the children. http://foundation.zurb.com/docs/components/equalizer.html
<div class="row" data-equalizer>
<div class="large-6 columns panel" data-equalizer-watch>
...
</div>
<div class="large-6 columns panel" data-equalizer-watch>
...
</div>
</div>
And then don't forget to add $(document).foundation();
Edit
I misunderstood what you wanted initially. Basically you need to add several css rules of height: 100%; so that both the parents and children can expand to 100% of the screen height.
Here is an updated JSfiddle: http://jsfiddle.net/NateW/e4uqw4yq/

Resources