Jump to content

Search the Community

Showing results for tags 'style'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 28 results

  1. Hello! I am new to html and css, and am having an issue with media queries! I am just trying to get my site to be responsive for these three different px sizes and cant get it to action. I reverted from the second css media query shown below because it was not working at all, not even showing any attempt to change when inspected in the browser. Am I missing something? Thanks! My @media is as shown: @media screen and (max-width: 980px) { } @media screen and (max-width: 768px) { } @media screen and (max-width: 640px) { } I had but reverted to the above when nothing was taking effect.. @media screen @media screen (max-width: 640px) { #cwm { width: 550px; margin: 10px; } } My html : <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="../Basic-Portfolio/assets/css/style.css"> <!--script type="text/javascript" src="../Basic-Portfolio/assets/Java/slideshow1.js"></script--> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>The Nerdadian</title> </head> <body> <header> <div class="navBar"> <nav> <ul class="header"> <li><a class="home" href="default.asp"><h2>Tanner Martin</h2></a></li> <li><a class="nav" href="../Basic-Portfolio/index.html">About</a></li> <li><a class="nav" href="../Basic-Portfolio/portfolio.html">Portfolio</a></li> <li><a class="nav" href="../Basic-Portfolio/contact.html">Contact</a></li> </ul> </nav> </div> </header> <br> <br> <br> <div class="standard"> <div class="block"> </div> <br> <div id="aboutme" class="standard"> <h1 id="H2">About Me</h1> <br> <img id="img1" src="../Basic-Portfolio/assets/images/ME!.jpg"> <br> <p id="P1"> Hello! My name is Tanner Martin. I was born in Texas, but lived in Canada for my Junior High and High School life, so I consider my self Canadian :). None of you know this, but I have an amazing little girl named Olivia!She will turn one on October 5th. I am going to teach her to be a gamer, programmer, and just generally awesome, though she already has the awesome part covered.</p> <p id="P2"> I am a nerd of sorts, I collect video game memorabilia, figures of various genres, i computer game, and build my own PCs. My most played game at the moment would either be Diablo 3, or PuBG (Player Unknown Battlegrounds). I just started playing a new game called Depth, if I were to describe it, you would probably think it is lame; So i suggest you try it out for yourself. Recently I have had to startselling my figures, so my collection isn't what it used to be, but here is an old picutre for reference.. (Still not complete collection) <br> <img src=""> <br> </p> <div class="slideshow-container"> <div class="Slideshow1"> <div class="numbertext">1 / 3</div> <img src="../Basic-Portfolio/assets/images/domo-will-eat-you.jpg" style="width: 100%"> <div id="text1">Domo Will Eat You!</div> </div> <div class="Slideshow1"> <div class="numbertext">2 / 3</div> <img src="../Basic-Portfolio/assets/images/dunnykings-orders.jpg" style="width: 100%"> <div id="text2">Dunny King's Orders..</div> </div> <div class="Slideshow1"> <div class="numbertext"> 3 / 3</div> <img src="../Basic-Portfolio/assets/images/old-collection.jpg" style="width: 100%"> <div id="text3">Old Collection</div> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <div> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> <script> var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("Slideshow1"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" active", ""); } slides[slideIndex-1].style.display="block"; dots[slideIndex-1].className+="active"; } </script> <p id="P3"> I love to travel! My goal is to live on every continent for at least 2 years by the time I pass away. I lived in Greece for three months, so Europe has been partailly completed! Even though I was born in the US, I lived in Canada for my JuniorHigh and High School careers. If you would like to contact me, drop me a message <a href="contact.html">Here!</a> </p> </div> <div id="cwm"> <h3>Connect With Me</h3> <a href="https://github.com/Twmartin1147"><img class="img2" src="../Basic-Portfolio/assets/images/github-sq-bl.png"></a> <a href="https://www.linkedin.com/in/tanner-martin-1147/"><img class="img2" src="../Basic-Portfolio/assets/images/linkedin-sq-blu.png"></a> <a href="https://stackoverflow.com/users/8673657/tanner-martin"><img class="img2" src="../Basic-Portfolio/assets/images/stackoverflow-sq-yel.png"></a> <br> </div> </div> <footer> </footer> </body> </html>
  2. I have 2 lists I am trying to complete in my website. The first list I have is a navigation bar that runs horizontally. I have all of the css and html for that. In addition, under my gallery division I am trying to add another list to replace my table and make it layout similar to the table. When I add my list it is effected by the navigation bar css. To remedy this I added a class to the division that carries nav bar and added that syntax to my list css such as <div class="nav"> and nav, ul {}. This doesn't seem to be helping though. I don't want to give a class for every li or ul and I'm sure it is an easy fix but I need some help. <!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } .header, .footer { background-color: #333;; color: lightgrey; padding: 50px; clear: both; } a {color:white;} .clearfix::after { content: ""; clear: both; display: table; } nav, ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; } .nav, li { float: left; font-family: arial; } .nav, li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } #border1 { border: 3px solid #2990EA; padding: 10px; } .birthday { float: left; margin-right: 100px; margin-left: 400px; width:500px; } .footer a { text-decoration: none; clear: both; } .column { background-color: #ebecf6; overflow: hidden; clear: both; } .container { background-color:#909ca2; } div.gallery img { width: 300px; height: 250px; padding: 5px; float: left; margin-bottom: 50px; } .gallery1 { margin-left: 500px; } .table1 { padding:100px; } th { font-size: 200%; } tr { font-size: 150%; } tr, p { margin-left: 200px; } </style> </head> <body style="font-family: sans-serif;"> <div class="nav"> <ul> <li class="li" style="float:right"><a href="#about school">ABOUT SCHOOL</a></li> <li class="li" style="float:right"><a href="#about family">ABOUT FAMILY</a></li> <li class="li" style="float:right"><a href="#about me">ABOUT ME</a></li> <li id="border" style="float:right"><a href="#home">HOME</a></li> </ul> </div> <div class="header"> <h1 style="color: #e9cf76;text-align:center;font-size:300%">About Me</h1> </div> <div class="container"> <div class="gallery"> <img class="gallery1" src="bun.jpg" alt="Trolltunga Norway" width="100" height="100"> </div> <div class="gallery"> <img src="3eb.jpeg" alt="Trolltunga Norway" width="100" height="100"> <div class="gallery"> <img src="westworld.jpg" alt="Trolltunga Norway" width="100" height="100"> </div> <div class="list1"> <ul> <li>Technology Teacher</li> <li>Previously a Manager</li> </ul> <ul> <li>Lamb Karahi</li> <li>Pho Thai</li> </ul> </div> <div class="table1"> <table style="width:100%"> <tr> <th>Job</th> <th>Food</th> </tr> <tr> <td><p>Technology Teacher</p></td> <td><p>Lamb Karahi</p></td> </tr> <tr> <td><p>Previously a Manager</p></td> <td><p>Pho Thai</p></td> </tr> </table> </div> </div> <div class="column content"> <img class="birthday" src="birthday.jpg"> <h1 style="text-align:center;font-size:300%">Who am I?</h1> <p style="font-size: 150%">I have two children and a third on the way. My oldest child's name is Harper and her brother is called Nolan. The third baby gender is a mystery to all but me, and no I won't tell you! Minus the lack of sleep being a parent is the best thing that ever happened to me.</p> <p style="font-size: 150%"> teach technology at MMSA. I am one of the few teachers who can say that they have taught every single grade level. I graduated from Wayne State University with a Bachelor's Degree in Secondary Education in 2011. I have been teaching since 2013. </p> </div> </div> <div class="footer"> <p STYLE="text-align:center"><SPAN id="border1"><a href="https://www.weebly.com/" target="_blank">CREATE A FREE WEBSITE</SPAN></a></p> </div> </body> </html>
  3. Hello all, pretty new here (and to web design, in truth) I have been toying around with Dreamweaver the past 3 weeks or so trying to redesign my company's web page and one of the elements I was adding to the page is a carousel for showing off some things. I have the carousel working properly and things are great, but there are a few things I want to try and learn how to do in order to make the page look fresh and appealing. Here is an example of what my bootstrap resembles for this topic. Pay attention to only the carousel at the top. https://getbootstrap.com/examples/carousel/ So I am trying to find out a few different styling things with the carousel. First off, on the sides of where the image would be (centered) there are areas of dark gray with arrow glyph icons indicating the direction the user can make the carousel rotate. I found a way to remove the background coloring and make the carousel "white" however I would prefer to remove those areas altogether. I would also like to push the arrow keys into the actual carousel on top of the images (maybe in a corner out of the way) I want to change what the image indicators look like on the bottom of the carousel. Currently, as in the example, the indicators are small circles that change color when a particular image pane is active. Is there a way to design icons to replace those, perhaps a line that brightens when the selection is active? For example, in the 3 slide referenced above, instead of 3 circles, the indicators are dashes that, when a current active slide is up in the carousel, the dash indicator brightens or is highlighted. The last thing I want to do is make a translucent/transparent box covering half or third of the image in the center (on a side) with text. The issue I am having is trying to get the text in a transparent/translucent box preferably one that does not change when the carousel rotates.
  4. ladytf

    style tag <figure>

    hello, i don't find a any topic about this, so i'm start this one. i'm using a tag figure and the figcaption, but i have multiple imagens with a legend each one. when i do this the images apears one after another in a second line and i like to do all in same line. what i need to change? apologize my english i don't write very well, and what i know about code i learn alone
  5. Gerhard

    <stype> tag?

    Hi, I am a newbee and start just working with html5 and CSS3. I first go through all that tutorials and now tried it for the first time. I use VS2012 for editing, cause it is a common tool for me. I found out, that CSS fils raise error Messages aslong as <style> tag is there. Ommoting this tag (and ist closing Counterpart, brings everything to work. Any explaination? Thanks. With best regards Gerhard
  6. Hi, I am doing then w3schools HTML Tutorial. I am using Mac Textedit. The text shows OK in Safari but it won't show the color. Here is the line of code: <h1 style=“color:red”>Followed by a smaller heading</h1> This shows as an H1 (very large text) but won't show the red color. Here are my Textedit settings: New Document: Plain text Open and Save: Display HTML files as HTML code instead of formatted text Document type HTML 4.01 Strict Styling (I've tried all 3 options to no avail) Encoding Unicode (UTF-8) There is no Document type option for HTML5. What do I need to do to get this working? Entire index file attached Thanks, Rick index.html
  7. Hello, I'm working at a site in wordpress, I use 'inspect element' a lot, and I want to know how can I see all the default font styles and their preview, so I can choose it more easily. In inspect element it only shows me the one available for font-family : serif, sans-serif, monospace, fantasy etc. Is there maybe a site or something (or a chart) where I can instantly see all those default text styles (so not something I have to download), and their preview? Thanks.
  8. Hello, for the longest time we were using FPDF to generate our pdf invoices. We recently upgraded to TCPDF and noticed we lost the bold font style. Our system admin says the font files are where they should be, in fact we can call $pdf->SetFont( 'Arial', 'BI', 10 ); and it is bold italic. Pass in 'I' and it is Italic but if we only pass in 'B' for bold, it display as normal font, no style. In the older FPDF, bold worked fine. Is there something we might be missing? We really need headers, certain labels and info to stand out in bold. Thank you for any help with this. Running the latest version of TCPDF on a Linux server. Thank you for any help with this.
  9. I want to overlap one div on another using css as shown in image below and i have following html and code <div id="div1">This is div 1</div><div id="div2">This is div 2</div> div1{width:800x;height:200px;background-color:#292929;color:#FFFFFF;}div2{width:800x;height:50px;background-color:#333333;color:#FFFFFF;} I want my footer to be like the image shown below, how can i do it ? I have uploaded the image, but if you are enable to see it then you can view the image easily at this URL http://imageart.webs.com/footer.png
  10. How come when I use Position Fixed or Absolute, the element says relative to where it is placed until I specify top, down, left or right. <style> #paragraph { position:absolute; }</style><p>1</p><p id="paragraph" >2</p><p>3</p><p>4</p><p>5</p>
  11. Hello, Recently i faced a problem which seems very odd to me and I would like to find the answer or at least acceptable explanation. But let's go straight to it. Let's have two divs one inside the other - the code is something like: <div id="imgframe"> <div id="innercont" class="dragme"> <a class="marker" style="left: 1060px; top:658px;" onclick="movepos(1060, 658)"></a> </div></div><button type="button" onclick="displayattr()">Test</button> they are styled with css like this: #imgframe { width: 950px; height: 600px; overflow: hidden;}#innercont { width: 1994px; height: 1144px; position: relative; left: -600px; top: -300px;} And with javascript I am trying to find the top and left values of the #innercont. I have written the following functions: function getx() { var bg = document.getElementById("innercont"); var xs = bg.style.left; var x = Number(xs.replace("px","")); return x;}function gety() { var bg = document.getElementById("innercont"); var ys = bg.style.top; var y = Number(ys.replace("px","")); return y;}function displayattr() { var sum = getx() + ", " + gety(); alert(sum);} Everything so far seems fine, but when I use displayattr() just after the page has been loaded it returns 0, 0. The code works fine when I use javascript to set the position of the #innercont: function reset() { var bg = document.getElementById("innercont"); bg.style.left="-600px"; bg.style.top="-300px";} They say that element.style.top sets or returns the top position of a positioned element, but it appears that it is not the same if we set the position by using css or javascript. So far I have managed to solve the problem by using "getComputedStyle" or adding onload="reset()" to the body tag but I don't want to use either since they mess my code later. If anyone has an explanation why does it happen so I'll be very grateful. Thanks in advance.
  12. Okay, i have been working on a solution for alot of time now, and i can still simply not figure out what the ###### is wrong here. So im asking here for a new set of eyes, again -.-'. If you would just see the uploaded picture, you can see the menu does NOT go outside the content area. This has happened on MANY of my projects when i was trying to integrate a jQuery based menu with help from a few .JS formatted files. This is my style.css code: * { margin:0px; padding:0px; font-size: 9pt; font-family:"Trebuchet MS";}body { color:#000000; background-color:#AAD491;}#wrapper { color:#000000; background-color:#7fc655; width:900px; height:auto; margin:0 auto; overflow:hidden;} #header { width:100%; height:50px; background-color:#7FC655; } #content { width:auto; height:auto; float:left; } This is my menu.css code: .menu { width:225px; height:100%; font-size:12px; text-transform:uppercase; margin:0px; margin-right:5px; padding:0px; background-color:#58a02c; float:left;}.menu ul.menusm { background-image:url(pictures/menu/menu_sep.png); background-position:0 100%;/*X% & Y%*/ background-repeat:repeat no-repeat; margin:0 auto; padding:0px;}.menu ul li.ms_top { display:block; float:none; padding:0px;}.menu ul li.last {}.menu ul li a.ms_top { color:#A9A9A9; display:block; font-weight:normal; margin:0px; padding:0px 1px;/*TOP & BOTTOM - RIGHT & LEFT*/ text-align:left; text-decoration:none;}.menu ul li.ms_top { background-image:url(pictures/menu/menu_sep.png); background-position:100% 0;/*X% & Y%*/ background-repeat:repeat no-repeat;}.menu ul li.ms_top.ms_last {}.menu ul li a.ms_top span { color:#000000; display:block; margin:0px; padding:13px 14px 13px 50px;/*Top, Right, Bottom, Left*/ width:158px;}.menu ul li a.ms_top.ms_first span {}.menu ul li#active_menu-nav a.ms_top,.menu ul li a.ms_top.ms_hover,.menu ul li.active a.ms_top,.menu ul li a.ms_top.ms_hover span,.menu ul li.active a.ms_top span { background-color:#74AD34; background-position:initial initial; background-repeat:initial initial; color:#FFFFFF; text-decoration:none;}.menu ul li a.ms_top.ms_havesubmenu span { background-image:url(pictures/menu/menu_r_d_a.png); background-position:100% 0;/*X% & Y%*/ background-repeat:no-repeat no-repeat;}.menu ul li.active a.ms_top.ms_havesubmenu span { background-image:url(pictures/menu/menu_r_d_a.png); background-position:100% 0;/*X% & Y%*/ background-repeat:no-repeat no-repeat;}.menu ul li a.ms_top.ms_havesubmenu.ms_hover span { background-image:url(pictures/menu/menu_r_d_a.png); background-position:100% 0;/*X% & Y%*/ background-repeat:no-repeat no-repeat;}.menu ul li a.active,.menu ul li a.ms_hover,.menu ul li a.ms_havesubmenu.active,.menu ul li a.ms_havesubmenu.ms_hover {}.menu ul li ul { font-size:11px; font-style:normal; left:225px;/*Normal: 223*/ line-height:20%; margin:0px; padding:0px; text-transform:uppercase; top:0;}.menu ul li ul li { border-bottom-color:#74AD34; border-bottom-style:solid; border-bottom-width:1px; margin:0px; padding:0px; z-index: 10000;}.menu ul li ul li.ms_last { border-bottom-style:none;}.menu ul li ul li a { background-color:#49901e; background-position:initial initial; background-repeat:initial initial; color:#FFFFFF;/*Normal: 848484*/ /*text-decoration:none;*/ display:block; margin:0px; padding:12px 10px;/*TOP & BOTTOM - RIGHT & LEFT*/ width:160px;/*Normal: 160px*/}.menu ul li ul li a span { color:#FFFFFF; padding:0px;}.menu ul li ul li.ms_last a {}.menu ul li ul li a.ms_hover { text-decoration:none;}.menu ul li ul li ul { left:180px; top:0;}.menu ul li ul li a.ms_first.ms_havesubmenu.ms_hover,.menu ul li ul li a.ms_first.ms_havesubmenu.active,.menu ul li ul li a.ms_first.ms_havesubmenu.ms_hover span,.menu ul li ul li a.ms_first.ms_havesubmenu.active span,.menu ul li ul li a.active span,.menu ul li ul li a.active,.menu ul li ul li a.ms_hover,.menu ul li ul li a.ms_hover span { background-color:#74AD34; background-position:initial initial; background-repeat:initial initial; color:#FFFFFF;}.menu ul li ul li a.active span,.menu ul li ul li a.ms_hover span {}.menu * { z-index:9003;}ul.menusm { list-style:none;}ul.menusm li { cursor:pointer; position:relative;}ul.menusm li a { position:relative;}ul.menusm li ul { display:none; height:auto; list-style:none; position:absolute;}ul.menusm li ul li ul { list-style:none; position:absolute;}/*======================*//*QUICK JUMPY MENU*//*======================*//*.menu select { margin-bottom: 10px; display: none; font-size: 14px; height:auto; width:100%; }.menu select { width: 100%; height: 30px; padding: 2px 5px 2px 10px ; color: #000; font-size:20px; }*/ This is my index.php file: <?phprequire_once("include/config.php");require_once("include/core.php");?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="shortcut icon" href="favicon.ico" /> <script type='text/javascript' src='js/jquery-1.10.2.min.js'></script> <script type='text/javascript' src='js/menu.js'></script> <link rel="stylesheet" href="style/style.css" type="text/css" /> <link rel="stylesheet" href="style/links.css" type="text/css" /> <link rel="stylesheet" href="style/menu.css" type="text/css" /> <title>Hjem</title></head><body><div id='wrapper'> <div id='menu' class='menu' style="font-family: 'Open Sans';"> <div id='header'> <img src="style/pictures/logo.png" /> </div> <script type='text/javascript' src='js/menu_html_block.js'></script> </div> <div id="content"> Content </div></div></body></html> This is my menu Javascript File: document.writeln('<ul class="menusm" id="menu-top-menu">');document.writeln(' <li><a href="index.php"><span>Hjem</span></a></li>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Webshop</span></a>');document.writeln(' <ul>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Menu</span></a>');document.writeln(' <ul>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Menu</span></a></li>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Menu</span></a></li>');document.writeln(' </ul>');document.writeln(' </li>');document.writeln(' </ul>');document.writeln(' </li>');document.writeln(' <li><a href="#"><span>Menu</span></a></li>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Menu</span></a>');document.writeln(' <ul>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Menu</span></a>');document.writeln(' <ul>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Menu</span></a></li>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Menu</span></a></li>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Menu</span></a></li>');document.writeln(' </ul>');document.writeln(' </li>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Menu</span></a>');document.writeln(' <ul>');document.writeln(' <li><a href="rules.php" class="menu_navigation"><span>Rules</span></a></li>');document.writeln(' <li><a href="faq.php" class="menu_navigation"><span>FAQ</span></a></li>');document.writeln(' </ul>');document.writeln(' </li>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Menu</span></a>');document.writeln(' </ul>');document.writeln(' </li>');document.writeln('</ul>'); I know the code is a bit long, but if you could. Please, any ideas? I am basicly desperate to get this to work! And i can simply NOT figure out what the heck is wrong, and i am almost crying here -.-'... Some ideas? Tips? Would be simply AWSOME! If possible. Thanks ALOT! rootKID
  13. Hi there! I was just wondering, there is a theme named 'Tetris' for wordpress. (Link) When posts are placed they float to the left and line up to the top neatly. Well currently i am creating a wordpress based website, and on the pages i use '#homediv' to id the div's that i want to do the same. Problem with how i coded it: they do float left, but do not line up to the top... I tried to search the code of 'Tetris' how they manage to do it, but couln't figure it out. If you know how to make this happen please tell me (and the others that search for the same problem on Google and land here). Code as it is now: /*CSS OF HOMEDIV:*/ #homediv { width:45%; min-width:180px; float: inherit; border:solid 1px #7D1517 ; margin:1%; border-bottom-left-radius:10px; -moz-border-bottom-left-radius:10px; -o-border-bottom-left-radius:10px; -webkit-border-bottom-left-radius:10px; border-bottom-right-radius:10px; -moz-border-bottom-right-radius:10px; -o-border-bottom-right-radius:10px; -webkit-border-bottom-right-radius:10px; padding-bottom:15px; } #homediv h5 { text-align:center; background:#7D1517; color:#FFF; } #homediv h6 { margin-left:3%; margin-right:2%; } #homediv p { margin-left:2%; margin-right:2%; } Image example: As you see, they do not line up to top. Thanks in advance! - Marcel
  14. I want to make a menu like this website has: http://www.h3ostudio.com/ I have nav a{ text-decoration:none; color:#B90000; font-weight:500; text-align:left; border-bottom:1px solid #099; padding-right:250px; padding-left:25px;} but it just drags every border under every word 250 pixels to the right.. I want them to 'stop' at.. the end of the menu? also, while I'm asking this question, how do I make the border like they have on this website? it's like, black-gray-ish.. how do I style my border like that? or does anyone know where I can find 'proper' styling tutorials for borders? or have they used an image for the border; if so how do I do that? sorry I'm rather new to this, and thank you in advance!
  15. Hi how can I set the position of the background div in center vertically , same space between top and bottom . in this example. http://w3schools.com/css/tryit.asp?filename=trycss_transparency i tried margin-top:auto; margin-bottom:auto; but it didn't work! thanks
  16. HiI just started learning css from w3schools tutorials ,I have a question in chapter nesting selectors .in this style p{..............} .marked{...................} .marked p{...............} p.marked{................} whats the difference between 'p.marked' and '.marked p' ?! thanks
  17. I have a page of 100 links, that looks like this:<br>[~Most-Used]<a href="www.hotmail.com/?">hotmail.com</a><br>[~Most-Used]<a href="http://alternativeto.net/">AlternativeToSoftwares</a><br>[~Most-Used]<a href="http://jsdo.it/vmars316/asdf/edit">jsdo.it javascript</a><br>[~Most-Used]<a href="http://www.portablefreeware.com/?">portablefreeware.com/</a><br>[Arduino]<a href="http://arduino.cc/forum/index.php#2">~arduino.cc/forum</a><br>[Arduino]<a href="http://arduino.cc/playground/">~arduino.cc/playground</a> And I want to color text and text-background different colors: [~Most-Used] text = black, text-background = blue >hotmail.com</a> text = red, text-background = lightGreen I suppose <span> would work. Or could i use "<br>[" and '">' as style tags ? Is there a better way than span ? Thanks
  18. Hello all,I have tried so many things to get this to work but to no avail, can someon eplease help me out here with a simple script for n XML steam feed.http://api.steampowered.com/ISteamUserStats/GetGlobalAchievementPercentagesForApp/v0002/?gameid=221380&format=xml OK NOW THE ISSUE IS:I have a blank webpage which I have placed the above link into, I simply want the contents of the XML feed from the link to appear in mypage.......How do I make the contents of that url appear on the same page??SO I NEED THE SMALL SCRIPT OR HTML CODE TO DO THISAlso I would like to have the background a certain colour and use a certain font like 12point arial with bold headings and lower case text.Can someone please provide me with the html to allow this XML feed to appear on my webpage with a different colour background, arial 12pt font inbold and lowercase____________________________________________________________________________I RECEIVED A REPLY TO THIS POST AND THEY ADDED THIS:It's a little hard to tell from what you wrote. But, I think what you are looking for is an AJAX script to pull in the XML,then CSS can take care of the formatting.Look up how to process a XMLHttpRequest in javascript (or another scripting language). That will let you put the XML file into an array. Then,you can use (javascript) document.write() to put the pieces on your page.______________________________________________________________________________SO this being said do I need a javascript code in the page to show the XML Feed with formatting, what would this code be, this is the magicalquestion :)Could someone please please help me..........With regardsMathew
  19. I have tried so many different approaches. This is what I currently have. I know it's not pretty but my first goal is to get it to work, then figure out how to make it more elegant. I have a form where the required elements are outlined in red. Then I have a radio button input for contact preference with the choices Email or Phone. I want the input for these respective elements to be outlined in red based on the radio button selection. But if they change their mind, the red box has to go back to not being red anymore... Here is what I have so far... <script type="text/javascript"> function highlight(a,{ thing1 = document.getElementById("a"); thing2 = document.getElementById("b"); thing1.style.border="solid 1px #EE0000"; thing2.style.border="#7F9DB9";} </script><form name="FelixContact" enctype="multipart/form-data" action="process.php" method="post"><table><tr><td>Prefered contact method</td><td><table> <tr><td> <input type=radio name="ContactBy" value="Email" onclick="highlight(EmailAddress,PhoneNumber)">Email<br> <input type=radio name="ContactBy" value="Phone" onclick="highlight(PhoneNumber,EmailAddress)">Phone<br> </td></tr></table></td></tr><tr><td>Email Address</td><td><table id="EmailAddress" border="0"><tr><td> <input type=text name="EmailAddress"></td></tr></table></td></tr><tr><td>Phone Number</td><td><table id="PhoneNumber"> <input type=text name="PhoneNumber"></td></tr></table></td></tr> I also tried onchange instead of onclick and it didn't work either
  20. Good day my friends, Here is the problemMy site opens (visualy) perfectly in Opera and IE9, but in firefox it moves the like buttons a little, and chrome moves the whole page around...Look at what I'm talking about http://Tuinadviesruud.nl ...Yes it is aired, and it should not be down. This has to be fixed ;/ I messed up the style pretty bad, I know no languages, thats why I messed it up. I can't seem to get it right. If you think you can easily solve this tell me!! I can also send you the style and index if you want to help me.Thanks, Haj
  21. Jonnym53

    Css borders

    Hi all. I'm adding this discussion to one I already have going in case someone can help.I've been struggling with adding a border to a web page I've built. I want to have a 10px border, colored #006600 positioned about 5px from the edge but going around all the page (see attached)So far, I've managed to master the code to get a box added (I thought it was going to be a border but turned out to be a box). I'm not proficient in CSS but have been advise it would do the job.I tried different sizes. I started at 25px, that created the box. If I changed to 1200px, the whole page just goes into a solid color, no border to be seen.I've been getting quite frustrated with this but know if I can master it it would look good. The page is made up of a group of tables, if that is important (I don't know) Can anyone point me in the right direction?ThanksJohnUK. index.html
  22. why should i use a css id and not style it (inline).w3schools css book says that we shouldn't unse the same id multiple times on multiple elements why ?why shouldn't we use inline style id one id can only be used for one tag ?
  23. <div><form name="queries" style="display: table;"><div style="display: table-cell; width: 250px; height: 200px;"><input type="checkbox" name="libraries" value="Lib1" />Lib1<input type="checkbox" name="libraries" value="Lib2" />Lib2<input type="checkbox" name="libraries" value="Lib3" />Lib3<input type="checkbox" name="libraries" value="Lib4" />Lib4<br /><input type="checkbox" name="items" value="title" />Title<input type="checkbox" name="items" value="barcode" />Barcode</div><div style="display:table-cell; width: 100px; height: 200px;"><input type="input" name="query" value="" /></div></form></div> Any IE8- (in my case IE7) fix for not displaying the table-cells properly?
  24. Hi!to a previous post I had. I talked about having trouble centering a picture and being able to add links to the left of it because the links would be pushed down. I figured out that I need to do a container. Problem is, not sure how to style it in CSSI want my link menu to be to the left and I want my image to be centered. Do I have to do a complete HTML layout or can I just contain the image?How would I go about that code wise? I know in HTML I would put< div id="container"> or <div id="content">Any help would be appreciated. Thanks.
  25. Is there anyway to make the edges curved as opposed to being sharp? When I say edges, I mean the edge of a div, not a checkbox. Can you style a checkbox? Like change the color of the checkbox to something as opposed to its normal white background. I only want the checkbox to change color and not the whole input. The two questions above are not related.
  • Create New...