I am facing a big css problem
I made a MDI system in html/jquery.
Inside the window clientzone I add html code with an ajax request and the use of the append method.
All is working fine.
My problem is about the code Inside the client zone.
You can see it here : http://jsfiddle.net/2P4Mb/1/
<div id="windowClientZone" style="height:300px; background-color:red; overflow:hidden;">
<div id="ajaxHtmlAppendedCode">
<h1>Title</h1>
<div id="ContentToBescrolled" style="overflow:scroll; background:yellow;">
<ul id="MediaExplorer" class="gallery">
<li class="DraggableItem">
<div/>
</li>
<li class="DraggableItem">
<div/>
</li>
<!-- ... -->
<li class="DraggableItem">
<div/>
</li>
<li class="DraggableItem">
<div/>
</li>
</ul>
</div>
</div>
I have a content made with two parts : a title, and a wrap panel based upon an UL with floating.
I want the ul control to be scrollable and the title stay always visible.
i tried a lot of things with overflow/position asbolute but i not able to find a solution.
the ul zone is always greater than the window client zone.
Is there a way of making that easily ?
Thanks for your help
Related
Im new in coding. I'm making my first website (mobile first). It were all fine, all divs working, responsive, all great! But now I added a new div(nothing special I guess) but when I try to just put a single code (even without media queries) it doesn't work in mobile version. Tablet and desktop are working correctly. I tried to modify other divs and they work fine too.
Here is the code.
HTML
<section class="flvcko-wear">
<ul class="lista-articulos">
<div class="articulo">
<li>
<img src="img/cap.png" alt="">
<p>Flvcko cap</p>
</li>
</div>
</ul>
</section
CSS
.flvcko-wear ul{
list-style-type: none;
}
It doesn't even recognize the 'list-style-type:none;'
It's probably caused by that weird HTML structure – div is not allowed as child of ul (try pasting your code into HTML validator).
This would make more sense:
<section class="flvcko-wear">
<ul class="lista-articulos">
<li>
<div class="articulo">
<img src="…" alt="…">
<p>…</p>
</div>
</li>
</ul>
</section>
Or even omitting the div altogether, since you can style li, too:
<section class="flvcko-wear">
<ul class="lista-articulos">
<li class="articulo">
<img src="…" alt="…">
<p>…</p>
</li>
</ul>
</section>
I agree with the previous answer, try eliminating the div. Try changing your code to the following:
HTML:
<section class="flvcko-wear">
<ul class="lista-articulos">
<li>
<img src="img/cap.png" alt="">
<p>Flvcko cap</p>
</li>
</ul>
</section>
CSS:
ul.lista-articulos {list-style-type: none;}
I am trying to do this:
and mine looks like this:
Not the most beautiful thing.
My questions are:
We have a header with logo, search bar, menus and a button. How can i stack them all inline?
On the div with the background image - how can I position the headline like the one in the original site?
1) Have a look at the Navbar component documentation. Items should already be inline if implemented correctly. You can use the navbar-left and navbar-right classes to position items in the navbar.
2) You'll notice the large centre text starts at the same position as the navbar logo. This is because of the container class. I suggest you analyse some examples to see how to correctly implement the container.
After that, if you're still struggling add your styles.css to your pastebin post or better still create a Codepen - this would allow someone to be more helpful.
1- you can write float:left; or float:right; ? look for this float
2-for position an element you must create a relative div later inside create absolute div.. and you can specify settlement coordinates with top right bottom left.. look here position
I would say float is not good practice to use . Unless you really have no choice to use.
But based on how I look at it.
It's achievable using flex.
Put a display:flex on your main div
Then as for your other elements . Use display:flex-grow
It's advantageous using flex. , not only it wil solve your problem. It makes your site responsive.
Cheers
[![if you need all navigation item in one line. you have to make display:inline-block,for navigation.
change your code to:
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 nav-wrap">
<ul class="pull-left"><li></li>
</ul>
<ul class="pull-left">
<li class="formSearch">
<input type="text" placeholder="Find Freelancers" id="searchButton">
</li>
<li>Browse</li>
<li>How it works</li>
</ul>
<ul class="pull-right">
<li>
<a href="#" class="signupHover">
<span class="icon signup"></span>
<a href="#">Sign Up
</a>
</a>
</li>
<li>
<a href="#" class="loginHover">
<span class="icon login"></span>
Login
</a>
</li>
</ul>
<button type="button" id="buttonHeader">Become a freelancer</button>
</div>
/*add below css*/
.nav-wrap ul li{display:inline-block;}][1]][1]
new problem: so I'm using this given index.html with everything in it already, and changing to my needs. Spoke to teacher about changing the li class due to fit the new needs of this app, as per here:
<div id="page" data-role="page" data-theme="b">
<div data-role="header" data-theme="b">
<div class="logo"><div align="center"><img src="images/logo.png" width="635" height="95"></div>
</div>
<div data-role="content">
<ul data-role="listview" data-theme="c">
<li class="accom"></li>
<li class="dining"></li>
<li class="events"></li>
<li class="entertainment"></li>
<li class="maps"></li>
<li class="attractions"></li>
<li class="transport"></li>
Question: for each page now, the original # in the href was called for example who, and the corresponding div tag was "who". Because it's now an li class, and the name has changed, I tried to change the div tag to the new either li class or the a href, in the comments.
This hasn't worked. Anyone got an idea on to how to fix? The div id links to the new pages from the main screen as per code from the beginning.
This is my second post, so sorry if it gets confusing.
Cheers.
Seems as code is not showing - Go here for the code:https://docs.google.com/document/d/10GB52-lO_e-bnupGyiJFISTmH4iWFOixPtnjKcx_WPg/edit?usp=sharing
From what I understand of your question, you wanted to change the location of the link?
When you moved the anchor to inside the <li> I bet its width/height is 0/0 and clicking on the <li> doesn't do anything.
Set your <a> tags to be
display: block;
height: 100%;
width: 100%;
and see if that fixes the issue.
A jsfiddle would really help in this scenario.
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 having problems trying to align an image with a header inside a navigation menu. Ideally, everything should be align at the bottom. I have created a jsfiddle to reproduce the issue:
http://jsfiddle.net/graphicsxp/j2t9R/
<nav style="float: left">
<ul class="menu">
<li>
<a href="index.html" class="logo">
<img src="img/logo.png" alt="" class="brand logo_def" width="125" height="39" /></a>
</li>
<li>
<h4 >Sam</h4>
</li>
</ul>
<div class="clear"></div>
</nav>
<nav>
<ul class="menu">
<li class="current-menu-parent">ACCUEIL
</li>
<li>PAGES
</li>
</ul>
<!-- .menu -->
<div class="clear"></div>
</nav>
</div>
</header>
as is:
to be:
I solved the problem using your code, and honestly I couldn't tell you what I changed because there is way to much code going on for such a simple task. Here it is anyway
I also took the liberty of making a new one, showing how simple your code could look
Simple, clean, easy to read. All done with one <div>, and an unordered list.
Simplifying your code and making it easy to read should be a primary goal in coding no matter what, but it also helps users answer your questions quicker, easier, and better help you with questions you have.
Temp fix can be as:
add css for h4 element.... better to give id and then add.
I have seen your fiddle, please put below code in your css
h4{
margin-top:150px;
}
or
(Give id=hompageheaderUserName to h4 of sam)
h4#hompageheaderUserName
{
margin-top:150px;
}
Change width a/c to your need.
Screenshot from fiddle: