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;}
Related
I am using the materializecss framework from materializecss.com. I have a simple image that I place above the navbar from materializecss and there is a small white space. I checked the source and there is no margin, padding or border at all. The space goes away if I put the navbar above the image so I am not sure what the problem is.
<img id="header" src="/public/images/header.gif" alt="Header"/>
<nav class="grey darken-4">
<div id="navbar" class="nav-wrapper">
<ul id="nav-mobile" class="hide-on-med-and-down">
<li>Profile</li>
<li>Skills</li>
<li>Projects</li>
</ul>
</div>
</nav>
I am not using any other css besides the materializecss css file. Any ideas? I don't think that css has any margins anywhere as I don't see it when viewing the source for any of the elements.
Edit: Here is a jsfiddle: http://jsfiddle.net/0tL9up9s/ The list elements aren't appearing because I haven't copied over the javascript but you can still see the white space between the image and the navbar.
OK, I think it has to do with the fact that the image is display:inline and therefore has dimensions that include the line-height.
Setting your image to display: block will correct this issue.
CSS
#header { display:block; }
Or (HTML)
<img id="header" src="/public/images/header.gif" style="display:block" alt="Header"/>
Your fiddle: http://jsfiddle.net/0tL9up9s/1/
Adding a html {line-height: 0} to the end of the materialize.css file seems to fix the problem. I have no idea if it will break any other functionality though, so be careful.
http://jsfiddle.net/8ppt5zou/1/
<img id="header" style="display:block;" src="http://www.thousandwonders.net/covers/89/Bryce.Canyon.National.Park.jpg" alt="Header" >
<nav class="grey darken-4">
<div id="navbar" class="nav-wrapper">
<ul id="nav-mobile" class="hide-on-med-and-down">
<li>Profile
</li>
<li>Skills
</li>
<li>Projects
</li>
</ul>
</div>
</nav>
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 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
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:
Guys can anyone tell me why I can't remove the list-style-type from the <ul> below using the specificity defined below the html.
<footer><!-- this is where the footer starts-->
<div class="container_12">
<div class="grid_2">
<ul>
<li>
<strong>
test
</strong>
</li>
<li>
Home
</li>
<li>
Why
</li>
<li>
Get Started
</li>
<li>
Customers
</li>
<li>
Careers
</li>
</ul>
footer ul {
list-style-type:none;
margin:0px;
padding: 0px;
}
I've also tried footer div div ul {} but I can't seem to address the ul element.
Css class needs to be called .footer ul {...}, and footer has to actually use it: <footer class="footer"> - because in IE6, and any other browser that doesn't understand HTML5 tags, <footer> is renamed to <div> by whichever solution you are using, so the css selector would not apply any longer...
UPDATE: check in any browser developer tools if anything is overriding your style, or try forcing it with list-style-type: none !important;
Your example definitely references the Unordered List without issue, both examples in fact. Perhaps you have other conflicting styles which are giving you the issue?
To see it working click here. Please notice that I have put a red border around it to help make it clearer.