Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
A client wants a navigation layout as shown below:
As you can see, it is made up of "main links" and "sub links". There can be any number of each, and the text content may change. The width of the menu container will change depending on the page size.
God bless the designers, who decided to align the left and right edges of these links, and keep a consistent amount of space between each one. The client is adamant that this is how the navigation is made.
So, the question is: how can this be done? I've tried it with tables (CSS and HTML), but while they align over the total length, the text in the cells doesn't align on the right hand side.
The current solution is to put a custom amount of padding on the elements until they line up, but obviously this is a rubbish solution. I don't want to end up having to measure things with Javascript to lay them out, so if anyone knows of a smart way to get this done, I'd certainly appreciate it.
I do think CSS tables will get you most of the way.
You merely have to align the text of the first and last elements of each
JSfiddle Demo
CSS
* {
margin: 0;
padding: 0;
}
.menu ul {
padding: 0 3px;
display: table;
width:100%;
}
.menu-list li {
height: 45px;
list-style: none;
background-color: #f69b58;
display:table-cell;
/* add this */
text-align: center;
font-family: arial;
font-size: 14px;
margin-right: 2px;
}
.menu-list li:first-child {
text-align:left;
}
.menu-list li:last-child {
text-align:right;
}
.menu-list li a {
display: block;
padding: 13px;
color: #ffffff;
text-decoration: none;
}
.menu-list li:active {
color:black;
background-color: #3EAEE9;
}
.menu-list li:hover {
background:#3eaee9;
}
.menu-list li.current {
background-image: -webkit-linear-gradient(top, rgb(7, 80, 158), rgb(6, 101, 243));
background-color: #3EAEE9;
}
NOTE: This will NOT make the distance between each link the same, for that you will (almost certainly) require JS.
It sounds like something which concerns the right amount of divs to align the text in the center. I've made a solution in fiddle as you can see here: http://jsfiddle.net/denWG/32/
HTML:
<body>
<div class="container">
<div class="in_container">
Example Exampleson
</div>
<div class="in_container">
Producer
</div>
</div>
</body>
CSS:
.container{
width: 200px;
height: 200px;
}
.in_container{
text-align: center;
}
}
.name {
font-weight: bold;
margin: 0 auto;
}
.title {
margin: 0 auto;
font-size: 11px;
line-height: normal;
}
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I would like to give users the opportunity to input some text in a few colored shapes. Is it a good strategy to design the shapes in (for instance) illustrator, export as svg and put the input tags (or textarea's) in the svg file?
Other ways of doing this?
This is a simple example of doing what you're looking for with CSS - a starting point for you to work from.
(The CSS can be simplified down but I kept it deliberately verbose so you can see what's going on and where)
.text {
display:block;
width: 60vw;
margin: 1rem 20vw;
}
.textleft {
display: inline-block;
width:49%;
margin: 1rem 0;
padding:0 9% 0 5%;
box-sizing: border-box;
}
.textright {
width:49%;
display: inline-block;
margin: 1rem 0;
padding:0 5% 0 9%;
box-sizing: border-box;
}
.txtarea {
width:100%;
color: #000;
height: 7rem;
font-size:1rem;
box-sizing:border-box;
padding:1rem;
border: none;
border-radius:2rem;
resize: none;
overflow:hidden;
}
#red {
background-color: #c00;
color: #eee;
}
#green {
background-color: #0c0;
}
#blue {
background-color: #33f;
color: #ccc;
}
#yellow {
background-color: #ff0;
}
<div class='text'><textarea id='red' class='txtarea' name='myinfo_top'>Some Words - Click on me to type into this text box!</textarea></div>
<div class='textleft'><textarea id='green' class='txtarea' name='myinfo_left'>Some Left Words</textarea></div>
<div class='textright'><textarea id='blue' class='txtarea' name='myinfo_right'>Some Right Words</textarea></div>
<div class='text'><textarea id='yellow' class='txtarea' name='myinfo_bottoms'>Some more Words</textarea></div>
Create div tag that will contain elements of height and width, if you want rounded corners you might use border-radius in CSS.
div{
width: 200px;
height: 200px;
border-radius: 15px;
background-color: blue;
}
Then you can add whatever text you would like. Its the best option, adding image in the background, it takes a lot more processing time than pure CSS.
I am learning about CSS from Progate.com (Note that they don't have any doubt clearing forum) and reached the level where I have to work on a simple layout provided in the exercises. It was quite a smooth learning until I was confused by the CSS of a class selector. So, I need to fix some CSS so that only the <li> elements inside header-list are horizontally aligned.
To do the same I changed the code to the following:
body {
font-family: "Avenir Next";
}
.header-list li {
list-style: none;
float: left;
padding: 33px 20px;
}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}
.header-list {
float: left;
}
.main {
background-color: #bdf7f1;
height: 600px;
}
.footer {
background-color: #ceccf3;
height: 270px;
}
This gave me the same result as they wanted in the answer. But, when I try submitting the answer, a popup pops out saying that
The CSS for the float property of <li> elements should be deleted.
So, to understand why this was needed, I re-read their instructions once again and it stated that:
Rewrite the following properties specified for <li> elements so that they are applied only to the <li> elements inside header-list.:
float: left;
padding: 33px 20px;
Thus, here I am confused why it is that much necessary to write the code as follows in order to advance myself to next stage:
body {
font-family: "Avenir Next";
}
.header-list li {
list-style: none;
/* CSS properties from here are moved to line 32. But why?
We still get the required result without doing so.
*/
}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}
.header-list {
float: left;
}
/* Added -> CSS for <li> tags within header-list
(CONFUSION: The float and padding property could have been applied in the first .header-list li{}.
But I didn't understand why the same has been told to do again below)
*/
.header-list li {
float: left;
padding: 33px 20px;
}
.main {
background-color: #bdf7f1;
height: 600px;
}
.footer {
background-color: #ceccf3;
height: 270px;
}
I searched over the internet in order to get some clue about the same. But I think, being a beginner it is very hard to clear the smaller concepts. Hence, I took it to our saviour forum - Stackoverflow. Some help or hints about the same will be greatly appreciated.
You may want to try using display: inline; instead, and deleting the floats. You stated above that they mentioned
The CSS for the float property of <li> elements should be deleted.
This is another way of of displaying your list horizontally without using floats.
Hope this helps!
I highly recommend checking out The Net Ninja on YouTube though. He is an amazing teacher, you will learn a LOT, and he is very thorouhg and makes it really easy for you to grasp the concepts. Check out the playlists on his channel he has some for html, css, and a ton more!
https://www.youtube.com/watch?v=I9XRrlOOazo&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT
I'm trying to enlarge a smaller picture. I have a small and a large version of the pictures. I've searched on the internet, the one i'm using is the best i've found.
I know this would be much easier with 'Lightbox2' or other javascript things, but the purpose is to only use html & css.
Here you can find the link (dropbox, .zip file) to the website' folder --> https://dl.dropboxusercontent.com/u/61634717/Website.zip
It would be nice if someone could find the problem why my smaller pictures aren't enlarged when hovering over. The website is only showing the small pictures when hovering over them.
Here is the html code (for one picture):
<div class="ienlarger"><a href="#nogo"><img src="Pictures/Artists/PeopleTalkTechnoSmall.png" alt="thumb" class="resize_thumb" /><span>
<img src="Pictures/Artists/PeopleTalkTechno-Large.png" alt="large" /><br />Some text can go here.</span></a>
</div>
Here is the css code:
.ienlarger {
float: left;
clear: none;
padding-bottom: 5px;
padding-right: 5px;
}
.ienlarger a {
display:block;
text-decoration: none;
cursor:default;
}
.ienlarger a:hover{
position:relative;
}
.ienlarger span img {
border: 0px solid #FFFFFF;
margin-bottom: 8px;
}
.ienlarger a span {
position: absolute;
display:none;
color: #FFCC00;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #2E2E2E;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}
.ienlarger img {
border-width: 0;
}
.ienlarger a:hover span {
display:inline-table;
top: 50px;
left: 90px;
z-index: 100;
}
.resize_thumb {
width: 170px;
height : auto;
}
NOTE: Do not pay attention to the background colors :D. I know they are weird, but it is just for me to see the different < div > (they will be changed when the website is closer to being completed).
Alright, I downloaded your code and messed around with it.
Removing max-width: 100%; from the img CSS seems to have fixed it (line 25). In the future, please post the code along with your question, or if there are a lot of parts to it, a JSFiddle is also acceptable.
Thanks.
In your css you have all images set to a max-width of 100% probably to make it responsive, which is good. But that is also your problem. The images can only be 100% of their container and no bigger. If you remove img {max-width: 100%} from your css that fixes your issue.
But is also makes it not repsonsive. :-(
So your solution is to add a class="larger" to the bigger image and add another line to your css. You would end up with something like this:
img {
max-width:100%;
height:auto;
}
img.larger {
max-width: 500px; /* the maximum size you would allow for larger images */
}
I'm new to stackoverflow and HTML/CSS/Javascript. I have four tabs and I want them to be able to all be 1/4 the size of the browser width. This is primarily for mobile use and thus 1/4 the width of the browser should be fine.
Again, I'm pretty new to HTML/CSS/Javascript, but I have experience with Java. Thus I know programming basics but I don't really know how HTML, CSS, and Javascript all interact together.
Thanks!
edit: So after seeing a couple comments and such I think I need to be a bit clearer. So I guess I'll clear some stuff up. First, yes I styled some stuff to look like tabs. I just googled it and I found a way. I don't know if it's the best way though. I'll include some code below.
<ol id="toc">
<li><a href="Password.html">
<span class="title">Password</span></a></li>
<li><a href="SSID.html">
<span class="title">SSID</span></a></li>
<li class="current"><a href="Info.html">
<span class="title">Info</span></a></li>
<li><a href="Logout.html">
<span class="title">Logout</span></a></li></ol>
And my CSS
ol#toc {
height: 1em;
list-style: none;
margin: 0;
padding: 0;
}
ol#toc a {
background: #bdf url(tabs.png);
color: #ddd;
display: block;
float: left;
height: 2em;
padding-left: 20px;
text-decoration: none;
}
ol#toc a:hover {
background-color: #3af;
background-position: 0 -120px;
}
ol#toc a:hover span {
background-position: 100% -120px;
}
ol#toc span.title {
font-size:0.6em;
vertical-align:bottom;
font-family: 'Droid Serif', Georgia, Times, serif;
}
ol#toc li {
float: left;
}
ol#toc li.current a {
background-color: #48f;
background-position: 0 -60px;
color: #fff;
}
ol#toc li.current span {
background-position: 100% -60px;
}
ol#toc span {
background: url(tabs.png) 100% 0;
display: block;
line-height: 3.1em;
padding-right: 20px;
}
But I also saw some great stuff using JQuery. I just didn't really know how to use that either.
Well, I assume that you already have your <li> tags looking like tabs already? If that is the case, the CSS is trivial:
/* Note that my choice of selector here is HEAVILY dependent on the styling you already have*/
li span.title
{
width: 25%;
}
Understanding the interaction is CSS/Javascript/HTML is very simple to learn. If this answer didn't make sense, I encourage you to read a good book on that subject first.
Based on your comment to Stargazer712, you may want to check out {less} which is a dynamic stylesheet language that does allow for variables: http://lesscss.org/
Because you want to "pass variables from JavaScript to CSS," this still may not be the answer, but it's worth looking into.
I have a newsfeed which is obviously organized by an . When the user hovers over each of the items, the background is highlighted. I'd also like to have a small "x" in the top right hand corner of each item, only shown when hovered. This "x" would be a delete button to remove that post.
Right now I just have some basic html stating: <div class="hide-button">x</div>
I know that I don't want the "x" displayed in the html, but rather have it in the CSS. So I have the <li> css below for hovering, as well as the CSS for the hide button. I'd like to know the best method to integrate the hide button div into the <li>
.hide-button {
float: right;
margin-top: -13px;
font-size: 11px;
font-family: helvetica;
color: gray;
}
.hide-button a{
text-decoration: none;
color:gray;
}
.hide-button a:hover {
text-decoration: underline;
color:gray;
}
and the list:
.newsfeedlist li {
background: white;
border-bottom: 1px solid #E4E4E4;
padding: 12px 0px 12px 0px;
overflow: hidden;
}
.newsfeedlist li:hover {
background-color: #F3F3F3;
}
Thank you so much!!!!!
Presuming your delete buttons are inside another container you could do something like
.hide-button {
float: right;
margin-top: -13px;
font-size: 11px;
font-family: helvetica;
color: tray;
display: none;
}
... the other bits of CSS ...
.newsfeedlist li:hover .hide-button {
display: block;
}
Modifying the close button to be hidden by default and then when hovering on a list item you set the display back again on the close button.
Hope this makes sense
Tim
You might really be in need of this:
Demo at jsFiddle.net
I modified an example and tushed it up for multiple content areas or images.
But hide-button element in the li and do
.newsfeedlist li:hover .hide-button {
display: inline-block;
}
and add display: none; to .hide-button
Otherwise, there's always javascript.