<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../css/example.css" rel="stylesheet" type="text/css" />
<title>My Portfolio</title>
</head>
<body>
<div class="nav">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div class="content">
<p>Self-studying to become a web developer. Learning HTML, CSS, and JavaScript plus jQuery through Jon Duckett's books and FreeCodeCamp. Once I get my entry level job, I wish to study more and expand on back-end development, so I can become a full-stack developer.</p>
<p>Portfolio:</p>
<p>Contact me here:</p>
<input type="text" />
<br />
<input type="text" />
<br />
<input type="text" />
<br />
<input type="submit" value="Send" />
<p>Here's where you can get in touch with me! Here, you can request for my resume, get more details on my experience, or learn more about my favorite hobbies! I will reply as soon as I am able, thanks!
</div>
</body>
</html>
body {
margin: 0px;
background-color: rgba(195, 246, 255, 0.56);
}
.nav {
background-color: rgba(190, 190, 190, 0.72);
position: fixed;
left: 0px;
right: 0px;
text-align: center;
height: 100px;
border: 1px solid black;
}
li {
display: inline;
font-size: 20px;
}
.content {
border: 1px solid green;
background-color: white;
width: 1100px;
margin-top: 102px;
}
I'm trying to put a nav bar on top, with my content below it so it doesn't interfere. I set my .nav to height=100px and when I try to set my .content below it with margin-top: 102px, it ends up moving the .nav bar as well. However, when I add a border such as border: 1px solid black; to my body, it ends up working. I'm so confused! Can I make it so that without adding a border to my body, the nav displays correctly above my content?
position: fixed makes the element fixed to the page, so that it will always appear in exactly that position (with content either going on top or behind if necessary). If you'd like your navbar to be positioned at the top of the page, you're looking to apply top: 0 to it:
body {
margin: 0px;
background-color: rgba(195, 246, 255, 0.56);
}
.nav {
background-color: rgba(190, 190, 190, 0.72);
position: fixed;
left: 0px;
right: 0px;
top: 0;
text-align: center;
height: 100px;
border: 1px solid black;
}
li {
display: inline;
font-size: 20px;
}
.content {
border: 1px solid green;
background-color: white;
width: 1100px;
margin-top: 102px;
}
<body>
<div class="nav">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div class="content">
<p>Self-studying to become a web developer. Learning HTML, CSS, and JavaScript plus jQuery through Jon Duckett's books and FreeCodeCamp. Once I get my entry level job, I wish to study more and expand on back-end development, so I can become a full-stack
developer.</p>
<p>Portfolio:</p>
<p>Contact me here:</p>
<input type="text" />
<br />
<input type="text" />
<br />
<input type="text" />
<br />
<input type="submit" value="Send" />
<p>Here's where you can get in touch with me! Here, you can request for my resume, get more details on my experience, or learn more about my favorite hobbies! I will reply as soon as I am able, thanks!
</div>
</body>
If you don't want it to obscure the content on scroll, you're looking for position: relative. You'll also probably want to remove the margin-top: 102px on .content:
body {
margin: 0px;
background-color: rgba(195, 246, 255, 0.56);
}
.nav {
background-color: rgba(190, 190, 190, 0.72);
position: relative;
left: 0px;
right: 0px;
top: 0;
text-align: center;
height: 100px;
border: 1px solid black;
}
li {
display: inline;
font-size: 20px;
}
.content {
border: 1px solid green;
background-color: white;
width: 1100px;
}
<body>
<div class="nav">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div class="content">
<p>Self-studying to become a web developer. Learning HTML, CSS, and JavaScript plus jQuery through Jon Duckett's books and FreeCodeCamp. Once I get my entry level job, I wish to study more and expand on back-end development, so I can become a full-stack
developer.</p>
<p>Portfolio:</p>
<p>Contact me here:</p>
<input type="text" />
<br />
<input type="text" />
<br />
<input type="text" />
<br />
<input type="submit" value="Send" />
<p>Here's where you can get in touch with me! Here, you can request for my resume, get more details on my experience, or learn more about my favorite hobbies! I will reply as soon as I am able, thanks!
</div>
</body>
Hope this helps! :)
You should set top: 0; to your .nav class otherwise it will try to preserve the existing position vertically which could be why the margin is managing to affect it.
Related
I'm attempting to produce mailing list labels from a database connected to a website (yes, I could grab the list in some text format and import to something like Word... but ultimately I'm not going to be preparing the mailing so I want as few steps as possible in the process!). I've managed to get it working except for one part: the labels are not positioned correctly vertically.
I've looked at a number of questions on SO over the last few hours but none of the questions (or solutions) quite match what I've got.
I've defined 3 different paragraph classes for the 3 labels across the page (there's wierd gaps in the labels we've got for printing), with dimensions based on the label positions and size. Each label is a single paragraph with one of the 3 classes, and banks of labels sit inside a div representing the pages (these take into account the top and bottom margins of the pages).
Horizontally, it's working fine; vertically is another matter. Firebug is showing the paragraphs overlapping. I'm stumped as to what's going on.
Here's the CSS:
body
{
color: Black;
background-color: White;
font-family: "Times New Roman", Times, serif;
height: 100%;
margin: 0;
padding: 0;
font-size: 11pt;
}
p.print_label_left, p.print_label_right, p.print_label_middle
{
background: white;
position: absolute;
width: 5.4cm;
height: 1.43cm;
max-height: 1.43cm;
min-height: 1.43cm;
margin-left: 0.5cm;
margin-top: 1.48cm;
margin-right: 0.5cm;
margin-bottom: 0.5cm;
padding: 0.5cm;
top: 0;
border: none;
outline: solid 1px black;
}
p.print_label_left
{
left: 0.65cm;
}
p.print_label_middle
{
left: 7.3cm;
}
p.print_label_right
{
left: 13.95cm;
}
div.print_page
{
background: white;
position: relative;
padding: 0;
margin: 0;
left: 0;
top: 0;
width: 21cm;
height: 29.7cm;
border: none;
}
And here's a representative HTML sample (I can't give the real stuff due to privacy):
<body>
<div class="print_page" style="top:-1.33333333333cm;">
<p class="print_label_left" style="top:0cm;">A<br />
B<br />
C<br />
<br />
<br />
<br />
</p>
<p class="print_label_middle" style="top:0cm;">D<br />
E<br />
F<br />
<br />
<br />
<br />
</p>
<p class="print_label_right" style="top:0cm;">G<br />
H<br />
I<br />
<br />
<br />
<br />
</p>
<p class="print_label_left" style="top:2.43cm;">J<br />
K<br />
L<br />
<br />
<br />
<br />
</p>
<p class="print_label_middle" style="top:2.43cm;">M<br />
N<br />
O<br />
<br />
<br />
<br />
</p>
<p class="print_label_right" style="top:2.43cm;">P<br />
Q<br />
R<br />
<br />
<br />
<br />
</p>
</div>
</body>
The header defines a doctype (xhtml transitional 1.0) and I've played around with the max-height and min-height and putting extra lines in each paragraph to try to force it to have sufficient content to fill out the text, but no such luck.
When I print out the list, the outlines indicate the boxes are spaced at 2cm intervals not the required 2.43cm. And I'm fresh out of ideas of things to search for!
If it helps, I'm using Firefox 36 on a Windows 7 x64 machine but the server I'm running this on is a typical LAMP setup.
It's should work if i understand your question?
body
{
color: Black;
background-color: White;
font-family: "Times New Roman", Times, serif;
height: 100%;
margin: 0;
padding: 0;
font-size: 11pt;
}
p.print_label_left, p.print_label_right, p.print_label_middle
{
background: white;
width: 300px;
height: 100px;
margin-top: 10px;
padding: 0.5px;
top: 10px;
border: none;
outline: solid 1px black;
}
p.print_label_left
{
margin-left: 10px;
}
p.print_label_middle
{
margin-left: 150px;
}
p.print_label_right
{
margin-left: 300px;
}
div.print_page
{
background: white;
padding: 0;
margin: 5px;
left: 0;
top: 0;
width: 500px;
height: 100px;
border: none;
outline: solid 5px Red;
}
<div class="print_page">
<p class="print_label_left">A<br />
B<br />
C<br />
</p>
<p class="print_label_middle">D<br />
E<br />
F<br />
</p>
<p class="print_label_right">G<br />
H<br />
I<br />
</p>
<p class="print_label_left">J<br />
K<br />
L<br />
</p>
<p class="print_label_middle">M<br />
N<br />
O<br />
</p>
I want to make a control panel for the admin part of my website. The control panel I developed consists of several buttons. What I need is whenever I click one of the buttons, that option's sub-menu will appear right next to it. For example, I have "My Account" as one of the main options. If I click on the "My Account" button, its sub-menu (with Update Profile and Change Password etc.) will appear.
Here's the code for the control panel:
<div class="main-area">
<div class="control-panel">
<h1>Admin Control Panel</h1>
<button class="categories">My Account ►</button><br /><br />
<button class="categories">System Users ►</button><br /><br />
<button class="categories">Applicants ►</button><br /><br />
<button class="categories">Blacklist ►</button>
<br /><br />
<button class="categories">Jobs ►</button><br /><br />
<button class="categories">Requirements ►</button><br />
<br />
<button class="categories">Reports ►</button>
Here's the CSS part:
body {
font-family: arial;
background-color: #0F8DC7;
}
.control-panel {
border: solid 1px #000;
padding: 15px;
border-radius: 15px;
box-shadow: 5px 5px 5px;
width: 300px;
text-align: center;
display: inline-block;
height: 370px;
background-color: #FFE400;
}
.main-area {
width: 500px;
margin: auto;
}
.categories{
width: 200px;
}
Hoping for some answers not involving JavaScript.
It's just a demo, I haven't styled your code for a better view.
You have to use css :hover to achieve this functionality. And put your button(menuItem) and submenuItems(li) inside "ul" tag like this,
<ul>
<button class="categories">My Account ►</button><br /><br />
<li>First</li>
<li>Second</li>
</ul>
Add this css code ,
.main-area ul li{
display : none;
}
.main-area ul:hover li{
display : block;
background:blue;
height:auto;
width:8em;
}
Style your submenu items as you want.
jsFiddle
I recently edited the way a template was designed for MyBB. Fortunately, I made it exactly how I expected it to look, however, the navigation bar seemed broke. After trying to navigate, I realized that I could only click on the lower half of the navigation.
http://gyazo.com/99337bd5252b37e118ce119d5168bcf3
As you can see where I painted the red boxes is the only place where the link activation works. After about 2 hours I found out my problem was due to a "position: relative;". When I remove it, the navigation works fine but my panel div becomes moved all the way to the right and out of position.
<div class="main-bg">
<div class="main-width">
<a name="top" id="top"></a>
<div class="top-bar blue-texture"></div>
<div id="header">
<div id="panel">
{$welcomeblock}
</div>
<div class="logo" >
<img src="{$theme['logo']}" alt="{$mybb- >settings['bbname']}" title="{$mybb->settings['bbname']}" />
</div>
<hr class="hidden" />
</div>
</div>
</div>
<div id="container">
<div class="bg-img">
</div>
<hr class="hidden" />
<div class="menu blue-texture">
<span class="search">
<form action="search.php" method="post">
<input type="hidden" name="action" value="do_search" />
<input type="hidden" name="postthread" value="1" />
<input type="hidden" name="forums" value="all" />
<input type="hidden" name="showresults" value="threads" />
<input type="text" name="keywords" value="search..." onfocus="if(this.value == 'search...') { this.value = ''; }" onblur="if(this.value=='') { this.value='search...'; }" size="22" />
<input type="submit" value="Go" class="search-button" title="Search the forums" />
</form>
</span>
<ul>
<li>Home</li>
<li>Tournaments</li>
</ul>
</div>
There is the complete code on how I have developed this. However, the problem is mainly in the CSS.
#header {
padding: 60px 0 85px;
height: 56px;
text-align: left;
position: relative;
}
#panel {
background: rgba(0,0,0,0.4);
color: #fff;
border: 1px solid #07090b;
border-radius: 6px;
position: absolute;
top:0;
margin-top: 0px;
right: 0;
padding-top: 4px;
font-size: 12px;
padding-right: 12px;
padding-left: 12px;
height: 130px;
}
.menu {
border-radius: 6px;
-webkit-border-radius: 6px;
border: 1px solid #174d7b!important;
height: 50px;
}
I can't find a way to fix the problem however, because there is no way to add position:relative; and make the navigation links still work as they are intended to.
Without actual link or a working snippet it would be hard to find the issue, but please try this css that may solve your problem:
.menu { width: 100%; }
.menu ul li a { display: inline-block; width: auto; float: left; }
Hope this helps
Please bare in mind that I am new to code!
So I have a header and some text, that I am wanting to place on top of a background image that i have input using CSS, therefore the positioning is key.
It was all working fine, until i added more HTML content under neither the text. From this it was just as if the text wasn't picking up my CSS instructions.
HTML:
<div id="sidemicro">
<text class="circleheader"><h3>Special Occasion?</h3><p>Give us a call and </br> we'll see how we can make </br> your tour extra special!</p></br>
This is the text i need to format:
<div id="form">
<form action ='otterabout.php' method='POST'>
*Your Name: <input type='text' name='name'><br />
*Your Email: <input type'text' name='email'><br />
*Date of visit: <input type'date' name='date'><br />
*Time of visit: <input type'time' name='time'><br />
*Group Size: <input type'text' name='groupsize'><br />
<input type='submit' name='submit' value='Login'>
<input name='reset' type='reset' value='Reset'>
</form>
</div>
</div>
This is the content under the text which has stopped it formatting.
CSS:
.circleheader {
margin-top:70%;
margin-left:15%;
}
.circletext {
text-align:center;
margin-left:35%;
}
Thanks!
Is this the type of formatting you're looking for? FIDDLE.
CSS
.sidemicro {
margin-left: 10px;
width: 600px;
border: 1px solid black;
background: url('https://res.cloudinary.com/roadtrippers/image/upload/v1396514626/p2nmpjpgjsm8iihdh5ip.jpg');
background-size: 600px;
background-repeat: no-repeat;
}
.circleheader {
width: 200px;
border: 0px solid black;
margin: 10px auto;
color: white;
background-color: rgba(0, 0, 0, 0.4);
text-align: center;
}
I'm trying to insert a search field in my header (black zone) but doesn't work. I want the search field inline with "SimpleCMS"...
See this screenshot to understand:
I want it on the same line as the header text...
There's my HTML code:
<div id="header"><h1><?php echo($header_text); ?></h1>
<div style="float: right;">
<form action="search.php" method="get">
<input type="text" name="q" id="q" value="Search..." />
<input type="submit" value="Search" />
</form>
</div>
</div>
And my CSS:
#header
{
padding: 5px 10px;
background: #000;
color: #FFF;
text-align: left;
}
The problem is that you use a <h1> element. This will span over the whole width (see here) of the top so that every other element will be placed below it. Use a <span> instead and style it according to your needs. Using position-absolute as alpaca lips nao suggests might work as well.
Update: Use position: absolute;
#header
{
padding: 5px 10px;
background: #000;
color: #FFF;
text-align: left;
position: relative;
}
#header div form {
position: absolute;
top: 75px;
right: 25px;
}