I'm trying to get this Html code to align in a horizontal like display form. It might have some un-neccessary id's,classes,etc.
Could you tell me what I am doing wrong?
ul.head {
text-transform: Capitalize;
word-spacing: 10px;
font: italic bold 20px/60px"Times New Roman", Times, serif;
list-style-type: none;
margin: 0;
padding: 0;
}
.H2 {
display: inline;
}
<h1><p id="p1"><em>ENVY</p></em></h1>
<img id="img1" src="envy.jpg" width="150" height="113">
</ul>
<!--End of HEADING-->
<ul class="head">
<!--Start of top tabs/drop down menu-->
<h2>
<li id="H2"><ul id="T1" >New york</ul>
<ul id="T2" >Miami</ul>
<ul id="T3" >Boston</ul></li>
</h2>
</ul>
you have some syntax error in your code :
.H2{ display: inline; }
you can't target an h2 with the DOT , dot's only to target classes
li's inside an h1 you can ,but it's highly recommended that you use one only h1 tag for each page to set main title , you can use a div to structure your page element instead
i added this to your css , hope that this is what you need :
.newnew{
position: relative;
top: -140px;
}
ul li a { display: inline-block; padding: 10px; font-size: 13px;}
LIVE DEMO
hello dear please check this link DEMO
CSS
ul.head{
text-transform: Capitalize;
word-spacing: 10px;
font: italic bold 20px/60px "Times New Roman",Times,serif;
list-style-type: none;
margin: 0;
padding: 0;
}
li ul{
display: inline;}
Related
So im making a website for a school project and all was hunky dory until i tried to put a paragraph element in and it displays above the title text behind the background color
.container {
width: 80%;
margin: 0;
padding: 0;
}
#logotext {
float: left;
font-family: 'Doppio One';
margin-left: 25px;
}
nav {
float: right;
}
#nav {
list-style-type: none;
text-decoration: none;
margin-top: 35px;
}
ul li {
display: inline;
}
li a {
text-decoration: none;
color: white;
}
li a:hover {
color: #fc9516;
}
.darkwrap {
background-color: #414a4c;
position: fixed;
overflow: hidden;
}
.active {
color: #22cc25;
}
#clock {
position: absolute;
top: 0;
right: 0;
margin-top: 25px;
margin-right: 25px;
font-family: Rajdhani;
font-size: 30px;
}
<div class="container darkwrap">
<div id="logotext">
<h1>JF Web Design</h1>
</div>
<!-- Navigation Bar -->
<nav>
<ul id="nav">
<li> Page 1 </li>
<li> About </li>
<li> Page 3 </li>
</ul>
</nav>
</div>
</header>
<span id="clock"></span>
<p>
Hello
</p>
<footer></footer>
i usedchrome to highlight the faulty element so its clear whats happening here its literall positioned at the top behind the bg color
Console Highhlighted element
.darkwrap is position: fixed.
This takes it out of normal flow and locks its position relative to the viewport.
The rest of the content is laid out as normal as if the .darkwrap element didn't exist … so it ends up covered up by it.
You could use margins to compensate for the space covered up by .darkwrap when the viewport is scrolled to the top. I would simply avoid using position: fixed in the first place: The benefits of having the menu on screen all the time very rarely outweigh the drawback of using up all that vertical space all the time.
If you use float: left and float:right please remember to add clear:both to the next element on the website. Here is fixed code:
https://codepen.io/anon/pen/jKRqLz
So I am trying myself in html and css3 and I found a problem described in pictures:
What I have
What I want
So what I want to do is to ignore that the textfield of "Concepts" shifts "Planets" to the right.
This is how the html structure looks like at the moment:
HTML:
<div class="masthead__inner-wrap">
<li class="masthead_menu-item">
<ul subhead-links>
<li class="subhead-link">
</li>
</ul>
</li>
</div>
CSS:
.masthead__menu-item {
display: block;
list-style-type: none;
white-space: nowrap;
&--lg {
padding-right: 2em;
font-weight: 700;
}
}
.subhead-links{
border-radius: 0.2em;
border: 2px solid #73AD21;
border-color: $border-color;
position: relative;
clear: both;
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
}
.subhead-link {
font-size: $type-size-7;
display: block;
list-style-type: none;
white-space: nowrap;
&--lg {
padding-right: 1em;
font-weight: 700;
}
}
So what I do is fill the subhead links in as listitems (via liquid) and then display them as subhead-links.
But I do not know how to ignore the "subhead" listitems so that the next masthead__menu-item is not shifted.
Thank you!
Do you want something like this?
.masthead_menu-item li{display:inline;}
.sublist li{display:none;}
.sublist:target li{
display:inline;
}
<div class="masthead__inner-wrap">
<ul class="masthead_menu-item">
<li>Concepts</li>
<li>Planets</li>
</ul>
<ul class="sublist" id="concepts_sublist">
<li>Waves</li>
<li>Magic</li>
</ul>
<ul class="sublist" id="planets_sublist">
<li>Planet1</li>
<li>Planet2</li>
</ul>
</div>
If you're only trying to target the direct descendent (not all children) then use the (child selector)[https://developer.mozilla.org/en/docs/Web/CSS/Child_selectors]
For example:
.masthead_menu-item > a {
color: green; /* Will not affect <li><a>...</a></li> */
}
However, I get the feeling that's not what you're really asking. The HTML you've posted doesn't really mirror your before/after graphics.
For a more specific answer, please post your markup and CSS
I'm trying to create nav bar similar to that of Uber's site. Where there's a menu button on the left, logo in the center, and then log in and sign up are on the right.
I used and div container="pull-right" and still couldn't get the Title to be center. The buttons won't be stylized much more than what they are since they will be on a white background.
<div class="nav">
<div class="container">
<ul>
MENU</button></li>
TITLE</button></li>
SIGN UP</button></li>
LOG IN</button></li>
</ul>
</div>
</div>
.nav{
color: #5a5a5a;
font-size: 15px;
font-weight: normal;
padding: 15px 15px 5px 5px;
word-spacing: 3px;
}
.nav li {
display: inline;
}
.nav button {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline: none;
}
.nav a{
color: inherit;
}
Here's my Jsfiddle: https://jsfiddle.net/tokyothekid/r19y23ep/1/
you can try this fiddle
demo
in this i have manage the structure of your li and as per your description i make a design i hope it may help you
.col1
{
margin:0;
padding:0;
float:left;
width:50%;
}
Quick answer
If you want something like the website for Uber, you probably need to separate the Menu from the buttons on the right side.
Other notes
Also, HTML5 has specified special tags so code is more readable and organized, such as the <nav> tag to hold your main menu. <div> doesn't communicate the purpose of the container.
To do what you want, here is a to-do list:
fix your bugs (<a href="somewhere"<li><button>foobar</button></li></a> actually is an error because of the lack of right bracket > at the end of your opening <a> tag)
separate your elements into a menu, a title, and a couple of user account buttons
The code
Here is a good example of how you could restructure your HTML:
<h2 class="top-title">Title</h2>
<nav>
<button id="toggle-menu">Menu</button>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</nav>
<div class="user-buttons">
<button>Log in</button>
<button>Sign up</button>
</div>
This is a quickly hacked bit of CSS you might use to start with:
h2 {
display: inline-block;
width: 100vw;
text-align: center;
margin: 0;
position: absolute;
z-index: -1;
}
nav {
float: left;
}
nav ul {
list-style-type: none;
padding: none;
position: absolute;
}
nav ul a {
text-decoration: none;
text-transform: uppercase;
color: inherit;
}
div.user-buttons {
float: right;
}
Add some Javascript, and voila:
$(function() {
$("nav ul").hide();
$("#toggle-menu").click(function() {
$("nav ul").toggle();
});
});
JSFiddle example.
I am trying to learn CSS and HTML and have a very basic question here. How do i write my css so that it shows the text in the span below the image
<div class="section">
<ul>
<li id="lumia820" class="figures" >
<img src="f-lumia820.jpg" alt="" class="figure"/>
<span class="figcaption">Lumia 820</span>
</li>
<li id="iphone4s" class="figures">
<img src="f-iphone4s.jpg" alt="" class="figure"/>
<span class="figcaption">Iphone 4s</span>
</li>
</ul>
</div>
Currently, I have something like
.section ul {
margin: 0 auto;
float: left;
}
.figures {
display: inline;
}
.figures span {
font-size: 20px;
font-family: "Book Antiqua", "Palatino Linotype", Georgia, serif;
letter-spacing: 0.1em;
}
.figures img{
vertical-align: top;
width: 30%;
height: 30%;
margin: 1% 1%;
}
Just set the to display: block; so that each one takes up its own line. Right now, they are set to display: inline because that is the default for both <img> tags and <span> tags.
.figures span, .figures img {
display: block;
}
should be able to do
.figcaption {
display:block;
}
fiddle
This should do the trick:
.figures span{ display: block; }
Check this Demo : http://jsfiddle.net/h6McP/1/
Span and image is actually an inline element, so it wil come line by line
we need to make to block element so that span will come exat below of the image
here i have given
.figures span {display:block}
li.figures { display: inline-block;}
Check this is Updated one
I'm building a text-based navigation bar, evenly spaced across the width of a parent div, but I'm having a problem keeping certain navigation items grouped together. Each word, instead of each list item, distributes across the entire width of the div. Is there a way to distribute each list item evenly within the div, but keep longer items, like "/painting & Mixed media" properly spaced? I also have a phantom space in front of the first link I can't find, so it's not exactly justified the way I would hope.
To clarify:
The posted code displays the link to "/Painting & Mixed Media" with additional spacing between each word. Example below, where dashes represent spaces in the nav menu:
Currently: .../Prints---/Illustration---/Painting---%---Mixed---Media---/About---/Blog...
Desired: .../Prints---/Illustration---/Painting-&-Mixed-Media---/About---/Blog...
Here's the CSS:
.navbar{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:16px;
text-decoration: none;
text-align:justify;
width: 800px;
}
.navbar * {
display: inline;
}
.navbar span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
a.nav:link {color:#000; text-decoration: none;}
a.nav:visited {color:#000; text-decoration: none;}
a.nav:hover {color:#6CC; text-decoration: none;}
a.nav:active {color:#F90; text-decoration:none;}
And the HTML:
<div class="navbar">
<ul>
<li>/home</li>
<li>/design </li>
<li>/prints</li>
<li>/illustration</li>
<li> /painting & mixed media</li>
<li>/about</li>
<li>/blog</li>
<li>/cv</li>
</ul>
<span></span>
</div>
Demonstration fiddle
HTML:
<div class="navbar">
<ul>
<li>/home</li>
<li>/design </li>
<li>/prints</li>
<li>/illustration</li>
<li>/painting & mixed media</li>
<li>/about</li>
<li>/blog</li>
<li>/cv</li>
</ul>
<span></span>
</div>
CSS:
.navbar {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
text-align: justify;
width: 800px;
}
.navbar * {
display: inline;
}
.navbar a {
display: inline-block;
text-decoration: none;
}
.navbar span {
display: inline-block;
width: 100%;
}
.navbar a:link,
.navbar a:visited {color:#000;}
.navbar a:hover {color:#6CC;}
.navbar a:active {color:#F90;}