As seen below, I have 3 links inside a div with a class of "nav", and then 4 divs in a div with a class of "contact-info", each containing an image and some text.
Now for some reason, which I can't figure out, my divs inside "contact-info" are underlined and turn red when clicked, as if they would've been a link. This is even without giving it any css.
If anyone could look into my script and tell me what I'm doing wrong I'd greatly appreciate it.
<!DOCKTYPE html>
<html>
<head>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">Log In</li>
<li><a href="#">Sign Up</li>
<li><a href="#">Contact Us</li>
</ul>
</div>
<div class="contact-info">
<div class="home">
<img id="home" src="images\home.png"/>
<p>Company Name<br></br>Company Address<br></br>City, State Zip</p>
</div>
<div class="phone">
<img id="phone" src="images\telephone.png"/>
<p>Phone Number</p>
</div>
<div class="fax">
<img id="fax" src="images\fax.png"/>
<p>Fax Number</p>
</div>
<div class="email">
<img id="email" src="images\email.png"/>
<p>Email Address</p>
</div>
</div>
</body>
</html>
You need to close the link tags like this
<li>Log In></li>
<li>Sign Up></li>
<li>Contact Us</li>
Hope this helps :)
Also, I just had another look at the code, and there is no need to close your break tags, just
<p>Company Name<br>Company Address<br>City, State Zip</p>
on its own Is fine, but I don't think it makes a real difference :)
Related
I have two <div>s surrounding an image in same row, but when I add the image the right <div> drops below.
I've tried float, display:inline-block and even styling the HTMLtags, but it didn't help.
Please help me out.
Here's my code:
<title>Hair by Michelle</title>
<body>
<div class="all">
<div class="navbar">
<img class="pic1" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7" alt="Photo of Michelle>
<h1>Hair By Michelle</h1>
<ul>
<li class="home">home
</li>
<li class="about">about
</li>
<li class="availability">appointments
</li>
<li class="contact">contact
</li>
</ul>
</div>
</div>
<div class="container">
<div class="hours">
<h1>Hours</h1>
<p>Tuesday: 12pm-7pm</p>
</br>
<p>Wednesday: 12pm-7pm</p>
</br>
<p>Thursday: 10am-7pm</p>
</br>
<p>Every other Saturday: 10am-7pm</p>
</div>
<div class="services">
<h1>Services</h1>
<h4>Women's Haircut $32</h4>
</br>
<h4>Men's Haircut $22</h4>
</br>
<h4>Full head color $50</h4>
</br>
<h4>Full highlights $70</h4>
</br>
<h4>Color toning $15</h4>
</br>
<h4>Facial waxing $12</h4>
</div>
</div>
Ignore the result area, just paste it in an editor.
if you want elements to line up in the same line should add:
float:left;
position:relative;
for the HTML I would recommend each image in a div:
.imgrow {
width:100px;
height:100px;
position:relative;
float:left;
}
<div class="imgrow"><img class="imgrow" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7"></div>
<div class="imgrow"><img class="imgrow" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7"></div>
I see just one image in your code...
If you need the text to be displayed next to the image, try this-
<div class="navbar">
<div style="float:left;">
<img class="pic1" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7" alt="Photo of Michelle">
</div>
<div style="float:right;">
<h1>Hair By Michelle</h1>
<ul>
<li class="home">home
</li>
<li class="about">about
</li>
<li class="availability">appointments
</li>
<li class="contact">contact
</li>
</ul>
</div>
</div>
I'm new in HTML and I wrote this some code:
<div id = "here">
<a href="#end">
<p>stay here</p>
</div>
<button id="test" onclick="clickSpecialButton('click')">click</button>
<span onmouseover="clickSpecialButton('hover')">hover</span>
<div id="start"></div>
<h1>My first web page</h1>
<figure>
<img src="globe_kyw.jpg" width=90 height=90>
<figcaption>Tixall Obelisk</figcaption>
</figure>
<nav id="main_nav">
<ul>
<li>Tutorials</li>
<li>Reference</li>
<li>Articles</li>
<li>About us</li>
</ul>
</nav>
<div id="end">
text
</div>
The result is the text in it: ("stay here", "hover", "My first web page", "Tixall Obelisk") all of it underline and it link to #end.
I wanted only what inside the div with id = "here" to be linked to #end.
What's wrong with what I did?
You forgot to close the a tag, try closing it after the p tag like this:
<div id = "here">
<a href="#end">
<p>stay here</p>
</a> <!-- Notice the close tag here -->
</div>
<button id="test" onclick="clickSpecialButton('click')">click</button>
<span onmouseover="clickSpecialButton('hover')">hover</span>
<div id="start"></div>
<h1>My first web page</h1>
<figure>
<img src="globe_kyw.jpg" width=90 height=90>
<figcaption>Tixall Obelisk</figcaption>
</figure>
<nav id="main_nav">
<ul>
<li>Tutorials</li>
<li>Reference</li>
<li>Articles</li>
<li>About us</li>
</ul>
</nav>
<div id="end">
text
</div>
I have some html that is rendered by Flask. I have three navigation tabs that the user can click on to see different panels. This is the relevant code:
<div class="tabbable">
<!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Pick Colors
</li>
<li>Add Text
</li>
<li>Add Logos
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="well">
<ul class="nav">
<li class="color-preview" title="White" style="background-color:#ffffff;"></li>
</ul>
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="well">
<div class="input-append">
<input class="span2" id="text-string" type="text" placeholder="add text here...">
<button id="add-text" class="btn" title="Add text"><i class="icon-share-alt"></i>
</button>
<hr>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<div id="avatarlist">
<img style="cursor:pointer;" class="img-polaroid" src="static/img/img1.png">
</div>
</div>
</div>
When I open the HTML file by itself, I can click on the different tabs and get the relevant tab-pane's to open up. When the page is rendered by Flask though, I'm unable to get the functionality to work. Clicking the tabs doesn't do anything. What am I doing wrong?
I understand Flask uses Jinja templates so I must not be understanding that properly, but I'm not sure how to fix it. Thanks in advance for your help.
I just fixed it. The issue was that
<li>Add Text
</li>
<li>Add Logos
Should've said data-toggle="tab" instead of tab#.
I'm stuck with the CSS of following HTML link and want to expand the height of header image so I can adjust larger with it, but when I play with the CSS of the .header & .logo classes it expands the navigation bar also, I just really need to expand the height of the header image to have larger height logo into it.
Looking your html source seems you can have different solutions. Problem is with your html... You have
<div class="navigation">
inside
<div class="container">
Ans : get navigation div out of container div. Then changing the height of container div would be the best and not affect the height of your links.
Why you are getting problem : your header div is containing links inside it. That is why changing the height of header is not good (It simply changes the overall height of this div).
Update : Reply to your first comment on my answer
<div class="inner">
<div class="container">
<!-- Logo Start -->
<div class="five columns left">
<img src="images/logo.png" alt="" />
</div>
<!-- Logo End -->
<div class="eleven columns right">
<!-- Top Links Start -->
<ul class="top-links">
<li>
<h4 class="colr">Search Music</h4>
<div id="search-box">
<input name="" value="Enter any keyword"
onfocus="if(this.value=='Enter any keyword') {this.value='';}"
onblur="if(this.value=='') {this.value='Enter any keyword';}" type="text" class="bar" />
<button>Search</button>
</div>
</li>
<li>
LOG IN
<div id="login-box">
<h4 class="white backcolr">User Login </h4>
<ul>
<li>
<input name="" value="yourname#email.com"
onfocus="if(this.value=='yourname#email.com') {this.value='';}"
onblur="if(this.value=='') {this.value='yourname#email.com';}" type="text" class="bar" />
</li>
<li>
<input name="" value="password"
onfocus="if(this.value=='password') {this.value='';}"
onblur="if(this.value=='') {this.value='password';}" type="password" class="bar" />
</li>
<li>
<input type="checkbox" class="left" />
<p>Remember me</p>
Forget Password?
</li>
<li>
<button class="backcolrhover">Login</button>
</li>
</ul>
<div class="clear"></div>
</div>
</li>
</ul>
<!-- Top Links End -->
</div>
<div class="clear"></div>
</div>
<!-- Container End -->
<!-- Navigation Start -->
<div class="navigation">
<div id="smoothmenu1" class="ddsmoothmenu">
<ul id="nav">
<li class="current-menu-item">Home</li>
<li>NEWS</li>
<li>Albums
<ul>
<li>Albums</li>
<li>Album Detail</li>
</ul>
</li>
<li>Blog
<ul>
<li>Blog</li>
<li>Blog Detail</li>
</ul>
</li>
<li>Gallery
<ul>
<li>Gallery - Two Column</li>
<li>Gallery - Three Column</li>
<li>Gallery - Four Column</li>
<li>Gallery - Slide Show</li>
</ul>
</li>
<li>About Us</li>
<li>Contact Us</li>
<li>BUY THIS THEME</li>
</ul>
<div class="clear"></div>
</div>
</div>
<!-- Navigation End -->
</div>
Then change your css and see the results
.container {
width:100%;
height:100px; /* I have changed it 50px to 100px*/
float:left;
margin-top:2px;
}
Change your header height here :
#header {
width:100%;
height:148px; <-----------Here
float:left;
position:relative;
z-index:2;
margin-bottom:15px;
box-shadow:0px 2px 2px #000;
background:url(../images/header.gif) repeat-x;
}
Edit: I just inspected with firebug, you are using multiple classes and you've nested div's, your logo div lies here
five columns left
I guess you've picked this template and you are trying to edit it right?
I'm just starting a new app. Below is a basic mockup of what I am tasked to do.
I'm new to using HTML5 for my semantic markup so I'd like some feedback/help.
I'd like to understand how/where to use things like <nav> and <section>
<div id="container">
<header>
<div id="appInformation">
<a href="#" alt="Home">
<img src="">
</a>
<span>Selected AppName</span>
</div>
<div>
<span id="time">TIME GOES HERE</span>
</div>
<div>
<a href="#" alt="Additional Information">
<img src=""><!-- This is will be the location of the the 'i'-->
</a>
</div>
<div class="">
<label>UserName</label>
</div>
</header>
<div id="main">
<!-- main content for the selected app here -->
</div>
<footer>
<div id="appVersion">
VERSION # HERE
</div>
<nav>
<ul>
<li>
FAQ
</li>
</ul>
</nav>
<div id="">
<!-- Team logo here-->
</div>
</footer>
Avoid unacessary Div.
Use the Time Tag instead of Div for Time Element.
Avoid Label if you don't have anything to refer too, like an input.
Selected AppName
<time datetime="YYYY-MM-DD">TIME GOES HERE</time><!-- Don't need an id Time since you can target the Time tag -->
<a href="#" alt="Additional Information">
<img src=""><!-- This is will be the location of the the 'i'-->
</a>
<em>UserName</em> <!-- Don't use a label if you got nothing to refer too, like an input for example. -->
</header>
<div id="main">
<!-- main content for the selected app here -->
</div>
<footer>
<div id="appVersion">
VERSION # HERE
</div>
<nav>
<ul>
<li>
FAQ
</li>
</ul>
</nav>
<a href="yourTeamUrl" id="">
<!-- Team logo here-->
</a>
</footer>
In addition to #Simon Arnold's fine answer, I might also suggest that the <nav> usage is incorrect. A single link in a footer can hardly be construed as a "major navigation block". See the first note in green text at http://dev.w3.org/html5/spec/sections.html#the-nav-element