i want to place a image in a very specific place (top right of the NAV bar) and i have done that using postition:relative; (also tried absolute) and moving it accordingly.
when ever i crop the browser it will stay in the white space outside of the div wrapper i have.
so basically my image is not scaling with the div wrapper i have.
can anyone provide some tips? sorry for the noob question.
here is some code.
<div id ="Wrapper">
<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li class='active has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a> </li>
<li class='has-sub'><a href='#'><span>Product 2</span></a> </li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
<img src="images/register.jpg" width="50px" height="45px" id="register"/>
</div><!-- end of css -->
Wrapper div is at the bottom.
the css for the "register" id is just positioning coordinates
The nav bar is a template i downloaded.
Based on the CSS you provided in your comment, the reason it is doing this is because you are using pixels to set width. If you use a percentage, your image will shift to the screen size. So if you want it at the very right side of your container, try: left: 99%; or change the percentage value to place it where you need it to be.
ok simple try this.
<html>
<head>
<style>
h3 {
word-spacing: 100px;
}
</style>
</head>
<body>
<!-- make sure you put it in the heading tag of nav bar right allign-->
<hr>
<h3>
Example
Example
Example
Example
<!--Put Image below here-->
<img src="IMAGE.jpg">
</h3>
<hr>
Related
i am using below code
<div>
<div id="aboxound" >
<ul>
<li class="aHeader" >
<ul>
<li class="Name">Names</li>
<li class="Name">values</li>
</ul>
</li>
<li style="height:500px; overflow-y:scroll;">
<c:forEach items="${dataModel.List}" var="entry">
<li class="aUser" >
<ul>
<li class="userName"><c:out value="${entry.key}" /></li>
<li class="userName"><c:out value="${entry.value}" /></li>
</ul>
</li>
</c:forEach>
</li>
</ul>
</div>
</div>
Here i want to apply scroll to second list, by keeping first list as fixed header. My above code is not working.it add empty scroll first and then list item without scroll. What i am doing wrong
If you write overflow:scroll even the not content not heavy it shows scroll, use overflow:auto in your code inplace overflow-y:scroll.
My website has some serious issues when you resize it to the medium and small views. It looks great at full screen and mobile view but has some serious issues in the browser when you shrink it down to medium and below. I've used foundation but also mixed in some non-foundation code that I think is causing some issues, such as the container. I also suspect there is something wrong with the top nav bar, because that looks off at shrunk views as well. There is a lot of code to look at but i will post some snippets here as well as link to the main site so you can look through the full code.
Here is some of the top bar and also I have a container which is not part of the grid which might be throwing things off, as well as a weird header element that I coded some css for and if removed throws it off as well. Basically, my code is a bit of a mess, and I will be cleaning it up best I can once I figure out what is causing a lot of this mess up when the browser is resized. (ps. to see the rest of the code and css, please visit www.omegadesignla.com and inspect element, or ask me to paste a specific part, thanks! )
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<span><img class="logo" src="img/primarylogo.png"><span>
</li>
<li class="toggle-topbar menu-icon">
Menu
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>About us</li>
<li>Contact us</li>
<li class="has-dropdown">
Services
<ul class="dropdown">
<li>Print Media</li>
<li>Web Development</li>
<li>Promotional Items</li>
<!-- <li class="active">Active link in dropdown</li> -->
</ul>
</li>
</ul>
</section>
</nav>
<div class="container">
<header>
<div class="row">
<div class="large-3 medium-3 small-6 small-centered columns"> <!-- large centered -->
<a id="topbutton" href="#" class="button large radius button">Take the tour!</a>
</div>
</header>
From debugging your site with firebug i see that the logo in the left top corner is a png with 720px width. Although you have class .logo width: 40% it makes the .title-area 720px width which breaks the layout.
try following additions to css:
.title-area {
max-width: 40%; //or whatever you need for your layout. px will work there, too
}
.title-area .logo {
width: 100%;
height: auto;
}
I'd also rewize the png to the needed size to save some kB to download.
I hope that helps.
I'm new to programming and I'm trying to build a website with various links in the same line. I'm using div so I got them all on the same block. The problem is that when I put all the links on float:left, the background color dissappears, but when I put the last link with float:center it shows the background as I want it.
Can anyone help me? Thanks in advance
This is what I'm using:
<div id="links" style="width:1250;height:450;background-color:#000000;text-align:center">
<ul type="none">
<li style="float:left;margin-right:100px;text-align:center">
Nosotros
</li>
<li style="float:left;margin-right:100px">
Desafío UNIMET
</li>
<li style="float:left;margin-right:100px">
Patrocinantes
</li>
<li style="float:left;margin-right:100px">
Contacto
</li>
</ul></div>
There is no such thing as float: center only left, right, none, and inherit. But the reason the parent container bg color is not showing is because when you float an element it no longer takes up space in its parent.
Either give your parent container a height (and specify pixels or some other unit of measure which you aren't doing now), or as a hack you can give the parent: "overflow: hidden;" css property.
Good luck in your learnings! Time and passion will get you everwhere!
EDIT: I highly recommend you get the book CSS Mastery by Andy Budd. It will teach you this and a lot more.
You had not given the unit to width, and height. Make it to px or em or as per what you need and it will work.
<div id="links" style="width:1250px;height:450px;background-color:#000000;text-align:center">
<ul type="none">
<li style="float:left;margin-right:100px;text-align:center">
Nosotros
</li>
<li style="float:left;margin-right:100px">
Desafío UNIMET
</li>
<li style="float:left;margin-right:100px">
Patrocinantes
</li>
<li style="float:left;margin-right:100px">
Contacto
</li>
</ul></div>
Try this http://jsfiddle.net/sLEYs/
Secondly, there is no such value center for float. http://www.w3schools.com/css/css_float.asp
I am having issues with my navigation collapsing into the body of my site and I would prefer it to remain fixed when the browser window is re-sized. I have tried adjusting the min/max-widths of the bootstrapresponsive.css but it still seems to disappear into the body. Any help would be amazing. Cheers! I have posted the code below:
<div class="navbar" style="padding-bottom:0px;">
<div class="navbar-fixed-top">
<div class="container" style="width: auto;">
<div id="logo"><img src="images/CoHlogo.jpg" class="logoImage";></div>
<div class="nav-right">
<!--Social Networking-->
<a class="socialNav" href="mailto:info#classroomofhope.org?subject=Website Inquiry"><img src="img/social/mail.png"/></a>
<a class="socialNav" href="http://www.youtube.com/user/Classroomofhope" target="_blank"><img src="img/social/youtube.png"/></a>
<!-- Twitter
<a class="socialNav" href="https://twitter.com" target="_blank"><img src="img/social/twitter.png"/></a> -->
<a class="socialNav" href="https://facebook.com/ClassroomOfHope" target="_blank"><img src="img/social/facebook.png"/></a>
<!--Google plus
<a class="socialNav" href="https://google.com" target="_blank"><img src="img/social/googleplus.png"/></a> -->
<!--Donate Button -->
<img src="img/donate_header.png" class="donateImage";>
</div>
<div class="nav-collapse" id="nav-collapse">
<ul class="nav" id="nav">
<li class="dropdown" id="about">ABOUT US
<ul class="dropdown-menu">
<li id="values">OUR VALUES</li>
<li id="journey">OUR JOURNEY SO FAR</li>
<li id="founder">MEET THE FOUNDER</li>
</ul>
</li>
<li id="education">WHY EDUCATION?</li>
<li id="projects">PROJECTS</li>
<!--<li id="media">MEDIA CENTER</li>-->
<li id="donate">DONATE</li>
<li id="contact">CONTACT US</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Removal of the class .nav-collapse from one of the <div> elements solves this problem. As the name of the class suggests, an element with this class will become hidden on smaller screen sizes (I think below widths of 979px is what the stylesheet says?), by receiving height:0 and overflow:hidden via media query.
Here's a JSFiddle (with externally-loaded Bootstrap CSS) that demonstrates how layout would appear without this class. Try resizing the Result pane to see how it would look at different screen sizes.
I hope this is what you were looking for! If not, let me know and I'll be happy to help further.
(Edit:) On taking a look at your live environment, I can now see that when you say "collapse", you mean the navigation links break to a new line as the parent element becomes too small. This is standard behaviour for floated elements. To stop this from happening, you can try applying min-width:1200px or something to that effect to the .container element (inside of .navbar-fixed-top). Hope this helps!
I'm stumped on this. Ive attempted to put in position:relative and various z-index in to no avail.
Below is my code for a simple drop-down menu.
It works fine in every browser except IE.
html page:
<div id="nav">
<ul id="navul">
<li id="rootHome">
<ul id="Home"></ul><a href="index.php"><img src="images/LA-icon.png" style=
"height: 40px;" id="home" /></a>
</li>
<li id="rootProducts" onclick="showMenu(this)">Products
<ul id="Products">
<li>
<p class="navLink" onclick="changePage('products-1.php')">Product 1</p>
</li>
<li>
<p class="navLink" onclick="changePage('products-2.php')">Product 2</p>
</li>
<li>
<p class="navLink" onclick="changePage('products-3.php')">Product 3</p>
</li>
</ul>
</li>
<li id="rootNews">
News
</li>
<li id="rootCompany" onclick="showMenu(this)">Company ∨
<ul id="Company">
<li>
<p class="navLink" onclick="changePage('./company-aboutUs.php')">About Us</p>
</li>
<li>
<p class="navLink" onclick="changePage('./company-contactUs.php')">Contact
Us</p>
</li>
</ul>
</li>
</ul>
CSS: (formatting didn't work on here)
http://pastebin.com/raw.php?i=CjyQhXCs
Try using position: relative and z-index: 100 on the id=nav div. Z-indexes work in layers. If the parent of an element has a z-index of 0, and the that element has a z-index of 100, the element would still appear behind another element that is the sibling of the parent with a z-index of 1.
The issue was a direct result of using the filter on the #navul ul. Somewhere in its calculations IE makes the element automatically hide any overflow. To fix, move the background to its own element and absolutely position it.
http://jsfiddle.net/uTBZN/30/
Credit to:
How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?
Just like #Stu, I had a filter on my nav ul (in my case, .navbar):
.navbar {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#64d7f4',GradientType=0 ); /* IE6-9 */
}
Per #Greg, as soon as I removed that filter, the dropdown menu stayed on top of the page content in IE9. Thank you, saved my day!