I am a Beginner Website Developer, I want to make my college's project but stuck at the beginning because my navigation div and small divs in navigation div are not going to transform or transit at once. when i apply transition at one of em with absolute position all (also apply absolute position to other three small divs) the all three of em except first disappears. Code is linked. I want to make navigation just like IMDB's Navigation. (with downside transition and with links and picture at one end.)
-Thank in advance.
HTML CODE:
<body>
<div id="Papadiv">
<header id="Header">
<Div id="Logodiv">
<img src="Images/Logo.jpg" height="100px" width="100px" />
</Div>
<Div id="Titlediv">
<font size="+5" face="Comic Sans MS, cursive">MobilePassion.com</font>
</Div>
</header>
<nav id="Nav1">
<div id="navoption1">
<a href="Index.html">
New Arrivals</a>
</div>
<div id="navoption2">
<a href="Famousmodels.html">
Famous Models</a>
</div>
<div id="navoption3">
<a href="Whoweare.html">
Who We Are?</a>
</div>
<div id="navoption4">
<a href="Contactus.html">
Contact Us</a>
</div>
</nav>
/* CSS Document */
#Nav1
{
background-color: #FDAA2F;
height:50px;
width:800px;
}
#navoption1
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
}
#navoption2
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
}
#navoption3
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
}
#navoption4
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
#navoption1:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink;
background-image:url(Rose%20(1).jpg)
}
#navoption2:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink
}
#navoption3:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink
}
#navoption4:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink
}
I think first off you need to do some research on how to build a "CSS Mega Drop Down Menu". (That's usually what they are called and you should be able to find a good example in which you can structure your styling off of.)
A "classic" drop down menu usually contains lists nested (or in your case - divs) within parent list items.
"Here" is a good step by step example that I think should get you off and running.
I have been rtying to find a good resource for an example. These are good examples to learn from i think. http://code-tricks.com/simple-css-drop-down-menu/ , http://css-tricks.com/simple-jquery-dropdowns/ . It would also be wise for user experience to use hoverintent (http://cherne.net/brian/resources/jquery.hoverIntent.html) or a delay. This creates a better user experience.
Related
I'm creating a horizontal nav bar in CSS and would like the icons to be placed in the following order from left to rigiht: +Matthew, Gmail, Images, 3x3 Square Block, Alarm Clock, Google Plus, Smiley Face. The problem is that the 3x3 Square Block always locates to the far right and does not fit in with the rest of the list. The block was created using a separate div and blocks with CSS. How do I make it so that I can place it as the fourth item from the left? Also, I am struggling to properly align my Google Plus icon with the rest of the list items. Whenever I try to set a seperate padding for the icon, it moves all of the icons down as well. Here's my code:
<ul>
<li><a class ="headerLink matthew" href="#home">+Matthew</a></li>
<li><a class ="headerLink gmail" href="#news">Gmail</a></li>
<li><a class ="headerLink images" href="#contact">Images</a></li>
<li>
<div id="googleApps"> <a href="https://www.google.com/drive/">
<div class ="googleDocs"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
</div>
<li> <a class="headerLink alarm" href="https://www.nba.com">☎</a> </li>
<li><img class="headerLink googlePlus" src="http://www.siam.org/publicawareness/images/Google-plus-icon.png">
<li><a class="headerLink profPic" href="https://plus.google.com/+MatthewThrasher/posts">☺</a></li>
</ul>
#googleApps {
height:20px;
width:20px;
position:relative;
float:right;
}
#googleApps:hover .square {
background-color:black;
}
.headerLink {
font-size: 12px;
color:#989898;
text-decoration:none;
font-family:"Arial", arial, sans-serif;
padding-left:30px;
}
.matthew:hover, .gmail:hover, .images:hover {
text-decoration:underline;
}
.square {
background-color:#737373;
float:left;
position: relative;
width: 30%;
padding-bottom: 30.66%;
margin:1.66%;
}
.square:hover {
background-color:black;
}
.driveLink {
width:20px;
height:20px;
background-color:white;
color:white;
/*Important:*/
position:relative;
}
.alarm {
font-size: 25px;
}
.googlePlus {
height: 30px;
width: 30px;
}
.profPic {
font-size: 30px;
}
I'm not sure if you have more CSS in your document but you're missing a bit of CSS to actually make your menu horizontal.
You can make it horizontal by adding to your CSS:
li {
display: inline-block;
}
Extra properties in your CSS was pushing your squares to the side.
Remove float:right and it should align properly.
Pretty much everything else was caused by missing closing tags.
I fixed up the code and made comments where they were missing: http://jsbin.com/letuwahuqe/1/edit?html,css,output
Just some tips as you continue coding - you should really pay attention to your formatting and syntax. Not sure how you're working on your stuff but the code you copy and pasted here has a lot of inconsistent spacing in both HTML and CSS. This makes it really hard to catch mistakes like missing tags and especially difficult for other people looking at your code to understand.
I recommend using something like Sublime Text (it's free!) which will make your life a lot easier!
You can do this by adding the following CSS to your code:
li {
display: inline;
}
I think this will do it!
I also resized your icon:
<img class="headerLink googlePlus" src="http://www.siam.org/publicawareness/images/Google-plus-icon.png" style="height: 20px; width: 20px;">
I have looked around at google and looked at another question: Page elements moving on window resize and I still cannot find the answer to this. My problem is that when I resize the browser my top div element where my navigation bar is moves messing up how the website looks. Since the CSS has it a certain amount to the right CSS probably updates how the page looks since I am resizing it. How would I keep the elements from moving upon page resizing?
My current code
<div id="top" style="background-image: url(images/Home/space.gif); height: 120px; width: 100%; border: 1px solid black;">
<a href="contact.html">
<img id="buttoncontact" alt="Contact" src="images\Logo\contact.png">
</a>
<a id="plugins" alt="Plugins" href="http://bukkit.org/" target="_blank"> +Bukkit</a>
<img id="bukkiticon" src="images\Logo\bukkit.png">
<a id="twitter" alt="Twitter" href="https://twitter.com/" target="_blank"> +Twitter</a>
<img id="twittericon" src="images\Logo\twitter.png">
<a id="youtube" alt="YouTube" href="https://www.youtube.com/" target="_blank"> +YouTube</a>
<img id="yticon" src="images\Logo\youtube.png">
<img id="td6img" src="images\Logo\TD6.png">
<nav id="navigation">
<a id="navigation-anchor-normal" href="contact.html">
<img src="images\Home\mars.png">
</a>
<a id="navigation-anchor-normal" href="projects.html">
<img src="images\Home\merc.png">
</a>
<a id="navigation-anchor-current" href="home.html">
<img src="images\Home\sun.png">
</a>
<a id="navigation-anchor-normal" href="lessons.html">
<img src="images\Home\nept.png">
</a>
<a id="navigation-anchor-normal" href="donate.html">
<img src="images\Home\jupiter.png">
</a>
</nav>
</div>
CSS
#top
{
background-image: url("images/Home/stars.png");
height: 95px;
border: 1px solid black;
width: 100%;
position: fixed;
top:0;
left:0;
background: rgba(255,255,255,1);
z-index: 100;
-webkit-box-shadow:0px 0px 20px rgba(44,44,44,.3);
}
#buttoncontact
{
float:left;
}
#yticon
{
position:absolute;
right:300px;
}
#youtube
{
text-decoration:none;
position:absolute;
right:225px;
color:red;
}
#twittericon
{
position:absolute;
right:190px;
}
#twitter
{
text-decoration:none;
position:absolute;
right:130px;
color:aqua;
}
#bukkiticon
{
position:absolute;
right:95px;
}
#plugins
{
text-decoration:none;
position:absolute;
right:35px;
color:#FF8000;
}
#navigation
{
text-align:center;
}
#navigation-anchor-normal
{
text-decoration:none;
color:aqua;
display:inline-block;
padding:5px 8px;
}
#navigation-anchor-current
{
text-decoration:none;
color:aqua;
display:inline-block;
padding:5px 8px;
}
The only element that is not moving is the TD6img above the nav. Everything else is moving when I resize the window.
What I want to accomplish is having these elements stay put upon resizing the window and not move with the resizing.
This is only happening to this div element no other div element that I have under it.
What you are trying to do is creating a responsive site.
I highly suggest you to use existing framework for that, and not trying to redo all by your self.
For that, look at twitter bootstrap that is the most robust and efficient jquery / javascript responsive design framework.
If you still want help with your task have a look at this DEMO Not sure if this is what you were looking for but play around with it if you want. Also you can upvote my answer when you get enough rep. I swithed most of your position:absolute to float:right
If you are looking for something easy to use and doesn't require a lot of changes, you can also use the "framework" from here: http://www.responsivegridsystem.com/
It is not too heavy and only gives you what you need to make a site responsive. I am using this for a company.
Twitter bootstrap in my opinion is good but it is heavy and although most classes doesn't get loaded, changing/modifying the code is very hectic.
I am trying to put three h4 elements on the same line, I tried using display:inline-block; on all of them, but that only put two of the elements on the same line, the third one is under them.
Here is my HTML
<h4 id="vbottomcreator"><a style="color:orange;">></a> Created by <a style="color:orange;"><</a></h4>
<h4 id="vbottomdates" align="center"><a style="color:orange;">></a> tasdf <a style="color:orange;"><</a></h4>
<h4 id="vbottomdevelopment"><a style="color:orange;">></a> Website still in Development <a style="color:orange;"><</a></h4>
The third element is under the rest
CSS
#vbottomdates
{
color:black;
display:inline-block;
margin-left:362px;
}
#vbottomcreator
{
color:black;
margin-left:30px;
display:inline-block;
}
#vbottomdevelopment
{
color:black;
margin-left:1100px;
display:inline-block;
clear:none;
}
QUESTION SOLVED
Try like this: Updated Demo
HTML:
<div class="center">
<h4>...</h4>
<h4>...</h4>
<h4>...</h4>
</div>
CSS:
#vbottomdates {
color:black;
display:block;
float:left;
}
#vbottomcreator {
color:black;
display:inline-block;
}
#vbottomdevelopment {
color:black;
display:block;
float:right;
display:inline-block;
}
.center {
width:100%;
margin:0 auto;
display:inline-block;
text-align:center;
}
Margin value is more for the last id.. Try to reduce the value like this.. all the 3 elements were placed properly
I am wondering why are you using margin-left to place all elements horizontally. You will seriously have to change it in future, as it will enable horizontal scroll if window size is reduced. In other words, your page will never be responsive.
remove all margin-left property and give some width in percentage such that total width of all blocks remains less than 100% width of window.
This will ensure that even if user reduces window size, your elements will be in correct position.
Check DEMO here
HTML
<h4 id="vbottomcreator" class="vbottom"><a style="color:orange;">></a> Created by <a style="color:orange;"><</a></h4>
<h4 id="vbottomdates" align="center" class="vbottom"><a style="color:orange;">></a> tasdf <a style="color:orange;"><</a></h4>
<h4 id="vbottomdevelopment" class="vbottom"><a style="color:orange;">></a> Website still in Development <a style="color:orange;"><</a></h4>
CSS
#vbottomdates
{
color:black;
display:inline-block;
}
#vbottomcreator
{
color:black;
display:inline-block;
}
#vbottomdevelopment
{
color:black;
display:inline-block;
clear:none;
}
.vbottom {
width : 30%;
}
Reduce the margin left value:
#vbottomdevelopment
{
color:black;
margin-left:500px;
display:inline-block;
clear:none;
}
I'm designing a website. My monitor's resolution is 1280 x 1024 and I usually use Firefox for developing. This is how it looks and should look. This one is the correct one.
But there's a slight change when viewed in Chrome in the same monitor. Notice the right bottom corner.
Things get even worse when viewed in a another monitor with a different screen resolution. This is my screen at work which's resolution is 1366 x 768.
On Firefox
On Chrome
As you can see, the layout is messed up pretty bad. Below is the code.
HTML
<img id="yellowRing" src="images/about_rings/yellow_ring.png" />
<img id="magentaRing" src="images/about_rings/magenta_ring.png" />
<img id="blueRing" src="images/about_rings/blue_ring.png" />
<div id="aboutCaption">
<p>Our Team</p>
</div>
<div id="team">
<div class="member"><a data-member="one" href="#"><img src="images/team/one_thumbnail.png" /></a></div>
<div class="member"><a data-member="two" href="#"><img src="images/team/two_thumbnail.png" /></a></div>
<div class="member"><a data-member="three" href="#"><img src="images/team/three_thumbnail.png" /></a></div>
<div class="member"><a data-member="four" href="#"><img src="images/team/four_thumbnail.png" /></a></div>
</div>
CSS
#yellowRing {
position:absolute;
left:1200px;
bottom:-1300px;
z-index:2;
}
#magentaRing {
position:absolute;
left:1600px;
bottom:-1100px;
z-index:3;
}
#blueRing {
position:absolute;
left:2160px;
top:500px;
z-index:4;
}
#aboutCaption {
position:absolute;
left:2430px;
top:-50px;
z-index:4;
line-height:2.2em;
}
#aboutCaption p {
font-weight:lighter;
text-align:right;
color:#FFF;
font-size:55px;
}
#team {
position:absolute;
left:2135px;
top:90px;
width:432px;
height:110px;
z-index:4;
}
.member {
position:relative;
height:95px;
width:95px;
margin:8px 8px 8px 0px;
z-index:5;
display:inline-block;
}
.member:nth-child(1) {
margin-left:8px;
}
.member img {
height:95px;
width:95px;
}
This website only scrolls horizontally. My question is, why this is happening? And what should I do to make the layout consistent despite the screen size or the resolution? Or do I have to go about the responsive design and include multiple CSS files per benchmark?
Thank you.
To cover all platforms/browsers/etc... you will have to euther use a framework, which gets bulky, or if you're keeping it simple, I would go with some #media rules in order to cover your different layout dimensions. Basics of it can be found at W3 Media Types
<div id="wrapper">
<div id="header"></div>
<div id="pattern"></div>
<div id="main">
<img src="http://i52.tinypic.com/16i6z9d.jpg" />
<h3 class="text">
Freelance Web/Logo <br />
Designer & Developer <br />
→ Muzammil Hussain
</h3>
</div>
</div>
CSS :
body { font-size:12px/20px; }
#wrapper { position:relative; }
#header { width:100%; height:150px; background:url(http://i55.tinypic.com/1zpgny8.jpg) repeat-x;}
#pattern { width:100%; height:150px; background:url(http://i51.tinypic.com/ao75eg.jpg) repeat; position:absolute; top:0px; }
#main { width:1200px; margin:0 auto; margin-top:-103px; }
#main img { float:left; margin-right:10px; }
#main h3 { float:left; margin-top:5px; font:12px/20px "Bookman Old Style"; text-shadow: 1px 1px #000; line-height:14px; color:#fff; }
Well please first of all check if i did any mistake let me know. and also i having trouble that my #pattern overlaying all my classes. i just want this class appear over #header. but something i am missing..
Actually i want results like that.
Please let me know.
This markup could be improved a lot. But if you are just looking for a fix try adding position: relative to #main.
What's happening is #pattern is coming out of the natural flow of the document because it has position: absolute set on it. Therefore unless stated otherwise it appears on top of every other element inside it's parent element.
Also I would consider reducing your markup to something like this...
<div id="wrapper">
<div id="pattern"></div>
<img src="http://i52.tinypic.com/16i6z9d.jpg" />
<h3 class="text">
Freelance Web/Logo <br />
Designer & Developer <br />
→ Muzammil Hussain
</h3>
</div>
Be careful not to use too many IDs when using them to style elements. They can be very powerful and on a large site can result in lots of pain trying to override them and their child elements when you want to.